Flutter社交媒体认证插件facebook_auth的使用

Flutter社交媒体认证插件facebook_auth的使用

配置

假设你的Facebook应用ID为1234567890，客户端令牌为abcde12345，应用名称为My App。

Android

官方文档：https://developers.facebook.com/docs/facebook-login/android/

在android/app/src/main/res/values/strings.xml文件中定义以下字符串资源：

<string name="facebook_app_id">1234567890</string>
<string name="fb_login_protocol_scheme">fb1234567890</string>
<string name="facebook_client_token">abcde12345</string>

在AndroidManifest.xml文件中添加以下内容：

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.example.myapp">
    <uses-permission android:name="android.permission.INTERNET"/>
    <application
        android:label="myapp"
        android:icon="@mipmap/ic_launcher">
        <!-- Facebook应用ID和令牌 -->
        <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
        <meta-data android:name="com.facebook.sdk.ClientToken" android:value="@string/facebook_client_token"/>
        <!-- Facebook Chrome Custom Tabs -->
        <activity android:name="com.facebook.FacebookActivity"
                  android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation"
                  android:label="${applicationLabel}" />
        <activity
            android:name="com.facebook.CustomTabActivity"
            android:exported="true">
            <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="@string/fb_login_protocol_scheme" />
            </intent-filter>
        </activity>
        <!-- Facebook Chrome Custom Tabs结束 -->
    </application>
</manifest>

iOS

官方文档：https://developers.facebook.com/docs/facebook-login/ios/

在Info.plist文件中添加以下内容：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>fb1234567890</string>
        </array>
    </dict>
</array>
<key>FacebookAppID</key>
<string>1234567890</string>
<key>FacebookClientToken</key>
<string>abcde12345</string>
<key>FacebookDisplayName</key>
<string>My App</string>
<key>LSApplicationQueriesSchemes</key>
<array>
    <string>fbapi</string>
    <string>fb-messenger-share-api</string>
</array>

使用

1. 将插件添加到pubspec.yaml文件中：

dependencies:
  facebook_auth: ^x.y.z

运行flutter pub get命令以获取依赖项。

1. 在Dart代码中导入插件：

import 'package:facebook_auth/facebook_auth.dart';

1. 进行用户认证：

FacebookAuth().login(['public_profile', 'email']);

此函数返回一个包含以下信息的Future对象：

{
  'token': String,
  'userId': String,
  'expires': int, // 时间戳（自1970年1月1日以来的毫秒数）
  'applicationId': String,
  'lastRefresh': int, // 时间戳（自1970年1月1日以来的毫秒数）
  'isExpired': Boolean,
  'grantedPermissions': List<String>,
  'declinedPermissions': List<String>,
  'dataAccessExpirationTime': int // 时间戳（自1970年1月1日以来的毫秒数）
}

1. 登出用户：

FacebookAuth().logout();

1. 处理可能的错误：

try {
  return {'idToken': await FacebookAuth().login(permissions)};
} on PlatformException catch (e) {
  if (e.code == 'USER_CANCELLED') {
    throw AppError('用户已取消');
  }
  rethrow;
}

SDK版本

Android

implementation 'com.facebook.android:facebook-login:16.0.1'
// implementation 'com.facebook.android:facebook-login:latest.release'

iOS

s.dependency 'FBSDKCoreKit', '~> 16.1'
s.dependency 'FBSDKLoginKit', '~> 16.1'
s.dependency 'FBSDKShareKit', '~> 16.1'

完整示例Demo

以下是完整的示例代码，展示了如何使用facebook_auth插件进行用户认证和登出操作。

import 'dart:async';

import 'package:facebook_auth/facebook_auth.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _platformVersion = 'Unknown';
  Map<String, dynamic>? _userData;

  [@override](/user/override)
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 初始化平台状态
  Future<void> initPlatformState() async {
    String platformVersion;
    try {
      // 登出当前用户
      await FacebookAuth().logout();
    } on PlatformException {
      platformVersion = 'Failed to get platform version.';
    }

    // 如果小部件从树中移除，则忽略回复
    if (!mounted) return;

    setState(() {
      _platformVersion = platformVersion;
    });
  }

  // 用户认证
  Future<void> login() async {
    final result = await FacebookAuth().login(['public_profile', 'email']);
    if (result.status == LoginStatus.success) {
      final userData = await FacebookAuth.instance.getUserData();
      setState(() {
        _userData = userData;
      });
    }
  }

  // 用户登出
  Future<void> logout() async {
    await FacebookAuth().logout();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Facebook Auth Example'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                onPressed: login,
                child: const Text('登录'),
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: logout,
                child: const Text('登出'),
              ),
              const SizedBox(height: 20),
              if (_userData != null)
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('User ID: ${_userData!['userId']}'),
                    Text('Token: ${_userData!['token']}'),
                    Text('Expires: ${_userData!['expires']}'),
                    Text('Application ID: ${_userData!['applicationId']}'),
                    Text('Last Refresh: ${_userData!['lastRefresh']}'),
                    Text('Is Expired: ${_userData!['isExpired']}'),
                    Text('Granted Permissions: ${_userData!['grantedPermissions'].join(', ')}'),
                    Text('Declined Permissions: ${_userData!['declinedPermissions'].join(', ')}'),
                    Text('Data Access Expiration Time: ${_userData!['dataAccessExpirationTime']}'),
                  ],
                ),
            ],
          ),
        ),
      ),
    );
  }
}