Flutter Facebook登录功能插件flutter_facebook_plugin的使用

Dart package: https://pub.dev/packages/flutter_facebook_plugin

Flutter Facebook登录和分享对话框

通过此插件可以轻松为您的应用添加Facebook登录功能，并在成功登录后调用Facebook分享对话框。

开始使用

要使用此插件，在pubspec.yaml文件中添加flutter_facebook_plugin作为依赖项。

dependencies:
  flutter_facebook_plugin: ^版本号

然后运行flutter pub get以获取依赖项。

安卓设置

第一步：访问Facebook开发者文档

前往Firebase文档页面。

第二步：完成步骤1

完成第一步配置。

第三步：跳过步骤2和步骤3

直接跳过第二步和第三步。

完成第四步：编辑资源和清单文件

在/android/app/src/main/res/values/strings.xml中添加以下内容（如果文件不存在则创建）：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="facebook_app_id">您的Facebook应用ID</string>
    <string name="fb_login_protocol_scheme">fb您的Facebook应用ID</string>
</resources>

在android/app/src/main/AndroidManifest.xml中添加以下内容到application部分：

<meta-data android:name="com.facebook.sdk.ApplicationId" 
    android:value="@string/facebook_app_id"/>

<activity android:name="com.facebook.FacebookActivity"
    android:configChanges=
            "keyboard|keyboardHidden|screenLayout|screenSize|orientation"
    android:label="@string/app_name" />
<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>

在AndroidManifest.xml中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

完成第五步：将包名和默认活动类与您的应用关联

设置Package Name为您的Android应用的包名（AndroidManifest.xml中的package属性）。

设置Default Activity Class Name为您主活动类（带包名）。默认情况下应为LoginActivity.java。

点击“保存”。

完成第六步：提供开发和发布密钥哈希

跳过接下来的步骤。

iOS设置

第一步：访问Facebook开发者文档

前往Firebase文档页面。

第二步：完成步骤1

选择一个应用或创建一个新的应用。如果您已经在Android设置过程中创建了一个应用，则可以使用它。

第三步：跳过步骤2和步骤3

跳过“设置您的开发环境”和“集成Facebook SDK”。

完成第四步：配置项目

在ios/Runner/Info.plist中配置以下内容：

<key>CFBundleURLTypes</key>
<array>
<dict>
<key>CFBundleURLSchemes</key>
<array>
<string>fbAPP-ID</string>
</array>
</dict>
</array>
<key>FacebookAppID</key>
<string>APP-ID</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>APP-NAME</string>

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

<key>LSApplicationQueriesSchemes</key>
<array>
<string>fbapi</string>
<string>fbapi20130214</string>
<string>fbapi20130410</string>
<string>fbapi20130702</string>
<string>fbapi20131010</string>
<string>fbapi20131219</string>
<string>fbapi20140410</string>
<string>fbapi20140116</string>
<string>fbapi20150313</string>
<string>fbapi20150629</string>
<string>fbapi20160328</string>
<string>fbauth</string>
<string>fb-messenger-share-api</string>
<string>fbauth2</string>
<string>fbshareextension</string>
</array>

完成第五步：连接应用程序委托

在Xcode中连接应用程序委托（Runner/Runner/AppDelegate），添加以下代码：

import Flutter
import FBSDKCoreKit

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
    override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    GeneratedPluginRegistrant.register(with: self)
    //Facebook支持
      FBSDKCoreKit.ApplicationDelegate.shared.application(
              application,
              didFinishLaunchingWithOptions: launchOptions
          )
    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}
    override func application(
            _ application: UIApplication,
            open url: URL,
            sourceApplication: String?,
            annotation: Any
        ) -> Bool {

            return ApplicationDelegate.shared.application(
                application, open: url,
                sourceApplication: sourceApplication,
                annotation: annotation
            )
        }
      
    override func application(
    _ app: UIApplication,
    open url: URL,
    options: [UIApplication.OpenURLOptionsKey : Any] = [:]
) -> Bool {
ApplicationDelegate.shared.application(
    app,
    open: url,
    sourceApplication: options[UIApplication.OpenURLOptionsKey.sourceApplication] as? String,
    annotation: options[UIApplication.OpenURLOptionsKey.annotation]
)
    }
        }

示例代码

以下是一个完整的示例代码，展示如何使用flutter_facebook_plugin进行Facebook登录和分享。

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

import 'package:flutter/services.dart';
import 'package:flutter_facebook_plugin/flutter_facebook_plugin.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  String _facebookUserId = 'Unknown';

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Facebook Login and Share Plugin'),
        ),
        body: Column(
          children: [
            Center(
              child: GestureDetector(
                child: const Text("Log in Facebook"),
                onTap: () {
                  initFacebookLoginShare();
                },
              ),
            ),
            Text("Facebook User Id: $_facebookUserId"),
          ],
        ),
      ),
    );
  }

  /// 调用Facebook登录和分享
  Future<void> initFacebookLoginShare() async {
    String? facebookUserId = '';
    try {
      facebookUserId = await FlutterFacebookPlugin.facebookLogin(
          "https://developers.facebook.com");
    } on PlatformException {
      facebookUserId = '';
    }

    setState(() {
      _facebookUserId = facebookUserId!;
    });
  }
}