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

# 品牌編輯器和自訂受管登入
<a name="managed-login-brandingeditor"></a>

品牌編輯器是受管登入網頁的視覺化設計和編輯工具。它內建於 Amazon Cognito 主控台。在品牌編輯器中，您可以從登入頁面的預覽開始，並可以進入快速設定選項或使用進階選項的詳細檢視。您可以修改和預覽樣式參數，或新增自訂背景影像和標誌。您可以設定淺色模式和深色模式。

![\[Amazon Cognito 使用者集區的品牌編輯器視覺化編輯器預覽。\]](http://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png)


若要開始，請建立您可以套用至使用者集區或應用程式用戶端的樣式。

**開始使用品牌編輯器**

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

1. 刪除現有的應用程式用戶端樣式，如果有的話。

   1. 在**應用程式用戶端**功能表中，選取您的應用程式用戶端。

   1. 在**受管登入樣式**下，選取指派給應用程式用戶端的 syle。

   1. 選擇**刪除樣式**。確認您的選擇。

1. 導覽至使用者集區中的**受管登入**選單。如果您尚未，請依照提示選取包含受管登入[的功能計劃](cognito-sign-in-feature-plans.md)。如果您想要查看品牌編輯器而不進行變更，也可以選取**預覽此功能**。

1. 在**樣式**下，選擇**建立樣式**。

1. 選擇您要為其指派樣式的應用程式用戶端，然後選取**建立**。您也可以建立新的應用程式用戶端。

1. Amazon Cognito 主控台會啟動品牌編輯器。

1. 選擇您要開始編輯的標籤，或選取**啟動編輯器**並輸入[快速設定](#branding-designer-quick-setup)。下列索引標籤可供使用：  
**預覽版**  
了解您目前的選擇在受管登入頁面中的外觀。  
**基礎**  
設定整體佈景主題、設定外部身分提供者的連結，以及樣式表單欄位。  
**元件**  
設定標頭、頁尾和個別 UI 元素的樣式。

1. 若要選擇初始設定，請輸入快速設定。選取**變更設定類別**，然後選擇**快速設定**。當您選取**繼續**時，品牌編輯器會啟動一組基本選項供您設定。

## 文字和當地語系化
<a name="branding-designer-loc"></a>

您無法在品牌編輯器中修改或當地語系化文字。反之，請將`lang`查詢參數新增至您分發給使用者的 URL。此參數可讓您的受管登入頁面當地語系化為多種可用語言之一。如需詳細資訊，請參閱[受管登入當地語系化](cognito-user-pools-managed-login.md#managed-login-localization)。

## 快速設定
<a name="branding-designer-quick-setup"></a>

**啟動品牌編輯器**按鈕會為您的受管登入組態載入視覺化編輯器，您可以在其中選擇各種主要自訂選項。當您進行選擇時，Amazon Cognito 會在預覽視窗中轉譯您的受管登入變更。若要返回詳細設定選單，請選取**變更設定類別**按鈕。

**整體外觀和感覺應該是什麼？**  
設定受管登入的基本佈景主題設定。    
**顯示模式**  
為您的受管登入選擇淺色模式、深色模式或適應性體驗。當 Amazon Cognito 轉譯受管登入時，適應性設定會延遲到使用者的瀏覽器偏好設定。選擇瀏覽器自適應模式時，您可以選擇不同的顏色和標誌影像，用於淺色和深色模式。  
**Spacing**  
設定頁面中元素之間的預設間距。  
**邊界半徑**  
設定元素外部邊界的四捨五入深度。

**頁面背景看起來如何？**    
**背景類型**  
**顯示影像**核取方塊指出您想要背景影像還是設定純色背景顏色。  

1. 若要使用影像，請選取**顯示影像**，然後選擇淺色和深色模式的背景影像。您也可以為影像未涵蓋的背景區域設定深色模式和淺色模式**頁面背景顏色**。

1. 若要僅對背景使用顏色，請取消選取**顯示影像**，然後選擇淺色模式和深色模式**頁面背景顏色**。

**表單看起來應該如何？**  
設定受管登入的形式元素設定。表單項目的範例包括登入和程式碼提示。    
**水平對齊**  
設定表單欄位的水平對齊。  
**表單標誌**  
設定標誌影像的位置。  
**標誌影像**  
選擇要包含在淺色和深色模式表單元素中的標誌影像檔案。若要上傳影像，請選取**標誌影像**下拉式清單，選擇**新增資產**，然後新增標誌檔案。  
**主要品牌顏色**  
為淺色和深色模式設定佈景主題顏色。此顏色將作為背景顏色套用到分類為主要的所有元素。

**標頭看起來應該如何？**  
選擇是否要在受管登入頁面中包含 標頭。標頭可以包含標誌影像。    
**標頭標誌**  
設定 標頭中標誌影像的位置。  
**標誌影像**  
選擇要包含在 標頭中的標誌位置和標誌影像檔案。若要上傳影像，請選取**標誌影像**下拉式清單，選擇**新增資產**，然後新增標誌檔案。  
**標頭背景顏色**  
設定標頭背景的淺色和深色模式顏色。

## 詳細設定
<a name="branding-designer-advanced"></a>

在詳細設定檢視中，您可以修改**基礎**和元件中的個別**元件**。**預覽**索引標籤會顯示目前內容中的受管登入預覽，其中包含您的自訂。

![\[受管登入元件詳細組態的 AWS 管理主控台 螢幕擷取畫面。\]](http://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png)


若要輸入元件的視覺化編輯器，請在元件的圖磚中選擇編輯圖示。從佈景主題 Studio 編輯器，您可以使用**變更設定類別**按鈕在元件之間切換。

### 基礎
<a name="branding-designer-advanced-foundation"></a>

**應用程式樣式**  
設定受管登入組態的基本概念。此類別具有整體佈景主題、文字間距以及頁面標頭和頁尾的設定。

**顯示模式**  
為您的受管登入頁面選擇淺色模式、深色模式或適應性體驗。選擇瀏覽器自適應模式時，您可以選擇不同的顏色和標誌影像，用於淺色和深色模式。

**Spacing**  
設定頁面中元素之間的預設間距。

**身分驗證行為**  
為將使用者連接到外部身分提供者 (IdPs按鈕設定樣式。本節包含讓受管登入提示使用者取得電子郵件地址，並將其與其 [SAML 身分提供者識別符](cognito-user-pools-managing-saml-idp-naming.md)配對的選項**網域搜尋輸入**。

**表單行為**  
設定輸入表單的樣式：輸入的位置、顏色和元素的對齊。

### 元件
<a name="branding-designer-advanced-components"></a>

**按鈕**  
Amazon Cognito 在受管登入頁面上呈現的按鈕樣式。

**分隔符號**  
受管登入元素之間分隔線和邊界的樣式，例如輸入表單和外部供應商登入選擇器。

**下拉式清單**  
下拉式功能表的樣式。

**網頁圖示**  
Amazon Cognito 為標籤和書籤圖示提供的影像樣式。

**焦點環**  
表示目前選取輸入之醒目提示的樣式。

**表單容器**  
繫結表單之元素的樣式。

**全域頁尾**  
Amazon Cognito 在受管登入頁面底部顯示的頁尾樣式。

**全域標頭**  
Amazon Cognito 顯示在受管登入頁面頂端的標頭樣式。

**指示**  
錯誤和成功訊息的樣式。

**選項控制**  
核取方塊、多選和其他輸入提示的樣式。

**頁面背景**  
受管登入整體背景的樣式。

**輸入**  
表單欄位輸入提示的樣式。

**連結**  
受管登入頁面中超連結的樣式。

**頁面的文字**  
頁面內文字的樣式。

**欄位的文字**  
表單輸入周圍文字的樣式。

## 受管登入品牌 API 和 SDK 操作
<a name="branding-designer-api"></a>

您也可以使用 API 操作 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 和 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html)，將品牌套用到受管登入樣式。這些操作非常適合為另一個應用程式用戶端或使用者集區建立相同或稍微修改的品牌樣式版本。使用 API 操作 [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html) 查詢現有樣式的受管登入品牌，然後視需要修改輸出並將其套用至其他資源。

`UpdateManagedLoginBranding` 操作不會變更套用您樣式的應用程式用戶端。它只會更新指派給應用程式用戶端的現有樣式。若要完全取代應用程式用戶端的樣式，請使用 [DeleteManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteManagedLoginBranding.html) 刪除現有樣式，並使用 指派新樣式`CreateManagedLoginBranding`。在 Amazon Cognito 主控台中，也是如此：您必須刪除現有樣式並建立新的樣式。

在 API 或 SDK 請求中設定受管登入品牌時，您的設定必須內嵌在轉換為`Document`資料類型的 JSON 檔案中。以下是您可以新增的影像和產生程式設計請求以設定品牌樣式的指引。

### 映像資產
<a name="branding-designer-api-assets"></a>

[CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 和 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateManagedLoginBranding.html) 包含 `Assets` 參數。此參數是 base64 編碼二進位格式的影像檔案陣列。

**注意**  
建立或更新品牌樣式的程式設計請求，其請求大小不得超過 2 MB。請求中的資產可能會超過此限制。如果是這種情況，請將您的請求分成多個`UpdateManagedLoginBranding`請求，這些請求的參數群組不超過請求大小上限。這些請求不會導致未指定的參數設為預設值，因此您可以傳送部分請求，而不會影響現有的設定。

有些資產對您可以提交的檔案類型有限制。


****  

| 資產 | 接受的副檔名 | 
| --- | --- | 
| FAVICON\$1ICO | ico | 
| FAVICON\$1SVG | svg | 
| EMAIL\$1GRAPHIC | png、svg、jpeg | 
| SMS\$1GRAPHIC | png、svg、jpeg | 
| AUTH\$1APP\$1GRAPHIC | png、svg、jpeg | 
| PASSWORD\$1GRAPHIC | png、svg、jpeg | 
| PASSKEY\$1GRAPHIC | png、svg、jpeg | 
| PAGE\$1HEADER\$1LOGO | png、svg、jpeg | 
| PAGE\$1HEADER\$1BACKGROUND | png、svg、jpeg | 
| PAGE\$1FOOTER\$1LOGO | png、svg、jpeg | 
| PAGE\$1FOOTER\$1BACKGROUND | png、svg、jpeg | 
| PAGE\$1BACKGROUND | png、svg、jpeg | 
| FORM\$1BACKGROUND | png、svg、jpeg | 
| FORM\$1LOGO | png、svg、jpeg | 
| IDP\$1BUTTON\$1ICON | ico、svg | 

SVG 類型的檔案支援下列屬性和元素。

------
#### [ Attributes ]

```
accent-height, accumulate, additivive, alignment-baseline, ascent, attributename, attributetype, azimuth, basefrequency, baseline-shift, begin, bias, by, class, clip, clip-path, clip-rule, color, color-interpolation, color-interpolation-filters, color-profile, color-rendering, cx, cy, d, dx, dy, diffuseconstant, direction, display, divisor, dur, edgemode, elevation, end, fill, fill-opacity, fill-rule, filter, filterunits, flood-color, flood-opacity, font-family, font-size, font-size-adjust, font-stretch, font-style, font-variant, font-weight, fx, fy, g1, g2, glyph-name, glyphref, gradientunits, gradienttransform, height, href, id, image-rendering, in, in2, k, k1, k2, k3, k4, kerning, keypoints, keysplines, keytimes, lang, lengthadjust, letter-spacing, kernelmatrix, kernelunitlength, lighting-color, local, marker-end, marker-mid, marker-start, markerheight, markerunits, markerwidth, maskcontentunits, maskunits, max, mask, media, method, mode, min, name, numoctaves, offset, operator, opacity, order, orient, orientation, origin, overflow, paint-order, path, pathlength, patterncontentunits, patterntransform, patternunits, points, preservealpha, preserveaspectratio, r, rx, ry, radius, refx, refy, repeatcount, repeatdur, restart, result, rotate, scale, seed, shape-rendering, specularconstant, specularexponent, spreadmethod, stddeviation, stitchtiles, stop-color, stop-opacity, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke, stroke-width, style, surfacescale, tabindex, targetx, targety, transform, text-anchor, text-decoration, text-rendering, textlength, type, u1, u2, unicode, values, viewbox, visibility, vert-adv-y, vert-origin-x, vert-origin-y, width, word-spacing, wrap, writing-mode, xchannelselector, ychannelselector, x, x1, x2, xmlns, y, y1, y2, z, zoomandpan
```

------
#### [ Elements ]

```
svg, a, altglyph, altglyphdef, altglyphitem, animatecolor, animatemotion, animatetransform, audio, canvas, circle, clippath, defs, desc, ellipse, filter, font, g, glyph, glyphref, hkern, image, line, lineargradient, marker, mask, metadata, mpath, path, pattern, polygon, polyline, radialgradient, rect, stop, style, switch, symbol, text, textpath, title, tref, tspan, video, view, vkern, feBlend, feColorMatrix, feComponentTransfer, feComposite, feConvolveMatrix, feDiffuseLighting, feDisplacementMap, feDistantLight, feFlood, feFuncA, feFuncB, feFuncG, feFuncR, feGaussianBlur, feMerge, feMergeNode, feMorphology, feOffset, fePointLight, feSpecularLighting, feSpotLight, feTile, feTurbulence
```

------

### 受管登入品牌操作的工具
<a name="branding-designer-api-tools"></a>

Amazon Cognito 會管理受管登入品牌設定物件的 [JSON-Schema 格式](https://json-schema.org/docs)檔案。以下是如何以程式設計方式更新您的品牌樣式。

**在使用者集區 API 中更新品牌**

1. 在 Amazon Cognito 主控台中，從使用者集區的受管登入功能表中建立預設的**受管登入**品牌樣式。將其指派給應用程式用戶端。

1. 記錄您為其建立樣式的應用程式用戶端 ID，例如 `1example23456789`。

1. 使用 [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html) API 請求擷取品牌樣式的設定，並將 `ReturnMergedResources`設定為 `true`。以下是請求內文的範例。

   ```
   {
      "ClientId": "1example23456789",
      "ReturnMergedResources": true,
      "UserPoolId": "us-east-1_EXAMPLE"
   }
   ```

1. `DescribeManagedLoginBrandingByClient` 使用自訂修改 的輸出。

   1. 回應內文會包裝在不屬於建立和更新操作語法的`ManagedLoginBranding`元素中。移除 JSON 物件的這個頂層。

   1. 若要取代映像，請將 `Bytes`值取代為每個映像檔案的 Base64-encoded二進位資料。

   1. 若要更新設定，請修改`Settings`物件的輸出，並將其包含在下一個請求中。Amazon Cognito 會忽略`Settings`物件中不在 API 回應中收到結構描述中的任何值。

1. 在 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 或 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) 請求中使用更新的回應內文。如果此請求的大小超過 2 MB，請將它分成多個請求。這些操作適用於原始設定保持不變的`PATCH`模型，除非您另有指定。