React Native iOS对接Google OAuth搭配NodeJS后端出现redirect_uri报错

问题根因 #

你遇到的redirect_uri报错核心原因有两个：

1. 当前配置的GOOGLE_IOS_REDIRECT_URI缺少URI协议头（scheme），Google OAuth要求重定向URI必须为完整合法的URI格式，仅反向域名不符合要求
2. 你将所有请求参数拼接在URL查询串中、POST提交空body的传参方式不符合Google OAuth token接口的要求，该接口要求参数必须放在POST请求体中，Content-Type指定为application/x-www-form-urlencoded

修复步骤 #

• 第一步：确认正确的redirect_uri值
  登录Google Cloud控制台，进入「API和服务-凭据」页面，找到你用于iOS端的OAuth 2.0客户端ID，页面会明确列出该客户端允许使用的重定向URI，格式为com.googleusercontent.apps.${你的iOS客户端ID前缀}:/oauth2redirect或com.googleusercontent.apps.${你的iOS客户端ID前缀}:/，直接复制该值作为前后端统一的redirect_uri，禁止自行修改格式
• 第二步：对齐前端配置
  前端RN端调用GoogleSignin.configure()时，确保传入的iosClientId和你后端使用的GOOGLE_IOS_CLIENT_ID完全一致，且获取授权码时传入的redirect_uri和你上一步复制的内容完全匹配，同时检查Xcode项目info.plist中已添加该反向域名作为URL Scheme，否则前端无法正常接收Google授权回调
• 第三步：修改后端请求逻辑
  调整参数传递方式，将所有参数放在POST请求体中，不要拼接在URL后，参考修正后的代码：

const GOOGLE_IOS_CLIENT_ID = '123456789-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com';
const GOOGLE_IOS_CLIENT_SECRET = 'REDACTED';
// 替换为你从Google Cloud控制台复制的完整redirect_uri，注意保留scheme部分
const GOOGLE_IOS_REDIRECT_URI = 'com.googleusercontent.apps.123456789-abcdefghijklmnopqrstuvwxyz:/oauth2redirect';

export async function get_google_tokens(logging_key, { code }) {
    const GRANT_TYPE = 'authorization_code';
    try {
        const endpoint = `https://oauth2.googleapis.com/token`;
        // 参数放在请求体中，指定正确的Content-Type
        const params = new URLSearchParams({
            client_id: GOOGLE_IOS_CLIENT_ID,
            client_secret: GOOGLE_IOS_CLIENT_SECRET,
            code: code,
            grant_type: GRANT_TYPE,
            redirect_uri: GOOGLE_IOS_REDIRECT_URI
        });
        const response = await post_to_API(logging_key, endpoint, {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            },
            body: params.toString()
        });
        return response.body;
    } catch (error) {
        throw error;
    }
};

• 兼容方案：如果使用上述步骤仍然报错，可尝试在Google Cloud控制台创建Web类型的OAuth 2.0客户端ID，前端RN配置时传入该Web客户端ID作为webClientId参数，后端也对应使用该Web客户端的ID、密钥和redirect_uri进行token兑换，该模式兼容性更强
• 安全提示：拿到token后需要额外校验id_token的签名、签发方、受众等字段，避免伪造请求

内容的提问来源于stack exchange，提问作者Rinesh-Bharath