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

问题描述

我在本机应用程序中使用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);
  }

但是出现错误

有什么主意我可以解决吗?

Any idea how I can fix it?

P.S.我尝试使用库"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 });
    }
};

重要

不记得添加您的项目 推荐答案

看来，您的博览会环境正在使用开发重定向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注册了自定义方案:

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 的调用中而不是对Youtube API的调用中指定 scopes .在授权步骤中会请求 scope ，并且您当前的授权请求中没有任何内容.相关文档在这里: 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屋！