基于 firebase 的 Flutter facebook/Google/AppleId 快捷登录开发总结

1,774 阅读3分钟

注册并登录firebase

1:登录firebase console.firebase.google.com/

2:添加项目

image.png

image.png

3:添加应用

image.png 4:填写秘钥信息,如果您已经有了apk 文件包则可以通过执行 keytool -printcert -jarfile app-release.apk 来获取生成的sha1秘钥

image.png

OR:通过 keytools 工具获取 app 的 SHA 证书指纹

keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Flutter 开发部分

android 部分

google快捷登陆:

在集成快捷登陆前,你需要现在google开发者平台注册应用,并获取应用的秘钥等信息。 注册地址:console.developers.google.com/apis/creden… 添加应用,完善好授权的域名和回调信息,保存好应用的秘钥和密匙信息,这个信息在firebase平台添加应用信息 和 下面的开发代码中都会用得到

1:在 pubspec.yaml 中添加

firebase_auth: ^4.2.2
google_sign_in: ^6.0.1
firebase_core: ^2.7.0

安装上面三个依赖组件

2:flutter部分代码片段

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


_onGoogleSubmit() async {
  // 这个地方如果是安卓的则初始化不需要传递clientid  是个很大的坑啊啊啊啊啊啊啊啊啊啊!!!!同志们一定要注意,如果安卓初始化传递了clientid 会出现奇奇怪怪的错误
  final GoogleSignInAccount? googleUser = GetPlatform.isAndroid ?  await GoogleSignIn().signIn() : await GoogleSignIn(
    clientId: '345678987654345678654 ',  //这里是示例字串,填写的就是google开发者平台申请的应用的clientid
  ).signIn();
  // Obtain the auth details from the request
  final GoogleSignInAuthentication? googleAuth = await googleUser?.authentication;
  // Create a new credential
  final credential = GoogleAuthProvider.credential(
    accessToken: googleAuth?.accessToken,
    idToken: googleAuth?.idToken,
  );
  // print(credential.accessToken);
  // 这里是获取用户真实信息的地方,因为我用的是服务端验证逻辑,所以需要把上面的数据提交服务端进行验证操作
  // UserCredential user = await FirebaseAuth.instance.signInWithCredential(credential);
  // AdditionalUserInfo? userInfo = user.additionalUserInfo;
  _fastLogin(credential.accessToken!, 'google'); //这个是我自己封装的上传服务器验证的方法,自己根据自己逻辑完善就好了
}


facebook 快捷登陆:

1:登陆 developers.facebook.com 并添加应用,获取对应的秘钥等信息。

image.png

image.png

Flutter 部分代码

1:pubspec.yaml 中添加

flutter_facebook_auth: ^5.0.7

安装上面的依赖

2:切换至安卓项目在 android/app/src/main/res/values 下新建 strings.xml

strings.xml填写以下内容:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="facebook_app_id">fb应用id</string>  //自己按照上面的教程申请
    <string name="facebook_client_token">fb应用秘钥</string> //自己按照上面的教程申请
</resources>

3:在 android/app/src/main/AndroidManifest.xml 中添加facebook 的相关配置信息

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

4:flutter代码片段[功能片段]

import 'package:flutter_facebook_auth/flutter_facebook_auth.dart';

_onFacebookSubmit() async {
  // Trigger the sign-in flow
  final LoginResult loginResult = await FacebookAuth.instance.login();
  // Create a credential from the access token
  final accessToken = loginResult.accessToken;
  if (accessToken != null) {
    // final OAuthCredential facebookAuthCredential = FacebookAuthProvider.credential(token);
    // Once signed in, return the UserCredential
    // var user = FirebaseAuth.instance.signInWithCredential(facebookAuthCredential);
    // final userData = await FacebookAuth.instance.getUserData();
    // print(userData.toString());
    String token = accessToken.token;
    _fastLogin(token,'facebook'); //这个是我自己封装的上传服务器验证的方法,自己根据自己逻辑完善就好了
  }
}

IOS 部分

apple id 登陆

1:pubspec.yaml 中添加

sign_in_with_apple: ^4.3.0

安装上面的依赖

2:flutter 功能片段 需要说明的是:appleid 的快捷登陆在没有配置开发者证书的情况下是没有反应的,既没有报错,也没有回调。需要真机才能进行调试,同时需要注意的是快捷登陆的时候第一次登陆可以获取到用户的姓名 token_id ,邮箱等信息,但是第二次及后面的登陆只能获取到token_id,后端在进行逻辑处理的时候需要注意。首次登陆还需要授权操作,但是后面的登陆就没有这个步骤了,如果需要授权步骤,可以在真机调试里: 进行重新设置

image.png

image.png 取消授权就可以了,这样子下次登陆的时候就重新有授权这个步骤了。

import 'package:sign_in_with_apple/sign_in_with_apple.dart';
_onAppleSubmit() async {
  print('start');
  try {
    final credential = await SignInWithApple.getAppleIDCredential(
      scopes: [
        AppleIDAuthorizationScopes.email,
        AppleIDAuthorizationScopes.fullName,
      ],
    );
    print(credential);
    if (credential != null) {
      debugPrint("facebook userInfo : userId=${credential.userIdentifier}   email=${credential.email}  giveName=${credential.givenName}   familyName=${credential.familyName}");
    }
  }catch(e){
    print(e);
  }

}