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

# 自訂託管 UI （傳統） 品牌
<a name="hosted-ui-classic-branding"></a>

您可以使用 AWS 管理主控台或 AWS CLI 或 API，為託管 UI 指定傳統自訂設定。您可以上傳要顯示在應用程式中的自訂標誌影像。您也可以將一些層疊樣式表 (CSS) 選項套用至 UI 的外觀和風格。

您可以自訂 UI 預設值，並使用特定設定覆寫個別[應用程式用戶端](cognito-terms.md#term-appclient)。Amazon Cognito 會將預設組態套用至每個沒有用戶端層級設定的應用程式用戶端。

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

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

## 在傳統品牌中指定自訂標誌
<a name="cognito-user-pools-app-ui-customization-logo"></a>

Amazon Cognito 會將您的自訂標誌置中於 [登入端點](login-endpoint.md) 輸入欄位的上方。

為您的自訂託管 UI 標誌選擇可縮放為 350 x 178 像素的 PNG、JPG 或 JPEG 檔案。您的標誌檔案大小不得超過 100 KB，或在 Amazon Cognito 編碼為 Base64 之後的大小不得超過 130 KB。若要在 API [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) `ImageFile`中設定 ，請將 檔案轉換為 Base64-encoded的文字字串，或在 中提供檔案路徑 AWS CLI，並讓 Amazon Cognito 為您編碼。

## 在傳統品牌中指定 CSS 自訂
<a name="cognito-user-pools-app-ui-customization-css"></a>

您可以為託管的應用程式頁面自訂 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。
+ **color** 是文字顏色，必須是[合法的 CSS 顏色值](https://www.w3schools.com/cssref/css_colors_legal.php)。

**輸入欄位**  
+ **width** (寬度) 是以包含區塊的百分比表示的寬度。
+ **height** 是輸入欄位的高度，以像素 (px) 為單位。
+ **color** 是文字顏色，可以是任何標準 CSS 顏色值。
+ **background-color** 是輸入欄位的背景顏色，可以是任何標準 CSS 顏色值。
+ **border** 是標準 CSS 框線值，用以指定應用程式視窗框線的寬度、透明度和顏色。寬度可以是從 1px 到 100px 的任何值。透明度可以是純色或無。顏色可以是任何標準顏色值。

**文字描述**  
+ **padding-top** 是文字描述與上邊框的距離。
+ **padding-bottom** 是文字描述與下邊框的距離。
+ **display** 可以是 `block` 或 `inline`。
+ **font-size** 是文字描述的字型大小。
+ **color** 是文字顏色，必須是[合法的 CSS 顏色值](https://www.w3schools.com/cssref/css_colors_legal.php)。

**提交按鈕**  
+ **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** 是 IdP 區段標頭的文字顏色，例如**使用您的公司 ID 登入**。必須是[合法的 CSS 顏色值](https://www.w3schools.com/cssref/css_colors_legal.php)。

**法律文字**  
+ **color** 是文字顏色，可以是任何標準 CSS 顏色值。
+ **font-size** 是字型大小。
自訂 **Legal text** (法規文字) 時，您正在自訂會在登入頁面社交身分提供者下顯示的訊息 **We won't post to any of your accounts without asking first** (我們不會在沒有事先詢問的情況下發佈到您的任何帳戶)。

**標誌**  
+ **max-width** 是寬度上限，以包含區塊的百分比表示。
+ **max-height** 是高度上限，以包含區塊的百分比表示。
+ **background-color** 是具有透明區段之日誌的背景顏色。必須是[合法的 CSS 顏色值](https://www.w3schools.com/cssref/css_colors_legal.php)。

**輸入欄位焦點**  
+ **border-color** 是輸入欄位的顏色，可以是任何標準 CSS 顏色值。
+ **outline** 是輸入欄位的框線寬度，以像素為單位。

**社交按鈕**  
+ **height** 是按鈕的高度，以像素 (px) 為單位。
+ **text-align** 是文字對齊方式設定。其可能是 `left`、`right` 或 `center`。
+ **width** 是按鈕文字的寬度，以包含區塊的百分比表示。
+ **margin-bottom** 是底部邊界設定。

**密碼檢查有效**  
+ **color** 是 `"Password check valid"` 訊息的文字顏色，可以是任何標準 CSS 顏色值。

## 在 中使用傳統品牌自訂託管 UI AWS 管理主控台
<a name="cognito-user-pools-app-ui-customization-console"></a>

您可以使用 AWS 管理主控台 為您的應用程式指定 UI 自訂設定。

**注意**  
您可以利用使用者集區的詳細規格來建構下列 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 主控台](https://console.aws.amazon.com/cognito/home)。

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

1. 從[網域索引標籤建立](cognito-user-pools-assign-domain.md)**網域**，或更新現有的網域。在**品牌版本**下，將網域設定為使用**託管 UI （傳統）**。

1. 選擇**受管登入**功能表。

1. 若要為所有應用程式用戶端自訂 UI 設定，請在**託管 UI 設定**下尋找**樣式**，然後選取**編輯**。

1. 若要自訂一個應用程式用戶端的 UI 設定，請前往**應用程式用戶端**功能表，然後選取您要修改的應用程式用戶端，然後尋找**託管 UI （傳統） 樣式**，然後選取**覆寫**。選擇 **Edit** (編輯)。

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

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

## 在使用者集區 API 和 中使用傳統品牌來自訂託管 UI AWS CLI
<a name="cognito-user-pools-app-ui-customization-cli-api"></a>

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

**若要為使用者集區的內建應用程式 UI 取得 UI 自訂設定，請使用下列的 API 操作。**
+ AWS CLI: `aws cognito-idp get-ui-customization`
+ AWS API： [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_GetUICustomization.html)

**若要為使用者集區的內建應用程式 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： [https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html)