在我的新 Expo 应用程序中从 Auth0 获取无效令牌答案

【问题标题】：Getting invalid token from Auth0 in my new Expo app在我的新 Expo 应用程序中从 Auth0 获取无效令牌
【发布时间】：2019-01-02 13:12:05
【问题描述】：

我正在按照以下示例在新的 Expo 应用程序上实现 Auth0 身份验证： https://github.com/expo/auth0-example

似乎调用了 Auth0 并成功获取了令牌，但在控制台中记录响应后，它也立即给了我以下错误：

可能的未处理 Promise Rejection (id: 0) [InvalidTokenError: 指定的令牌无效：JSON 中位置 0 处的意外令牌 V]

我得到的回应是这样的：

params:
access_token: “Vku7HOclH7pVi52bmzGHga89VwpfK_Y4”
exp://10.0.0.215:19000/–/expo-auth-session: “”
expires_in: “7200”
scope: “openid profile”
token_type: “Bearer”
proto: Object
type: “success”
url: “exp://10.0.0.215:19000/–/expo-auth-session#access_token=Vku7HOclH7pVi52bmzGHga89VwpfK_Y4&scope=openid%20profile&expires_in=7200&token_type=Bearer”

当我检查jwt.io 上的access_token 时，它表明签名无效。知道这里可能是什么问题吗？

这是我的完整代码：

import React, { Component } from 'react';
import { AuthSession } from 'expo';
import { Alert, Button, View, Text } from 'react-native';
import jwtDecoder from 'jwt-decode';

import styles from '../constants/styles';

const auth0ClientId = 'my_client_id_for_my_mobile_app_from_Auth0_dashboard';
const auth0Domain = 'https://mydomain.auth0.com';

  /**
   * Converts an object to a query string.
   */
function toQueryString(params) {
  return '?' + Object.entries(params)
    .map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
    .join('&');
}

export default class Login extends Component {

  constructor(props) {

    super(props);
    this.state = {
      username: null
    };
  }

  _loginWithAuth0 = async () => {

    const redirectUrl = AuthSession.getRedirectUrl();
    console.log(`Redirect URL (add this to Auth0): ${redirectUrl}`);
    const result = await AuthSession.startAsync({
      authUrl: `${auth0Domain}/authorize` + toQueryString({
        client_id: auth0ClientId,
        response_type: 'token',
        scope: 'openid profile',
        redirect_uri: redirectUrl,
      }),
    });

    console.log(result);
    if (result.type === 'success') {
      this.handleParams(result.params);
    }
  }

  handleParams = (responseObj) => {

    if (responseObj.error) {
      Alert.alert('Error', responseObj.error_description
        || 'something went wrong while logging in');
      return;
    }
    const encodedToken = responseObj.access_token;
    const decodedToken = jwtDecoder(encodedToken, { header: true });
    const username = decodedToken.name;
    debugger;
    this.setState({ username });
  }

  render() {
    return (
      <View style={styles.welcomeScreen}>
        <Text>Welcome to My Expo App!</Text>
        <Button title="Login with Auth0" onPress={this._loginWithAuth0} />
      </View>
    );
  }
}

附：我的 Expo 应用使用 SDK 版本 31.0.0

【问题讨论】：

标签： react-native jwt expo auth0

【解决方案1】：

非自定义 API 的访问令牌是不透明的（类似于您收到的令牌），而不是 JWT。这是因为您没有在授权 URL 中设置audience。 Auth0 只会为自定义 API 提供 JWT Access Tokens。

您收到的 ID 令牌将采用 JWT 格式，因为您请求了 openid 范围。

【讨论】：