flutter_facebook_login

一个 Flutter 插件,用于允许用户使用原生 Android 和 iOS Facebook 登录 SDK 进行身份验证。

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

此插件使用了新的 Gradle 4.1 和 Android Studio 3.0 项目设置。

我创建这个库是出于需要,因为当时没有符合我需求的东西。我需要一个经过充分测试、提供与原生 Facebook SDK 一样多的控制力,并且代码质量良好的库。

Dart 支持

  • Dart 1: 1.0.x。
  • Dart 2: 1.1.0 及以上版本。

如何使用它?

该库尽可能地尝试与原生 Android 和 iOS 登录 SDK API 保持一致。如需完整的 API 文档,请参阅源代码。所有内容都在那里进行了文档化。

由于示例代码比一页文档更有价值,以下是常见的用法示例

import 'package:flutter_facebook_login/flutter_facebook_login.dart';

var facebookLogin = new FacebookLogin();
var result = await facebookLogin.logInWithReadPermissions(['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;
}

您还可以更改登录对话框的视觉外观。例如

// Let's force the users to login using the login dialog based on WebViews. Yay!
facebookLogin.loginBehavior = FacebookLoginBehavior.webViewOnly;

完整的 API 文档可以在源代码中找到,在此处

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

目前,此功能不会集成到此插件中。请参阅此处的讨论

但是,您可以用四行 Dart 代码来实现这一点

var result = await facebookSignIn.logInWithReadPermissions(['email']);
var accessToken = result.accessToken;
var graphResponse = await http.get(
            'https://graph.facebook.com/v2.12/me?fields=name,first_name,last_name,email&access_token=${accessToken.token}');
var 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 项目中声明一个 pubspec 依赖项。
此外,还必须进行一些最低限度的 Android 和 iOS 特定配置,否则您的应用程序将会崩溃。

在您的 Flutter 项目上

请参阅 pub 上的安装说明

Android

这假定您已在 Facebook 登录 Android 文档网站上完成了“将您的软件包名称和默认类与您的应用关联”
“提供您的应用的开发和发布密钥哈希值”

完成这些之后,请找出您的 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">Your App Name here.</string>

    <!-- Replace "000000000000" with your Facebook App ID here. -->
    <string name="facebook_app_id">000000000000</string>
    
    <!-- Replace "000000000000" with your Facebook App ID here. -->
    <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”步骤。.

完成这些之后,请找出您的 Facebook 应用 ID。您可以在 Facebook 开发者控制台的 Facebook 应用仪表板中找到您的 Facebook 应用 ID。

一旦您弄清楚了 Facebook 应用 ID,然后您只需将以下内容复制粘贴到您的Info.plist文件中,放在最后的 </dict></plist> 标签之前。

<您的项目根目录>/ios/Runner/Info.plist

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLSchemes</key>
        <array>
            <!-- Replace "000000000000" with your Facebook App ID here. -->
            <string>fb000000000000</string>
        </array>
    </dict>
</array>

<key>FacebookAppID</key>

<!-- Replace "000000000000" with your Facebook App ID here. -->
<string>000000000000</string>
<key>FacebookDisplayName</key>

<!-- Replace "YOUR_APP_NAME" with your app name. -->
<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 文件示例 在此处

GitHub

https://github.com/roughike/flutter_facebook_login