在 React Native 中使用 Expo.Google.logInAsync 时如何解决“redirect_uri_mismatch”错误？

Posted 2023-02-23

【中文标题】在 React Native 中使用 Expo.Google.logInAsync 时如何解决“redirect_uri_mismatch”错误？

【英文标题】：How to fix "redirect_uri_mismatch" error while using Expo.Google.logInAsync in React Native?

【发布时间】：2019-06-17 10:32:38

【问题描述】：

在我的 React Native 应用程序（在构建的 APK 上）调用 Expo.Google.logInAsync() 后，我收到错误代码 400“redirect_uri_mismatch”。请注意，在 Expo 客户端上，我没有收到错误，Google 登录页面崩溃且没有错误。我怀疑错误正在某个地方记录在本机端。 我正在使用 Expo 版本 32.0.0 和 React Native 版本 32.0.0。 我已按照https://docs.expo.io/versions/v32.0.0/sdk/google/ 此处的说明进行操作，并创建了 ios 和 android OAuth 客户端 ID。 以下是我的代码的副本：

const signInWithGoogleAsync = async () =>  
    try 
        const result = await Expo.Google.logInAsync(
        androidClientId: ANDROID_CLIENT_ID,
        iosClientId: IOS_CLIENT_ID,
        scopes: ['profile', 'email'],
        );

        if (result.type === 'success') 
        return result.accessToken;
         else 
        return cancelled: true;
        
     catch(e) 
        console.log(e);
    
    

您的帮助将不胜感激。 如果您需要更多信息，请告诉我。 谢谢你。

【问题讨论】：

嗯，我使用的是带有托管工作流程的 Expo Go。对我来说，问题是我没有在终端中使用expo login 命令登录Expo。希望这对某人有帮助！

【参考方案1】：

到目前为止，我只看到了一个临时修复。我有同样的问题好几天了，感谢

米歇尔·科明·埃斯库德 谁在这里提供了解决方案-> https://github.com/expo/expo/issues/3540

解决方案

继续使用 Expo SDK 32。 转到 Google Developer Console 并创建一个 Android Oauth2 客户端 ID 和一个 iOS Oauth2 客户端 ID，如用于 Google 登录的 SDK 31 文档中所述（确保包名称为 host.exp.exponent）。

使用 Android 客户端 ID 和 iOS 客户端 ID，如下所示：

import  Platform  from 'react-native';
export const isAndroid = () => Platform.OS === 'android';

const result = await Google.logInAsync(
    clientId: isAndroid() ? '<YOUR_ANDROID_CLIENT_ID>' : '<YOUR_IOS_CLIENT_ID>',
);

解释 我看到的主要问题是，即使在新文档中声明了以下内容：

const clientId = '<YOUR_WEB_CLIENT_ID>';

事实是，内部请求是从 Expo 应用程序调用的，当您在错误页面上展开请求详细信息时，您可以看到：

如您所见，它添加了包名 host.exp.exponent。

无论如何，这仅在您处于 开发 或 Expo 应用程序 时有效。如果你创建一个独立的应用程序，你需要使用谷歌登录，这是一场完全不同的战斗。

【讨论】：

希望这有助于@pasha

请问如何使用独立应用程序。它显示授权错误错误 400：redirect_uri_mismatch

我必须使用host.exp.exponent 创建iOS Development 应用程序，如此处所述=> github.com/expo/expo/blob/…。这很奇怪，而且有效。实际上它需要原始 Expo 应用程序的 Bundle ID。 :~

【参考方案2】：

您必须在 app.json 中为您的应用程序提供正确的值，并在 GoogleDeveloper 控制台中创建 cliendID 时指定此值。 app.json 中的 android.package 和 ios.bundleIdentifier 应该有一个字符串值，如“domain.subdomain1.subdomain2”。例如 app.json：

"ios": 
  "bundleIdentifier": "com.mydomain.myawsmapp"
  
"android": 
  "package": "com.mydomain.myawsmapp"

【参考方案3】：

我在androidClientId: ANDROID_CLIENT_ID 和androidStandaloneAppClientId: ANDROID_CLIENT_ID 中使用相同的Client Id，方法是更改​​其中一个对我有用的client id

【参考方案4】：

如果你想使用 expo go 你应该这样做

---

在您的 Google 控制台中的 iOS OAuth 客户端 ID 中，您应该：

使用

host.exp.exponent

作为包标识符。

在您的 Google 控制台的 Android OAuth 客户端 ID 中，您应该：

使用

host.exp.exponent

作为“包名”。

在您的独立应用中，您应该：

在您的 Google 控制台中的 iOS OAuth 客户端 ID 中，您应该：

如果您还没有

bundleIdentifier

，请在您的 app.json 中使用。

在您的 Google 控制台的 Android OAuth 客户端 ID 中，您应该：

使用 app.json 中的

android.package

（例如：ca.brentvatne.growlerprowler）来 包名称字段。

来源：https://docs.expo.io/versions/latest/sdk/google/#using-it-inside-of-the-expo-app