Flutter登录功能之Facebook登录

原创

Luoyger

发布于 2024-07-03 10:53:42

1190

发布于 2024-07-03 10:53:42

文章被收录于专栏：移动应用开发移动应用开发

远端配置

注册账号

https://developers.facebook.com/apps/?show_reminder=true

创建应用

根据提示创建Facebook登录应用。

添加Email权限

在控制面板中，点击“定制如何添加Facebook登录按钮”。

添加Email登录场景。

选择配置平台

在应用设置=》基本，添加平台，按需选择平台。

Android配置示例（GooglePlay）

以添加GooglePlay商店为例，点击右上角的快速入门，会跳转到项目的配置引导页面，如下空白会在配置页面配置后自动填充。

第一步

如果是Flutter项目则跳过此步骤。

第二步

请为应用添加 Facebook 应用编号，并更新你的 Android 清单。

1.打开你的strings.xml文件，例如：/app/src/main/res/values/strings.xml。

2.添加名为facebook_app_id的新字串，字串名称应包含你的 Facebook 应用编号，facebook_client_token为基本设置中的app secret。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="facebook_app_id">8428xxxx6845</string>
    <string name="facebook_client_token">8757cxxxxx8989ae037d8</string>
</resources>

3.打开AndroidManifest.xml，把uses-permission元素加入清单：

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

4. 把一项meta-data元素添加到application元素：

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

5. 除非声明了包可见性需求，否则面向 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>

第三步

添加项目的包名信息和默认的启动类。

第四步

添加秘钥散列值。

Windows下添加发布密钥散列。

（1）下载Openssl工具包，解压即可使用。

https://code.google.com/archive/p/openssl-for-windows/downloads

（2）如需获取调试证书指纹，请执行以下操作，USERPROFILE为用户目录，如果报错，则自行修改实际目录。以及openssl工具需要按实际目录填写。

debug.keystore的默认密码是android。

将生成的字符串的后28位填写到页面中密钥散列即可。

keytool -exportcert -alias androiddebugkey -keystore %USERPROFILE%\.android\debug.keystore | D:\Workspace\Software\openssl-0.9.8k_WIN32\bin\openssl sha1 -binary | D:\Workspace\Software\openssl-0.9.8k_WIN32\bin\openssl base64

（3）Windows下添加发布密钥，需要替换密钥别名和路径。openssl工具需要按实际目录填写。

将生成的字符串的后28位填写到页面中密钥散列即可。

keytool -exportcert -alias YOUR_RELEASE_KEY_ALIAS -keystore YOUR_RELEASE_KEY_PATH  | D:\Workspace\Software\openssl-0.9.8k_WIN32\bin\openssl sha1 -binary | D:\Workspace\Software\openssl-0.9.8k_WIN32\bin\openssl base64

第五步

可选步骤。更多功能可以参考文档进行设置。关于登录中的一些高级功能如单点登录、注册回调等也可以在此进行配置。

更多参考：https://facebook.meedu.app/docs/7.x.x/android

常见问题

如果出现SDK版本问题，则需要android.defaultConfig中注释minSdk，添加minSdkVersion 如下：

minSdkVersion 23

iOS配置示例

添加iOS平台，点击快速开始。

第一步

如果是flutter项目，可跳过此步骤。

第二步

在Runner的info.plist文件中添加CFBundleURLScheme、FacebookAppID、FacebookDisplayName等信息，其中CFBundleURLScheme是fb加上FacebookAppID。

如果已经有CFBundleURLTypes 和LSApplicationQueriesSchemes ，则需要合并一下配置。

<key>CFBundleURLTypes</key>
<array>
  <dict>
  <key>CFBundleURLSchemes</key>
  <array>
    <string>fb486xxxx</string>
  </array>
  </dict>
</array>
<key>FacebookAppID</key>
<string>48656336xxxxx</string>
<key>FacebookDisplayName</key>
<string>test</string>

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>fbapi</string>
  <string>fb-messenger-api</string>
  <string>fbauth2</string>
  <string>fbshareextension</string>
</array>

第三步

BundleID可以从xcode中Bundle Identifier获取，一般和Android包名类似，名字中的下划线会替换为驼峰格式。

