如何在 AWS Cognito ui 中使用 nuxt auth 模块

Posted 2023-02-22

【中文标题】如何在 AWS Cognito ui 中使用 nuxt auth 模块

【英文标题】：How to use nuxt auth module with AWS Cognito ui

【发布时间】：2021-02-01 16:06:26

【问题描述】：

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

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

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

nuxt auth module guide 说要设置中间件，但 afaik 中间件仅适用于服务器端呈现的应用程序。 我需要激活vuex store，但我不知道该放什么。 auth 模块是否需要一些特定的东西，还是我只是在目录中创建一个空文件？ 如何告诉它何时重定向或从查询参数中读取令牌？ 如何解析 JWT 令牌（如果不是自动解析）并从中获取一些有效负载信息，例如用户名？ 是否自动配置 axios 模块以使用此功能？

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

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

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

【问题讨论】：

您找到解决方案了吗？如果有，可以分享一下吗？

目前还没有解决方案，但我会在假期花更多的时间来解决这个问题。如果我找到一个好的解决方案，会在这里发布。

正是我正在寻找的问题。如果您找到，请发布答案。

【参考方案1】：

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

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

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

nuxt.config.js：

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

并回答您的其他问题：

nuxt auth 模块指南说要设置中间件，但 afaik 中间件仅适用于服务器端呈现的应用程序。

我用s-s-r: 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 模块以使用此功能？

是的。