如何在React Native应用中对接Strapi实现Google登录功能

你找到的React JS示例无法直接复用，核心原因是Web端走浏览器跳转的OAuth授权流程，React Native作为原生移动端需要走适配原生环境的授权链路，其中Strapi侧的配置是和前端框架无关的，所有端通用，不存在单独适配React Native的特殊逻辑，具体标准化操作流程如下：

一、Strapi 侧配置流程 #

• 前置凭据准备：先在Google Cloud控制台创建两组OAuth 2.0客户端凭据：第一组为「Web应用」类型，专门给Strapi后端使用；第二组对应你开发的移动端平台（Android/iOS），给React Native端的Google登录SDK使用，两类凭据不能混用，否则会触发重定向地址不匹配、跨客户端授权失败类错误。
• 安装官方认证依赖：在Strapi项目根目录执行安装命令：
  npm install @strapi/provider-google
  如果你用yarn作为包管理工具，执行yarn add @strapi/provider-google即可。
• 写入插件配置：打开Strapi项目下的config/plugins.js文件，添加Google登录 provider 配置，参数填入之前申请的Web类型客户端的ID与密钥，配置参考如下：

module.exports = ({ env }) => ({
  // 其余已有插件配置保持不变即可
  'users-permissions': {
    config: {
      providers: [
        {
          uid: 'google',
          displayName: 'Google',
          createStrategy: (strapi) => ({
            clientID: env('GOOGLE_WEB_CLIENT_ID'), // 填入Web类型客户端ID
            clientSecret: env('GOOGLE_WEB_CLIENT_SECRET'), // 填入Web类型客户端密钥
            callbackURL: `${env('STRAPI_BACKEND_URL')}/api/connect/google/callback`,
            scope: ['email', 'profile'],
          }),
        },
      ],
    },
  },
});

• 开放公共接口权限：登录Strapi管理后台，进入「设置」-「用户与权限插件」-「角色」，选择Public角色，在权限列表中找到Auth分类下的getCallback、redirect两个接口，勾选后保存配置。
• 配置校验：重启Strapi服务后，直接访问你的Strapi服务地址/api/connect/google，如果能正常跳转到Google账号授权页面，说明后端配置已经生效。

二、React Native 侧对接逻辑 #

这部分是和Web端实现的核心差异点，不要使用Web端适配的react-google-login类依赖，要使用适配原生移动端的登录SDK，具体步骤如下：

• 安装移动端Google登录依赖：执行npm install @react-native-google-signin/google-signin，按照依赖的原生配置指引完成Android、iOS端的基础配置，配置移动端平台凭据时填入之前申请的对应平台（Android/iOS）类型客户端ID即可。
• 登录逻辑实现：应用启动时先初始化Google登录SDK，注意必须传入Strapi侧使用的Web类型客户端ID作为webClientId参数，否则拿不到可供后端校验的服务端授权码，登录逻辑参考如下：

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

// 应用冷启动时执行初始化
GoogleSignin.configure({
  webClientId: '和Strapi配置中一致的Web类型客户端ID',
  offlineAccess: true,
});

// 绑定到登录按钮的触发函数
const handleGoogleLogin = async () => {
  try {
    await GoogleSignin.hasPlayServices();
    const signInRes = await GoogleSignin.signIn();
    // 注意必须取serverAuthCode传给Strapi，不要直接传前端拿到的idToken
    const { serverAuthCode } = signInRes;
    // 调用Strapi认证接口换取平台JWT
    const authRes = await fetch(`${你的Strapi服务地址}/api/auth/google/callback?access_token=${serverAuthCode}`, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });
    const strapiAuthInfo = await authRes.json();
    // 拿到返回的jwt和用户信息后，存入本地存储即可完成登录状态维护
    console.log('登录成功', strapiAuthInfo);
  } catch (err) {
    console.log('登录流程异常', err);
  }
};

三、常见问题排查 #

• 授权报错提示重定向地址不匹配：优先检查Strapi侧配置的callbackURL是否和Google Cloud控制台Web类型客户端中配置的授权重定向地址完全一致。
• Strapi接口返回403：回到权限配置页检查Public角色是否已经勾选第三方登录相关接口的访问权限，Strapi默认会关闭这类接口的公共访问权限。
• 换token时报授权码无效：检查React Native端初始化SDK时传入的webClientId是否和Strapi侧配置的clientID完全一致，跨客户端的授权码无法通过校验。

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