如何直接打開 Amazon Cognito 托管 UI 的注冊頁面？

Question

在一個應用程序中，我嘗試使用單獨的按鈕分別鏈接到 Amazon Cognito 用戶池的托管 UI 的注冊和登錄頁面，但到目前為止我只能鏈接到登錄頁面。

我正在使用來自 npm 的AWS Amplify Package ，我的代碼可能類似於以下內容：

import { Auth } from "aws-amplify";

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

function openSignUp() {
  // ???
}

我沒有發現federatedSignUp()或 function 會接受有關它的選項。

注冊頁面的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。

Answer 2

我不確定這算不算優雅，但這是一種方法：

1. 覆蓋 Amplify Auth urlOpener配置。
2. 啟動Auth.federatedSignIn()
3. 修改抓取的URL 形式為/oauth2/authorize? 並替換為/signup? .
4. 打開 URL。
5. 這將啟動 Cognito 托管 UI 注冊，然后照常進行。

筆記：

1. 有關 Cognito 托管 UI URL 的詳細信息，請參見此處。
2. 此處和此處有關 Amplify Auth 配置的詳細信息。
3. 默認的launchUri實現僅使用window.open() - 請參見此處。

有關實施的更多詳細信息，請參見下文。

定義您自己的urlOpener ：

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

配置放大：

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