React Native调用Auth0 API时accessToken非JWT导致校验失败如何解决

根因说明 #

你拿到的短字符串是Auth0返回的不透明访问令牌（Opaque Access Token），并非JWT格式，不需要也无法由客户端自行转换为JWT，该问题是Auth0认证请求参数配置错误导致的。

修正步骤 #

1. 调整React Native端Auth0授权参数 #

调用Auth0授权接口时，必须传入后端API对应的audience参数，取值和你后端JWT校验中间件中配置的audience完全一致即可：

// 以react-native-auth0 SDK为例
const credentials = await auth0.webAuth.authorize({
  audience: 'ddasdsfasdfasd', // 和后端JWT配置的audience完全匹配
  scope: 'openid profile email' // 按需添加需要的权限范围
});

调整后拿到的credentials.accessToken就是标准JWT格式，为三段用.分隔的长字符串，符合后端校验要求。

2. 修正axios请求写法 #

你当前的axios.post参数顺序错误，post方法第二个参数为请求体，第三个参数才是请求配置项，修改为：

const requestHeader = {
  headers: {
    Authorization: `Bearer ${accessToken}`,
  }
}
// 无请求体时第二个参数传空对象
axios.post(API_BASE + '/api/example/', {}, requestHeader)

3. 修正后端JWT配置 #

你当前JWT中间件的issuer参数为无效值，需要修改为你的Auth0域名，否则就算传入正确JWT也会校验失败：

exports.checkJwt = jwt({
    secret: jwksRsa.expressJwtSecret({
        cache: true,
        rateLimit: true,
        jwksRequestsPerMinute: 5,
        jwksUri: 'https://dev-0p1doq9r.auth0.com/.well-known/jwks.json'
  }),
  audience: 'ddasdsfasdfasd',
  issuer: 'https://dev-0p1doq9r.auth0.com/', // 修正为你的Auth0域名
  algorithms: ['RS256']
});

JWT校验属性说明 #

你使用的express-jwt中间件会自动完成以下校验，无需额外处理：

• 签名有效性：通过jwksUri获取Auth0公钥验证签名是否被篡改
• aud声明：和配置的audience字段匹配
• iss声明：和配置的issuer字段匹配
• exp声明：自动校验JWT是否过期
• 签名算法：必须为配置的RS256

内容的提问来源于stack exchange，提问作者schoenbl