flutter 集成facebook第三方登录完整流程

前言

国外常用的 GitHub、Twitter、apple、Microsoft三方登录一般是通过 Google 提供的 firebase 统一验证的机制，虽然不能统一登陆方式，但是通过 firebase 能使登陆流程更加规范化，减少后端开发的工作量，而且要使用 Google 登陆前，必须要集成 firebase，同时它也是国际型项目等首选方案。但是firebase其实是类似国内友盟的功能，它只是做一个总的集成，并不会省掉该步骤。本文直接使用facebook官方提供的功能来直接实现facebook。

账号申请
自行去官方开发平台注册申请账号。

添加依赖：

dependencies:
  flutter_facebook_auth: ^4.3.0

Android集成说明：

1.选择一个应用程序或创建一个新应用程序

创建成功后来到应用程序详情页，找到Quickstart，

选择Android

2.跳过第1步（下载Facebook应用程序）

3.跳过第2步（集成Facebook SDK）

4.在string.xml中加入以下内容

 <string name="facebook_app_id">{your-app-id}</string>
    <string name="facebook_client_token">YOUR_CLIENT_TOKEN</string>

YOUR_CLIENT_TOKEN可以在facebook开发人员控制台中找到

5.打开/android/app/src/main/AndroidManifest.xml文件，加入以下内容

<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"/>

6.将您的软件包名称和默认类与您的应用程序相关联

7.应用程序提供开发和发布关键散列，参考官方提供的方式

To ensure the authenticity of the interactions between your app and Facebook, you need to supply us with the Android key hash for your development environment. If your app has already been published, you should add your release key hash too.
Generating a Development Key Hash
You’ll have a unique development key hash for each Android development environment.
Mac OS
You will need the Key and Certificate Management Tool (keytool) from the Java Development Kit.
To generate a development key hash, open a terminal window and run the following command:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Windows
You will need the following:
Key and Certificate Management Tool (keytool) from the Java Development Kit
openssl-for-windows openssl library for Windows from the Google Code Archive
To generate a development key hash, run the following command in a command prompt in the Java SDK folder:

keytool -exportcert -alias androiddebugkey -keystore "C:\Users\USERNAME\.android\debug.keystore" | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" sha1 -binary | "PATH_TO_OPENSSL_LIBRARY\bin\openssl" base64

This command will generate a 28-character key hash unique to your development environment. Copy and paste it into the field below. You will need to provide a development key hash for the development environment of each person who works on your app.
Generating a Release Key Hash
Android apps must be digitally signed with a release key before you can upload them to the store. To generate a hash of your release key, run the following command on Mac or Windows substituting your release key alias and the path to your keystore:

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH | openssl sha1 -binary | openssl base64

This will generate a 28-character string that you should copy and paste into the field below. Also, see the Android documentation for signing your apps.

7.针对应用程序Android API 30 （Android 11 ）不能调用Facebook原生应用程序。请按照https://developers.facebook.com/docs/android/troubleshooting/#faq_267321845055988调整。要解决这个问题，必须在AndroidManifest.xml文件中添加：

<manifest package="com.example.app">
    <queries>
        <provider android:authorities="com.facebook.katana.provider.PlatformProvider" />
    </queries>
    ...
</manifest>

iOS集成说明

首选项目要支持swift以及platform :ios, ‘11.0 ’

1.将Bundle Identifier关联到facebook创建的项目

2.在Info.plist文件添加以下信息：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>fb{your-app-id}</string>
    </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>{your-app-id}</string>
<key>FacebookClientToken</key>
<string>CLIENT-TOKEN</string>
<key>FacebookDisplayName</key>
<string>{your-app-name}</string>
<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-share-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

Flutter程序要添加的代码

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

final LoginResult result = await FacebookAuth.instance.login(); // by default we request the email and the public profile
// or FacebookAuth.i.login()
if (result.status == LoginStatus.success) {
    // you are logged
    final AccessToken accessToken = result.accessToken!;
} else {
    print(result.status);
    print(result.message);
}

AccessToken 中包括登录的token以及用户id，根据后端需求再进行账号绑定即可；

传送门：详情接入文档：https://facebook.meedu.app/docs/4.x.x/intro

这篇好文章是转载于：学新通技术网