如何利用 AWS Cognito 托管 UI 进行授权代码授予流程

Posted 2023-03-27

【中文标题】如何利用 AWS Cognito 托管 UI 进行授权代码授予流程

【英文标题】：How to make use of AWS Cognito Hosted UI for authorization code grant flow

【发布时间】：2021-12-31 19:22:48

【问题描述】：

我正在使用 Amplify CLI 为我的 React Web 应用程序创建一个 Cognito 用户池。我发现 withAuthentication UI 不能满足我的需求，因为我无法自定义登录表单（比如删除电话号码字段）或仅保护我的应用的一部分。

相反，我想使用 Cognito 提供的托管 UI，但我正在为如何实现授权代码授予流程而苦恼。是否有一个易于使用的 npm 库来帮助我解决这个问题？

我已尝试按照docs 中的说明直接调用 /authorize 端点，但从 localhost 调用时出现 cors 错误。我还尝试使用 window.location.ref 重定向到 Cognito 控制台提供链接的托管 URL。这可行，但是当返回到我指定的页面时（在回调之后），解析查询字符串中的代码，并向 /token 端点发送一个 POST 请求，如docs 中所述，我得到一个 400 状态代码。我还需要在这里做些什么吗？

我对 OAuth 很陌生，因此我希望能提供任何简单的解释或指向新手可以理解的基本材料的指针！

【参考方案1】：

我的资源将代码流与 Cognito 结合使用，并为您提供可比较的东西：

Code Sample Blog Post

几点建议：

在您的用户池中注册 OAuth 客户端以修复 CORS 错误 从浏览器跟踪 OAuth messages 并专注于让它们与我的相同

我的代码示例很容易在我的 Cognito 端点上运行。虽然它不使用 React 或 Amplify - 但是一旦您了解了原理，应该很容易将它们移植到您自己的技术选择中。