在xcode中还可以根据情况配置支持的iOS最小版本。

更多参考：https://facebook.meedu.app/docs/7.x.x/ios

常见问题

（1）iOS受限登录

https://developers.facebook.com/blog/post/2021/04/12/announcing-expanded-functionality-limited-login/?locale=zh_CN

（2）同一个email账号已经登录。

An account already exists with the same email address but different sign-in credentials. Sign in using a provider associated with this email address.

设置为每个身份提供方创建多个账号。

Firebase配置Facebook登录

Firebase的注册和使用参考：Google登录

通过Firebase接入Facebook的区别不大，除了以上配置都一样，还需要如下配置，区别是在于登录的代码稍微有些不一样，都可以统一用Firebase来获取一些用户态。

第一步

在Firebase的Authentication中添加Facebook的登录方法。

第二步

启用Facebook登录，并填写Fackbook开发者平台上的应用ID和密钥。

第三步

按照上图提示中复制最下面的OAuth重定向URI，如：https://xxx.firebaseapp.com/__/auth/handler，将内容填写到Facebook的登录设置中。

Flutter项目开发配置

引用插件

插件的地址如下： https://pub.dev/packages/flutter_facebook_auth

flutter_facebook_auth插件文档：https://facebook.meedu.app/docs/7.x.x/intro/

pubspec.yaml中依赖配置如下：

flutter_facebook_auth: ^7.0.0

引入该依赖后需要重启Android模拟器，不然会报错No implementation found.

添加登录按钮

添加Facebook登录按钮。

// 其他登录方式
Row(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    const Padding(
      padding: EdgeInsets.only(right: 16.0),
      child: Text(
        '其它登录',
        style: TextStyle(
          fontSize: 16.0,
          // fontWeight: FontWeight.bold,
        ),
      ),
    ),
    
    const SizedBox(width: 16.0),
    CircleAvatar(
      backgroundColor: Colors.white,
      child: IconButton(
        icon: Image.asset('assets/images/facebook-logo.png'),
          onPressed: () async {
            if(await signInWithFacebook()) {
              Navigator.pushAndRemoveUntil(
                context,
                MaterialPageRoute(builder: (context) => const MyHomePage()),
                    (route) => false,
              );
            }
          }
      ),
    ),
  ],
),

执行登录操作

新建facebook_login.dart，如果使用Facebook官方接入登录，添加如下登录代码。

import 'package:chat_ai/common/common.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

// FaceBook登录
Future<bool> signInWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if(result.status == LoginStatus.success){
    final userData = await FacebookAuth.instance.getUserData();
    logger.d("user login facebook ${userData..values}");
    return true;
  }
  return false;
}

// 退出Google登录
Future<void> signOutFacebook() async {
  await FacebookAuth.instance.logOut();
}

如果通过Firebase接入Facebook登录，则使用如下登录代码。

import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

Future<bool> signInWithFacebook() async {
  final LoginResult result = await FacebookAuth.instance.login();
  if(result.status == LoginStatus.success){
    // Create a credential from the access token
    final OAuthCredential credential = FacebookAuthProvider.credential(result.accessToken!.tokenString);
    // Once signed in, return the UserCredential
    // return await FirebaseAuth.instance.signInWithCredential(credential);
    return true;
  }
  return false;
}

// 退出Facebook登录
Future<void> signOutFacebook() async {
  await FacebookAuth.instance.logOut();
}

参考

Android签名文档：https://developer.android.com/studio/publish/app-signing?fbclid=IwZXh0bgNhZW0CMTAAAR0UyaH-yF0bGdXhMneZ0yrBeJrIrFrkVNKdiCqDmlDMF5UPUGNj6Q-fOIk_aem_ZmFrZWR1bW15MTZieXRlcw
Android配置：https://facebook.meedu.app/docs/7.x.x/android
Meta开发者平台：https://developers.facebook.com/
Facebook登录：https://developers.facebook.com/products/facebook-login/
Flutter安卓及iOS海外登录--Facebook登录：https://blog.csdn.net/mumubumaopao/article/details/136101788

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

firebase