Flutter LinkedIn登录插件signin_with_linkedin的使用

概述

signin_with_linkedin 是一个Flutter包，它帮助实现LinkedIn登录功能。该插件支持Flutter Web。

• 该包使用的是v2版本的登录流程 - 使用OpenID Connect通过LinkedIn登录
• 旧版本的通过LinkedIn登录已经废弃。

开始使用

创建LinkedIn应用程序

1. 创建公司页面：需要有一个LinkedIn账户以及关联的公司页面来创建和验证你的应用。
   • 如果你还没有公司页面，请创建你的公司页面
2. 登录LinkedIn开发者平台以创建应用。

在LinkedIn上创建应用程序

1. 前往我的应用并点击创建应用。
2. 需要通过公司账户登录LinkedIn以确认创建的应用程序。
3. 刷新设置标签页后，你应该能看到已验证及其日期。
4. 在认证标签内，设置应用程序的授权重定向URL。
5. 在产品标签中请求使用OpenID Connect通过LinkedIn登录的访问权限。

使用方法

示例代码

import 'dart:developer';

import 'package:flutter/material.dart';
import 'package:signin_with_linkedin/signin_with_linkedin.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sign in with LinkedIn',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const SignInWithLinkedInPage(),
    );
  }
}

class SignInWithLinkedInPage extends StatefulWidget {
  const SignInWithLinkedInPage({super.key});

  @override
  State<SignInWithLinkedInPage> createState() => _SignInWithLinkedInPageState();
}

class _SignInWithLinkedInPageState extends State<SignInWithLinkedInPage> {
  // 根据需求修改 "scope"
  final _linkedInConfig = LinkedInConfig(
    clientId: '<CLIENT ID>', // 替换为你的客户端ID
    clientSecret: '<CLIENT SECRET>', // 替换为你的客户端密钥
    redirectUrl: '<REDIRECT URL>', // 替换为你的重定向URL
    scope: ['openid', 'profile', 'email'],
  );

  LinkedInUser? _linkedInUser;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Sign In'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                SignInWithLinkedIn.signIn(
                  context,
                  config: _linkedInConfig,
                  onGetUserProfile: (tokenData, user) {
                    log('Auth token data: ${tokenData.toJson()}');
                    log('LinkedIn User: ${user.toJson()}');
                    setState(() => _linkedInUser = user);
                  },
                  onSignInError: (error) {
                    log('Error on sign in: $error');
                  },
                );
              },
              child: const Text('Sign in with LinkedIn'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () {
                SignInWithLinkedIn.signIn(
                  context,
                  config: _linkedInConfig,
                  onGetAuthToken: (data) {
                    log('Auth token data: ${data.toJson()}');
                  },
                  onSignInError: (error) {
                    log('Error on sign in: $error');
                  },
                );
              },
              child: const Text('Get Auth token from LinkedIn'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                await SignInWithLinkedIn.logout();
                setState(() => _linkedInUser = null);
              },
              child: const Text('Logout'),
            ),
            const SizedBox(height: 16),
            if (_linkedInUser != null)
              Column(
                children: [
                  if (_linkedInUser!.picture != null)
                    Image.network(_linkedInUser!.picture!, width: 100),
                  const SizedBox(height: 10),
                  Text(_linkedInUser!.name ?? ''),
                  Text(_linkedInUser!.email ?? ''),
                ],
              ),
          ],
        ),
      ),
    );
  }
}

请确保替换示例中的占位符（如<CLIENT ID>、<CLIENT SECRET>和<REDIRECT URL>）为从LinkedIn开发者平台获取的实际值。

Flutter Web上的使用

对于Flutter Web项目，你需要创建一个名为signin_linkedin.html的文件，并将其放置在网站的根目录下进行部署。这个HTML文件的作用是在Web端完成LinkedIn登录后回调到Dart代码。你可以参考插件仓库中的示例文件来构建自己的HTML文件。同时，在LinkedIn开发者平台配置时添加类似https://your-website/signin_linkedin.html这样的重定向URL。

登录按钮

本插件并未提供现成的“通过LinkedIn登录”按钮或组件，用户可以根据自己的UI设计创建登录按钮。LinkedIn官方提供了图片资源，可用于自定义登录按钮。

希望这些信息能够帮助您成功集成signin_with_linkedin插件！如果有任何问题，请随时提问。