React Native中Google登录认证及Firebase令牌存储实现自动登录

嘿，我来给你梳理一套在React Native里实现Google登录、关联Firebase认证，还能搞定自动登录的完整流程，都是实际项目里验证过的步骤，放心跟着走就行！

• Google Cloud 配置
  • 打开Google Cloud控制台创建项目，找到「API和服务」→「启用API和服务」，搜索启用「Google Identity Toolkit API」和「Google Sign-In API」
  • 进入「凭据」页面，创建「OAuth 2.0 客户端ID」，分别配置Android和iOS端：
    • Android：填写你的APP包名（比如com.yourapp）和SHA-1指纹（debug指纹可以用keytool -list -v -keystore android/app/debug.keystore获取，release环境用正式签名文件的指纹）
    • iOS：填写Bundle ID，完成后会得到对应客户端ID
• Firebase 配置
  • 打开Firebase控制台创建项目，分别添加React Native的Android和iOS应用，按照指引下载google-services.json（Android）和GoogleService-Info.plist（iOS），放到项目对应目录
  • 进入Firebase「认证」→「登录方法」，启用「Google」登录，把Google Cloud里拿到的Web客户端ID填进去（注意是Web类型，不是Android/iOS的）

在项目根目录打开终端执行：

# 安装Firebase核心和认证模块
npm install @react-native-firebase/app @react-native-firebase/auth

# 安装Google Signin库
npm install @react-native-google-signin/google-signin

注意：React Native 0.60+会自动链接原生模块，iOS需要额外执行cd ios && pod install && cd ..；低版本需要手动链接，不过现在基本都是新架构，不用操心这个。

Android 端 #

1. 打开android/app/build.gradle，在文件末尾添加：

apply plugin: 'com.google.gms.google-services'

2. 打开android/build.gradle，在buildscript的dependencies里添加：

classpath 'com.google.gms:google-services:4.3.15' // 用最新版本即可

3. 打开android/app/src/main/res/values/strings.xml，添加Web客户端ID：

<string name="server_client_id">你的Google Web客户端ID</string>

iOS 端 #

1. 把下载的GoogleService-Info.plist拖到iOS项目根目录（Xcode里勾选「Copy items if needed」）
2. 打开Info.plist，添加URL Scheme：

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleTypeRole</key>
    <string>Editor</string>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>你的iOS客户端ID（从Google Cloud获取）</string>
    </array>
  </dict>
</array>

创建一个登录按钮组件GoogleLoginButton.js：

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';
import { GoogleSignin, statusCodes } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';
import firestore from '@react-native-firebase/firestore';

// 初始化Google Signin配置
GoogleSignin.configure({
  webClientId: '你的Google Web客户端ID', // 和Firebase里填的一致
  iosClientId: '你的iOS客户端ID', // iOS必填，Android可选
  scopes: ['email', 'profile'], // 请求的用户权限
});

const GoogleLoginButton = ({ onLoginSuccess }) => {
  const signIn = async () => {
    try {
      // 检查设备是否支持Google登录
      await GoogleSignin.hasPlayServices();
      // 获取用户的Google登录信息
      const userInfo = await GoogleSignin.signIn();
      
      // 创建Firebase认证凭证
      const googleCredential = auth.GoogleAuthProvider.credential(
        userInfo.idToken,
        userInfo.accessToken
      );
      
      // 用凭证登录Firebase
      const firebaseUser = await auth().signInWithCredential(googleCredential);
      console.log('Firebase登录成功:', firebaseUser.user);

      // 将Google的accessToken存储到Firebase Firestore（满足你的存储需求）
      await firestore()
        .collection('users')
        .doc(firebaseUser.user.uid)
        .set(
          {
            googleAccessToken: userInfo.accessToken,
            email: firebaseUser.user.email,
            displayName: firebaseUser.user.displayName,
            photoURL: firebaseUser.user.photoURL,
          },
          { merge: true } // 避免覆盖已有用户数据
        );

      // 登录成功后的回调，比如跳转到主页
      onLoginSuccess();
    } catch (error) {
      if (error.code === statusCodes.SIGN_IN_CANCELLED) {
        console.log('用户取消登录');
      } else if (error.code === statusCodes.IN_PROGRESS) {
        console.log('登录正在进行中');
      } else if (error.code === statusCodes.PLAY_SERVICES_NOT_AVAILABLE) {
        console.log('设备不支持Google Play服务');
      } else {
        console.log('登录失败:', error.message);
      }
    }
  };

  return (
    <TouchableOpacity style={styles.button} onPress={signIn}>
      <Text style={styles.buttonText}>用Google登录</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#4285F4',
    padding: 15,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default GoogleLoginButton;

自动登录的核心是监听Firebase Auth的用户状态变化，在APP根组件里处理：

import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import GoogleLoginButton from './GoogleLoginButton';
import HomeScreen from './HomeScreen';
import auth from '@react-native-firebase/auth';

const App = () => {
  const [initializing, setInitializing] = useState(true);
  const [user, setUser] = useState(null);

  // 监听用户认证状态变化
  const onAuthStateChanged = (firebaseUser) => {
    setUser(firebaseUser);
    if (initializing) setInitializing(false);
  };

  useEffect(() => {
    const subscriber = auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber; // 组件卸载时取消监听
  }, []);

  if (initializing) {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <ActivityIndicator size="large" />
      </View>
    );
  }

  // 有用户则显示主页，否则显示登录按钮
  return user ? <HomeScreen user={user} /> : <GoogleLoginButton onLoginSuccess={() => {}} />;
};

export default App;

• 令牌过期处理：Google的accessToken有效期一般是1小时，若需要长期使用，可以调用GoogleSignin.getTokens()刷新令牌，或者在Firebase中使用有效期更长的ID Token；如果存储在Firestore的令牌过期，可在需要时重新获取并更新。
• 退出登录：需要同时调用GoogleSignin.signOut()和auth().signOut()，也可以选择删除Firestore中存储的令牌。
• 版本兼容：确保@react-native-google-signin/google-signin和@react-native-firebase/auth的版本与你的React Native版本兼容，比如React Native 0.70+建议使用最新依赖版本。
• iOS模拟器测试：iOS模拟器需要登录Apple ID，且安装Google相关应用（比如Google Maps），否则可能无法触发Google登录。

内容的提问来源于stack exchange，提问作者Subhajit