likes
comments
collection
share

Flutter如何集成apple、google登陆---超级完整步骤

作者站长头像
站长
· 阅读数 5

前置

1. 新建Firebase项目

  • 谷歌开发者账号登陆firebase，新建项目

地址：console.firebase.google.com/u/0/?pli=1

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤

默认点继续就行。

2. 配置Firebase

2.1. 下载firebase-tools

npm install -g firebase-tools

2.2. 登陆firebase

firebase login
# 如果登陆不成功使用试试
firebase login --no-localhost

可能会登陆报错：

Flutter如何集成apple、google登陆---超级完整步骤

解决方案：

  • 在终端开启代理，再次运行（翻墙工具通常有开启代理的命令，直接复制在终端运行即可）
  • 例如：Flutter如何集成apple、google登陆---超级完整步骤
  • 其他解决方案可以参考这篇文章：pwa.alienzhou.com/4-jie-jue-f…

检查项目

登陆成功后，我们可以检查一下是否可以获取到firebase项目

  • 这里如果出现这种报错，通常是网络问题，记得终端开启vpn代理

Flutter如何集成apple、google登陆---超级完整步骤

firebase projects:list

获取成功应该是这样：

  • 我在firebase中有三个项目，可以获取到刚刚新建的项目

Flutter如何集成apple、google登陆---超级完整步骤

2.3. 安装 FlutterFire CLI

  1. 执行命令
dart pub global activate flutterfire_cli

Flutter如何集成apple、google登陆---超级完整步骤

  1. 根据提示，配置环境变量（以下是mac的配置方式）
  • 更改.zshrc文件

Flutter如何集成apple、google登陆---超级完整步骤

vim .zshrc
# 修改环境变量后，执行source，让环境变量生效
source .zshrc
  1. 检查是否配置成功
flutterfire -v

2.4. 给项目配置firebase

2.4.1. 生成配置文件

  • 进入项目根目录
  • 执行命令，主要作用是为项目生成相应的文件，并自动添加相关Gradle插件
  • 执行命令后，会让你选择项目，跟着提示走就行
flutterfire configure

成功结果：

Flutter如何集成apple、google登陆---超级完整步骤

此时我们可以在项目目录下发现自动生成的文件：android/app/google-services.json 和 lib/firebase_options.dart和ios/Runner/GoogleService-Info.plist

2.4.2. 初始化项目

  • 添加依赖

pubspec.yaml

dependencies:
  firebase_core: ^2.20.0
  • 代码中初始化项目

lib/main.dart

import 'package:planx_app/firebase/firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  // main函数中有await时，需要先调用此方法否则会有警告
  WidgetsFlutterBinding.ensureInitialized();
  // .....
  // 集成firebase
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  // .....
  runApp(const MyApp());
}
  • 运行项目试试
flutter run

解决不支持谷歌三大件的手机，无法打开项目

  • 若手机没有Google服务，就不使用firebase，那么这样就没法集成谷歌和Apple登陆的，但是能正常打开项目,这里只是保证能打开项目，但是是无法使用firebase的登录的

使用依赖包

pubspec.yaml

dependencies:
  # 判断是否支持google服务
  google_api_availability: ^5.0.0

lib/main.dart

  // 集成firebase
  // 判断是否支持谷歌三大件
  GooglePlayServicesAvailability? availability;
  if (Platform.isAndroid) {
    availability = await GoogleApiAvailability.instance
        .checkGooglePlayServicesAvailability();
  }
  // 安卓不支持谷歌三件套的手机，不使用firebase
  if (availability?.value != 5) {
    await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);
  }

通过以上步骤，我们就完成了firebase的配置，下面可以针对Google和Apple单独配置了

3. Google登陆

3.1. 添加第三方登陆方法

  • 打开firebase console

Flutter如何集成apple、google登陆---超级完整步骤

  • 启用--修改项目名称--点击保存

Flutter如何集成apple、google登陆---超级完整步骤

3.2. Android集成Google登陆

3.2.1. 项目配置

keytool -list -v -keystore ./android/key.jks

Flutter如何集成apple、google登陆---超级完整步骤

  • 复制对应的信息到firebase项目中

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤

  • 点击查看SDK说明，根据提示添加依赖

