自訂內建的註冊與登入網頁 - Amazon Cognito
為應用程式指定自訂標誌為應用程式指定 CSS 自訂項目為使用者集區指定應用程式使用者界面自訂設定 (AWS Management Console)為使用者集區指定應用程式 UI 自訂設定 (AWS CLI 和 AWS API)

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

自訂內建的註冊與登入網頁

您可以使用 AWS Management Console (或是 AWS CLI 或 API) 來指定內建應用程式 UI 體驗的自訂設定。您可以上傳要顯示在應用程式中的自訂標誌影像。您也可以使用階層式樣式表 (CSS) 來自訂 UI 的外觀。

您可以為單一用戶端 (使用特定 clientId) 或為所有用戶端 (將 clientId 設定為 ALL) 指定應用程式使用者界面自訂設定。如果您指定 ALL，則會將預設組態用於先前未設定使用者界面自訂的每個用戶端。如果您為特定用戶端指定使用者界面自訂設定，則不會再回復到 ALL組態。

設定 UI 自訂的請求大小不得超過 135 KB。在極少數情況下，請求標頭、CSS 檔案和標誌的總和可能超過 135KB。Amazon Cognito 會將影像檔案編碼為 Base64。這會將 100 KB 影像的大小增加到 130 KB，使得請求標頭和 CSS 僅保留五 KB 可用。如果請求太大，AWS Management Console 或您的 SetUICustomization API 請求會傳回 request parameters too large 錯誤。請將您的標誌影像調整為不超過 100KB，並將 CSS 檔案調整為不超過 3 KB。您不能單獨設定 CSS 和標誌自訂。

注意

如果要自訂 UI，則您必須為使用者集區設定網域。

Amazon Cognito 會將您的自訂標誌置中於 登入端點 輸入欄位的上方。

為您的自訂託管 UI 標誌選擇可縮放為 350 x 178 像素的 PNG、JPG 或 JPEG 檔案。您的標誌檔案大小不得超過 100 KB，或在 Amazon Cognito 編碼為 Base64 之後的大小不得超過 130 KB。若要在 API 的 SetUICustomization 中設定 ImageFile，請將檔案轉換為 Base64 編碼的文字字串，或者在 AWS CLI 中提供檔案路徑，然後讓 Amazon Cognito 為您編碼。

為應用程式指定 CSS 自訂項目

您可以為託管的應用程式頁面自訂 CSS，但有下列限制：

  • 您可以使用以下任一 CSS 類別名稱：

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • idpDescription-customizable

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • passwordCheck-valid-customizable

    • passwordCheck-notValid-customizable

    • redirect-customizable

    • socialButton-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • 屬性值可以包含 HTML，但下列值除外：@import、@supports、@page 或 @media 陳述式或 Javascript。

您可以自訂下列 CSS 屬性。

標籤

  • font-weight 是 100 的倍數，從 100 到 900。

輸入欄位

  • width (寬度) 是以包含區塊的百分比表示的寬度。

  • height 是輸入欄位的高度，以像素 (px) 為單位。

  • color 是文字顏色，可以是任何標準 CSS 顏色值。

  • background-color 是輸入欄位的背景顏色，可以是任何標準 CSS 顏色值。

  • border 是標準 CSS 框線值，用以指定應用程式視窗框線的寬度、透明度和顏色。寬度可以是從 1px 到 100px 的任何值。透明度可以是純色或無。顏色可以是任何標準顏色值。

文字描述

  • padding-top 是文字描述與上邊框的距離。

  • padding-bottom 是文字描述與下邊框的距離。

  • display 可以是 block 或 inline。

  • font-size 是文字描述的字型大小。

提交按鈕

  • font-size 是按鈕文字的字型大小。

  • font-weight 是按鈕文字的字型粗細：bold、italic 或 normal。

  • margin 是包含四個值的字串，指出按鈕的上、右、下和左邊界大小。

  • font-size 是文字描述的字型大小。

  • width 是按鈕文字的寬度，以包含區塊的百分比表示。

  • height 是按鈕的高度，以像素 (px) 為單位。

  • color 是按鈕文字的顏色，可以是任何標準 CSS 顏色值。

  • background-color 是按鈕的背景顏色，可以是任何標準顏色值。

橫幅

  • padding 是包含四個值的字串，指出橫幅與上、右、下和左邊框的距離大小。

  • background-color 是橫幅的背景顏色，可以是任何標準 CSS 顏色值。

提交按鈕滑鼠游標暫留

  • color 是您將滑鼠游標移到按鈕上時，按鈕呈現的前景顏色。可以是任何標準 CSS 顏色值。

  • background-color 是您將滑鼠游標移到按鈕上時，按鈕呈現的背景顏色。可以是任何標準 CSS 顏色值。

身分提供者按鈕滑鼠游標暫留

  • color 是您將滑鼠游標移到按鈕上時，按鈕呈現的前景顏色。可以是任何標準 CSS 顏色值。

  • background-color 是您將滑鼠游標移到按鈕上時，按鈕呈現的背景顏色。可以是任何標準 CSS 顏色值。

密碼檢查無效

  • color 是 "Password check not valid" 訊息的文字顏色，可以是任何標準 CSS 顏色值。

