如何在 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 时，如果此 redirect_uri 列在 Auth0 配置中，我确实会正确重定向到 redirect_uri。并在# 之后将新令牌添加到url。

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

---

更新过期令牌

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

当我在本地安装 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. 使用具有response_mode web_message 的URL 和与我的audience 对应的postMessageOrigin 的值创建SilentAuthenticationHandler 的实例
4. 在隐藏的 iframe 中调用 SilentAuthenticationHandler, withusePostMessageset totrue, to open the/authorize` 端点上的 login 方法
5. 解析作为redirect_uri 传递的callback 页面的URL 中的哈希，然后使用Window.parent.postMessage(parsedParams, '*') 将其发送回主窗口

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

不幸的是，我不知道如何使用这些新凭据更新我的 Nuxt。我在 @nuxtjs/auth 包中寻找灵感，但我能想到的最好的东西是这样的：

this.$auth.setUserToken(token);

我尝试将其与例如。 fetchUser 和 setUser，但无论我尝试什么，它都会继续 *** 我的会话并在重新加载时触发 400 错误。

我做错了什么？

Answer 1

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

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

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

• Renewal Code
• Blog Post

Answer 2

如果您想根据我的经验在 nuxt 应用程序中使用身份验证，您可以使用的最好的方法是 nuxt auth 模块

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

如果你使用它，你可以注销：

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