前置

建议先完成ios与android的打包步骤（参考：Flutter中ios与android打包），这些步骤会先配置证书签名等，在集成第三方登陆时会有用
需要拥有firebase账号，flutter集成Google和Apple登陆主要借助的就是firebase
科学上网，拥有Google三大件的安卓手机（一般就是能使用Google play的手机，iOS不需要）或者模拟器
安卓虚拟机如何联网，请参考：Android虚拟机如何联网

1. 新建Firebase项目

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

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

默认点继续就行。

2. 配置Firebase

不管是Google登录还是Apple登陆都需要配置firebase
官方文档地址：firebase.google.com/docs/flutte...

2.1. 下载firebase-tools

bash 复制代码

npm install -g firebase-tools

2.2. 登陆firebase

bash 复制代码

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

可能会登陆报错：

解决方案：

在终端开启代理，再次运行（翻墙工具通常有开启代理的命令，直接复制在终端运行即可）
例如：
其他解决方案可以参考这篇文章：pwa.alienzhou.com/4-jie-jue-f...

检查项目

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

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

bash 复制代码

firebase projects:list

获取成功应该是这样：

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

2.3. 安装 FlutterFire CLI

执行命令

bash 复制代码

dart pub global activate flutterfire_cli

根据提示，配置环境变量（以下是mac的配置方式）

更改.zshrc文件

bash 复制代码

vim .zshrc
# 修改环境变量后，执行source，让环境变量生效
source .zshrc

检查是否配置成功

bash 复制代码

flutterfire -v

2.4. 给项目配置firebase

2.4.1. 生成配置文件

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

bash 复制代码

flutterfire configure

成功结果：

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

2.4.2. 初始化项目

添加依赖

pubspec.yaml

yaml 复制代码

dependencies:
  firebase_core: ^2.20.0

代码中初始化项目

lib/main.dart

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());
}

运行项目试试

bash 复制代码

flutter run

这里要注意，如果android手机不支持谷歌三大件(Google play)，并且没有科学上网，项目会打不开
android模拟器如何联网，可以参考我另外一篇：Android虚拟机如何联网

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

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

使用依赖包

pubspec.yaml

yaml 复制代码

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

lib/main.dart

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

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

3.2. Android集成Google登陆

3.2.1. 项目配置

此步骤需要完成app的签名，可以参考我之前的一篇文章：Flutter中ios与android打包
完成以上步骤后，执行命令，获取签名的SHA-1和SHA-256
./android/key.jks 是你的证书所在位置
keytool是java提供的实用程序，通常有jdk环境，这个命令都是有的，找不到的查一下搜索引擎

bash 复制代码

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

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

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

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

添加android依赖

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

android/build.gradle

通常这一步已经在配置firebase时生成了

dart 复制代码

buildscript {
    // ...
    dependencies {
        //...
        classpath 'com.google.gms:google-services:4.3.10'
        //...
    }
}

android/app/build.gradle

dart 复制代码

plugins {
    // ...
    id 'com.google.gms.google-services'
    // ...
}
// ....
dependencies {
    implementation platform('com.google.firebase:firebase-bom:32.2.3')
    implementation 'com.google.firebase:firebase-analytics'
}

此时运行项目，可能会有报错

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

android/build.gradle

dart 复制代码

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

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

3.2.2. 封装登陆代码

添加依赖

pubspec.yaml

yaml 复制代码

dependencies:
	# 第三方登陆
  firebase_auth: ^4.12.0
  # Google登录
  google_sign_in: ^6.1.5

编写代码封装Google登陆

dart 复制代码

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();
  }
}

使用：

dart 复制代码

  var user = LoginUtil.currentUser();
  if (user != null) {
    print(user);
    await LoginUtil.signOut();
  }
  String? token = await LoginUtil.signInWithGoogle();
  print(token);

此时运行项目，此时有可能谷歌未弹出弹窗，可能是由于网络，缓存等原因造成，这里删除应用，重启设备
重新运行，弹出蒙层后，稍微多等一会儿，就成功啦

3.3. iOS集成Google登陆

3.3.1. 项目配置

打开google_sign_in库：pub.dev/packages/go...，根据提示配置

粘贴到Info.plist中

ios/Runner/Info.plist

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

plist 复制代码

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

3.3.2. 代码

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

此时可能会报错

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

解决方案：
- 如果遇到等很久的情况，很可能是网络原因，记得给终端开启vpn代理

bash 复制代码

pod repo update
cd ./ios
pod install
flutter run

再次运行项目，成功

4. Apple登陆

需要拥有Apple开发者账号，mac电脑
请先完成iOS的证书配置等工作，可以参考我另外一篇文章：Flutter中ios与android打包

4.1. iOS集成Apple登陆

4.1.1. 配置证书

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

添加push

4.1.2. firebase增加Apple登陆方法

4.1.3. 封装代码

pubspec.yaml

yaml 复制代码

	# 第三方登陆
  firebase_auth: ^4.12.0

封装登陆（以下代码加上了google登陆，如果不需要可以直接删除）

lib/firebase/login/login_util.dart

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();
  }
}

使用：

dart 复制代码

    var user = LoginUtil.currentUser();
    if (user != null) {
      await LoginUtil.signOut();
    }
    String? token = await LoginUtil.signInWithApple();
    print(token);