时间戳

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

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

问题描述

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

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

标签： javascriptreact-nativeauthenticationgoogle-signinexpo

解决方案

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

在这里提供解决方案的 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 应用程序中起作用。如果你创建一个独立的应用程序，你需要使用谷歌登录，这是一场完全不同的战斗。

推荐阅读