如何在 AWS Cognito ui 中使用 nuxt 身份验证模块

Question

我想构建一个具有静态前端（target: 'static'在 nuxt.config.js 中）和使用ktor的后端的应用程序。该应用程序需要对用户进行身份验证，但我不想自己管理密码和事物，因此我想与 AWS Cognito 集成。根据我的理解，我认为这是我想要的工作流程：

1. 用户匿名浏览网站（无需登录）
2. 他们执行一些需要登录或明确单击登录按钮的操作。
3. 用户被重定向到 AWS Cognito ui 进行登录。他们可以注册新帐户、使用现有帐户登录或使用其他提供商登录（在为其配置 Cognito 之后）。
4. Cognito ui 将用户重定向回应用程序 ui，但在查询参数中使用 JWT 令牌（我认为这就是 Cognito 的做法）
5. JWT 令牌（s？）存储在 vuex store/nuxt auth 中
6. 向后端发出请求时使用令牌。以及在用户通过身份验证时显示一些额外的组件/操作以及他们的基本信息，如用户名（jwt 的一部分？）

我想我已经正确设置了 cognito 和 ktor 后端，但我不知道如何开始使用前端。

• 该nuxt验证模块指南说，设立中间件，但据我所知中间件仅用于服务器端渲染应用程序。
• 我需要激活vuex 商店，但我不知道在那里放什么。auth 模块是否需要一些特定的东西，还是我只是在目录中创建一个空文件？
• 我如何告诉它何时从查询参数重定向或读取令牌？
• 如何解析 JWT 令牌（如果它不自动）并从中获取一些有效负载信息，例如用户名？
• axios 模块是否会自动配置以使用它？

我在 auth 模块 repo 中发现了这个旧的 github 问题195，但我相信这是当“登录表单”/ui 是 nuxt 应用程序的一部分并且客户端在没有“重定向”的情况下使用 cognito api 时。

不幸的是，这个堆栈中的所有内容对我来说都是新的，因此感谢任何帮助。如果已经有一个项目在做类似的事情，我会查看代码并尝试弄清楚，但现在我迷路了。

2020 年 12 月 31 日更新，主要是为了让我很快就能悬赏：https ://auth0.nuxtjs.org/ 上的现场演示似乎在做我正在寻找的事情，但随后 github 页面读到了我显示其他内容https://github.com/nuxt/example-auth0。我也没有看到在任何地方使用的中间件/插件。大部分都是通过nuxt config配置的，所以它只适用于auth0自定义提供程序？

Answer 1

我和你遇到了同样的问题：

我如何告诉它何时重定向或从查询参数读取令牌？

我通过配置 auth.redirect.callback 来匹配 cognito 将使用令牌回调的端点来解决这个问题。我相信这会告诉中间件何时在查询参数中查找新令牌。

nuxt.config.js：

  auth: {
    redirect: {
      callback: '/signin',
      ...
    },
    strategies: {
      awsCognito: {
        redirectUri: "http://localhost:8080/signin",
        ...
      }
    }
  }

并回答您的其他问题：

nuxt auth 模块指南说要设置中间件，但据我所知，中间件仅适用于服务器端渲染的应用程序。

我尝试了这个设置ssr: false，它仍然工作正常。

我需要激活 vuex 商店，但我不知道在那里放什么。auth 模块是否需要一些特定的内容，或者我只是在目录中创建一个空文件？

空index.js文件就可以了。

我如何告诉它何时重定向或从查询参数读取令牌？

请参阅上面的第一个答案。

如何解析 JWT 令牌（如果它不会自动解析）并从中获取一些有效负载信息，例如用户名？

从我最初的测试中，我发现当请求用户数据时，中间件将自动调用 userInfo 端点，例如this.$auth.user.email

    strategies: {
      awsCognito: {
        scheme: "oauth2",
        endpoints: {
          userInfo: "https://x.amazoncognito.com/oauth2/userInfo",

参考： https: //docs.aws.amazon.com/cognito/latest/developerguide/userinfo-endpoint.html

axios 模块是否会自动配置以利用它？

是的。