Question

我目前正在开发一个具有ReactJS前端和Lumen后端的应用程序。我正在尝试使用Auth0来使API仅可由特定用户访问。

当前，我在Lumen中具有JWT身份验证设置。使用邮递员，我可以在设置Auth0提供的测试载体令牌时成功地请求数据。

这是我用于JWT验证的设置：

$verifier = new JWTVerifier([
    'supported_algs' => ['RS256'],
    'valid_audiences' => ['http://example.com'],
    'authorized_iss' => ['https://example.eu.auth0.com/'],
]);

我已经开始使用ReactJS，到目前为止，我可以使用Auth0完美登录。以下是auth0连接的设置：

auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: AUTH_CONFIG.callbackUrl,
    responseType: 'token id_token',
    scope: 'openid profile'
  });

成功登录后返回的是access_token和id_token。

现在是令人沮丧的部分。我对来自我的API的数据进行GET请求，如下所示：

axios({
      url:'http://example.com/public/api/enquiries',
      headers: {
        'Content-Type': 'application/json',
        'Authorization':'Bearer ' + localStorage.getItem('id_token'),
      }
    }).then(function(response) {
      console.log(response);
    });

然后从我的Lumen API返回以下错误：

Invalid audience Wo6olMsBdA0U0azY4q09iZ7bjXPbYSvd; expected http://example.com

我在流明中对解码后的数据进行了var_vump操作，除出现“ Wo6olMsBdA0U0azY4q09iZ7bjXPbYSvd”的“ aud”项外，所有数据都是正确的。

我将上面的字符串添加为接受的受众，然后成功发出了请求，但这肯定是不正确的。谁能指出我正确的方向？

非常感谢。

Answer 1

发现了问题。

因此，当返回access_token和id_token的数据时，access_token看起来很小，无法用于JWT，因此我认为id_token是要使用的正确载体。但是，当我启动auth0时，我在React项目中所缺少的是“听众”选项，因此access_token尚未JWT准备就绪。添加它使我有一个更长的access_token，它已经准备好JWT了。将其解析为我的API，作为载体应该可以完成。

react中auth0的启动代码应该是：

auth0 = new auth0.WebAuth({
    domain: AUTH_CONFIG.domain,
    clientID: AUTH_CONFIG.clientId,
    redirectUri: AUTH_CONFIG.callbackUrl,
    responseType: 'token id_token',
    scope: 'openid profile',
    audience: 'http://example.com'
  });

..对于遇到相同问题的任何人。

带有ReactJS和流明的Auth0-听众看起来像一个随机字符串

1 个答案: