Ошибка Twitch API 401 с React Native Expo - PullRequest
Новая
       139

Ошибка Twitch API 401 с React Native Expo

0 голосов
/ 06 августа 2020

Я пытаюсь получить информацию о пользователе из Twitch с помощью React Native Expo, но он всегда возвращает ошибку 401.

Я обнаружил, что он правильно получает токен OAuth, но проблема возникает после него.

Вот мой код: 

WebBrowser.maybeCompleteAuthSession();

// Endpoint
const discovery = {
    authorizationEndpoint: 'https://id.twitch.tv/oauth2/authorize',
    tokenEndpoint: 'https://id.twitch.tv/oauth2/token',
    revocationEndpoint: 'https://id.twitch.tv/oauth2/revoke',
};

// Login Screen
export function loginScreen({ navigation }) {
    const [request, response, promptAsync] = useAuthRequest(
        {
            responseType: ResponseType.Token,
            clientId: '(deleted)',
            // For usage in managed apps using the proxy
            redirectUri: makeRedirectUri({ useProxy: true }),
            scopes: ['openid', 'user_read', 'user_subscriptions'],
        },
        discovery
    );

    React.useEffect(() => {
        if (response?.type === 'success') {
            fetch('https://api.twitch.tv/kraken/user', {
                method: 'GET',
                headers: {
                    'Accept': 'application/vnd.twitchtv.v5+json',
                    'Client-ID': '(deleted)',
                    'Authorization': 'OAuth ' + response.params
                }
            })
                .then((data) => {
                    AsyncStorage.setItem('userData', JSON.stringify(data))
                        .then(() => console.log(JSON.stringify(data)))    // console.log for testing
                        .then(() => navigation.navigate('Home'))
                })
                .catch((err) => alert(err))
        }
    }, [response]);

, и я сослался на этот документ для аутентификации.

1 Ответ

0 голосов
/ 06 августа 2020

Twitch Войдите и получите информацию о пользователе с помощью expo-auth-session Expo.

Шаг 1: Создайте учетную запись и включите двухфакторную аутентификацию на сайте разработчика Twitch. Вы получите ключ.

Шаг 2: Установить Expo's expo install expo-auth-session

Шаг 3: Добавить схему в приложение. json файл 

{
  "expo": {
      "scheme": "myapp"
  }
}

Чтобы иметь возможность использовать обратную ссылку на свое приложение, вам нужно будет установить схему в своем проекте app.config. js или app. json, а затем создать автономное приложение ( его нельзя обновить с помощью OTA-обновления). Если вы не включите схему, процесс аутентификации завершится, но он не сможет передать информацию обратно в ваше приложение, и пользователю придется вручную выйти из модального режима аутентификации (что приведет к отмене события).

Шаг 4: 

import * as AuthSession from 'expo-auth-session';
// To fetch twitch user information 
const getTwitchUserInformation = twitchToken => {
    const url = 'https://api.twitch.tv/helix/users';
    const header = {
      Authorization: `Bearer ${twitchToken}`,
      'Client-ID': SOCIAL_CONSTANTS.TWITCH_CLIENT_ID,
    };
fetch(url, {
      method: 'GET',
      headers: header,
    })
      .then(response => response.json())
      .then(response => {
        const userResponse = response && response.data[0];
        console.log(userResponse);
      })
      .catch(error => {
        console.log(error);
      });
  };
const signInWithTwitch = async () => {
  const redirectUrl = AuthSession.getRedirectUrl();
  const authUrl = `https://id.twitch.tv/oauth2/authorize?client_id=${ENTER_CLIENT_ID_HERE}&redirect_uri=${redirectUrl}&response_type=token&scope=user:edit+user:read:email&force_verify=true`
  const {type, params} = await AuthSession.startAsync({authUrl});
  if (type === 'success') {
     const {access_token, token_type} = params;           
    getTwitchUserInformation(access_token);
  }
};

Ссылка - https://medium.com/@rakesh.medpalli / twitch-signin-get-user-information-in-expo-using-expo-auth-session- a6a74812c096

...