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

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

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

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

import { Auth } from "aws-amplify";

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

function openSignUp() {
  // ???
}

我没有找到federatedSignUp()或接受此选项的函数。

注册页面的网址是：

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

尽管我知道所有参数的值，但我不知道state参数的值，即使我不喜欢此解决方案，也很难立即在锚标记中使用它。

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

解决方法

这些值是您可以自己生成的值，只要它们遵循正确的模式，并且您可以稍后在 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 特定的内容。