Auth0 with ReactJS 和 Lumen - Audience 看起来像一个随机字符串

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);
    });

然后 returns 来自我的 Lumen API 的以下错误：

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

我在 Lumen 中对解码数据进行了 var_vump，所有数据都是正确的，除了显示为 Wo6olMsBdA0U0azY4q09iZ7bjXPbYSvd.

的 'aud' 项目

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

非常感谢。

Answer 1

找到问题了。

因此，当为 access_token 和 id_token 返回数据时，access_token 看起来太小而无法用于 JWT，因此我假设 id_token是正确的承载使用。但是，我在启动 auth0 时在我的 React 项目中缺少的是 "audience" 选项，因此 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'
  });

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

Auth0 with ReactJS 和 Lumen - Audience 看起来像一个随机字符串

Auth0 with ReactJS and Lumen - Audience looks like a random string

reactjs

auth0

lumen