Flutter如何集成apple、google登陆---超级完整步骤

  • 替换之前生成的android/app/google-services.json文件

Flutter如何集成apple、google登陆---超级完整步骤

  • 添加android依赖

Flutter如何集成apple、google登陆---超级完整步骤

  • 由于我的项目的使用的是buildscript语法管理插件，所以与官网提示的不一致，以下是我的添加依赖的方式

android/build.gradle

  • 通常这一步已经在配置firebase时生成了
buildscript {
    // ...
    dependencies {
        //...
        classpath 'com.google.gms:google-services:4.3.10'
        //...
    }
}

android/app/build.gradle

plugins {
    // ...
    id 'com.google.gms.google-services'
    // ...
}
// ....
dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.2.3')
    implementation 'com.google.firebase:firebase-analytics'
}
  • 此时运行项目，可能会有报错

Flutter如何集成apple、google登陆---超级完整步骤

  • 这主要是版本问题，更改上一步的版本号

android/build.gradle

classpath 'com.google.gms:google-services:4.3.15'

关于类似版本号的报错，如果报错不影响运行，不建议更改，后续可能还会有类似的版本号引起的报错，可以一起修改，不然这里改好了，后续其他地方又不对了

3.2.2. 封装登陆代码

  1. 添加依赖

pubspec.yaml

dependencies:
	# 第三方登陆
  firebase_auth: ^4.12.0
  # Google登录
  google_sign_in: ^6.1.5
  1. 编写代码封装Google登陆
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';

class LoginUtil {
  static final FirebaseAuth _auth = FirebaseAuth.instance;
  static final GoogleSignIn _googleSignIn = GoogleSignIn();

  /// google登录
  static Future<String?> signInWithGoogle() async {
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    if (googleUser != null) {
      final GoogleSignInAuthentication googleAuth =
          await googleUser.authentication;
      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      final User? user = (await _auth.signInWithCredential(credential)).user;
      print(user);

      IdTokenResult? idTokenResult = await user?.getIdTokenResult(true);
      return idTokenResult?.token;
    }
    return null;
  }


  ///获取当前用户
  static User? currentUser() {
    return _auth.currentUser;
  }

  /// sign out.
  static Future<void> signOut() async {
    await _auth.signOut();
    await _googleSignIn.signOut();
  }
}
  1. 使用：
  var user = LoginUtil.currentUser();
  if (user != null) {
    print(user);
    await LoginUtil.signOut();
  }
  String? token = await LoginUtil.signInWithGoogle();
  print(token);

  • 此时运行项目，此时有可能谷歌未弹出弹窗，可能是由于网络，缓存等原因造成，这里删除应用，重启设备

  • 重新运行，弹出蒙层后，稍微多等一会儿，就成功啦

Flutter如何集成apple、google登陆---超级完整步骤

3.3. iOS集成Google登陆

3.3.1. 项目配置

Flutter如何集成apple、google登陆---超级完整步骤

  • 粘贴到Info.plist中

ios/Runner/Info.plist

	<!-- // ..... -->
	<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <!-- TODO Replace this value: -->
        <!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
        <string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
      </array>
    </dict>
  </array>
<!-- End of the Google Sign-in Section -->
</dict>
  • 找到文件中ios/Runner/GoogleService-Info.plist的REVERSED_CLIENT_ID
  • 替换上面的com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn部分

ios/Runner/GoogleService-Info.plist

Flutter如何集成apple、google登陆---超级完整步骤

<!--//.....  -->
<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
<string>com.googleusercontent.apps.xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</string>
<!--//.....  -->

3.3.2. 代码

  • 代码与android集成Google登陆一致，无需更改
  • 运行项目

此时可能会报错

  • 主要和CocoaPods版本有关系，根据提示解决

Flutter如何集成apple、google登陆---超级完整步骤

  • 解决方案：
    • 如果遇到等很久的情况，很可能是网络原因，记得给终端开启vpn代理
pod repo update
cd ./ios
pod install
flutter run

再次运行项目，成功

Flutter如何集成apple、google登陆---超级完整步骤

4. Apple登陆

4.1. iOS集成Apple登陆

4.1.1. 配置证书

  • 双击项目中的：ios/Runner.xcworkspace，使用Xcode打开项目
  • 添加sign in with Apple

