如何直接打开 Amazon Cognito 托管 UI 的注册页面？

Question

在应用程序中，我尝试使用单独的按钮分别链接到 Amazon Cognito 用户池托管 UI 的注册和登录页面，但到目前为止我只能链接到登录页面。

我正在使用npm 中的AWS Amplify 包，我的代码可能如下所示：

import { Auth } from "aws-amplify";

//...
function openSignIn() {
  Auth.federatedSignIn();
}

function openSignUp() {
  // ???
}

我没有找到任何federatedSignUp()可以接受相关选项的函数。

注册页面的 URL 为：

<domain>/signup?redirect_uri=<redirect_uri>&response_type=<response_typ>&client_id=<client_id>&identity_provider=<identity_provider>&scopes=<scopes>&state=<state>

虽然我知道所有参数的值，但我不知道参数的值state，这使得很难在锚标记中立即使用它，即使我不喜欢这个解决方案。

有没有适当/优雅的解决方案？

Answer 1

这些值是您可以自己生成的值，只要它们遵循正确的模式即可，并且您可以稍后在 OAuth 流程中使它们可用。所需的值及其格式取决于该托管 UI/用户池的特定 Cognito 实现以及您使用它的方式。

下面是一些可以帮助您入门的代码（伪 Nodejs）：

    var crypto = require('crypto');

    function getRandomString () {
          const randomItems = new Uint32Array(28);
          var bytes = crypto.randomBytes(28);
          randomItems.set(bytes);
          const binaryStringItems = randomItems.map(dec => `0${dec.toString(16).substr(-2)}`)
          return binaryStringItems.reduce((acc, item) => `${acc}${item}`, '');
    }
    
    var state = getRandomString();
    var code_verifier = getRandomString();
    var code_challenge = crypto.createHash('sha256').update(code_verifier).digest('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
    
    var redirect_url  = "https://"+domain+".auth."+region+".amazoncognito.com/oauth2/authorize?response_type=code&state="+state+"&client_id="+appClientId+"&redirect_uri="+redirectURI+"&scope=openid&code_challenge_method=S256&code_challenge="+code_challenge;

这假设了有关 Cognito 设置以及如何利用它的许多事情（例如，范围是 openid，挑战是 S256），但希望它可以为您提供一些指导。在传递这些内容之前，您需要将其中一些内容存储在本地：

https://betterprogramming.pub/how-to-securely-implement-authentication-in-single-page-applications-670534da746f

抱歉，这不是 Amplify 更具体的内容。