React Native Expo 出现 Twitch API 401 错误

Question

我正在尝试使用 React Native Expo 从 Twitch 获取用户信息，但它总是 returns 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]);

我参考了 this document 进行身份验证。

Answer 1

Twitch 登录并使用 Expo 的 expo-auth-session 获取用户信息。

第 1 步： 创建一个帐户并在 Twitch 开发者上启用 two-factor 身份验证 site.You 将获得一个密钥。

第 2 步： 安装 Expo 的 expo install expo-auth-session

步骤 3： 在 App.json 文件中添加方案

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

为了能够深入 link 回到您的应用程序，您需要在您的项目 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);
  }
};

Link - https://medium.com/@rakesh.medpalli/twitch-signin-get-user-information-in-expo-using-expo-auth-session-a6a74812c096

React Native Expo 出现 Twitch API 401 错误

Twitch API 401 error with React Native Expo

twitch

react-native

expo