如何使用 JavaScript 创建静态网页，以便使用 Azure 的 AWS SSO 调用 AWS API

Question

我有：

• 包含浏览器客户端 JavaScript 的静态网页。
• 使用 Azure AD 的 AWS SSO。
• ssoStartUrl、ssoAccountId、ssoRegion，以及 ssoRoleName（如果需要）。
• 用于托管网页的 S3 存储桶（在向 COTS 团队提供代码之前）。

我没有的：

• 能够将 .aws/config 或凭证放在每个人的 PC 上。
• 运行 node.js 或任何其他服务器端逻辑（目前）的服务器。我确实希望有一天能从 Camunda 获得这项工作，但只是一小步......
• React / Angular / 等... JavaScript 将从各种不同的地方调用 工具（主要是 COTS）有自己的东西。

我真正的 AWS 目标：用于搜索的 Kendra，还有其他 AWS API。

作为奖励，如果 JavaScript 也可以在服务器端运行，那就太好了，但我认为服务器端 JavaScript 与客户端匹配的承诺很久以前就消失了。如今，我什至无法编写 AWS JavaScript 并只能浏览它。我必须使用一些 Webpack 工具运行一些 npm run build 命令，因为 AWS 坚持要求我使用他们最新的 JavaScript 来执行此操作。但是，如果有人足够聪明，能够弄清楚如何在客户端或服务器中使用相同的 JavaScript，我会很高兴。

所以，现在的问题是用户必须使用 AWS SSO 从浏览器中运行的普通旧 JavaScript 获取凭证...是的，我在一次失败的尝试中也遇到了 CORS 问题。我花了几个小时在一些“polyfill”上添加行到 Webpack 和包中。

我知道这是可能的，因为AWS提供了React / Angular示例。然而，无论出于何种原因，AWS 并没有提供基本的 JavaScript 示例。

我需要编写将在浏览器中运行的代码，通过 Azure 进行 SSO 登录，并提供可用的 AWS 凭证。接下来我可以尝试什么？

Answer 1

首先，我不同意 SPA 就“传统 Web 应用程序”展开战争，但这是稍后讨论的话题。这是一个非常复杂的问题，需要在 IdP 集成、SPA、后端中实现......需要解决很多问题......

我知道这件事真的很难弄清楚！这么多活动部件。

我建议您真正深入了解 Oauth 2.0 和 OpenID Connect 的主题。 了解如何实现身份验证和授权流程（特别是 SPA）非常重要。

您可以想到这样的解决方案：https://aws.amazon.com/blogs/mobile/building-an-application-with-aws-amplify-amazon-cognito-and-an-openid- connect-identity-provider/ 在此草图中，缺少的部分是 AWS SSO 与 Cognito 集成时的情况。

1. 创建 AWS Cognito 用户池 - 处理身份验证和授权。
2. 将您配置的 AWS SSO 作为身份提供商添加到用户池 - 以便 Cognito 能够处理 AWS SSO 用户。 （顺便说一句，如果需要，您可以直接使用 Azure ADs SAML 断言）

• https://docs.aws.amazon.com/cognito/latest/developerguide/saml-identity-provider.html
• https://docs.aws.amazon.com/singlesignon/latest/userguide/samlapps.html（此步骤显示您需要执行哪些操作才能从 AWS SSO 获取 SAML 元数据 - 稍后需要将其添加到Cognito 联合身份）
• （按照前面的链接步骤）https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-saml-idp.html

3. 设置 Cognito 应用程序 - 使用 PKCE 身份验证流程

• https://aws.amazon.com/blogs/mobile/understanding-amazon-cognito-user-pool-oauth-2-0-grants/（可以跟进不同的流程，我建议我们使用 PKCE或隐式流程（如果必须的话）

4. 在您的 SPA 中，使用 AWS amplify 库来处理身份验证和授权 例子：

• https://docs.amplify.aws/lib/auth/advanced/q/platform/js/
• https://repost.aws/questions/QU_TvlD2NbQoyzXuW4aWQ3aw/cognito-azure-ad-amplify-flow-of-the-sso-auth-from-application-perspective

5. 创建 AWS API 网关并与您想要使用的所有服务集成。您可以调用 lambda 并让 lambda 做脏活，或者您可以设置 API 集成请求 - https://docs.aws.amazon.com/apigateway/latest/developerguide/api-gateway-integration-设置-集成-request.html
6. 在 API 网关中设置 Cognito 授权功能。 （它将检查 AWS Amplify 库从您的 SPA 发送的访问令牌）https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-enable-cognito-user-pool.html

谢谢

Answer 2

要添加 Sandor Bakos 的答案，某些链接不再有效，因此请使用回程机，https://web.archive.org/web/20220326033138/https://aws.amazon.com/blogs/mobile/understanding例如 -amazon-cognito-user-pool-oauth-2-0-grants/。