Flutter LinkedIn登录接口插件linkedin_login_platform_interface的使用

描述 #

此插件用于支持父包 https://github.com/d3xt3r2909/linkedin_login

如何使用 #

本示例将展示如何在 Flutter 应用程序中集成 LinkedIn 登录功能。我们将使用 linkedin_login_platform_interface 插件来实现这一功能。

配置 LinkedIn 应用 #

首先，在 LinkedIn 开发者门户上创建一个新的应用，并获取 Client ID 和 Client Secret。

添加依赖 #

在项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  linkedin_login_platform_interface: ^1.0.0

然后运行 flutter pub get 来安装依赖。

初始化 LinkedIn 登录 #

在您的应用程序中初始化 LinkedIn 登录。通常这会在应用程序启动时完成。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: LoginPage(),
    );
  }
}

实现登录逻辑 #

创建一个页面用于处理 LinkedIn 登录逻辑。这里我们创建了一个名为 LoginPage 的页面。

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  final LinkedInLogin _linkedInLogin = LinkedInLogin();

  Future<void> _loginWithLinkedIn() async {
    try {
      // 调用登录方法
      final result = await _linkedInLogin.login(
        clientId: 'YOUR_CLIENT_ID', // 替换为您的 Client ID
        clientSecret: 'YOUR_CLIENT_SECRET', // 替换为您的 Client Secret
        redirectUri: 'com.example.app:/oauth2redirect', // 替换为您的重定向 URI
        state: 'random_state_string',
      );

      if (result.status == LinkedInLoginStatus.success) {
        print('登录成功: ${result.accessToken}');
      } else if (result.status == LinkedInLoginStatus.cancel) {
        print('用户取消了登录');
      } else {
        print('登录失败: ${result.message}');
      }
    } catch (e) {
      print('发生错误: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('LinkedIn 登录示例'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: _loginWithLinkedIn,
          child: Text('使用 LinkedIn 登录'),
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个 _loginWithLinkedIn 方法来调用 LinkedIn 登录接口。当用户点击按钮时，会触发该方法。

处理回调 #

确保在 AndroidManifest.xml 和 Info.plist 中正确配置重定向 URI。

对于 Android：

<!-- 在 AndroidManifest.xml 中添加 -->
<activity android:name="com.psykar.cookiemanager.CookieManagerActivity">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="com.example.app" android:host="oauth2redirect" />
  </intent-filter>
</activity>

对于 iOS：

<!-- 在 Info.plist 中添加 -->
<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>com.example.app</string>
    </array>
  </dict>
</array>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>linkedin</string>
</array>

确保替换上述配置文件中的占位符（如 com.example.app）为您的实际应用信息。