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

Question

在我的 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);
    }
    }

对你的帮助表示感谢。
如果您需要其他信息，请告诉我。
谢谢你。

Answer 1

到目前为止，我只看到了一个临时修复。几天来我遇到了同样的问题，并且能够解决它，这要归功于

Michel Comin Escude 在这里提供了解决方案 -> 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 应用程序中时有效。如果您创建一个独立的应用程序，则需要使用 Google Sign-In，这是一场完全不同的战斗。

Answer 2

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

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

• 使用host.exp.exponent作为包标识符。

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

• 使用host.exp.exponent作为“包名称”。

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

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

• 如果您还没有bundleIdentifier，请在app.json 中使用bundleIdentifier 。

2. 在 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