React Native前端与NodeJS MongoDB后端实现Google登录方法咨询

首先在Google Cloud后台创建OAuth 2.0凭证，分别生成Android、iOS、Web三端的凭证，填对应用包名、签名等信息，记好Web端OAuth客户端ID，前后端都会用到。

• 安装依赖：执行npm install @react-native-google-signin/google-signin @react-native-async-storage/async-storage，按库的要求完成原生端配置：Android端把google-services.json放到android/app目录，在strings.xml中新增web_client_id字段对应Web端客户端ID；iOS端在Info.plist中配置对应客户端ID。
• 初始化Google登录配置，在应用入口处执行：

import { GoogleSignin } from '@react-native-google-signin/google-signin';

GoogleSignin.configure({
  webClientId: '替换为你的Web端OAuth客户端ID',
  offlineAccess: true,
});

• 编写登录触发逻辑：

import AsyncStorage from '@react-native-async-storage/async-storage';

const handleGoogleLogin = async () => {
  try {
    // 检查设备Google服务可用性
    await GoogleSignin.hasPlayServices();
    // 唤起Google登录页，获取用户信息
    const userInfo = await GoogleSignin.signIn();
    const { idToken } = userInfo;

    // 将idToken传给后端做校验
    const loginRes = await fetch('https://你的后端域名/api/auth/google', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ idToken })
    });
    const resData = await loginRes.json();

    // 校验通过后存储后端返回的自定义JWT，用于后续接口鉴权
    if (resData.token) {
      await AsyncStorage.setItem('app_token', resData.token);
      // 跳转至登录后页面逻辑
    }
  } catch (err) {
    console.error('登录失败：', err);
  }
};

依赖安装：执行npm install google-auth-library jsonwebtoken mongoose express dotenv

• 首先封装Google idToken校验方法：

const { OAuth2Client } = require('google-auth-library');
const googleClient = new OAuth2Client('替换为你的Web端OAuth客户端ID');

async function verifyIdToken(token) {
  const ticket = await googleClient.verifyIdToken({
    idToken: token,
    audience: '替换为你的Web端OAuth客户端ID'
  });
  return ticket.getPayload();
}

• 编写Google登录接口：

const jwt = require('jsonwebtoken');
const User = require('./models/User'); // 对应后面的MongoDB用户模型

app.post('/api/auth/google', async (req, res) => {
  try {
    const { idToken } = req.body;
    // 校验Google返回的idToken合法性
    const googleUser = await verifyIdToken(idToken);
    // 以Google用户唯一标识sub为索引，查询用户是否已注册
    let existUser = await User.findOne({ googleId: googleUser.sub });

    if (!existUser) {
      // 新用户自动注册入库
      existUser = await User.create({
        googleId: googleUser.sub,
        email: googleUser.email,
        name: googleUser.name,
        avatar: googleUser.picture
      });
    }

    // 生成后端自定义JWT，用于后续接口鉴权
    const appToken = jwt.sign(
      { userId: existUser._id, email: existUser.email },
      process.env.JWT_SECRET, // 存在环境变量中的自定义JWT秘钥
      { expiresIn: '7d' }
    );

    res.json({
      token: appToken,
      user: {
        id: existUser._id,
        name: existUser.name,
        email: existUser.email,
        avatar: existUser.avatar
      }
    });
  } catch (err) {
    res.status(401).json({ message: '身份校验失败' });
  }
});

参考Schema如下：

const mongoose = require('mongoose');

const userSchema = new mongoose.Schema({
  googleId: {
    type: String,
    required: true,
    unique: true
  },
  email: {
    type: String,
    required: true,
    unique: true
  },
  name: String,
  avatar: String,
  createdAt: {
    type: Date,
    default: Date.now
  }
});

module.exports = mongoose.model('User', userSchema);

• 所有敏感信息（客户端ID、JWT秘钥等）必须存储在环境变量中，禁止硬编码到代码仓库
• Android打包时必须使用和Google Cloud后台配置一致的SHA1签名的秘钥，否则会出现签名不匹配导致登录失败
• 前端获取的idToken有效期极短，禁止直接用它作为后续接口的鉴权凭证，必须使用后端返回的自定义JWT
• 退出登录时需要同时调用GoogleSignin.signOut()清除Google登录状态，以及删除本地存储的自定义JWT

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