React Native集成Google登录遇Error 400:invalid_request问题求助

错误核心原因 #

这个invalid_request错误主要是Google OAuth客户端ID的授权重定向URI、授权JavaScript来源配置不符合Expo Auth Session的要求，同时代码中存在拼写错误导致客户端ID匹配失败。

修复步骤 #

1. 正确配置Google Cloud控制台的客户端ID #

针对Web应用客户端ID（Expo开发必备）

• 进入Google Cloud控制台 → 目标项目 → 「API和服务」→「凭据」
• 找到已创建的Web应用客户端ID，点击「编辑」：
  • Authorised JavaScript origins：
    • 本地开发：添加 http://localhost:8081
    • Expo隧道模式（Expo Go）：添加 https://u.expo.dev
  • Authorised redirect URIs：
    • 必须添加Expo Auth Session专属重定向URI，可从Expo启动项目的控制台日志中复制（格式类似 exp://localhost:8081/--/expo-auth-session 或 exp://u.expo.dev/<项目ID>/--/expo-auth-session）
    • 生产构建（EAS）：若使用自定义scheme，添加 your-app-scheme://expo-auth-session（需提前在app.json中配置scheme）

针对Android/iOS客户端ID（原生构建需配置）

• Android客户端ID需绑定对应SHA-1指纹（Expo开发模式可用官方调试指纹，生产构建需用自身签名指纹）
• iOS客户端ID需匹配项目Bundle ID

2. 修正代码错误 #

你的代码中androidClientId存在拼写错误（my_andorid_id应为my_android_id），同时建议用环境变量管理客户端ID避免硬编码，修正后的代码如下：

import * as WebBrowser from 'expo-web-browser';
import * as Google from 'expo-auth-session/providers/google';
import { useEffect, useState } from 'react';
import Config from 'react-native-config';
import { Image, Text, TouchableOpacity, View } from 'react-native';

WebBrowser.maybeCompleteAuthSession();

const LoginScreen =()=> {
    const [accessToken, setAccessToken] = useState(null);
    const [user, setUser] = useState(null);
    // 修正拼写错误 + 用环境变量管理ID
    const [request, response, promptAsync] = Google.useIdTokenAuthRequest({
        webClientId: Config.GOOGLE_WEB_CLIENT_ID,
        androidClientId: Config.GOOGLE_ANDROID_CLIENT_ID,
        iosClientId: Config.GOOGLE_IOS_CLIENT_ID
    });

    useEffect(() => {
        if (response?.type === 'success') {
            setAccessToken(response.authentication.accessToken);
        }
    }, [response]);

    useEffect(() => {
        if (accessToken) {
            fetchUserInfo();
        }
    }, [accessToken]);

    async function fetchUserInfo() {
        let response = await fetch('https://www.googleapis.com/userinfo/v2/me', {
            headers: {
                Authorization: `Bearer ${accessToken}`
            }
        });
        const userInfo = await response.json();
        setUser(userInfo);
    }

    const ShowUserInfo = () => {
        if (user) {
            return (
                <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
                    <Text style={{ fontSize: 35, fontWeight: 'bold' }}>Welcome</Text>
                    <Image source={{ uri: user.picture }} style={{ width: 100, height: 100, borderRadius: 50 }} />
                    <Text style={{ fontSize: 20, fontWeight: 'bold' }}>{user.name}</Text>
                </View>
            );
        } else {
            return null;
        }
    };

    return (
        <View style={{ flex:1, alignItems:'center', justifyContent:'center' }}>
            <ShowUserInfo />
            {user === null && (
                <>
                    <Text style={{ fontSize: 35, fontWeight: 'bold', marginBottom:20 }}>Welcome</Text>
                    <TouchableOpacity disabled={!request} onPress={() => promptAsync()} style={{ padding:10, backgroundColor:'#4285F4', borderRadius:5 }}>
                        <Text style={{ color:'white', fontSize:16 }}>Login with Google</Text>
                    </TouchableOpacity>
                </>
            )}
        </View>
    );
}
export default LoginScreen;

3. 额外检查项 #

• 确保已启用Google Identity API：进入Google Cloud控制台「API和服务」→「库」，搜索并启用「Google Identity API」
• 本地开发时，设备需与开发服务器在同一网络下
• iOS端需在app.json中配置scheme：

  {
    "expo": {
      "scheme": "your-app-unique-scheme"
    }
  }
  

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