React Native:Google OAuth redirect_uri的无效参数值:无效的方案 [英] React Native: Google OAuth Invalid parameter value for redirect_uri: Invalid scheme

问题描述

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

I have some problems with authentication with Google OAuth2 in my react-native app. I'm using 'expo-auth-session' library for my authentification. I need get access token and then get Youtube profile. But i'm stuck with error "Invalid parameter value for redirect_uri: Invalid scheme"

我在 app.json 中的方案:

My scheme in 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
  );

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

When I press the button, callback is starting

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

但我收到错误

知道如何解决吗?

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

P.S. I tried fix it with library "expo-google-app-auth". I get access token, but when I try to get Youtube profile and get "Request failed with status code 403".

更新 1

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

By the way about my connection to Youtube Profile.

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

I change something to get access token.

例如:

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 与集合不同.

I wanted to see which data is loaded from AuthRequest. And I see pretty weird log. Redirect_uri is different from the set.

分辨率

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

When I add "https://www.googleapis.com/auth/youtube.readonly" in my scopes - i can get profile data. Another words below is my code.

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 });
    }
};

重要

不记得添加 你的项目 Youtube API v3

推荐答案

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

It looks like your expo environment is using the development redirect URI instead of the native one. Check out these docs for setting up the environment that will give you the native scheme you're looking for: https://docs.expo.io/guides/authentication/#standalone-bare-or-custom

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

Also make sure that you register your custom scheme with 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

As for your Youtube example, you should be specifying the scopes in the call to Google.loginAsync, not the call to the Youtube API. scopes are requested during the authorization step, and your current authorization request doesn't include any. The relevant docs are here: https://docs.expo.io/versions/latest/sdk/google/#loginasync

这篇关于React Native:Google OAuth redirect_uri的无效参数值:无效的方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！