Javascript 如何在Nuxt中使用Auth0在后台续订授权令牌

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

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

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

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

根据，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配置中列出了此

重定向uri

，我确实被正确重定向到

重定向uri

。并且在

#

之后将新令牌添加到

url

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

---

续订过期代币 我找不到任何演示如何在不使用的情况下续订过期代币的代码示例，如果可能的话，我宁愿不使用

当我在本地安装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\"}"
}

有谁能帮我弄清楚如何在blackground中正确地实现刷新，过期或未过期的身份验证令牌

---

更新 我设法更进一步，通过

将

SilentAuthenticationHandler

从

Auth0.js

移植到我的项目

注释

SilentAuthenticationHandler

中的一行，以防止浏览器在

/authorize

端点位于不同域时崩溃

创建

SilentAuthenticationHandler

的实例，其url具有

response\u mode

web\u message

以及与my

受众对应的
postMessageOrigin
值

调用

SilentAuthenticationHandler上的
login
方法，将
usePostMessage
设置为
true
，在隐藏的iframe中打开
/authorize`端点

解析

回调

页面URL中作为

重定向_uri

传递的哈希，然后使用

Window.parent.postMessage（parsedParams，'*'）

将其发送回主窗口

在完成了所有这5个步骤之后，我终于得到了我的新访问令牌&id令牌

不幸的是，我不知道如何用这些新凭据更新我的Nuxt。我在

@nuxtjs/auth

软件包中寻找灵感，但我能想到的最好办法是：

this.$auth.setUserToken（令牌）；

我尝试将其与例如

fetchUser

&a

setUser

相结合，但无论我怎么尝试，它都会使我的会话中断，并在重新加载时触发

400

错误

---

我做错了什么？

您必须通过web重定向来完成，因为授权服务器不会为Ajax请求设置CORS头。如果允许，恶意浏览器选项卡将有更多的空间为您的API获取令牌

SPA的标准技术是使用隐藏的iframe，这很难编码。有一个广泛使用的成熟解决方案，我一直在使用

如果有帮助，我有一些资源可以展示如何集成库并以推荐的方式执行静默令牌续订：

---

如果您想在我的体验中使用nuxt应用程序中的身份验证，您最好使用的是模块

它处理了大量的编码，而且很容易使用和理解，也由官方nuxt网站发布

如果您使用该选项，您可以使用以下选项注销：

this.$auth.logout(/* .... */)

---

为什么要自己实现身份验证流和令牌更新？您是否使用了任何一个库或手动操作所有的东西？如果您在浏览器中使用SPA，那么您应该考虑使用“PKCE”授权流作为当前最安全的一个。@ VLADIMILRYLYKH：正如我在我的问题中提到的，我们的平台运行。我们确实使用simpify登录和注销，但我找不到有关如何续订令牌的任何信息。但你是对的：我应该先在他们的Github页面上记录一个问题。。。我现在就去@VladimirSerykh：我一直在研究Nuxt插件&Auth0.js库，这让我更进一步。我现在确实设法获得了我的访问令牌，但我找不到一种方法用它更新我的Nuxt！事实上，我计划明天用一个隐藏的iframe进行实验。谢谢你在路上帮我！我又向前迈了一步。。。但仍然不是我想去的地方@JohnSlegers你试过隐藏的iframe吗？nuxt auth和auth0 refresh token也面临同样的问题。我已经在使用该模块了。实际上我已经在用它登录和注销了。不幸的是，我不知道如何使用它来更新令牌…为了获取新令牌，请使用

这个。$auth.fetchUser（）

@Ali Hosseini：据我所知，根据代码，

fetchUser

只是根据本地存储中的令牌获取用户信息。因此，我只需执行

fetchUser

，插件只需获取已经存在的令牌的用户信息。如果我先执行

SetUserToken

，然后执行

fetchUser

，我希望得到预期的结果。相反，我得到了一个

400

错误。