React Native：Google OAuth redirect_uri的无效参数值：无效的方案

Question

我在我的 react-native 应用中使用 Google OAuth2 进行身份验证时遇到了一些问题。我正在使用“expo-auth-session”库进行身份验证。我需要获取访问令牌，然后获取 Youtube 个人资料。但我遇到了错误“redirect_uri 的参数值无效：无效方案”

我在 app.json 中的方案：

"scheme": "com.liga.online"

我的代码如下：

import {
  makeRedirectUri,
  useAuthRequest,
  ResponseType,

} from "expo-auth-session";

const discoveryYoutube = {
    authorizationEndpoint: 'https://accounts.google.com/o/oauth2/v2/auth',
    tokenEndpoint: 'https://oauth2.googleapis.com/token',
    revocationEndpoint: 'https://oauth2.googleapis.com/revoke'
};


/// Inside my React component
const [requestYoutube, responseYoutube, promptAsyncYoutube] = useAuthRequest(
    {
      responseType: ResponseType.Code,
      clientId: YOUTUBE_CLIENT_ID,
      scopes: ["https://www.googleapis.com/auth/youtube.readonly"],
      redirectUri: makeRedirectUri({
        native: "com.liga.online/callback",
      }),
    },
    discoveryYoutube
  );

当我按下按钮时，回调开始

  const signInYoutube = async () => {
    const response = await promptAsyncYoutube();
    console.log(response.data);
  }

但我收到错误

知道如何解决吗？

附：我尝试使用库“expo-google-app-auth”修复它。我获得了访问令牌，但是当我尝试获取 Youtube 个人资料并获得“请求失败，状态码为 403”时。

更新 1

顺便说一下我与 Youtube 个人资料的连接。

我改变了一些东西来获取访问令牌。

例如：

import * as Google from 'expo-google-app-auth';
import { startAsync } from 'expo-auth-session';


// Inside my React component

// When I press the button, callback is starting

const signInYoutube = async () => {

    const config = {
        androidClientId: YOUTUBE_CLIENT_ID
    };

    const { type, accessToken, user } = await Google.logInAsync(config);


    // I need again open my Browser for get Youtube data
    const response = await startAsync({
            authUrl: `https://www.googleapis.com/youtube/v3/channels?access_token=${accessToken}&part=snippet&mine=true&scope=https://www.googleapis.com/auth/youtube.readonly`,
            showInRecents: true
    });

    console.log(response.data);
}

但我得到错误

更新 2

我想看看从 AuthRequest 加载了哪些数据。我看到非常奇怪的日志。 Redirect_uri 与集合不同。

分辨率

当我在我的范围中添加“https://www.googleapis.com/auth/youtube.readonly”时 - 我可以获得个人资料数据。下面的另一个词是我的代码。

import axios from 'axios';
import * as Google from 'expo-google-app-auth';

// Inside my React component

// Callback function

const signInYoutube = async () => {
    const config = {
        androidClientId: YOUTUBE_CLIENT_ID,
        scopes: ['https://www.googleapis.com/auth/youtube.readonly']
    };

    const { type, accessToken, user } = await Google.logInAsync(config);

    if (type === 'success') {
        const response = await axios.get(
                    `https://www.googleapis.com/youtube/v3/channels?part=id&mine=true&key=${encodeURI(YOUTUBE_API_KEY)}`,
                    {
                        headers: {
                            Authorization: `Bearer ${accessToken}`
                        }
                    }
                );

        setYoutubeData({ accessToken, user, youtubeId: response.data.items[0].id });
    }
};

重要

不记得加your projectYoutube API v3

Answer 1

看起来您的 expo 环境正在使用开发重定向 URI 而不是本机重定向 URI。查看这些文档以设置环境，为您提供您正在寻找的本机方案：https://docs.expo.io/guides/authentication/#standalone-bare-or-custom

同时确保您向 Google 注册了您的自定义方案：https://developers.google.com/identity/protocols/oauth2/native-app#redirect-uri_custom-scheme

至于您的 Youtube 示例，您应该在对 Google.loginAsync 的调用中指定 scopes，而不是对 Youtube API 的调用。 scopes 在授权步骤中被请求，并且您当前的授权请求不包括任何内容。相关文档在这里：https://docs.expo.io/versions/latest/sdk/google/#loginasync

Answer 2

重定向 URI

尽管您的重定向 URI 是私有 URI 方案并且应该包含冒号字符，但您的代码看起来大致正确：

• com.liga.online:/callback

跟踪消息

如果有人帮助您处理您的 YouTube 个人资料请求，您需要能够告诉我们通过 HTTP/S 发送的内容。您能否尝试像this write up of mine 那样跟踪消息，然后将请求和响应详细信息粘贴到您上面的问题中