Flutter Facebook登录插件meta_facebook_login的使用

Flutter Facebook 登录插件 meta_facebook_login 的使用

meta_facebook_login

一个用于在 Android 和 iOS 上使用原生 Facebook 登录 SDK 的 Flutter 插件。

AndroidX 支持

• 如果你想要 避免使用 AndroidX，请使用版本 1.2.0。
• 对于 使用 AndroidX 的 Flutter 项目，请使用版本 2.0.0 及以上。

安装

为了使一切正常运行，你需要在你的 Flutter 项目中声明 pubspec 依赖。还需要进行一些 Android 和 iOS 特定的配置，否则你的应用可能会崩溃。

在你的 Flutter 项目中

参见 安装说明。

Android

这假定你已经在 “将包名称和默认类与您的应用关联” 和 “为您的应用提供开发和发布密钥哈希” 中完成了操作，这些步骤可以在 Android Facebook 登录文档 中找到。

完成上述步骤后，找出你的 Facebook 应用 ID。你可以在 Facebook 开发者控制台中的 Facebook 应用仪表板里找到你的 Facebook 应用 ID。

一旦你找到了 Facebook 应用 ID，你需要做两件事：

首先，将以下内容复制粘贴到你的字符串资源文件中。如果你还没有创建该文件，请创建它。

路径：<你的项目根目录>/android/app/src/main/res/values/strings.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">你的应用名称。</string>

    <!-- 替换 "000000000000" 为你的 Facebook 应用 ID。 -->
    <string name="facebook_app_id">000000000000</string>

    <!--
      替换 "000000000000" 为你的 Facebook 应用 ID。
      **注意**：方案需要以 `fb` 开头，然后是你的 ID。
    -->
    <string name="fb_login_protocol_scheme">fb000000000000</string>
</resources>

然后，将以下内容复制粘贴到你的 Android Manifest 文件中：

路径：<你的项目根目录>/android/app/src/main/AndroidManifest.xml

<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 文件样本可以在这里找到：此处。

完成！

iOS

这假定你已经在 “注册并配置您的应用与 Facebook” 步骤中完成了操作，该步骤可以在 iOS Facebook 登录文档 中找到。 （注意：你可以跳过 “步骤 2：设置您的开发环境” 和 “步骤 5：连接您的应用代理”）。

完成上述步骤后，找出你的 Facebook 应用 ID。你可以在 Facebook 开发者控制台中的 Facebook 应用仪表板里找到你的 Facebook 应用 ID。

一旦你找到了 Facebook 应用 ID，那么你只需要将以下内容复制粘贴到你的 Info.plist 文件中，在结束标签 <\/dict><\/plist> 之前。

（注意：如果你正在使用此插件与例如 google_sign_in 插件结合使用，后者也需要你在 Info.plist 文件中添加 CFBundleURLTypes 键，你需要将它们合并在一起）。

路径：<你的项目根目录>/ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
    <!--
    <dict>
    ... 一些其他的 CFBundleURLTypes 定义。
    </dict>
    -->
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <!--
              替换 "000000000000" 为你的 Facebook 应用 ID。
              **注意**：方案需要以 `fb` 开头，然后是你的 ID。
            -->
            <string>fb000000000000</string>
        </array>
    </dict>
</array>

<key>FacebookAppID</key>

<!-- 替换 "000000000000" 为你的 Facebook 应用 ID。 -->
<string>000000000000</string>
<key>FacebookDisplayName</key>

<!-- 替换 "YOUR_APP_NAME" 为你的 Facebook 应用名称。 -->
<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>

一个完整的 Info.plist 文件样本可以在这里找到：此处。

完成！

如何使用它？

库尽可能地匹配原生 Android 和 iOS 登录 SDK 的 API。完整的 API 文档可以在 源代码 中查看。所有内容都有文档记录。

由于示例代码比一页文档更有价值，这里涵盖了通常的情况：

import 'package:meta_facebook_login/meta_facebook_login.dart';

final facebookLogin = FacebookLogin();
final result = await facebookLogin.logIn(['email']);

switch (result.status) {
  case FacebookLoginStatus.loggedIn:
    _sendTokenToServer(result.accessToken.token);
    _showLoggedInUI();
    break;
  case FacebookLoginStatus.cancelledByUser:
    _showCancelledMessage();
    break;
  case FacebookLoginStatus.error:
    _showErrorOnUI(result.errorMessage);
    break;
}

你也可以改变登录对话框的视觉外观。例如：

// 让用户通过基于 WebViews 的登录对话框登录。耶！
facebookLogin.loginBehavior = FacebookLoginBehavior.webViewOnly;

完整的 API 文档与源代码一起存在，可以在这里找到：此处。

获取已登录用户的 Facebook 个人资料

目前，这个功能不会集成到此插件中。参见 讨论。

然而，你可以通过四行 Dart 代码实现：

final result = await facebookSignIn.logIn(['email']);
final token = result.accessToken.token;
final graphResponse = await http.get(
            'https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email&access_token=${token}');
final profile = JSON.decode(graphResponse.body);

变量 profile 现在将包含以下信息：

{
   "name": "Iiro Krankka",
   "first_name": "Iiro",
   "last_name": "Krankka",
   "email": "iiro.krankka\u0040gmail.com",
   "id": "<user id here>"
}

排错

如果你没有在 Flutter 项目中完成 AndroidX 设置，你的项目可能无法构建。简单的解决方法是在你的 android/gradle.properties 文件中添加两行：

android.useAndroidX=true
android.enableJetifier=true