如何直接打开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

我不确定这是否算优雅，但有一种方法：

1. 覆盖Amplify AuthurlOpener配置
2. 启动Auth.federatedSignIn()
3. 修改表单/oauth2/authorize?的捕获URL，并将其替换为/signup?
4. 打开URL
5. 这将启动Cognito Hosted UI注册，然后正常进行

备注：

1. 关于Cognito托管UI URL的详细信息，请点击此处
2. 此处(手动配置选项卡(和此处的Amplify Auth配置详细信息
3. 请注意，您可以"；重新配置"；根据需要放大auth(Amplify.configure()((根据我的观察，多次有效(，如果这是上述流程的一部分
4. 默认的launchUri实现仅使用window.open()—请参阅此处

下面是有关实现的更多详细信息。

定义自己的urlOpener:

const urlOpener = async (url: string, redirectUrl: string): Promise<any> => {
const signupUrl = url.replace(//oauth2/authorize?/, '/signup?');
return launchUri(signupUrl);
};

配置Amplify:

const config = {
Auth: {
...
oauth: {
...
urlOpener,
},
},
};
Amplify.configure(config);

Answer 2

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