Flutter LinkedIn登录插件easy_linkedin_login的使用

Flutter LinkedIn登录插件easy_linkedin_login的使用

重要信息

• 使用的是最新版的LinkedIn登录产品 Sign In with LinkedIn using OpenID Connect。
• LinkedIn产品 Sign In with LinkedIn 已经废弃。
• 如果仍然需要使用废弃的产品 Sign In with LinkedIn，请参考版本 1.0.3。

步骤

1. 在LinkedIn开发者控制台创建应用。
2. 在产品页面添加 Sign In with LinkedIn using OpenID Connect。
3. 在认证页面添加 Authorized redirect URL。
4. 获取 clientId、clientSecret 和 redirectUrl。

开始

创建包含密钥的 LinkedInConfig 类。

final config = LinkedInConfig(
  clientId: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET',
  redirectUrl: 'YOUR_REDIRECT_URL',
);

标准组件

标准的LinkedIn按钮用于登录。此组件可以自定义。

LinkedInStandardButton(
  config: config,
  destroySession: false,
  onError: (error) => log('Error: ${error.message}'),
  onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
  onGetUserProfile: (user) => log('User: ${user.name}'),
),

注意：

• 可以使用 mini 属性来使用 Small Linkedin Icon Button。

自定义组件

带有自定义组件的LinkedIn按钮。

LinkedInCustomButton(
  config: config,
  destroySession: false,
  onError: (error) => log('Error: ${error.message}'),
  onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
  onGetUserProfile: ( user) => log('User: ${ user.name}'),
  child: Text('Click Here to Login with linkedin'),
),

注意：

• destroySession 设置为 true 会清除Linkedin登录会话。

自定义化

带有自定义化的LinkedIn标准按钮。

LinkedInStandardButton(
  config: config,
  appbar: MyPreferredSizeWidget(),
  iconAssetPath: "/assets/my_custom_icon.png",
  iconWidth: 30,
  iconHeight: 30,
  destroySession: false,
  onError: (error) => log('Error: ${error.message}'),
  onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
  onGetUserProfile: (user) => log('User: ${user.name}'),
),

LinkedInStandardButton(
  config: config,
  mini: true,
  destroySession: false,
  onError: (error) => log('Error: ${error.message}'),
  onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
  onGetUserProfile: (user) => log('User: ${user.name}'),
),

LinkedInCustomButton(
  config: config,
  appbar: MyPreferredSizeWidget(),
  destroySession: false,
  onError: (error) => log('Error: ${error.message}'),
  onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
  onGetUserProfile: (user) => log('User: ${user.name}'),
  child: Container(
    decoration: BoxDecoration(
      color: Colors.blueAccent,
      borderRadius: BorderRadius.circular(8),
    ),
    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 13),
    child: Text(
      'Click Here to Login with linkedin',
      style: TextStyle(color: Colors.white),
    ),
  ),
),

截图

示例代码

import 'dart:developer';

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

final config = LinkedInConfig(
  clientId: 'YOUR_CLIENT_ID',
  clientSecret: 'YOUR_CLIENT_SECRET',
  redirectUrl: 'YOUR_REDIRECT_URL',
);

void main() => runApp(const MyApp());

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

  // This widget is the root of your application.
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter LinkedIn demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('LinkedIn Authorization'),
        ),
        body: const LinkedInProfileExamplePage(),
      ),
    );
  }
}

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

  [@override](/user/override)
  State createState() => _LinkedInProfileExamplePageState();
}

class _LinkedInProfileExamplePageState
    extends State<LinkedInProfileExamplePage> {
  UserObject? user;
  bool logoutUser = false;

  void setUser(LinkedInUserModel u) {
    setState(() {
      user = UserObject(
        firstName: u.givenName ?? 'N/A',
        lastName: u.familyName ?? 'N/A',
        email: u.email ?? 'N/A',
        profileImageUrl: u.picture ?? ' N/A',
      );
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        children: <Widget>[
          LinkedInStandardButton(
            config: config,
            destroySession: logoutUser,
            onError: (error) => log('Error: ${error.message}'),
            onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
            onGetUserProfile: setUser,
            mini: true,
          ),
          LinkedInStandardButton(
            config: config,
            destroySession: logoutUser,
            onError: (error) => log('Error: ${error.message}'),
            onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
            onGetUserProfile: setUser,
          ),
          LinkedInCustomButton(
            config: config,
            destroySession: logoutUser,
            onError: (error) => log('Error: ${error.message}'),
            onGetAuthToken: (data) => log('Access token ${data.accessToken!}'),
            onGetUserProfile: setUser,
            child: Container(
              decoration: BoxDecoration(
                color: Colors.blueAccent,
                borderRadius: BorderRadius.circular(8),
              ),
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 13),
              child: Text(
                'Click Here to Login with linkedin',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
          Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('First: ${user?.firstName} '),
              Text('Last: ${user?.lastName} '),
              Text('Email: ${user?.email}'),
              Text('Profile image: ${user?.profileImageUrl}'),
            ],
          ),
        ],
      ),
    );
  }
}

class UserObject {
  UserObject(
      {required this.firstName,
      required this.lastName,
      required this.email,
      required this.profileImageUrl});

  String firstName, lastName, email, profileImageUrl;
}