本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 使用者集區受管登入 您可以選擇 Web 網域來託管使用者集區的服務。當您新增網域時，Amazon Cognito 使用者集區會取得下列函數，統稱為*受管登入*。 + 做為與 OAuth 2.0 和 OpenID Connect (OIDC) 搭配使用之應用程式身分提供者 (IdP) [的授權伺服器](https://datatracker.ietf.org/doc/html/rfc6749#section-1.1)。授權伺服器會[路由請求](authorization-endpoint.md)、[發出和管理 JSON Web 權杖 (JWTs)](token-endpoint.md)，並提供[使用者屬性資訊](userinfo-endpoint.md)。 + ready-to-use使用者介面 (UI)，用於登入、登出和密碼管理等身分驗證操作。*受管登入頁面*可做為身分驗證服務的 Web 前端。 + SAML 2.0 IdPs、OIDC IdPs、Facebook、Login with Amazon、Login with Apple 和 Google 的服務提供者 (SP) 或依賴方 (RP)。 與受管登入共用一些功能的另一個選項是傳統*託管 UI*。傳統託管 UI 是受管登入服務的第一代版本。託管 UI IdP 和 RP 服務通常具有與受管登入相同的特性，但登入頁面的設計更簡單，功能更少。例如，傳統託管 UI 中無法使用通行金鑰登入。在 Lite [功能計劃](cognito-sign-in-feature-plans.md)中，傳統託管 UI 是您使用者集區網域服務的唯一選項。 受管登入頁面是 Web 介面的集合，用於使用者集區中的基本註冊、登入、多重驗證和密碼重設活動。當您想要讓使用者選擇登入選項時，他們也會將使用者連線至一或多個第三方身分提供者 (IdPs)。當您想要驗證和授權使用者時，您的應用程式可以在使用者的瀏覽器中叫用受管登入頁面。 您可以使用自訂標誌、背景和樣式，讓受管登入使用者體驗符合您的品牌。對於可能套用至受管登入 UI 的品牌，您有兩個選項：受管登入*的品牌編輯器*，以及*託管 UI 的託管 UI （傳統） 品牌*。 **品牌編輯器** Amazon Cognito 主控台中具有up-to-date身分驗證選項和視覺化編輯器的更新使用者體驗。 **託管 UI 品牌** Amazon Cognito 使用者集區先前採用者的熟悉使用者體驗。託管 UI 的品牌是檔案型系統。若要將品牌套用到託管 UI 頁面，您可以上傳標誌影像檔案和設定數個預定 CSS 樣式選項值的檔案。 品牌編輯器不適用於使用者集區的所有功能計劃。如需詳細資訊，請參閱[使用者集區功能計劃](cognito-sign-in-feature-plans.md)。 如需建構受管登入和託管 UI 服務請求的詳細資訊，請參閱 [使用者集區端點和受管登入參考](cognito-userpools-server-contract-reference.md)。 **注意** Amazon Cognito 受管登入不支援具有自訂身分驗證[挑戰 Lambda 觸發條件的自訂身分驗證](user-pool-lambda-challenge.md)。 **Topics** + [ ## 受管登入當地語系化 ](#managed-login-localization) + [ ## 條款文件 ](#managed-login-terms-documents) + [ ## 使用 設定受管登入 AWS Amplify ](#cognito-user-pools-app-integration-amplify) + [ ## 使用 Amazon Cognito 主控台設定受管登入 ](#set-up-managed-login) + [ ## 檢視您的登入頁面 ](#view-login-pages) + [ ## 自訂身分驗證頁面 ](#cognito-user-pools-app-integration-customize-hosted-ui) + [ ## 受管登入和託管 UI 的須知事項 ](#managed-login-things-to-know) + [ # 設定使用者集區網域 ](cognito-user-pools-assign-domain.md) + [ # 將品牌套用到受管登入頁面 ](managed-login-branding.md) ## 受管登入當地語系化 受管登入預設為使用者互動頁面中的英文語言。您可以針對您選擇的語言，顯示當地語系化的受管登入頁面。可用的語言是 中可用的語言 AWS 管理主控台。在您分發給使用者的連結中，新增`lang`查詢參數，如下列範例所示。 ``` https:///oauth2/authorize?lang=es&response_type=code&client_id=&redirect_uri= ``` Amazon Cognito 在具有 `lang` 參數的初始請求之後，會在使用者的瀏覽器中以使用者的語言偏好設定設定 Cookie。設定 Cookie 後，語言選擇會持續存在，而不會顯示或要求您在請求中包含 參數。例如，在使用者使用 `lang=de` 參數提出登入請求後，其受管登入頁面會以德文轉譯，直到他們清除 Cookie 或使用新的當地語系化參數提出新請求，例如 `lang=en`。 當地語系化僅適用於受管登入。您必須加入 Essentials 或 Plus [功能計劃](cognito-sign-in-feature-plans.md)，並已指派您的網域使用[受管登入品牌](managed-login-branding.md)。 您的使用者在受管登入中進行的選擇不適用於[自訂電子郵件或簡訊寄件者觸發。](user-pool-lambda-custom-sender-triggers.md)當您實作這些觸發條件時，您必須使用其他機制來判斷使用者偏好的語言。在登入流程中， `locale` 屬性可能會根據位置指示使用者的偏好語言。在註冊流程中，使用者集區的區域或應用程式用戶端 ID 可能表示語言偏好設定。 提供下列語言。 **受管登入語言** | Language | Code | | --- | --- | | 德文 | de | | 英文 | zh | | 西班牙文 | es | | 法文 | fr | | 印度尼西亞語 | id | | 義大利文 | it | | 日文 | ja | | 韓文 | ko | | 葡萄牙文 (巴西) | pt-BR | | 簡體中文 | zh-CN | | 繁體中文 | zh-TW | ## 條款文件 您可以設定受管登入頁面，以在使用者註冊時顯示**使用條款**和**隱私權政策**文件的連結。當您在應用程式用戶端中設定這兩個條款文件時，使用者會在註冊期間看到下列文字：**註冊即表示您同意我們的使用條款和隱私權政策。**這些片語 **使用條款**和**隱私權政策**會顯示在您的受管登入頁面中，並連結至您的文件。 術語文件支援符合受管登入當地語系化的語言特定 URLs。當使用者使用`lang`查詢參數選取語言時，Amazon Cognito 會以該語言顯示您條款文件的連結。如果您尚未針對特定語言設定 URL，Amazon Cognito 會使用您為應用程式用戶端設定的預設 URL。 若要為您的應用程式用戶端設定術語文件，請導覽至使用者集區中的**受管登入**選單。在**條款文件**下，選擇**建立條款文件**。 ------ #### [ Amazon Cognito console ] **建立術語文件** 1. 導覽至您的使用者集區，然後選擇**受管登入**功能表。尋找**條款文件**。 1. 選擇**建立詞彙文件**。 1. 選取您要為其指派術語文件的應用程式用戶端。 1. 輸入**條款名稱**。這會在 主控台中識別您的文件。 1. 在**連結**下，選擇**語言**，然後輸入您以該語言託管條款文件的 **URL**。 1. 若要新增其他語言URLs，請選擇**新增其他**語言。 1. 選擇**建立**。 ------ #### [ Amazon Cognito user pools API ] 以下是 [CreateTerms](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateTerms.html) 請求內文的範例。當受管登入當地語系化為該語言時，它會讓應用程式用戶端的註冊頁面`1example23456789`轉譯法文和葡萄牙文 （巴西） 版本的隱私權政策的連結。在受管登入將在註冊頁面上轉譯連結`terms-of-use`之前，需要另外請求才能設定 URLs。 ``` { "ClientId": "1example23456789", "Enforcement": "NONE", "Links": { "cognito:default" : "https://example.com/privacy/", "cognito:french" : "https://example.com/fr/privacy/", "cognito:portuguese-brazil" : "https://example.com/pt/privacy/" }, "TermsName": "privacy-policy", "TermsSource": "LINK", "UserPoolId": "us-east-1_EXAMPLE" } ``` ------ **注意** 您必須為您的應用程式用戶端建立使用條款和隱私權政策文件，Amazon Cognito 才會在您的受管登入頁面中顯示條款文件。 ## 使用 設定受管登入 AWS Amplify 如果您使用 AWS Amplify 將身分驗證新增至 Web 或行動應用程式，您可以在 Amplify 命令列界面 (CLI) 和 Amplify 架構中的程式庫中設定受管登入頁面。若要將身分驗證新增至您的應用程式，請將 `Auth`類別新增至您的專案。然後，在您的應用程式中，使用 Amplify 用戶端程式庫驗證使用者集區使用者。 您可以叫用受管登入頁面進行身分驗證，也可以透過重新導向至 IdP 的授權端點來聯合使用者。使用者成功向供應商進行身分驗證後，Amplify 會在您的使用者集區中建立新的使用者，並將使用者的字符傳遞至您的應用程式。 下列範例示範如何使用 AWS Amplify 來設定應用程式中社交供應商的受管登入。 + [反應](https://docs.amplify.aws/react/build-a-backend/auth/concepts/external-identity-providers/) + [Swift](https://docs.amplify.aws/swift/build-a-backend/auth/concepts/external-identity-providers/) + [流暢度](https://docs.amplify.aws/flutter/build-a-backend/auth/concepts/external-identity-providers/) + [Android](https://docs.amplify.aws/android/build-a-backend/auth/concepts/external-identity-providers/) ## 使用 Amazon Cognito 主控台設定受管登入 受管登入和託管 UI 的第一個需求是使用者集區網域。在使用者集區主控台中，導覽至使用者集區的**網域**索引標籤，並新增 **Cognito 網域**或**自訂網域**。您也可以在建立新使用者集區的過程中選擇網域。如需詳細資訊，請參閱[設定使用者集區網域](cognito-user-pools-assign-domain.md)。當您的使用者集區中的網域處於作用中狀態時，所有應用程式用戶端都會提供該網域上的公有身分驗證頁面。 當您建立或修改使用者集區網域時，您可以為您的網域設定**品牌版本**。此品牌版本是**受管登入**或**託管 UI （傳統）** 的選擇。您選擇的品牌版本適用於在您的網域使用登入服務的所有應用程式用戶端。 下一個步驟是從使用者集區[的應用程式用戶端](user-pool-settings-client-apps.md)索引標籤建立**應用程式用戶端**。在建立應用程式用戶端的過程中，Amazon Cognito 會要求您提供有關應用程式的資訊，然後提示您選取**傳回 URL**。傳回 URL 也稱為依賴方 (RP) URL、重新導向 URI 和回呼 URL。這是應用程式執行的 URL，例如 `https://www.example.com`或 `myapp://example`。 在使用者集區中設定具有品牌樣式的網域和應用程式用戶端之後，您的受管登入頁面即可在網際網路上使用。 ## 檢視您的登入頁面 在 Amazon Cognito 主控台中，選擇應用程式用戶端****選單下應用程式用戶端登入頁面索引標籤中的**檢視****登入頁面**按鈕。此按鈕會使用下列基本參數，帶您前往使用者集區網域中的登入頁面。 + 應用程式用戶端 ID + 授權碼授與請求 + 對您為目前應用程式用戶端啟用的所有範圍的請求 + 目前應用程式用戶端清單中的第一個回呼 URL 當您想要測試受管**登入頁面**的基本功能時，檢視登入頁面按鈕很有用。您的登入頁面將與您指派給[使用者集區網域](cognito-user-pools-assign-domain.md)**的品牌版本**相符。您可以使用額外和已修改的參數自訂登入 URL。在大多數情況下，**檢視登入頁面**連結自動產生的參數無法完全符合您應用程式的需求。在這些情況下，您必須自訂應用程式在登入使用者時叫用的 URL。如需登入參數機碼和值的詳細資訊，請參閱 [使用者集區端點和受管登入參考](cognito-userpools-server-contract-reference.md)。 登入網頁使用以下 URL 格式。此範例透過 `response_type=code` 參數要求授權碼授予。 ``` https:///oauth2/authorize?response_type=code&client_id=&redirect_uri= ``` 您可以從使用者集區中的**網域**功能表查詢使用者集區網域字串。在**應用程式用戶端**選單中，您可以識別應用程式用戶端 IDs、其回呼 URLs、其允許的範圍和其他組態。 當您使用自訂參數導覽至 `/oauth2/authorize` 端點，Amazon Cognito 會將您重新導向到 `/oauth2/login` 端點，或者，如果您有 `identity_provider` 或 `idp_identifier` 參數，則會以無提示的方式將您重新導向至 IdP 登入頁面。 **隱含授予的範例請求** 您可以使用以下 URL 檢視登入網頁，以取得 所在的隱含程式碼授予`response_type=token`。成功登入後，Amazon Cognito 會將使用者集區權杖傳回至 Web 瀏覽器的網址列。 ``` https://mydomain.auth.us-east-1.amazoncognito.com/authorize?response_type=token&client_id=1example23456789&redirect_uri=https://mydomain.example.com ``` 身分和存取權杖會以參數形式顯示並附加至您的重新導向 URL。 以下是來自隱含授予請求的回應範例。 ``` https://auth.example.com/#id_token=eyJraaBcDeF1234567890&access_token=eyJraGhIjKlM1112131415&expires_in=3600&token_type=Bearer ``` ## 自訂身分驗證頁面 在過去，Amazon Cognito 僅託管具有傳統*託管 UI* 的登入頁面，這是一種簡單的設計，可授予對身分驗證網頁的通用外觀。您可以使用標誌影像自訂 Amazon Cognito 使用者集區，並使用指定一些 CSS 樣式值的檔案調整某些樣式。稍後，Amazon Cognito 推出了*受管登入*，這是一種更新的託管身分驗證服務。受管登入是使用*品牌編輯器*更新look-and-feel。品牌編輯器是無程式碼視覺化編輯器，以及比託管 UI 自訂體驗更大的選項套件。受管登入也引入了自訂背景影像和深色模式佈景主題。 您可以在使用者集區中的受管登入和託管 UI 品牌體驗之間切換。若要進一步了解自訂受管登入頁面，請參閱 [將品牌套用到受管登入頁面](managed-login-branding.md)。 ## 受管登入和託管 UI 的須知事項 **一小時受管登入和託管 UI 工作階段 Cookie** 當使用者使用您的登入頁面或第三方提供者登入時，Amazon Cognito 會在其瀏覽器中設定 Cookie。使用此 Cookie，使用者可以使用相同的身分驗證方法重新登入一小時。當他們使用瀏覽器 Cookie 登入時，會取得持續您應用程式用戶端組態中指定持續時間的新權杖。使用者屬性或身分驗證因素的變更不會影響其使用瀏覽器 Cookie 重新登入的能力。 使用工作階段 Cookie 進行身分驗證不會將 Cookie 持續時間重設為額外一小時。如果使用者在最近成功的互動式身分驗證後超過一小時嘗試存取您的登入頁面，則必須再次登入。 **確認使用者帳戶和驗證使用者屬性** 對於使用者集區[本機使用者](cognito-terms.md#terms-localuser)，當您將使用者集區設定為**允許 Cognito 自動傳送訊息以進行驗證和確認時，**受管登入和託管 UI 最有效。啟用此設定時，Amazon Cognito 會將包含確認碼的訊息傳送給註冊的使用者。當您改為將使用者確認為使用者集區管理員時，您的登入頁面會在註冊後顯示錯誤訊息。在此狀態下，Amazon Cognito 已建立新使用者，但還無法傳送驗證訊息。您仍然可以確認使用者為管理員，但他們可能在遇到錯誤後聯絡您的支援人員。如需管理確認的詳細資訊，請參閱 [允許使用者註冊您的應用程式，但以使用者集區管理員身分確認使用者](signing-up-users-in-your-app.md#signing-up-users-in-your-app-and-confirming-them-as-admin)。 **受管登入的操作範圍** 受管登入和傳統託管 UI 支援註冊、登入和密碼管理。這包括使用多重要素驗證 (MFA) 完成登入，以及註冊 webAuthn 驗證器。受管登入不支援使用者自助式設定檔管理，例如屬性變更和 MFA 偏好設定的設定。您必須在自己的應用程式程式碼中實作設定檔管理。當您以管理員身分使用 [AdminUpdateUserAttributes](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_AdminUpdateUserAttributes.html) API 操作更新電子郵件地址和電話號碼時，受管登入也不會提供確認屬性變更的容量。 **檢視您對組態所做的變更** 如果您變更頁面樣式但未立即顯示，請等待幾分鐘，然後重新整理頁面。 **解碼使用者集區權杖** Amazon Cognito 使用者集區權杖是使用 RS256 演算法簽署。您可以使用 解碼和驗證使用者集區字符 AWS Lambda。請參閱 GitHub 上的[解碼和驗證 Amazon Cognito JWT 權杖](https://github.com/awslabs/aws-support-tools/tree/master/Cognito/decode-verify-jwt)。 **TLS 版本控制** 受管登入和託管 UI 頁面需要傳輸中加密。Amazon Cognito 提供的使用者集區網域要求使用者的瀏覽器交涉最低 TLS 版本為 1.2。自訂網域支援使用 TLS 1.2 版的瀏覽器連線。託管 UI （傳統） **不需要**自訂網域的 TLS 1.2，但較新的受管登入**需要**自訂網域和字首網域的 TLS 1.2 版。由於 Amazon Cognito 會管理網域服務的組態，因此您無法修改使用者集區網域的 TLS 需求。 **CORS 政策** 受管登入和託管 UI 都不支援自訂跨來源資源共用 (CORS) 原始伺服器政策。CORS 政策會防止使用者在其請求中傳遞身分驗證參數。反之，請在應用程式前端實作 CORS 政策。Amazon Cognito 會將 `Access-Control-Allow-Origin: *`回應標頭傳回給下列端點的請求。 1. [權杖端點](token-endpoint.md) 1. [撤銷端點](revocation-endpoint.md) 1. [userInfo 端點](userinfo-endpoint.md) **Cookie** 受管登入和託管 UI 在使用者的瀏覽器中設定 Cookie。Cookie 符合網站未設定第三方 Cookie 之某些瀏覽器的要求。它們的範圍僅限於您的使用者集區端點，並包含下列項目： + 每個請求的 `XSRF-TOKEN` Cookie。 + 重新導向使用者時的工作階段一致性 `csrf-state` Cookie。 + 工作階段一致性的 `csrf-state-legacy` Cookie，當您的瀏覽器不支援 `SameSite` 屬性時，Amazon Cognito 會將其讀取為備用 Cookie。 + `cognito` 工作階段 Cookie，會將成功的登入嘗試保留一小時。 + 在受管登入中保留使用者[語言當地語系化](#managed-login-localization)選擇的 `lang` Cookie。 + 當使用者在受管登入頁面之間導覽時，保留必要資料的 `page-data` Cookie。 在 iOS 中，您可以[封鎖所有 Cookie](https://support.apple.com/en-us/105082)。此設定與受管登入或託管 UI 不相容。若要使用可能啟用此設定的使用者，請使用 AWS SDK 將使用者集區身分驗證建置到原生 iOS 應用程式。在此案例中，您可以建置自己的工作階段儲存體，而這些儲存體不是以 Cookie 為基礎。 **受管登入版本變更的影響** 請考慮下列新增網域和設定受管登入版本的效果。 + 當您使用受管登入或託管 UI （傳統） 品牌新增字首網域時，最多可能需要 60 秒才能使用登入頁面。 + 當您使用受管登入或託管 UI （傳統） 品牌新增自訂網域時，最多可能需要五分鐘的時間才能使用登入頁面。 + 當您變更網域的品牌版本時，最多可能需要四分鐘，您的登入頁面才能在新的品牌版本中使用。 + 當您在受管登入和託管 UI （傳統） 品牌之間切換時，Amazon Cognito 不會維護使用者工作階段。他們必須使用新的界面再次登入。 **預設樣式** 當您在 中建立應用程式用戶端時 AWS 管理主控台，Amazon Cognito 會自動將品牌樣式指派給您的應用程式用戶端。當您使用 [CreateUserPoolClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateUserPoolClient.html) 操作以程式設計方式建立應用程式用戶端時，不會建立品牌樣式。除非您使用 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 請求建立受管登入，否則無法使用 AWS SDK 建立的應用程式用戶端。 **受管登入身分驗證提示逾時** Amazon Cognito 會取消未在五分鐘內完成的身分驗證請求，並將使用者重新導向至受管登入。此頁面人會顯示「`Something went wrong`」錯誤訊息。 # 設定使用者集區網域 設定網域是設定使用者集區的選用部分。使用者集區網域託管使用者身分驗證、與第三方供應商的聯合，以及 OpenID Connect (OIDC) 流程的功能。它具有*受管登入*，這是用於註冊、登入和密碼復原等金鑰操作的預先建置界面。它還託管標準 OpenID Connect (OIDC) 端點，例如[授權](authorization-endpoint.md)、[userInfo](userinfo-endpoint.md) 和[字符](token-endpoint.md)，用於machine-to-machine(M2M) 授權和其他 OIDC 和 OAuth 2.0 身分驗證和授權流程。 使用者在與使用者集區相關聯的網域使用受管登入頁面進行身分驗證。您有兩個設定此網域的選項：您可以使用預設的 Amazon Cognito 託管網域，也可以設定您擁有的自訂網域。 自訂網域選項具有更多彈性、安全性和控制的選項。例如，熟悉的組織擁有網域可以鼓勵使用者信任，並讓登入程序更直覺。不過，自訂網域方法需要一些額外的額外負荷，例如管理 SSL 憑證和 DNS 組態。 對於`/.well-known/openid-configuration`端點 URLs 和`/.well-known/jwks.json`字符簽署金鑰，OIDC 探索端點不會託管在您的網域上。如需詳細資訊，請參閱[身分提供者和依賴方端點](federation-endpoints.md)。 了解如何設定和管理使用者集區的網域，是將身分驗證整合到您的應用程式的重要步驟。使用使用者集區 API 和 AWS SDK 登入可以是設定網域的替代方案。以 API 為基礎的模型會直接在 API 回應中交付權杖，但對於使用使用者集區擴充功能做為 OIDC IdP 的實作，您必須設定網域。如需使用者集區中可用身分驗證模型的詳細資訊，請參閱 [了解 API、OIDC 和受管登入頁面身分驗證](authentication-flows-public-server-side.md#user-pools-API-operations)。 **Topics** + [ ## 使用者集區網域的須知事項 ](#cognito-user-pools-assign-domain-things-to-know) + [ # 使用 Amazon Cognito 字首網域進行受管登入 ](cognito-user-pools-assign-domain-prefix.md) + [ # 使用您自己的網域進行受管登入 ](cognito-user-pools-add-custom-domain.md) ## 使用者集區網域的須知事項 使用者集區網域是應用程式中 OIDC 依賴方和 UI 元素的服務點。當您為使用者集區規劃網域實作時，請考慮下列詳細資訊。 **預留條款** 您無法在 Amazon Cognito `aws`字首網域的名稱`cognito`中使用文字 `amazon`、 或 。 **探索端點位於不同的網域** 使用者集區[探索端點](federation-endpoints.md)`.well-known/openid-configuration``.well-known/jwks.json`和 不在您的使用者集區自訂或字首網域上。這些端點的路徑如下所示。 + `https://cognito-idp.Region.amazonaws.com/your user pool ID/.well-known/openid-configuration` + `https://cognito-idp.Region.amazonaws.com/your user pool ID/.well-known/jwks.json` **網域變更的有效時間** Amazon Cognito或更新字首網域的品牌版本可能需要一分鐘的時間。自訂網域的變更最多可能需要五分鐘才能傳播。新的自訂網域最多可能需要一小時才能傳播。 **同時自訂和字首網域** 您可以使用自訂網域和 擁有的前綴網域來設定使用者集區 AWS。由於使用者集區[探索端點](federation-endpoints.md)託管在不同網域，因此它們只會提供*自訂網域*。例如，您的 `openid-configuration`會提供 `"authorization_endpoint"`的單一值`"https://auth.example.com/oauth2/authorize"`。 當您在使用者集區中同時有自訂網域和字首網域時，您可以使用具有 OIDC 供應商完整功能的自訂網域。具有此組態的使用者集區中的字首網域沒有探索或token-signing-key端點，應相應使用。 **偏好做為通行密鑰依賴方 ID 的自訂網域** 當您使用[通行金鑰](amazon-cognito-user-pools-authentication-flow-methods.md#amazon-cognito-user-pools-authentication-flow-methods-passkey)設定使用者集區身分驗證時，您必須設定依賴方 (RP) ID。當您有自訂網域和字首網域時，您只能將 RP ID 設定為自訂網域。若要在 Amazon Cognito 主控台中將字首網域設定為 RP ID，請刪除您的自訂網域，或將字首網域的完整網域名稱 (FQDN) 輸入為**第三方網域**。 **請勿在網域階層的不同層級使用自訂網域** 您可以設定個別使用者集區，在相同的頂層網域 (TLD) 中具有自訂網域，例如 *auth.example.com* 和 *auth2.example.com*。受管登入工作階段 Cookie 適用於自訂網域和所有子網域，例如 *\$1.auth.example.com*。因此，您應用程式的任何使用者都不應該存取任何父網域*和*子網域的受管登入。當自訂網域使用相同的 TLD 時，請將它們保持在相同的子網域層級。 假設您有一個具有自訂網域 *auth.example.com* 的使用者集區。然後，您可以建立另一個使用者集區，並指派自訂網域 *uk.auth.example.com。*使用者使用 *auth.example.com 登入，*並取得其瀏覽器提供給萬用字元路徑 *\$1.auth.example.com* 中任何網站的 Cookie。然後，他們嘗試登入 *uk.auth.example.com。*它們會將無效的 Cookie 傳遞給您的使用者集區網域，並收到錯誤，而不是登入提示。相反地，具有適用於 *\$1.auth.example.com* 的 Cookie 的使用者在 *auth2.example.com*：// 上啟動登入工作階段沒有問題。 **品牌版本** 建立網域時，您會設定**品牌版本**。您的選項是較新的受管登入體驗和傳統託管 UI 體驗。此選項適用於在您的網域託管服務的所有應用程式用戶端。 # 使用 Amazon Cognito 字首網域進行受管登入 受管登入的預設體驗託管在 AWS 擁有的網域上。這種方法進入的障礙很低，選擇字首名稱且處於作用中狀態，但沒有自訂網域的信任啟發功能。Amazon Cognito 網域選項和自訂網域選項之間沒有成本差異。唯一的差別是您引導使用者前往的網址中的網域。對於第三方 IdP 重新導向和用戶端憑證流程的情況，託管網域幾乎沒有可見效果。自訂網域更適合使用者使用受管登入來登入，並且會與不符合應用程式網域的身分驗證網域互動的情況。 託管的 Amazon Cognito 網域具有您選擇的字首，但託管於根網域 `amazoncognito.com`。以下是範例： ``` https://cognitoexample.auth.ap-south-1.amazoncognito.com ``` 所有字首網域都遵循此格式：`prefix`.`auth`.*`AWS 區域 code`*.`amazoncognito``com`. [自訂網域](cognito-user-pools-add-custom-domain.md)使用者集區可以在您擁有的任何網域上託管受管登入或託管 UI 頁面。 **注意** 為了增強 Amazon Cognito 應用程式的安全性，使用者集區端點的父網域會在[公用尾碼清單 (PSL)](https://publicsuffix.org/) 中註冊。PSL 可協助使用者的網頁瀏覽器對您的使用者集區端點及其設定的 Cookie 建立一致的了解。 使用者集區父網域採用下列格式。 ``` auth.Region.amazoncognito.com auth-fips.Region.amazoncognito.com ``` 若要使用 新增應用程式用戶端和使用者集區網域 AWS 管理主控台，請參閱 [建立應用程式用戶端](user-pool-settings-client-apps.md#cognito-user-pools-app-idp-settings-console-create)。 **Topics** + [ ## 先決條件 ](#cognito-user-pools-assign-domain-prefix-prereq) + [ ## 設定 Amazon Cognito 網域字首 ](#cognito-user-pools-assign-domain-prefix-step-1) + [ ## 驗證您的登入頁面 ](#cognito-user-pools-assign-domain-prefix-verify) ## 先決條件 開始之前，您需要： + 搭配應用程式用戶端的使用者集區。如需詳細資訊，請參閱[使用者集區入門](getting-started-user-pools.md)。 ## 設定 Amazon Cognito 網域字首 您可以使用 AWS 管理主控台 或 AWS CLI 或 API 來設定使用者集區網域。 ------ #### [ Amazon Cognito console ] **設定網域** 1. 導覽至**品牌**下的**網域**功能表。 1. 在**網域**旁邊，選擇**動作**，然後選取**建立 Cognito 網域**。如果您已設定使用者集區字首網域，請選擇**刪除 Cognito 網域**，然後再建立新的自訂網域。 1. 輸入可用的網域字首來搭配 **Amazon Cognito 網域**使用。如需設定**自訂網域**的資訊，請參閱 [使用您自己的網域進行受管登入](cognito-user-pools-add-custom-domain.md)。 1. 選擇**品牌版本**。您的品牌版本適用於該網域中的所有使用者互動頁面。您的使用者集區可以託管所有應用程式用戶端的受管登入或託管 UI 品牌。 **注意** 您可以擁有自訂網域和字首網域，但 Amazon Cognito 僅提供*自訂*網域的`/.well-known/openid-configuration`端點。 1. 選擇**建立**。 ------ #### [ CLI/API ] 使用下列命令來建立網域字首，並將其指派給您的使用者集區。 **設定使用者集區網域** + AWS CLI: `aws cognito-idp create-user-pool-domain` **範例**：`aws cognito-idp create-user-pool-domain --user-pool-id --domain --managed-login-version 2` + 使用者集區 API 操作：[CreateUserPoolDomain](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateUserPoolDomain.html) **取得網域的相關資訊** + AWS CLI: `aws cognito-idp describe-user-pool-domain` **範例**：`aws cognito-idp describe-user-pool-domain --domain ` + 使用者集區 API 操作：[DescribeUserPoolDomain](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeUserPoolDomain.html) **刪除網域** + AWS CLI: `aws cognito-idp delete-user-pool-domain` **範例**：`aws cognito-idp delete-user-pool-domain --domain ` + 使用者集區 API 操作：[DeleteUserPoolDomain](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DeleteUserPoolDomain.html) ------ ## 驗證您的登入頁面 + 驗證可從 Amazon Cognito 託管網域使用上述登入頁面。 ``` https:///login?response_type=code&client_id=&redirect_uri= ``` 您的網域會顯示在 Amazon Cognito 主控台的 **Domain name (網域名稱)** 頁面中。您的應用程式用戶端 ID 和回呼 URL 會顯示在 **App client settings (應用程式用戶端設定)** 頁面中。 # 使用您自己的網域進行受管登入 設定應用程式用戶端之後，您可以使用[受管登入](cognito-user-pools-managed-login.md)的網域服務的自訂網域來設定使用者集區。透過自訂網域，使用者可以使用您自己的 Web 地址登入您的應用程式，而非預設`amazoncognito.com`[字首網域](cognito-user-pools-assign-domain-prefix.md)。自訂網域會使用熟悉的網域名稱改善應用程式的使用者信任，尤其是當根網域符合託管應用程式的網域時。自訂網域可以提高組織安全需求的合規性。 自訂網域有一些先決條件，包括使用者集區、應用程式用戶端和您擁有的 Web 網域。自訂網域還需要自訂網域的 SSL 憑證，在美國東部 AWS Certificate Manager （維吉尼亞北部） 使用 (ACM) 管理。Amazon Cognito 會建立使用 ACM 憑證保護傳輸中的 Amazon CloudFront 分佈。由於您擁有網域，因此您必須建立 DNS 記錄，將流量導向自訂網域的 CloudFront 分佈。 這些元素準備就緒後，您可以透過 Amazon Cognito 主控台或 API 將自訂網域新增至使用者集區。這包括指定網域名稱和 SSL 憑證，然後使用提供的別名目標更新您的 DNS 組態。進行這些變更後，您可以驗證登入頁面是否可在您的自訂網域存取。 建立自訂網域最不費力的方式是使用 Amazon Route 53 中的公有託管區域。Amazon Cognito 主控台只需幾個步驟即可建立正確的 DNS 記錄。開始之前，請考慮為您擁有的網域或子網域[建立 Route 53 託管區域](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/CreatingHostedZone.html)。 **Topics** + [ ## 將自訂網域新增到使用者集區 ](#cognito-user-pools-add-custom-domain-adding) + [ ## 先決條件 ](#cognito-user-pools-add-custom-domain-prereq) + [ ## 步驟 1：輸入您的自訂網域名稱 ](#cognito-user-pools-add-custom-domain-console-step-1) + [ ## 步驟 2：新增別名目標和子網域 ](#cognito-user-pools-add-custom-domain-console-step-2) + [ ## 步驟 3：驗證您的登入頁面 ](#cognito-user-pools-add-custom-domain-console-step-3) + [ ## 變更自訂網域所用的 SSL 憑證 ](#cognito-user-pools-add-custom-domain-changing-certificate) ## 將自訂網域新增到使用者集區 若要新增自訂網域到您的使用者集區，請由 Amazon Cognito 主控台指定網域名稱，並提供您透過 [AWS Certificate Manager](https://docs.aws.amazon.com/acm/latest/userguide/) (ACM) 所管理的憑證。在您新增網域後，Amazon Cognito 將提供別名目標以讓您加入至您的 DNS 組態。 ## 先決條件 開始之前，您需要： + 搭配應用程式用戶端的使用者集區。如需詳細資訊，請參閱[使用者集區入門](getting-started-user-pools.md)。 + 您擁有的 Web 網域。其*父網域*必須有一個有效的 DNS **A 記錄**。您可以為此記錄指派任何值。父網域可能是網域的根，也可以是網域階層中向上一層的子網域。例如，如果您的自訂網域是 *auth.xyz.example.com*，則 Amazon Cognito 必須能夠將 *yz.example.com* 解析至一個 IP 地址。為了避免意外影響客戶基礎設施，Amazon Cognito 不支援將頂層網域 (TLD) 用於自訂網域。如需詳細資訊，請參閱[網域名稱](https://tools.ietf.org/html/rfc1035)。 + 能夠為您的自訂網域建立子網域。我們建議您對子網域名稱**進行身分驗證**。例如：*auth.example.com*。 **注意** 如果您沒有[萬用字元憑證](https://en.wikipedia.org/wiki/Wildcard_certificate)，那麼您可能需要為自訂網域的子網域取得新憑證。 + 由美國東部 （維吉尼亞北部） ACM 管理的公有 SSL/TLS 憑證。憑證必須位於 us-east-1 中，因為憑證將與全球服務 CloudFront 中的分佈相關聯。 + 支援伺服器名稱指示 (SNI) 的瀏覽器用戶端。Amazon Cognito 指派給自訂網域的 CloudFront 分佈需要 SNI。您無法變更此設定。如需 CloudFront 分佈中 SNI 的詳細資訊，請參閱《*Amazon CloudFront 開發人員指南*》中的[使用 SNI 提供 HTTPS 請求](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/cnames-https-dedicated-ip-or-sni.html#cnames-https-sni)。 + 允許使用者集區授權伺服器將 Cookie 新增至使用者工作階段的應用程式。Amazon Cognito 為受管登入頁面設定數個必要的 Cookie。其中包括 `cognito`、`cognito-fl` 和 `XSRF-TOKEN`。雖然每個個別 Cookie 都符合瀏覽器大小限制，但使用者集區組態的變更可能會導致受管登入 Cookie 的大小增加。自訂網域前面的 Application Load Balancer (ALB) 等中繼服務可能會強制執行最大標頭大小或總 Cookie 大小。如果您的應用程式也設定自己的 Cookie，使用者的工作階段可能會超過這些限制。建議您的應用程式不要在託管使用者集區網域服務的子網域上設定 Cookie，以避免大小限制衝突。 + 更新 Amazon CloudFront 分佈的許可。做法是將下列 IAM 政策陳述式連接至您 AWS 帳戶中的使用者： ------ #### [ JSON ] **** ``` { "Version":"2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontUpdateDistribution", "Effect": "Allow", "Action": [ "cloudfront:updateDistribution" ], "Resource": [ "*" ] } ] } ``` ------ 如需有關授權 CloudFront 中動作的詳細資訊，請參閱[將以身分為基礎的政策 (IAM 政策) 用於 CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/access-control-managing-permissions.html)。 Amazon Cognito 一開始會使用您的 IAM 許可來設定 CloudFront 分發，但分發是由 AWS管理。您無法變更 Amazon Cognito 與您的使用者集區相關聯之 CloudFront 分發的組態。例如，您無法更新安全性政策中支援的 TLS 版本。 ## 步驟 1：輸入您的自訂網域名稱 您可以使用 Amazon Cognito 主控台或 API，新增網域到您的使用者集區。 ------ #### [ Amazon Cognito console ] **從 Amazon Cognito 主控台新增網域到您的使用者集區：** 1. 導覽至**品牌**下的**網域**功能表。 1. 在**網域**旁，選擇**動作**，並選取**建立自訂網域**或**建立 Amazon Cognito 網域**。如果您已設定使用者集區自訂網域，請選擇**刪除自訂網域**，然後再建立新的自訂網域。 1. 在**網域**旁邊，選擇**動作**，然後選取**建立自訂網域**。如果您已設定自訂網域，請選擇**刪除自訂網域**以刪除現有網域，然後再建立新的自訂網域。 1. 對於 **Custom domain** (自訂網域)，輸入您要與 Amazon Cognito 搭配使用之網域的 URL。網域名稱只能包含小寫字母、數字和連字號。第一個字元或最後一個字元切勿使用連字號。使用句號分隔子網域名稱。 1. 對於 **ACM certificate** (ACM 憑證)，選擇您要用於此網域的 SSL 憑證。只有美國東部 （維吉尼亞北部） 的 ACM 憑證才有資格與 Amazon Cognito 自訂網域搭配使用，無論您 AWS 區域 的使用者集區為何。 如果您沒有可用的憑證，則可使用 ACM 在美國東部 (維吉尼亞北部) 佈建一個憑證。如需詳細資訊，請參閱 *AWS Certificate Manager 使用者指南*中的[入門](https://docs.aws.amazon.com/acm/latest/userguide/gs.html)。 1. 選擇**品牌版本**。您的品牌版本適用於該網域中的所有使用者互動頁面。您的使用者集區可以託管所有應用程式用戶端的受管登入或託管 UI 品牌。 **注意** 您可以擁有自訂網域和字首網域，但 Amazon Cognito 僅提供*自訂*網域的`/.well-known/openid-configuration`端點。 1. 選擇**建立**。 1. Amazon Cognito 會將您返回**網域**功能表。系統會顯示標題為 **Create an alias record in your domain's DNS** (在您網域的 DNS 中建立別名記錄) 的訊息。請記下主控台中顯示的 **Domain** (網域) 和 **Alias target** (別名目標)。會在下一個步驟中使用它們，以將流量導向您的自訂網域。 ------ #### [ API ] 下列 [CreateUserPoolDomain](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateUserPoolDomain.html) 請求內文會建立自訂網域。 ``` { "Domain": "auth.example.com", "UserPoolId": "us-east-1_EXAMPLE", "ManagedLoginVersion": 2, "CustomDomainConfig": { "CertificateArn": "arn:aws:acm:us-east-1:111122223333:certificate/a1b2c3d4-5678-90ab-cdef-EXAMPLE11111" } } ``` ------ ## 步驟 2：新增別名目標和子網域 在此步驟中，您會透過網域名稱伺服器 (DNS) 服務供應商，設定可指回在先前步驟所指定別名目標的別名。如果是使用 Amazon Route 53 進行 DNS 位址解析，請選擇**使用 Route 53 新增別名目標和子網域**一節。 ### 將別名目標和子網域新增到目前的 DNS 組態 + 如果不是使用 Route 53 進行 DNS 地址解析，則您必須使用 DNS 服務供應商的組態工具，將先前步驟中的別名目標新增為網域的 DNS 記錄。您的 DNS 供應商也必須為您的自訂網域設定子網域。 ### 使用 Route 53 新增別名目標和子網域 1. 登入 [Route 53 主控台](https://console.aws.amazon.com/route53/)。如果出現提示，請輸入您的 AWS 登入資料。 1. 如果您在 Route 53 中沒有公有託管區域，請使用您自訂網域的父系根建立一個託管區域。如需詳細資訊，請參閱《*Amazon Route 53 開發人員指南*》中的[建立公有託管區域](https://docs.aws.amazon.com/Route53/latest/DeveloperGuide/CreatingHostedZone.html)。 1. 選擇**建立託管區域**。 1. 輸入您自訂網域的上層網域，例如 *auth.example.com*，來自 **Domain Name** (網域名稱) 清單的網域，例如 *myapp.auth.example.com*。 1. 輸入託管區域的**說明**。 1. 選擇 **Public hosted zone** (公有託管區域) 的託管區域 **Type** (類型)，以允許公有用戶端解析您的自訂網域。不支援選擇 **Private hosted zone** (私有託管區域)。 1. 根據需要套用 **Tags** (標籤)。 1. 選擇**建立託管區域**。 **注意** 您也可以為自訂網域建立新的託管區域，並在父託管區域中設定委派，將查詢導向子網域託管區域。否則，請建立 A 記錄。此方法為您的託管區域提供更多靈活性與安全性。如需詳細資訊，請參閱[為透過 Amazon Route 53 託管的網域建立子網域](https://aws.amazon.com/premiumsupport/knowledge-center/create-subdomain-route-53/)。 1. 在 **Hosted Zones (託管區域)** 頁面上，選擇託管區域的名稱。 1. 如果您還沒有自訂網域的父系網域，請新增 DNS 記錄。使用下列屬性建立父系網域的 DNS 記錄： + **記錄名稱**：保留空白。 + **記錄類型**：`A`。 + **別名**：不啟用。 + **值**：輸入您選擇的目標。此記錄必須解析為*某個項目*，但記錄的值對 Amazon Cognito 無關緊要。 + **TTL**：設定為您偏好的 TTL 或保留為預設值。 + **路由政策**：選擇**簡易路由**。 1. 選擇**建立記錄**。以下是網域 *example.com* 的範例記錄： `example.com. 60 IN A 198.51.100.1` **注意** Amazon Cognito 會驗證您自訂網域的上層網域是否有 DNS 記錄，以防止生產網域遭到意外劫持。如果您沒有上層網域的 DNS 記錄，則 Amazon Cognito 會在您嘗試設定自訂網域時傳回錯誤。開始授權 (SOA) 記錄不足以進行父網域驗證。 1. 為您的自訂網域新增具有下列屬性的另一個 DNS 記錄： + **記錄名稱**：您的自訂網域字首，例如為 `auth`建立記錄`auth.example.com`。 + **記錄類型**：`A`。 + **別名**：啟用。 + 將**流量路由到**：選擇**別名到 Cloudfront 分佈**。輸入您先前記錄的**別名目標**，例如 `123example.cloudfront.net`。 + **路由政策**：選擇**簡易路由**。 1. 選擇**建立記錄**。 **注意** 您的新記錄可能需要大約 60 秒才能傳播到所有 Route 53 DNS 伺服器。您可以使用 Route 53 [GetChange](https://docs.aws.amazon.com/Route53/latest/APIReference/API_GetChange.html) API 方法驗證您的變更是否已傳播。 ## 步驟 3：驗證您的登入頁面 + 驗證可從自訂網域使用上述登入頁面。 在瀏覽器中輸入這個地址後，登入您的自訂網域和子網域。下面是自訂網域 *example.com*、子網域 *auth* 的範例 URL： ``` https://myapp.auth.example.com/login?response_type=code&client_id=&redirect_uri= ``` ## 變更自訂網域所用的 SSL 憑證 必要時，您可以使用 Amazon Cognito 變更自訂網域所要套用的憑證。 通常，若是由 ACM 例行憑證續約便不需要這麼做。當您在 ACM 續約現有的憑證時，該憑證的 ARN 將保持不變，而且您的自訂網域會自動使用新的憑證。 不過，若您使用新的憑證取代現有的憑證，則 ACM 將為新的憑證指派新的 ARN。若要將新憑證套用到您的自訂網域，您必須向 Amazon Cognito 提供該 ARN。 在您提供新憑證之後，Amazon Cognito 需歷經 1 小時才能將其分發到您的自訂網域。 **開始之前** 若要在 Amazon Cognito 中變更您的憑證，您必須先將該憑證新增至 ACM。如需詳細資訊，請參閱 *AWS Certificate Manager 使用者指南*中的[入門](https://docs.aws.amazon.com/acm/latest/userguide/gs.html)。 將憑證新增至 ACM 時，您必須選擇美國東部 (維吉尼亞北部) 當作 AWS 區域。 您可以使用 Amazon Cognito 主控台或 API 變更您的憑證。 ------ #### [ AWS 管理主控台 ] **從 Amazon Cognito 主控台續約憑證：** 1. 登入 AWS 管理主控台 並開啟位於 的 Amazon Cognito 主控台[https://console.aws.amazon.com/cognito/home](https://console.aws.amazon.com/cognito/home)。 1. 選擇 **User Pools** (使用者集區)。 1. 選擇您要為其更新憑證的使用者集區。 1. 選擇**網域**功能表。 1. 選擇 **Actions** (動作)、**Edit ACM certificate** (編輯 ACM 憑證)。 1. 選取您要與自訂網域產生關聯的新憑證。 1. 選擇**儲存變更**。 ------ #### [ API ] **續約憑證 (Amazon Cognito API)** + 使用 [UpdateUserPoolDomain](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateUserPoolDomain.html) 動作。 ------ # 將品牌套用到受管登入頁面 您可能想要在身分驗證服務和應用程式之間提供一致的使用者體驗。您可以使用 AWS SDK 中的自訂表單和後端 API 操作，或使用受管登入來完成此目標。受管登入和傳統託管 UI 是應用程式元件的 Web 前端，可提供使用者集區的身分驗證。若要將受管身分驗證服務與應用程式 UX 同步，您有兩個自訂選項：品牌編輯器和託管 UI 品牌。您可以在 Amazon Cognito 主控台和使用者集區 API 操作中選擇您偏好的體驗。 **品牌編輯器** [品牌編輯器](managed-login-brandingeditor.md)是最新使用者集區 UI 體驗、[受管登入](cognito-user-pools-managed-login.md)的最新自訂選項。品牌編輯器是適用於受管登入資產和樣式的無程式碼視覺化編輯器，以及一組適用於大量組態選項的程式設計組態 API 操作。您使用[網域](cognito-user-pools-assign-domain.md)和受管登入設定的使用者集區會自動轉譯登入頁面的品牌設計工具版本。 **託管 UI （傳統） 品牌** [託管 UI （傳統） 品牌體驗](hosted-ui-classic-branding.md)有兩個選項：使用一組固定樣式選項修改層疊樣式表 (CSS) 檔案，以及新增自訂標誌影像。您可以在 Amazon Cognito 主控台或使用 [SetUICustomization](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_SetUICustomization.html) API 操作設定這些選項。服務啟動時，Amazon Cognito 只有此選項。您使用[網域](cognito-user-pools-assign-domain.md)和託管 UI 品牌版本設定的使用者集區會自動轉譯登入頁面的傳統版本。您的[功能計劃](cognito-sign-in-feature-plans.md)可能也僅支援託管 UI。 **注意** 品牌編輯器和傳統品牌體驗會修改託管身分驗證服務的視覺化屬性。目前，您無法修改顯示在受管登入頁面上的文字，除了將當地語系化套用至多種語言之一。如需當地語系化的詳細資訊，請參閱 [受管登入當地語系化](cognito-user-pools-managed-login.md#managed-login-localization)。 ## 選擇品牌體驗並指派樣式 在 Amazon Cognito 主控台中，新使用者集區預設為**受管登入**品牌體驗。您在受管登入可用之前設定的使用者集區將具有**託管 UI （傳統）** 品牌。您可以在受管登入和託管 UI 品牌之間切換。當您變更**品牌版本**時，Amazon Cognito 會立即將變更套用至使用者集區網域的使用者互動頁面。使用受管登入和託管 UI，您的使用者集區可以具有每個應用程式用戶端的樣式。 每個應用程式用戶端可以有不同的品牌*樣式*，但使用者集區網域提供受管登入或託管 UI。樣式是套用至應用程式用戶端的一組自訂設定。您可以為每個使用者集區設定一個[自訂網域](cognito-user-pools-add-custom-domain.md)和一個[字首網域](cognito-user-pools-assign-domain-prefix.md)。您可以將不同的品牌版本指派給自訂網域和字首網域。不過，當您也有自訂網域時，字首網域無法完全運作，OIDC `.well-known` 探索端點*只會*顯示自訂網域路徑。對於使用此組態的使用者集區中不需要端點探索 (`openid-configuration`) 的操作，您只能使用字首網域。由於使用者集區的這些屬性，您可以有效地為每個使用者集區選擇一個品牌版本。 您可以將樣式指派給使用者集區中的應用程式用戶端，其中網域設定為受管登入品牌版本。樣式是由影像檔案、顯示選項、CSS 值組成的一組視覺化設定。當您將樣式指派給應用程式用戶端時，Amazon Cognito 會立即將您的更新推送到您的使用者互動登入頁面。Amazon Cognito 會使用您選擇的品牌版本和您已套用的自訂來轉譯使用者互動頁面。 ### 更新和刪除樣式 建立樣式時，您可以將其連結至應用程式用戶端。若要變更應用程式用戶端的樣式指派，您必須先刪除原始樣式。目前，您無法在樣式之間複製設定。您必須以程式設計方式執行此操作。若要在樣式和應用程式用戶端之間複寫設定，請使用 [DescribeManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBranding.html) API 操作取得樣式的設定，並使用 [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 或 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) 套用。您無法變更應用程式用戶端的指派樣式，只能刪除原始樣式並設定新的樣式。如需使用 API 和 SDK 操作管理樣式的詳細資訊，請參閱 [受管登入品牌 API 和 SDK 操作](managed-login-brandingeditor.md#branding-designer-api)。 **注意** 建立或更新品牌樣式的程式設計請求，其請求大小不得超過 2 MB。如果您的請求大於此限制，請將您的請求分成多個參數群組`UpdateManagedLoginBranding`的請求，但不超過請求大小上限。這些請求不會導致未指定的參數設為預設值，因此您可以傳送部分請求，而不會影響現有的設定。 您可以從**受管登入**功能表中刪除 Amazon Cognito 主控台中的樣式。在**樣式**下，選擇您要刪除的樣式，然後選擇**刪除樣式**。 在高階，將品牌指派給網域的程序包含下列步驟。 1. [建立網域並設定品牌版本](cognito-user-pools-assign-domain.md)。 1. 建立品牌樣式並將其指派給應用程式用戶端。 **將樣式指派給應用程式用戶端** 1. 在使用者集區的**網域**功能表中，建立網域並將**品牌版本**設定為**受管登入**。 1. 導覽至**受管登入**功能表。在**樣式**下，選擇**建立樣式**。 1. 選擇您要為其指派樣式的應用程式用戶端，或建立新的[應用程式用戶端](user-pool-settings-client-apps.md)。 1. 若要開始設定品牌設定，請選擇**啟動品牌編輯器**。 **Topics** + [ ## 選擇品牌體驗並指派樣式 ](#managed-login-branding-choose) + [ # 品牌編輯器和自訂受管登入 ](managed-login-brandingeditor.md) + [ # 自訂託管 UI （傳統） 品牌 ](hosted-ui-classic-branding.md) # 品牌編輯器和自訂受管登入 品牌編輯器是受管登入網頁的視覺化設計和編輯工具。它內建於 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. 若要選擇初始設定，請輸入快速設定。選取**變更設定類別**，然後選擇**快速設定**。當您選取**繼續**時，品牌編輯器會啟動一組基本選項供您設定。 ## 文字和當地語系化 您無法在品牌編輯器中修改或當地語系化文字。反之，請將`lang`查詢參數新增至您分發給使用者的 URL。此參數可讓您的受管登入頁面當地語系化為多種可用語言之一。如需詳細資訊，請參閱[受管登入當地語系化](cognito-user-pools-managed-login.md#managed-login-localization)。 ## 快速設定 **啟動品牌編輯器**按鈕會為您的受管登入組態載入視覺化編輯器，您可以在其中選擇各種主要自訂選項。當您進行選擇時，Amazon Cognito 會在預覽視窗中轉譯您的受管登入變更。若要返回詳細設定選單，請選取**變更設定類別**按鈕。 **整體外觀和感覺應該是什麼？** 設定受管登入的基本佈景主題設定。 **顯示模式** 為您的受管登入選擇淺色模式、深色模式或適應性體驗。當 Amazon Cognito 轉譯受管登入時，適應性設定會延遲到使用者的瀏覽器偏好設定。選擇瀏覽器自適應模式時，您可以選擇不同的顏色和標誌影像，用於淺色和深色模式。 **Spacing** 設定頁面中元素之間的預設間距。 **邊界半徑** 設定元素外部邊界的四捨五入深度。 **頁面背景看起來如何？** **背景類型** **顯示影像**核取方塊指出您想要背景影像還是設定純色背景顏色。 1. 若要使用影像，請選取**顯示影像**，然後選擇淺色和深色模式的背景影像。您也可以為影像未涵蓋的背景區域設定深色模式和淺色模式**頁面背景顏色**。 1. 若要僅對背景使用顏色，請取消選取**顯示影像**，然後選擇淺色模式和深色模式**頁面背景顏色**。 **表單看起來應該如何？** 設定受管登入的形式元素設定。表單項目的範例包括登入和程式碼提示。 **水平對齊** 設定表單欄位的水平對齊。 **表單標誌** 設定標誌影像的位置。 **標誌影像** 選擇要包含在淺色和深色模式表單元素中的標誌影像檔案。若要上傳影像，請選取**標誌影像**下拉式清單，選擇**新增資產**，然後新增標誌檔案。 **主要品牌顏色** 為淺色和深色模式設定佈景主題顏色。此顏色將作為背景顏色套用到分類為主要的所有元素。 **標頭看起來應該如何？** 選擇是否要在受管登入頁面中包含 標頭。標頭可以包含標誌影像。 **標頭標誌** 設定 標頭中標誌影像的位置。 **標誌影像** 選擇要包含在 標頭中的標誌位置和標誌影像檔案。若要上傳影像，請選取**標誌影像**下拉式清單，選擇**新增資產**，然後新增標誌檔案。 **標頭背景顏色** 設定標頭背景的淺色和深色模式顏色。 ## 詳細設定 在詳細設定檢視中，您可以修改**基礎**和元件中的個別**元件**。**預覽**索引標籤會顯示目前內容中的受管登入預覽，其中包含您的自訂。 ![\[受管登入元件詳細組態的 AWS 管理主控台 螢幕擷取畫面。\]](http://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) 若要輸入元件的視覺化編輯器，請在元件的圖磚中選擇編輯圖示。從佈景主題 Studio 編輯器，您可以使用**變更設定類別**按鈕在元件之間切換。 ### 基礎 **應用程式樣式** 設定受管登入組態的基本概念。此類別具有整體佈景主題、文字間距以及頁面標頭和頁尾的設定。 **顯示模式** 為您的受管登入頁面選擇淺色模式、深色模式或適應性體驗。選擇瀏覽器自適應模式時，您可以選擇不同的顏色和標誌影像，用於淺色和深色模式。 **Spacing** 設定頁面中元素之間的預設間距。 **身分驗證行為** 為將使用者連接到外部身分提供者 (IdPs按鈕設定樣式。本節包含讓受管登入提示使用者取得電子郵件地址，並將其與其 [SAML 身分提供者識別符](cognito-user-pools-managing-saml-idp-naming.md)配對的選項**網域搜尋輸入**。 **表單行為** 設定輸入表單的樣式：輸入的位置、顏色和元素的對齊。 ### 元件 **按鈕** Amazon Cognito 在受管登入頁面上呈現的按鈕樣式。 **分隔符號** 受管登入元素之間分隔線和邊界的樣式，例如輸入表單和外部供應商登入選擇器。 **下拉式清單** 下拉式功能表的樣式。 **網頁圖示** Amazon Cognito 為標籤和書籤圖示提供的影像樣式。 **焦點環** 表示目前選取輸入之醒目提示的樣式。 **表單容器** 繫結表單之元素的樣式。 **全域頁尾** Amazon Cognito 在受管登入頁面底部顯示的頁尾樣式。 **全域標頭** Amazon Cognito 顯示在受管登入頁面頂端的標頭樣式。 **指示** 錯誤和成功訊息的樣式。 **選項控制** 核取方塊、多選和其他輸入提示的樣式。 **頁面背景** 受管登入整體背景的樣式。 **輸入** 表單欄位輸入提示的樣式。 **連結** 受管登入頁面中超連結的樣式。 **頁面的文字** 頁面內文字的樣式。 **欄位的文字** 表單輸入周圍文字的樣式。 ## 受管登入品牌 API 和 SDK 操作 您也可以使用 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 檔案中。以下是您可以新增的影像和產生程式設計請求以設定品牌樣式的指引。 ### 映像資產 [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 ``` ------ ### 受管登入品牌操作的工具 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`模型，除非您另有指定。 # 自訂託管 UI （傳統） 品牌 您可以使用 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，則您必須為使用者集區設定網域。 ## 在傳統品牌中指定自訂標誌 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 自訂 您可以為託管的應用程式頁面自訂 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 管理主控台 您可以使用 AWS 管理主控台 為您的應用程式指定 UI 自訂設定。 **注意** 您可以利用使用者集區的詳細規格來建構下列 URL，並將其輸入瀏覽器中，以檢視採用您的自訂項目的託管使用者界面：` https:///login?response_type=code&client_id=&redirect_uri=`。您可能需要等到一分鐘後再重新整理瀏覽器，在主控台中所做的變更才會出現。 您的網域會顯示在 **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 使用下列命令來為您的使用者集區指定應用程式使用者界面自訂設定。 **若要為使用者集區的內建應用程式 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 --client-id --image-file fileb://"" --css ".label-customizable{ color: ;}"` + AWS CLI 影像編碼為 Base64 二進位文字： `aws cognito-idp set-ui-customization --user-pool-id --client-id --image-file --css ".label-customizable{ 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)