背景介紹

  • background-color 是應用程式視窗的背景顏色，可以是任何標準 CSS 顏色值。

錯誤訊息

  • margin 是包含四個值的字串，指出上、右、下和左邊界大小。

  • padding 是與邊框的距離大小。

  • font-size 是字型大小。

  • width 是錯誤訊息的寬度，以包含區塊的百分比表示。

  • background 是錯誤訊息的背景顏色，可以是任何標準 CSS 顏色值。

  • border 是包含三個值的字串，用以指定框線的寬度、透明度和顏色。

  • color 是錯誤訊息的文字顏色，可以是任何標準 CSS 顏色值。

  • box-sizing 可用來向瀏覽器指出大小屬性 (寬度和高度) 應該包含哪些項目。

身分提供者按鈕

  • height 是按鈕的高度，以像素 (px) 為單位。

  • width 是按鈕文字的寬度，以包含區塊的百分比表示。

  • text-align 是文字對齊方式設定。其可能是 left、right 或 center。

  • margin-bottom 是底部邊界設定。

  • color 是按鈕文字的顏色，可以是任何標準 CSS 顏色值。

  • background-color 是按鈕的背景顏色，可以是任何標準 CSS 顏色值。

  • border-color 是按鈕框線的顏色，可以是任何標準 CSS 顏色值。

身分提供者描述

  • padding-top 是描述與上邊框的距離。

  • padding-bottom 是描述與下邊框的距離。

  • display 可以是 block 或 inline。

  • font-size 是描述的字型大小。

法律文字

  • color 是文字顏色，可以是任何標準 CSS 顏色值。

  • font-size 是字型大小。

注意

自訂 Legal text (法規文字) 時，您正在自訂會在登入頁面社交身分提供者下顯示的訊息 We won't post to any of your accounts without asking first (我們不會在沒有事先詢問的情況下發佈到您的任何帳戶)。

標誌

  • max-width 是寬度上限，以包含區塊的百分比表示。

  • max-height 是高度上限，以包含區塊的百分比表示。

輸入欄位焦點

  • border-color 是輸入欄位的顏色，可以是任何標準 CSS 顏色值。

  • outline 是輸入欄位的框線寬度，以像素為單位。

社交按鈕

  • height 是按鈕的高度，以像素 (px) 為單位。

  • text-align 是文字對齊方式設定。其可能是 left、right 或 center。

  • width 是按鈕文字的寬度，以包含區塊的百分比表示。

  • margin-bottom 是底部邊界設定。

密碼檢查有效

  • color 是 "Password check valid" 訊息的文字顏色，可以是任何標準 CSS 顏色值。

為使用者集區指定應用程式使用者界面自訂設定 (AWS Management Console)

您可以使用 AWS Management Console來為您的應用程式指定使用者界面自訂設定。

注意

您可以利用使用者集區的詳細規格來建構下列 URL，並將其輸入瀏覽器中，以檢視採用您的自訂項目的託管使用者界面： https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>。您可能需要等到一分鐘後再重新整理瀏覽器，在主控台中所做的變更才會出現。

您的網域會顯示在 Domain (網域) 下的 App integration (應用程式整合) 索引標籤上。您的應用程式用戶端 ID 和回呼 URL 會顯示在 App clients (應用程式用戶端) 下。

指定應用程式使用者界面自訂設定

  1. 登入 Amazon Cognito 主控台。

  2. 在導覽窗格中，選擇 User Pools (使用者集區)，然後選擇您要編輯的使用者集區。

  3. 選擇 App integration (應用程式整合) 索引標籤。

  4. 若要自訂所有應用程式用戶端的 UI 設定，請找到 Hosted UI customization (託管 UI 自訂)，然後選取 Edit (編輯)。

  5. 若要自訂一個應用程式用戶端的 UI 設定，請找到 應用程式用戶端 並選取您要修改的應用程式用戶端，然後找到 託管 UI 自訂，然後選取 編輯。若要將應用程式用戶端從使用者集區預設自訂切換為用戶端特定自訂，則請選取 Use client-level settings (使用用戶端層級設定)。

  6. 若要上傳您自己的標誌影像檔案，請選擇 Choose file (選擇檔案) 或者 Replace current file (取代目前的檔案)。

  7. 若要自訂託管 UI CSS，請下載 CSS template.css 並使用您想要自訂的值修改範本。只有包含在範本中的金鑰可以與託管 UI 搭配使用。新增的 CSS 金鑰不會反映在您的 UI 中。自訂 CSS 檔案之後，請選擇 Choose file (選擇檔案) 或者 Replace current file (取代目前的檔案) 來上傳您的自訂 CSS 檔案。

為使用者集區指定應用程式 UI 自訂設定 (AWS CLI 和 AWS API)

使用下列命令來為您的使用者集區指定應用程式使用者界面自訂設定。

若要為使用者集區的內建應用程式 UI 取得 UI 自訂設定，請使用下列的 API 操作。
若要為使用者集區的內建應用程式 UI 進行 UI 自訂設定，請使用下列的 API 操作。

  • AWS CLI 從影像檔案：aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • AWS CLI，影像編碼為 Base64 二進制文字：aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS API：SetUICustomization