如何在Nuxt中使用Auth0在后台更新授权令牌

Question

对于我当前正在使用的平台，我的雇主决定将身份验证外包给Auth0。

我们通过在Auth0上打开一个托管页面，并在成功登录/注销后重定向到我们的平台，设法使登录和注销流程正常工作。

使用电子邮件和密码成功登录后，Auth0以以下格式返回响应：

{
  "access_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlEwWTFRemREUlRW...",
  "expires_in": "86400",
  "id_token": "eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlEwWTFRemREUlRWRk9V...",
  "scope": "openid email",
  "state": "my-custom-state",
  "token_type": "Bearer"
}

根据the official Auth0 documentation，Auth0允许两种方法来更新现有授权令牌：

• 静默身份验证请求，用于尚未过期的令牌
• [隐藏的iframe中的无提示令牌请求，用于已过期的令牌

---

静默身份验证请求

文档告诉我，我应该获取对以下URL的请求：

https://████████████████████/authorize
    ?response_type=id_token token&
    client_id=...&
    redirect_uri=...&
    state=...&
    scope=openid...&
    nonce=...&
    audience=...&
    response_mode=...&
    prompt=none

当我在浏览器的任何选项卡中打开此URL时，如果在Auth0配置中列出了此redirect_uri，则确实可以正确地重定向到redirect_uri。在url之后，将新令牌添加到#。

但是，我无法从后端（Node.js / Nuxt）或前端（Vue / Nuxt）使它与XHR一起使用。当我尝试从前端执行此操作时，我的浏览器抱怨此资源未设置CORS标头。当我尝试从后端执行此操作时，我找不到将凭据传递到URL的方法。

---

更新过期的令牌

我找不到用于不使用auth0.js library来更新过期令牌的演示的代码示例，如果可能的话，我宁愿不使用它。

并且当我在本地安装auth0.js库后尝试将其演示用于auth0.js库时，在填写所有这些字段后，我什至无法简单登录即可工作：

这是我得到的错误：

{
  "original": {
    "error": "request_error",
    "error_description": "{\"crossDomain\":true,\"method\":\"POST\",\"url\":\"https://████████████████████/co/authenticate\"}"
  },
  "code": "request_error",
  "description": "{\"crossDomain\":true,\"method\":\"POST\",\"url\":\"https://████████████████████/co/authenticate\"}",
  "error": "request_error",
  "error_description": "{\"crossDomain\":true,\"method\":\"POST\",\"url\":\"https://████████████████████/co/authenticate\"}"
}

有人可以帮我弄清楚如何正确地在未到期的Auth令牌过期的背景中进行刷新吗？

---

更新

我设法进一步，...

1. 将SilentAuthenticationHandler从Auth0.js移植到我的项目中
2. 注释SilentAuthenticationHandler中的一行以防止浏览器在/authorize端点位于其他域时吓坏了
3. 使用具有SilentAuthenticationHandler response_mode的URL和与我的web_message对应的postMessageOrigin的值创建audience的实例
4. 在隐藏的iframe中调用login usePostMessageSilentAuthenticationHandler, withtrueset to/ authorize`端点上的, to open the方法>
5. 解析作为callback传递的redirect_uri页面的URL中的哈希，然后使用Window.parent.postMessage(parsedParams, '*')将其发送回主窗口

完成所有这5个步骤之后，我终于获得了新的访问令牌和ID令牌。

[很遗憾，我不知道如何使用这些新凭据更新我的Nuxt。我在@nuxtjs/auth程序包中寻找灵感，但我能想到的最好的方法是这样的：

this.$auth.setUserToken(token);
我尝试将此与例如fetchUser和setUser，但是无论我如何尝试，它都会不断增加我的会话并在重新加载时触发400错误。

我在做什么错？

对于我当前正在使用的平台，我的雇主决定将身份验证外包给Auth0。通过在Auth0上打开一个托管页面，我们设法使登录和注销流程正常工作。...

Answer 1

您必须通过Web重定向来完成此操作，因为授权服务器不会为Ajax请求设置CORS标头。如果允许的话，恶意浏览器选项卡将有更大的范围来获取您的API的令牌。

Answer 2

如果根据我的经验，如果要在nuxt应用程序中使用身份验证，则最好使用的是nuxt auth模块