Блог

У меня возникли некоторые проблемы с аутентификацией с помощью Google OAuth2 в моем приложении react-native. Я использую библиотеку 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);
  }
  

Но я получаю ошибку

Есть идеи, как я могу это исправить?

PS Я попытался исправить это с помощью библиотеки «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}amp;part=snippetamp;mine=trueamp;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=idamp;mine=trueamp;key=${encodeURI(YOUTUBE_API_KEY)}`,
                    {
                        headers: {
                            Authorization: `Bearer ${accessToken}`
                        }
                    }
                );

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

  

ВАЖНО

Не помню, чтобы добавить в ваш проект Youtube API v3

Похоже, что ваша среда expo использует 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, вы должны указывать scopes в вызове Google.loginAsync , а не в вызове API Youtube. scopes запрашиваются на этапе авторизации, и ваш текущий запрос на авторизацию не содержит ни одного. Соответствующие документы находятся здесь:https://docs.expo.io/versions/latest/sdk/google/#loginasync

ПЕРЕНАПРАВИТЬ URI

Ваш код выглядит примерно правильно, хотя ваш URI перенаправления является частной схемой URI и должен включать символ двоеточия:

• com.liga.online:/обратный вызов

ОТСЛЕЖИВАНИЕ СООБЩЕНИЙ

Чтобы люди могли помочь вам с запросом вашего профиля на YouTube, вы должны быть в состоянии сообщить нам, что отправляется по HTTP / S. Не могли бы вы попытаться отследить сообщения, как в этой моей записи, затем вставьте данные запроса и ответа в свой вопрос выше