Auth0 与 ReactJS 和 Lumen - 受众看起来像一个随机字符串

Posted

技术标签:

【中文标题】Auth0 与 ReactJS 和 Lumen - 受众看起来像一个随机字符串【英文标题】:Auth0 with ReactJS and Lumen - Audience looks like a random string 【发布时间】:2019-04-02 13:49:01 【问题描述】:

我目前正在开发一个具有 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

我在 Lumen 中对解码数据进行了 var_vump,所有数据都是正确的,除了显示为:Wo6olMsBdA0U0azY4q09iZ7bjXPbYSvd 的“aud”项。

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

非常感谢。

【问题讨论】:

【参考方案1】:

找到问题了。

因此,当返回 access_tokenid_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'
  );

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

【讨论】:

以上是关于Auth0 与 ReactJS 和 Lumen - 受众看起来像一个随机字符串的主要内容,如果未能解决你的问题,请参考以下文章

Lumen 5.8 启用 cors

通过自定义授权方方法使用 Auth0 授权 AWS APIGateway

Lumen (Laravel) VS NODE.JS 解决方案

Oauth 2.0 与 Auth0 与 WSO2

Laravel 和 Lumen ACL 与共享代码库

与 parse-server 和 auth0 的自定义身份验证集成