如何為 Amazon Cognito 設定託管 Web UI？

2 分的閱讀內容

我想要為 Amazon Cognito 使用者集區設定託管 Web UI，但我不確定要開啟哪些設定。該如何設定呢？

簡短描述

在 Amazon Cognito 中建立使用者集區，然後為其設定網域時，Amazon Cognito 會自動佈建託管 Web UI，讓您將註冊和登入頁面新增至應用程式。

如果您不確定如何對其進行設定或使用哪些設定 (例如要開啟的 OAuth 2.0 流程類型與範圍)，則請遵循本文中的步驟。

解決方案

如果尚未建立使用者集區，請予以建立，並在使用者集區中建立應用程式用戶端。然後，請遵循以下說明：

注意事項：以下指示會使用新 Amazon Cognito 主控台。

將網域名稱新增至使用者集區

在 Amazon Cognito 主控台中，選擇使用者集區，然後選擇您的使用者集區。
在應用程式整合下，選擇網域名稱，然後選擇動作。
選擇建立 Cognito 網域，以新增您自己的網域字首至 Amazon Cognito 託管網域。或者，選擇建立自訂網域以新增您自己的自訂網域。

變更應用程式用戶端設定

在 Amazon Cognito 主控台中，選擇使用者集區，然後選擇您的使用者集區。
在應用程式整合下，從應用程式用戶端及分析區段選擇您的應用程式用戶端。
從託管 UI 區段中選擇編輯。
執行下列動作：
對於允許的回呼 URL，輸入將接收授權碼的 Web 應用程式 URL。使用者登入時，系統會將他們重新導向至這裡。
對於允許的登出 URL (選用)，輸入您的使用者登出時，您想要將他們重新導向的 URL。
對於身分提供者，請從下拉式清單中選擇 Cognito 使用者集區。
對於 OAuth 2.0 授予類型，請選取授權碼授予或隱含授予 OAuth 2.0 驗證流程。機密與公有用戶端會使用授權碼授予類型來交換存取權杖的授權碼。僅在有特定原因而無法使用授權碼授予時，才會使用隱含授予類型。
對於 OpenID Connect 範圍，選取 openid 以及您想要 Amazon Cognito 在權杖中新增以便使用者進行驗證時使用的任何其他 OAuth 範圍。例如，電話與電子郵件。
對於自訂範圍，選取您想要為此應用程式授權的任何自訂範圍。
選擇儲存變更。

如需詳細資訊，請參閱設定使用者集區應用程式用戶端。

(選用) 自訂託管 Web UI

您可以新增自訂標誌或為託管 Web UI 自訂 CSS。如需詳細資訊，請參閱自訂內建登入及註冊網頁。

(選用) 建構託管 Web UI 的 URL

如果您想要控制託管 Web UI 的登入 URL 中包含哪些參數，請手動建構 URL。

在 Amazon Cognito 主控台中，選擇使用者集區，然後選擇您的使用者集區。
在應用程式整合下，複製網域區段下的網域 URL。然後，將該 URL 貼至文字編輯器作為參考。
在應用程式用戶端及分析下，按一下您的用戶端名稱。
將用戶端 ID 複製到剪貼簿。然後，將 ID 貼至文字編輯器作為參考。
將其中一個允許的回呼 URL 複製到剪貼簿。然後，將該 URL 貼至文字編輯器作為參考。
將剛才複製的資訊一起貼至此格式以建構託管 Web UI 的 URL：
domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
例如：https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com
-或-
選擇應用程式用戶端區段中的檢視託管 UI，以存取登入端點的預設 URL。然後，依照之前的詳細資料取代部分 URL。

如果您之前為 OAuth 2.0 授予類型開啟了授權碼授予，則使用此 URL 會在使用者登入時提示 Amazon Cognito 傳回授權碼。如果您之前為 OAuth 2.0 授予類型開啟了隱含授予，且您想要 Amazon Cognito 在使用者登入時改為傳回存取權杖，則請將 URL 中的 response_type=code 取代為 response_type=token。