Flutter如何集成apple、google登陆---超级完整步骤

  • 添加push

Flutter如何集成apple、google登陆---超级完整步骤

4.1.2. firebase增加Apple登陆方法

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤

4.1.3. 封装代码

pubspec.yaml

	# 第三方登陆
  firebase_auth: ^4.12.0
  • 封装登陆（以下代码加上了google登陆，如果不需要可以直接删除）

lib/firebase/login/login_util.dart

import 'package:firebase_auth/firebase_auth.dart';

typedef OnData<T> = void Function(T value);

class LoginUtil {
  static final FirebaseAuth _auth = FirebaseAuth.instance;
  static final GoogleSignIn _googleSignIn = GoogleSignIn();

  /// google登录
  static Future<String?> signInWithGoogle() async {
    final GoogleSignInAccount? googleUser = await _googleSignIn.signIn();
    if (googleUser != null) {
      final GoogleSignInAuthentication googleAuth =
        await googleUser.authentication;
      final AuthCredential credential = GoogleAuthProvider.credential(
        accessToken: googleAuth.accessToken,
        idToken: googleAuth.idToken,
      );
      final User? user = (await _auth.signInWithCredential(credential)).user;
      print(user);

      IdTokenResult? idTokenResult = await user?.getIdTokenResult(true);
      return idTokenResult?.token;
    }
    return null;
  }

  /// Apple login
  static Future<String?> signInWithApple() async {
    final applerProvider = AppleAuthProvider();
    final auth = await _auth.signInWithProvider(applerProvider);
    if (auth.user == null) return null;
    print(auth);
    IdTokenResult? idTokenResult = await auth.user?.getIdTokenResult(true);
    return idTokenResult?.token;
  }

  ///获取当前用户
  static User? currentUser() {
    return _auth.currentUser;
  }

  ///用户改变监听
  void listener(OnData listener) {
    _auth.userChanges().listen((event) {
      listener(event);
      // if (event != null && mounted) {
      //   setState(() {
      //     user = event;
      //   });
      // }
    });
  }

  /// sign out.
  static Future<void> signOut() async {
    await _auth.signOut();
    await _googleSignIn.signOut();
  }
}

使用：

    var user = LoginUtil.currentUser();
    if (user != null) {
      await LoginUtil.signOut();
    }
    String? token = await LoginUtil.signInWithApple();
    print(token);
  • 重新运行项目，成功

Flutter如何集成apple、google登陆---超级完整步骤

  • 获取到token

Flutter如何集成apple、google登陆---超级完整步骤

4.2. Android集成Apple登陆

  • 先完成iOS集成Apple登陆后，再执行下面的步骤
  • 到这一步也建议先完成Android打包等操作，我以下的步骤都是在配置好证书后执行的

4.2.1. 配置Apple账号登陆

  • 新建serversid

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤

  • 命名格式如下

Flutter如何集成apple、google登陆---超级完整步骤

  • 注册完成后，点击进入详情

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤

  • 打开firebase控制台，找到Apple登陆方法，我们需要配置这两边的信息

Flutter如何集成apple、google登陆---超级完整步骤

  • 点击继续，复制identifier到firebase

Flutter如何集成apple、google登陆---超级完整步骤

  • 新增key，给firebase配置密钥

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤Flutter如何集成apple、google登陆---超级完整步骤

  • 点击保存--点击继续--点击注册
  • 粘贴数据到firebase，下载证书

Flutter如何集成apple、google登陆---超级完整步骤

  • 查看刚刚下载的证书，将私钥粘贴到firebase，注意%不要粘贴过去了

Flutter如何集成apple、google登陆---超级完整步骤

Flutter如何集成apple、google登陆---超级完整步骤

  • firebase资料配置完毕，点击保存

4.2.2. 运行项目

  • 代码封装与iOS登陆Apple一致，这里不展示了
  • 成功唤起浏览器，Apple登陆

Flutter如何集成apple、google登陆---超级完整步骤Flutter如何集成apple、google登陆---超级完整步骤

  • 获取到token

Flutter如何集成apple、google登陆---超级完整步骤

其他文章推荐到下方的我的专栏查看：flutter使用心得

转载自:https://juejin.cn/post/7301512132587651098
评论
请登录