기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다. # 사용자 풀 관리형 로그인 웹 도메인을 선택하여 사용자 풀에 대한 서비스를 호스팅할 수 있습니다. Amazon Cognito 사용자 풀은 도메인을 추가할 때 *관리형 로그인*이라고 하는 다음 함수를 가져옵니다. + OAuth 2.0 및 OpenID Connect(OIDC)와 함께 작동하는 애플리케이션에 대한 ID 제공업체(IdP) 역할을 하는 [권한 부여 서버](https://datatracker.ietf.org/doc/html/rfc6749#section-1.1). 권한 부여 서버는 [요청을 라우팅](authorization-endpoint.md)하고, [JSON 웹 토큰(JWT)을 발급하고 관리](token-endpoint.md)하며, [사용자 속성 정보를 전달](userinfo-endpoint.md)합니다. + 로그인, 로그아웃, 암호 관리와 같은 인증 작업을 위해 바로 사용 가능한 사용자 인터페이스(UI). *관리형 로그인 페이지*는 인증 서비스를 위한 웹 프런트 엔드 역할을 합니다. + SAML 2.0 IdP, OIDC IdP, Facebook, Login with Amazon, Sign in with Apple 및 Google에 대한 서비스 공급자(SP) 또는 신뢰 당사자(RP)입니다. 관리형 로그인과 일부 기능을 공유하는 추가 옵션은 클래식 *호스팅 UI*입니다. 클래식 호스팅 UI는 관리형 로그인 서비스의 1세대 버전입니다. 호스팅 UI IdP 및 RP 서비스는 일반적으로 관리형 로그인과 동일한 특성을 갖지만 로그인 페이지는 더 간단한 설계와 더 적은 기능을 갖습니다. 예를 들어 패스키 로그인은 클래식 호스팅 UI에서 사용할 수 없습니다. Lite [기능 플랜](cognito-sign-in-feature-plans.md)에서 클래식 호스팅 UI는 사용자 풀 도메인 서비스에 대한 유일한 옵션입니다. 관리형 로그인 페이지는 사용자 풀의 기본 가입, 로그인, 다중 인증 및 암호 재설정 활동을 위한 웹 인터페이스 모음입니다. 또한 사용자에게 로그인 옵션을 제공하려는 경우 사용자를 하나 이상의 서드 파티 ID 제공업체(IdP)에 연결할 수 있습니다. 사용자를 인증하고 권한을 부여하고자 할 때 앱이 사용자 브라우저에서 관리형 로그인 페이지를 간접적으로 호출할 수 있습니다. 관리형 로그인 사용자 환경을 사용자 지정 로고, 배경 및 스타일로 브랜드에 맞게 만들 수 있습니다. 관리형 로그인 UI에 적용할 수 있는 브랜딩에는 관리형 로그인을 위한 *브랜딩 편집기*와 호스팅 UI에 대한 *호스팅 UI(클래식) 브랜딩*이라는 두 가지 옵션이 있습니다. **브랜딩 편집기** Amazon Cognito 콘솔의 최신 인증 옵션과 시각적 편집기를 통해 업데이트된 사용자 환경을 제공합니다. **호스팅 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 Management Console에서 사용 가능한 언어입니다. 사용자에게 배포하는 링크에서 다음 예시와 같이 `lang` 쿼리 파라미터를 추가합니다. ``` https:///oauth2/authorize?lang=es&response_type=code&client_id=&redirect_uri= ``` Amazon Cognito는 `lang` 파라미터를 사용한 초기 요청 후 언어 기본 설정으로 사용자의 브라우저에서 쿠키를 설정합니다. 쿠키가 설정되면 파라미터를 표시하거나 요청에 포함할 필요 없이 언어 선택이 유지됩니다. 예를 들어 사용자가 `lang=de` 파라미터로 로그인 요청을 하면 관리형 로그인 페이지는 쿠키를 지우거나 `lang=en`과 같은 새 현지화 파라미터로 새 요청을 할 때까지 독일어로 렌더링됩니다. 현지화는 관리형 로그인에만 사용할 수 있습니다. [관리형 로그인 브랜딩](managed-login-branding.md)을 사용하려면 Essentials 또는 Plus [기능 플랜](cognito-sign-in-feature-plans.md)을 사용하고 도메인을 할당해야 합니다. 사용자가 관리형 로그인에서 선택한 항목은 [사용자 지정 이메일 또는 SMS 발신자 트리거](user-pool-lambda-custom-sender-triggers.md)에서 사용할 수 없습니다. 이러한 트리거를 구현할 때는 다른 메커니즘을 사용하여 사용자가 선호하는 언어를 결정해야 합니다. 로그인 흐름에서 `locale` 속성은 위치에 따라 사용자가 선호하는 언어를 나타낼 수 있습니다. 가입 흐름에서 사용자 풀의 리전 또는 앱 클라이언트 ID는 언어 기본 설정을 나타낼 수 있습니다. 다음 언어를 사용할 수 있습니다. **관리형 로그인 언어** | 언어 | 코드 | | --- | --- | | 독일어 | de | | 영어 | en | | 스페인 요리 | es | | 프랑스어 | fr | | 인도네시아어 | id | | 이탈리아어 | 작동 | | 일본어 | ja | | 한국어 | ko | | 포르투갈어(브라질) | pt-BR | | 중국어 간체 | zh-CN | | 중국어 번체 | zh-TW | ## 약관 문서 사용자가 가입할 때 **이용 약관** 및 **개인 정보 보호 정책** 문서에 대한 링크를 표시하도록 관리형 로그인 페이지를 구성할 수 있습니다. 앱 클라이언트에서 두 용어 문서를 모두 설정하면 가입 중에 사용자에게 **가입하면 이용 약관 및 개인 정보 보호 정책에 동의하는 것입니다**라는 텍스트가 표시됩니다. **사용 약관** 및 **개인 정보 보호 정책** 문구는 문서에 하이퍼링크로 연결된 관리형 로그인 페이지에 표시됩니다. 약관 문서는 관리형 로그인 현지화와 일치하는 언어별 URL을 지원합니다. 사용자가 `lang` 쿼리 파라미터가 있는 언어를 선택하면 Amazon Cognito는 해당 언어의 용어 문서에 대한 링크를 표시합니다. 특정 언어에 대한 URL을 구성하지 않은 경우 Amazon Cognito는 앱 클라이언트에 대해 구성한 기본 URL을 사용합니다. 앱 클라이언트에 대한 약관 문서를 구성하려면 사용자 풀의 **관리형 로그인** 메뉴로 이동합니다. **약관 문서**에서 **약관 문서 생성**을 선택합니다. ------ #### [ Amazon Cognito console ] **약관 문서를 생성하는 방법** 1. 사용자 풀로 이동하여 **관리형 로그인** 메뉴를 선택합니다. **약관 문서**를 찾습니다. 1. **약관 문서 생성**을 선택합니다. 1. 약관 문서를 할당할 앱 클라이언트를 선택합니다. 1. **약관 이름**을 입력합니다. 그러면 콘솔에서 문서가 식별됩니다. 1. **링크**에서 **언어**를 선택하고 해당 언어로 용어 문서를 호스팅하는 **URL**을 입력합니다. 1. 추가 언어에 대한 URL을 추가하려면 **다른 언어 추가**를 선택합니다. 1. **생성(Create)**을 선택합니다. ------ #### [ Amazon Cognito user pools API ] 다음은 [CreateTerms](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateTerms.html) 요청 본문의 예입니다. 이렇게 하면 관리형 로그인이 해당 언어로 현지화될 때 앱 클라이언트 `1example23456789`의 가입 페이지가 개인 정보 보호 정책의 프랑스어 및 포르투갈어(브라질) 버전에 대한 링크를 렌더링합니다. 관리형 로그인이 가입 페이지에서 링크를 렌더링하기 전에 `terms-of-use`에 대한 URL을 설정하려면 별도의 요청이 필요합니다. ``` { "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 를 사용하여 웹 또는 모바일 앱에 인증을 추가하는 경우 Amplify 명령줄 인터페이스(CLI)에서 관리형 로그인 페이지를 설정하고 Amplify 프레임워크에서 라이브러리를 설정할 수 있습니다. 앱에 인증을 추가하려면 프로젝트에 `Auth` 범주를 추가합니다. 그런 다음 애플리케이션에서 Amplify 클라이언트 라이브러리를 사용하여 사용자 풀 사용자를 인증합니다. 인증을 위해 관리형 로그인 페이지를 호출하거나 IdP로 리디렉션하는 권한 부여 엔드포인트를 통해 사용자를 페더레이션할 수 있습니다. 사용자가 제공업체를 통해 성공적으로 인증하면 Amplify는 사용자 풀에 새 사용자를 만들고 사용자 토큰을 앱에 전달합니다. 다음 예제에서는를 사용하여 앱에서 소셜 공급자와의 관리형 로그인 AWS Amplify 을 설정하는 방법을 보여줍니다. + [React](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이라고도 합니다. `https://www.example.com` 또는 `myapp://example`과 같이 애플리케이션이 실행되는 URL입니다. 사용자 풀에서 브랜딩 스타일로 도메인 및 앱 클라이언트를 구성하면 관리형 로그인 페이지를 인터넷에서 사용할 수 있게 됩니다. ## 로그인 페이지 보기 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= ``` 사용자 풀의 도메인 메뉴에서 사용자 풀 **도메인** 문자열을 조회할 수 있습니다. **앱 클라이언트** 메뉴에서 앱 클라이언트 ID, 콜백 URL, 허용 범위 및 기타 구성을 식별할 수 있습니다. 사용자 지정 파라미터를 사용하여 `/oauth2/authorize` 엔드포인트로 이동하면 Amazon Cognito가 `/oauth2/login` 엔드포인트로 리디렉션하거나 `identity_provider` 또는 `idp_identifier` 파라미터가 있는 경우 자동으로 IdP 로그인 페이지로 리디렉션합니다. **묵시적 부여를 위한 요청의 예** 다음 URL을 사용하여 로그인 웹 페이지를 볼 수 있습니다. 여기서 `response_type=token`은 묵시적 코드 부여입니다. 로그인 성공 이후 Amazon Cognito는 사용자 풀 토큰을 웹 브라우저의 주소 표시줄로 반환합니다. ``` 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는 업데이트된 호스팅 인증 서비스인 *관리형 로그인*을 도입했습니다. 관리형 로그인은 *브랜딩 편집기*로 업데이트된 디자인과 느낌입니다. 브랜딩 편집기는 노코드 시각적 편집기이며 호스팅 UI 사용자 지정 환경보다 더 큰 옵션 제품군입니다. 관리형 로그인에는 사용자 지정 백그라운드 이미지와 다크 모드 테마도 도입되었습니다. 사용자 풀에서 관리형 로그인과 호스팅 UI 브랜딩 환경 간에 전환할 수 있습니다. 관리형 로그인 페이지 사용자 지정에 대한 자세한 내용은 [관리형 로그인 페이지에 브랜딩 적용](managed-login-branding.md) 섹션을 참조하세요. ## 관리형 로그인 및 호스팅 UI에 대해 알아야 할 사항 **1시간 관리형 로그인 및 호스팅 UI 세션 쿠키** 사용자가 로그인 페이지 또는 타사 제공업체로 로그인하면 Amazon Cognito는 브라우저에 쿠키를 설정합니다. 이 쿠키를 사용하면 사용자는 1시간 동안 동일한 인증 방법으로 다시 로그인할 수 있습니다. 브라우저 쿠키로 로그인하면 앱 클라이언트 구성에 지정된 기간 동안 지속되는 새 토큰을 가져옵니다. 사용자 속성 또는 인증 요소를 변경해도 브라우저 쿠키로 다시 로그인하는 기능에는 영향을 미치지 않습니다. 세션 쿠키를 사용한 인증은 쿠키 기간을 추가 시간으로 재설정하지 않습니다. 사용자가 가장 최근에 성공한 대화형 인증 후 1시간 이상 지난 후 로그인 페이지에 액세스하려고 하면 다시 로그인해야 합니다. **사용자 계정 확인 및 사용자 속성 확인** 사용자 풀 [로컬 사용자](cognito-terms.md#terms-localuser)의 경우, 관리형 로그인과 호스팅 UI는 사용자 풀을 **Cognito에서 검증 및 확인을 위해 자동으로 메시지를 보내도록 허용**으로 구성하면 가장 효과적으로 작동합니다. 이 설정을 활성화하면 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(Cross-Origin Resource Sharing) 원본 정책을 지원하지 않습니다. CORS 정책은 사용자가 요청에 인증 파라미터를 전달하지 못하도록 합니다. 대신, 애플리케이션 프런트엔드에 CORS 정책을 구현하세요. Amazon Cognito는 다음 엔드포인트에 대한 요청에 `Access-Control-Allow-Origin: *` 응답 헤더를 반환합니다. 1. [Token 엔드포인트](token-endpoint.md) 1. [취소 엔드포인트](revocation-endpoint.md) 1. [userInfo 엔드포인트](userinfo-endpoint.md) **쿠키** 관리형 로그인 및 호스팅 UI는 사용자 브라우저에서 쿠키를 설정합니다. 쿠키는 사이트에서 타사 쿠키를 설정하지 않는 일부 브라우저의 요구 사항을 준수합니다. 이는 사용자 풀 엔드포인트에만 적용되며 다음을 포함합니다. + 각 요청에 대한 `XSRF-TOKEN` 쿠키. + 사용자가 리디렉션될 때 세션 일관성을 위한 `csrf-state` 쿠키. + 세션 일관성을 위한 `csrf-state-legacy` 쿠키로, 브라우저가 `SameSite` 속성을 지원하지 않는 경우 Amazon Cognito에서 폴백으로 읽습니다. + 성공적인 로그인 시도를 1시간 동안 보관하는 `cognito` 세션 쿠키. + 관리형 로그인에서 사용자가 선택한 [언어 현지화](#managed-login-localization)를 유지하는 `lang` 쿠키입니다. + 사용자가 관리형 로그인 페이지를 탐색할 때 필요한 데이터를 유지하는 `page-data` 쿠키입니다. iOS에서는 [모든 쿠키를 차단](https://support.apple.com/en-us/105082)할 수 있습니다. 이 설정은 관리형 로그인 또는 호스팅 UI와 호환되지 않습니다. 이 설정을 활성화할 수 있는 사용자와 함께 작업하려면 AWS SDK를 사용하여 네이티브 iOS 앱에 사용자 풀 인증을 빌드합니다. 이 시나리오에서는 쿠키 기반이 아닌 고유한 세션 스토리지를 구축할 수 있습니다. **관리형 로그인 버전 변경의 영향** 도메인을 추가하고 관리형 로그인 버전을 설정할 때 다음과 같은 영향을 고려합니다. + 관리형 로그인 또는 호스팅 UI(클래식) 브랜딩을 사용하여 접두사 도메인을 추가하면 로그인 페이지를 사용할 수 있기까지 최대 60초가 걸릴 수 있습니다. + 관리형 로그인 또는 호스팅 UI(클래식) 브랜딩을 사용하여 사용자 지정 도메인을 추가하면 로그인 페이지를 사용할 수 있기까지 최대 5분이 걸릴 수 있습니다. + 도메인의 브랜딩 버전을 변경하면 새 브랜딩 버전에서 로그인 페이지를 사용할 수 있기까지 최대 4분이 걸릴 수 있습니다. + 관리형 로그인과 호스팅 UI(클래식) 브랜딩 간에 전환하면 Amazon Cognito는 사용자 세션을 유지하지 않습니다. 새 인터페이스로 다시 로그인해야 합니다. **기본 스타일** 에서 앱 클라이언트를 생성하면 AWS Management Console 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는 5분 이내에 완료되지 않는 인증 요청을 취소하고 사용자를 관리형 로그인으로 리디렉션합니다. 페이지에 `Something went wrong` 오류 메시지가 표시됩니다. # 사용자 풀 도메인 구성 도메인 구성은 사용자 풀 설정의 선택적 부분입니다. 사용자 풀 도메인은 사용자 인증, 타사 공급자와의 페더레이션 및 OpenID Connect(OIDC) 흐름을 위한 기능을 호스팅합니다. 여기에는 가입, 로그인 및 암호 복구와 같은 키 작업을 위한 사전 구축된 인터페이스인 *관리형 로그인*이 있습니다. 또한 기계 간(M2M) 권한 부여 및 기타 OIDC 및 OAuth 2.0 인증 및 권한 부여 흐름을 위해 [권한 부여](authorization-endpoint.md), [userInfo](userinfo-endpoint.md) 및 [토큰](token-endpoint.md)과 같은 표준 OpenID Connect(OIDC) 엔드포인트를 호스팅합니다. 사용자는 사용자 풀과 연결된 도메인에서 관리형 로그인 페이지로 인증합니다. 이 도메인을 구성하는 방법에는 두 가지가 있습니다. 기본 Amazon Cognito 호스팅 도메인을 사용하거나 사용자가 소유한 사용자 지정 도메인을 구성할 수 있습니다. 사용자 지정 도메인 옵션에는 유연성, 보안 및 제어를 위한 더 많은 옵션이 있습니다. 예를 들어, 친숙한 조직 소유 도메인은 사용자의 신뢰를 높이고 로그인 프로세스를 더욱 직관적으로 만들 수 있습니다. 하지만 사용자 지정 도메인 접근 방식에는 SSL 인증서 및 DNS 구성 관리와 같은 몇 가지 추가 오버헤드가 필요합니다. OIDC 검색 엔드포인트, 엔드포인트 URL용 `/.well-known/openid-configuration` 및 토큰 서명 키용 `/.well-known/jwks.json`는 도메인에서 호스팅되지 않습니다. 자세한 내용은 [ID 제공업체 및 신뢰 당사자 엔드포인트](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`, `amazon` 또는 `cognito` 텍스트를 사용할 수 없습니다. **검색 엔드포인트가 다른 도메인에 있음** 사용자 풀 [검색 엔드포인트](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가 접두사 도메인의 브랜딩 버전을 시작하거나 업데이트하는 데 최대 1분이 걸릴 수 있습니다. 사용자 지정 도메인에 대한 변경 사항이 전파되는 데 최대 5분이 걸릴 수 있습니다. 새 사용자 지정 도메인이 전파되는 데 최대 1시간이 걸릴 수 있습니다. **사용자 지정 도메인과 접두사 도메인을 동시에 사용** 사용자 지정 도메인과가 소유한 접두사 도메인을 모두 사용하여 사용자 풀을 설정할 수 있습니다 AWS. 사용자 풀 [검색 엔드포인트](federation-endpoints.md)는 다른 도메인에서 호스팅되므로 *사용자 지정 도메인*에만 제공됩니다. 예를 들어, `openid-configuration`는 `"https://auth.example.com/oauth2/authorize"`의 `"authorization_endpoint"`에 대한 단일 값을 제공합니다. 사용자 풀에 사용자 지정 도메인과 접두사 도메인이 모두 있는 경우 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*)을 가질 수 있습니다. 관리형 로그인 세션 쿠키는 사용자 지정 도메인 및 모든 하위 도메인(예: *\$1.auth.example.com*)에 유효합니다. 이로 인해 애플리케이션의 어떤 사용자도 상위 도메인 *및* 하위 도메인의 관리형 로그인에 액세스해서는 안 됩니다. 사용자 지정 도메인이 동일한 TLD를 사용하는 경우 동일한 하위 도메인 수준을 유지합니다. 사용자 지정 도메인 *auth.example.com*이 있는 사용자 풀이 있다고 가정해 보겠습니다. 그런 다음 다른 사용자 풀을 생성하고 사용자 지정 도메인 *uk.auth.example.com.*을 할당합니다. 사용자는 *auth.example.com*으로 로그인하고 브라우저가 와일드카드 경로 *\$1.auth.example.com*에 있는 모든 웹 사이트에 제공하는 쿠키를 받습니다. 그런 다음 *uk.auth.example.com.*에 로그인합니다. 이는 잘못된 쿠키를 사용자 풀 도메인에 전달하고 로그인 프롬프트 대신 오류를 수신합니다. 반면, *\$1.auth.example.com*에 대한 쿠키가 있는 사용자는 *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(Public Suffix List)](https://publicsuffix.org/)에 등록됩니다. PSL은 사용자의 웹 브라우저가 사용자 풀 엔드포인트와 해당 엔드포인트가 설정하는 쿠키를 일관되게 이해하는 데 도움이 됩니다. 사용자 풀 상위 도메인은 다음과 같은 형식을 갖습니다. ``` auth.Region.amazoncognito.com auth-fips.Region.amazoncognito.com ``` 를 사용하여 앱 클라이언트와 사용자 풀 도메인을 추가하려면 섹션을 AWS Management Console참조하세요[앱 클라이언트 생성](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 Management Console 또는 API를 사용하여 사용자 풀 도메인을 AWS CLI 구성할 수 있습니다. ------ #### [ 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. **생성(Create)**을 선택합니다. ------ #### [ 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)**] 페이지에서 표시됩니다. **앱 클라이언트 설정(App client settings)** 페이지에 앱 클라이언트 ID와 콜백 URL이 표시됩니다. # 관리형 로그인에 자체 도메인 사용 앱 클라이언트를 설정한 후 [관리형 로그인](cognito-user-pools-managed-login.md)의 도메인 서비스에 대한 사용자 지정 도메인으로 사용자 풀을 구성할 수 있습니다. 사용자 지정 도메인을 사용하면 사용자는 기본 `amazoncognito.com` [접두사 도메인](cognito-user-pools-assign-domain-prefix.md) 대신 사용자 자체 웹 주소를 사용하여 애플리케이션에 로그인할 수 있습니다. 사용자 지정 도메인은 특히 루트 도메인이 애플리케이션을 호스팅하는 도메인과 일치하는 경우 익숙한 도메인 이름을 사용하여 애플리케이션에 대한 사용자 신뢰를 향상시킵니다. 사용자 지정 도메인을 사용하면 조직의 보안 요구 사항을 더욱 효과적으로 준수할 수 있습니다. 사용자 지정 도메인에는 사용자 풀, 앱 클라이언트, 소유한 웹 도메인을 비롯한 몇 가지 전제 조건이 있습니다. 또한 사용자 지정 도메인에는 미국 동부(버지니아 북부)의 AWS Certificate Manager (ACM)로 관리되는 사용자 지정 도메인에 대한 SSL 인증서가 필요합니다. Amazon Cognito는 ACM 인증서로 전송 중에 보안되는 Amazon CloudFront 배포를 생성합니다. 도메인을 소유하므로 트래픽을 사용자 지정 도메인의 CloudFront 배포로 보내는 DNS 레코드를 생성해야 합니다. 이러한 요소가 준비되면 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) 단원을 참조하십시오. + 자신이 소유한 웹 도메인. *상위 도메인*에 유효한 DNS **A 레코드**가 있어야 합니다. 이 레코드에 어떤 값이든 할당할 수 있습니다. 상위 도메인은 도메인의 루트 도메인이거나 도메인 계층 구조에서 한 단계 높은 자식 도메인일 수 있습니다. 예를 들어 사용자 지정 도메인이 *auth.xyz.example.com*인 경우 Amazon Cognito는 *xyz.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 인증서입니다. 인증서는 글로벌 서비스인 CloudFront의 배포와 연결되므로 인증서는 us-east-1에 있어야 합니다. + 서버 이름 표시(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)을 참조하세요. + 사용자 풀 권한 부여 서버가 사용자 세션에 쿠키를 추가할 수 있도록 허용하는 애플리케이션입니다. Amazon Cognito는 관리형 로그인 페이지에 필요한 여러 쿠키를 설정합니다. `cognito`, `cognito-fl` 및 `XSRF-TOKEN`가 포함됩니다. 각 개별 쿠키가 브라우저 크기 제한을 준수하지만 사용자 풀 구성을 변경하면 관리형 로그인 쿠키의 크기가 증가할 수 있습니다. 사용자 지정 도메인 앞에 있는 Application Load Balancer(ALB)와 같은 중간 서비스는 최대 헤더 크기 또는 총 쿠키 크기를 적용할 수 있습니다. 애플리케이션이 자체 쿠키도 설정하면 사용자의 세션이 이러한 제한을 초과할 수 있습니다. 크기 제한 충돌을 방지하려면 애플리케이션이 사용자 풀 도메인 서비스를 호스팅하는 하위 도메인에 쿠키를 설정하지 않는 것이 좋습니다. + Amazon CloudFront 배포를 업데이트할 수 있는 권한입니다. 다음 IAM 정책 문을 AWS 계정의 IAM 사용자, 그룹 또는 역할에 연결하면 이 작업을 할 수 있습니다. ------ #### [ JSON ] **** ``` { "Version":"2012-10-17", "Statement": [ { "Sid": "AllowCloudFrontUpdateDistribution", "Effect": "Allow", "Action": [ "cloudfront:updateDistribution" ], "Resource": [ "*" ] } ] } ``` ------ CloudFront의 작업 권한 부여에 대한 자세한 내용은 [Using Identity-Based Policies (IAM Policies) for CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/access-control-managing-permissions.html)(CloudFront에 자격 증명 기반 정책(IAM 정책) 사용)를 참조하세요. 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 인증서(ACM certificate)**]에서 도메인에 사용할 SSL 인증서를 선택합니다. 사용자 풀에 관계없이 미국 동부(버지니아 북부) AWS 리전 의 ACM 인증서만 Amazon Cognito 사용자 지정 도메인과 함께 사용할 수 있습니다. 사용 가능한 인증서가 없는 경우 ACM을 사용하여 미국 동부(버지니아 북부)에서 인증서를 프로비저닝할 수 있습니다. 자세한 내용은 *AWS Certificate Manager 사용 설명서*에서 [시작하기](https://docs.aws.amazon.com/acm/latest/userguide/gs.html)를 참조하세요. 1. **브랜딩 버전을** 선택합니다. 브랜딩 버전은 해당 도메인의 모든 사용자 대화형 페이지에 적용됩니다. 사용자 풀은 모든 앱 클라이언트에 대해 관리형 로그인 또는 호스팅 UI 브랜딩을 호스팅할 수 있습니다. **참고** 사용자 지정 도메인과 접두사 도메인을 가질 수 있지만 Amazon Cognito는 *사용자 지정* 도메인의 `/.well-known/openid-configuration` 엔드포인트만 제공합니다. 1. **생성(Create)**을 선택합니다. 1. Amazon Cognito가 **도메인** 메뉴로 돌아갑니다. [**도메인의 DNS에 별칭 레코드 생성(Create an alias record in your domain's 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) 서비스 공급자를 통해, 이전 단계의 별칭 대상을 다시 가리키는 별칭을 설정합니다. DNS 주소 확인에 Amazon Route 53을 사용하는 경우 **Route 53을 사용하여 별칭 대상 및 하위 도메인을 추가하려면** 섹션을 선택하세요. ### 현재 DNS 구성에 별칭 대상 및 하위 도메인을 추가하려면 + DNS 주소 확인에 Route 53을 사용하지 않는 경우 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. **Create Hosted Zone(호스팅 영역 생성)**을 선택합니다. 1. [**도메인 이름(Domain Name)**] 목록에서 사용자 정의 도메인(예: *myapp.auth.example.com*)의 상위 도메인(예: *auth.example.com*)을 입력합니다. 1. 호스팅 영역에 대한 **설명**을 입력합니다. 1. 퍼블릭 클라이언트가 사용자 정의 도메인을 확인할 수 있도록 호스팅 영역 [**유형(Type)**]으로 [**퍼블릭 호스팅 영역(Public hosted zone)**]을 선택합니다. [**프라이빗 호스팅 영역(Private hosted zone)**]은 선택할 수 없습니다. 1. 원하는 대로 [**태그(Tags)**]를 적용합니다. 1. **호스팅 영역 생성(Create hosted zone)**을 선택합니다. **참고** 또한 하위 도메인 호스팅 영역으로 쿼리를 전달하는 상위 호스팅 영역에 위임을 설정하여 사용자 지정 도메인에 대한 새 호스팅 영역을 생성할 수 있습니다. 그렇지 않으면 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) 레코드는 상위 도메인 확인을 위한 DNS 레코드로 충분하지 않습니다. 1. 다음 속성을 사용하여 사용자 지정 도메인에 대한 다른 DNS 레코드를 추가합니다. + **레코드 이름**: 사용자 지정 도메인 접두사(예: `auth.example.com`에 대한 레코드를 만들기 위한 `auth`). + **레코드 유형**: `A`. + **별칭**: 활성화합니다. + **트래픽 라우팅 대상**: **Cloudfront 배포에 대한 별칭**을 선택합니다. 이전에 기록한 **별칭 대상**(예: `123example.cloudfront.net`)을 입력합니다. + **라우팅 정책**: **단순 라우팅**을 선택합니다. 1. **레코드 생성**을 선택합니다. **참고** 새 레코드가 모든 Route 53 DNS 서버에 전파되는 데 약 60초가 걸릴 수 있습니다. 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 Management Console ] **Amazon Cognito 콘솔에서 인증서를 갱신하려면** 1. 에 로그인 AWS Management Console 하고에서 Amazon Cognito 콘솔을 엽니다[https://console.aws.amazon.com/cognito/home](https://console.aws.amazon.com/cognito/home). 1. [**사용자 풀(User Pools)**]을 선택합니다. 1. 인증서를 업데이트할 사용자 풀을 선택합니다. 1. **도메인** 메뉴를 선택합니다. 1. [**작업(Actions)**], [**ACM 인증서 편집(Edit ACM certificate)**]을 차례로 선택합니다. 1. 사용자 정의 도메인에 연결할 새 인증서를 선택합니다. 1. **변경 사항 저장(Save changes)**을 선택합니다. ------ #### [ API ] **인증서를 갱신하려면(Amazon Cognito API)** + [UpdateUserPoolDomain](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_UpdateUserPoolDomain.html) 작업을 사용합니다. ------ # 관리형 로그인 페이지에 브랜딩 적용 인증 서비스와 애플리케이션 간에 일관된 사용자 경험을 제공할 수 있습니다. AWS SDK에서 사용자 지정 양식 및 백엔드 API 작업을 사용하거나 관리형 로그인을 사용하여이 목표를 달성할 수 있습니다. 관리형 로그인 및 클래식 호스팅 UI는 사용자 풀로 인증을 제공하는 애플리케이션의 구성 요소에 대한 웹 프런트 엔드입니다. 관리형 인증 서비스를 애플리케이션 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)을 설정할 수 있습니다. 사용자 지정 도메인과 접두사 도메인에 다른 브랜딩 버전을 할당할 수 있습니다. 그러나 사용자 지정 도메인도 있는 경우 접두사 도메인이 완전히 작동하지 않습니다. `.well-known` OIDC 검색 엔드포인트에는 사용자 지정 도메인 경로*만* 표시됩니다. 이 구성의 사용자 풀에서 엔드포인트 검색(`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) 섹션을 참조하세요. **참고** 브랜딩 스타일을 생성하거나 업데이트하는 프로그래밍 방식의 요청은 요청 크기가 2MB 이하여야 합니다. 요청이 이 제한보다 크면 최대 `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/ko_kr/cognito/latest/developerguide/images/hosted-ui-customization-editor-preview.png) 시작하려면 사용자 풀 또는 앱 클라이언트에 적용할 수 있는 스타일을 생성합니다. **브랜딩 편집기를 시작하려면** 1. **도메인** 탭에서 [도메인을 생성](cognito-user-pools-assign-domain.md)하거나 기존 도메인을 업데이트합니다. **브랜딩 버전**에서 **관리형 로그인**을 사용하도록 도메인을 설정합니다. 1. 기존 앱 클라이언트 스타일이 있는 경우 삭제합니다. 1. **앱 클라이언트** 메뉴에서 앱 클라이언트를 선택합니다. 1. **관리형 로그인 스타일**에서 앱 클라이언트에 할당된 스타일을 선택합니다. 1. **스타일 삭제**를 선택합니다. 선택 항목을 확인합니다. 1. 사용자 풀의 **관리형 로그인** 메뉴로 이동합니다. 아직 선택하지 않은 경우 프롬프트에 따라 관리형 로그인이 포함된 [기능 플랜](cognito-sign-in-feature-plans.md)을 선택합니다. 변경하지 않고 브랜딩 편집기를 체크아웃하려면 **이 기능 미리 보기**를 선택할 수도 있습니다. 1. **스타일**에서 **스타일 생성**을 선택합니다. 1. 스타일을 할당할 앱 클라이언트를 선택하고 **생성**을 선택합니다. 새 앱 클라이언트를 생성할 수도 있습니다. 1. Amazon Cognito 콘솔이 브랜딩 편집기를 시작합니다. 1. 편집을 시작할 탭을 선택하거나 **편집기 시작**을 선택하고 [빠른 설정](#branding-designer-quick-setup)을 입력합니다. 다음 탭을 사용할 수 있습니다. **미리 보기** 관리형 로그인 페이지에서 현재 선택 항목이 어떻게 보이는지 확인합니다. **기본** 전체 테마를 설정하고, 외부 ID 제공업체에 대한 링크를 구성하고, 양식 필드를 스타일화합니다. **구성 요소** 헤더, 바닥글 및 개별 UI 요소에 대한 스타일을 구성합니다. 1. 초기 설정을 선택하려면 빠른 설정을 입력합니다. **설정 범주 변경**을 선택하고 **빠른 설정**을 선택합니다. **계속**을 선택하면 구성할 수 있는 기본 옵션 세트와 함께 브랜딩 편집기가 시작됩니다. ## 텍스트 및 현지화 브랜딩 편집기에서는 텍스트를 수정하거나 현지화할 수 없습니다. 대신 사용자에게 배포하는 URL에 `lang` 쿼리 파라미터를 추가합니다. 이 파라미터를 사용하면 관리형 로그인 페이지가 사용 가능한 여러 언어 중 하나로 현지화됩니다. 자세한 내용은 [관리형 로그인 현지화](cognito-user-pools-managed-login.md#managed-login-localization) 단원을 참조하십시오. ## 빠른 설정 **브랜딩 편집기 시작** 버튼은 다양한 기본 사용자 지정 옵션 중에서 선택할 수 있는 관리형 로그인 구성의 시각적 편집기를 로드합니다. 선택하면 Amazon Cognito가 미리 보기 창에서 관리형 로그인 변경 사항을 렌더링합니다. 세부 설정 메뉴로 돌아가려면 **설정 범주 변경** 버튼을 선택합니다. **전반적인 디자인과 느낌은 어떤가요?** 관리형 로그인에 대한 기본 테마 설정을 구성합니다. **표시 모드** 관리형 로그인을 위한 라이트 모드, 다크 모드 또는 적응형 환경을 선택합니다. Amazon Cognito가 관리형 로그인을 렌더링할 때 적응형 설정은 사용자의 브라우저 기본 설정에 따라 달라집니다. 브라우저 적응 모드를 선택하면 밝은 모드와 어두운 모드에 대해 다양한 색상과 로고 이미지를 선택할 수 있습니다. **Spacing** 페이지의 요소 간에 기본 간격을 설정합니다. **테두리 반경** 요소의 바깥쪽 테두리의 반올림 깊이를 설정합니다. **페이지 배경은 어떻게 보여야 하나요?** **배경 유형** **이미지 표시** 확인란은 배경 이미지를 설정할지 아니면 단색 배경 색상을 설정할지를 나타냅니다. 1. 이미지를 사용하려면 **이미지 표시**를 선택하고 라이트 모드와 다크 모드의 배경 이미지를 선택합니다. 이미지에서 다루지 않는 배경 영역에 대해 다크 모드 및 라이트 모드 **페이지 배경색**을 설정할 수도 있습니다. 1. 배경에 색상만 사용하려면 **이미지 표시**를 선택 취소하고 라이트 모드 및 다크 모드 **페이지 배경 색상**을 선택합니다. **양식은 어떻게 보여야 하나요?** 관리형 로그인의 양식 요소에 대한 설정을 구성합니다. 양식 항목의 예로는 로그인 및 코드 프롬프트가 있습니다. **가로 맞춤** 양식 필드의 수평 정렬을 설정합니다. **양식 로고** 로고 이미지의 위치를 설정합니다. **로고 이미지** 라이트 모드와 다크 모드의 양식 요소에 포함할 로고 이미지 파일을 선택합니다. 이미지를 업로드하려면 **로고 이미지** 드롭다운을 선택하고 **새 자산 추가**를 선택한 다음 로고 파일을 추가합니다. **기본 브랜딩 색상** 라이트 모드와 다크 모드의 테마 색상을 설정합니다. 이 색상은 기본으로 분류된 모든 요소에 배경 색상으로 적용됩니다. **헤더는 어떻게 표시되어야 하나요?** 관리형 로그인 페이지에 헤더를 포함할지 여부를 선택합니다. 헤더에는 로고 이미지가 포함될 수 있습니다. **헤더 로고** 헤더에서 로고 이미지의 위치를 설정합니다. **로고 이미지** 헤더에 포함할 로고 위치와 로고 이미지 파일을 선택합니다. 이미지를 업로드하려면 **로고 이미지** 드롭다운을 선택하고 **새 자산 추가**를 선택한 다음 로고 파일을 추가합니다. **헤더 배경색** 헤더 배경의 라이트 모드 색상과 다크 모드 색상을 설정합니다. ## 세부 설정 세부 설정 보기에서 **파운데이션** 및 **구성 요소**의 개별 성 요소를 수정할 수 있습니다. **미리 보기** 탭에는 사용자 지정과 함께 현재 컨텍스트의 관리형 로그인 미리 보기가 표시됩니다. ![\[관리형 로그인 구성 요소의 세부 구성 AWS Management Console 스크린샷입니다.\]](http://docs.aws.amazon.com/ko_kr/cognito/latest/developerguide/images/hosted-ui-customization-console-preview.png) 구성 요소의 시각적 편집기를 입력하려면 구성 요소의 타일에서 편집 아이콘을 선택합니다. 테마 스튜디오 편집기에서 **설정 범주 변경** 버튼을 사용하여 구성 요소 간에 전환할 수 있습니다. ### 기본 **앱 스타일** 관리형 로그인 구성의 기본 사항을 구성합니다. 이 범주에는 전체 테마, 텍스트 간격, 페이지 헤더 및 바닥글에 대한 설정이 있습니다. **표시 모드** 관리형 로그인 페이지를 위한 라이트 모드, 다크 모드 또는 적응형 환경을 선택합니다. 브라우저 적응 모드를 선택하면 밝은 모드와 어두운 모드에 대해 다양한 색상과 로고 이미지를 선택할 수 있습니다. **Spacing** 페이지의 요소 간에 기본 간격을 설정합니다. **인증 동작** 사용자를 외부 ID 제공업체(idP)에 연결하는 버튼의 스타일을 구성합니다. 이 섹션에는 관리형 로그인 프롬프트 사용자에게 이메일 주소를 제공하고 이를 [SAML 자격 증명 공급자 식별자](cognito-user-pools-managing-saml-idp-naming.md)와 일치시키는 **도메인 검색 입력** 옵션이 포함되어 있습니다. **양식 동작** 입력 양식의 스타일 구성: 입력 위치, 색상 및 요소 정렬. ### 구성 요소 **버튼** Amazon Cognito가 관리형 로그인 페이지에서 렌더링하는 버튼의 스타일입니다. **분할 도구** 입력 양식과 외부 공급자 로그인 선택기와 같은 관리형 로그인 요소 간의 분할선 및 경계에 대한 스타일입니다. **Dropdown** 드롭다운 메뉴의 스타일입니다. **파비콘** 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 인코딩 바이너리 형식의 이미지 파일 배열입니다. **참고** 브랜딩 스타일을 생성하거나 업데이트하는 프로그래밍 방식의 요청은 요청 크기가 2MB 이하여야 합니다. 요청의 자산으로 인해 이 제한을 초과할 수 있습니다. 이 경우 최대 요청 크기를 초과하지 않는 파라미터 그룹에 대해 요청을 여러 개의 `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. 예를 들어 `1example23456789`와 같이 스타일을 만든 앱 클라이언트의 ID를 기록합니다. 1. `ReturnMergedResources`가 `true`로 설정된 [DescribeManagedLoginBrandingByClient](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_DescribeManagedLoginBrandingByClient.html) API 요청을 사용하여 브랜딩 스타일의 설정을 검색합니다. 다음은 요청 본문의 예입니다. ``` { "ClientId": "1example23456789", "ReturnMergedResources": true, "UserPoolId": "us-east-1_EXAMPLE" } ``` 1. 사용자 지정을 사용하여 `DescribeManagedLoginBrandingByClient`의 출력을 수정합니다. 1. 응답 본문은 생성 및 업데이트 작업을 위한 구문의 일부가 아닌 `ManagedLoginBranding` 요소로 래핑됩니다. JSON 객체의 이 최상위 수준을 제거합니다. 1. 이미지를 바꾸려면 `Bytes` 값을 각 이미지 파일의 Base64-encoded 바이너리 데이터로 바꿉니다. 1. 설정을 업데이트하려면 `Settings` 객체의 출력을 수정하고 다음 요청에 포함시킵니다. Amazon Cognito는 API 응답에서 수신하는 스키마에 없는 `Settings` 객체의 값을 무시합니다. 1. [CreateManagedLoginBranding](https://docs.aws.amazon.com/cognito-user-identity-pools/latest/APIReference/API_CreateManagedLoginBranding.html) 또는 [UpdateManagedLoginBranding](https://docs.aws.amazon.com/) 요청에서 업데이트된 응답 본문을 사용합니다. 이 요청의 크기가 2MB를 초과하는 경우 여러 요청으로 구분합니다. 이러한 작업은 달리 지정하지 않는 한 원래 설정이 변경되지 않은 상태로 유지되는 `PATCH` 모델에서 작동합니다. # 호스팅 UI(클래식) 브랜딩 사용자 지정 AWS Management Console또는 AWS CLI API를 사용하여 호스팅 UI에 대한 클래식 사용자 지정 설정을 지정할 수 있습니다. 앱에 표시할 사용자 지정 로고 이미지를 업로드할 수 있습니다. UI의 디자인과 느낌에 일부 계단식 스타일 시트(CSS) 옵션을 적용할 수도 있습니다. UI 기본값을 사용자 지정하고 특정 설정으로 개별 [앱 클라이언트](cognito-terms.md#term-appclient)를 재정의할 수 있습니다. Amazon Cognito는 클라이언트 수준 설정이 없는 모든 앱 클라이언트에 기본 구성을 적용합니다. Amazon Cognito 콘솔 및 API 요청에서 UI 사용자 지정을 설정하는 요청은 크기가 135KB를 초과해서는 안 됩니다. 드물지만 요청 헤더, CSS 파일 및 로고의 합계가 135KB를 초과할 때도 있습니다. Amazon Cognito는 이미지 파일을 Base64로 인코딩합니다. 이렇게 하면 100KB 이미지의 크기가 130KB로 늘어나, 요청 헤더와 CSS에는 5KB가 유지됩니다. 요청이 너무 크면 AWS Management Console 또는 `SetUICustomization` API 요청이 `request parameters too large` 오류를 반환합니다. 로고 이미지를 100KB 이하로 조정하고 CSS 파일은 3KB 이하로 조정하세요. CSS와 로고 사용자 지정을 별도로 설정할 수는 없습니다. **참고** UI를 사용자 지정하려면 사용자 풀에 대한 도메인을 설정해야 합니다. ## 클래식 브랜딩으로 사용자 지정 로고 지정 Amazon Cognito는 사용자 지정 로고를 [Login 엔드포인트](login-endpoint.md)의 입력 필드 위 중간에 배치합니다. 사용자 지정 호스팅 UI 로고용으로 350x178픽셀까지 확대할 수 있는 PNG, JPG 또는 JPEG 파일을 선택합니다. 로고 파일의 크기는 100KB를 초과할 수 없으며, Amazon Cognito가 Base64로 인코딩한 후에는 130KB를 초과할 수 없습니다. API`ImageFile`[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)에서를 설정하려면 파일을 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` + 속성 값에는 `@import`, `@supports`, `@page` 또는 `@media` 문이나 Javascript 값을 제외한 HTML이 포함될 수 있습니다. 다음 CSS 속성을 사용자 지정할 수 있습니다. **레이블** + **font-weight**는 100에서 900 사이의 100의 배수입니다. + **color**는 텍스트 색상입니다. [법적 CSS 색상 값](https://www.w3schools.com/cssref/css_colors_legal.php)이어야 합니다. **입력 필드** + **width**는 포함 블록의 백분율로 표시되는 너비입니다. + **height**는 픽셀(px) 단위의 입력 필드 높이입니다. + **color**는 텍스트 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. + **background-color**는 입력 필드의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. + **border**는 앱 창 경계의 너비, 투명도 및 색상을 지정하는 표준 CSS 경계 값입니다. 너비의 범위는 1\$1100px입니다. 투명도는 단색(solid) 또는 없음(none)입니다. 표준 색상 값이면 무엇이든 가능합니다. **텍스트 설명** + **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**은 버튼의 위쪽, 오른쪽, 아래쪽 및 왼쪽 마진 크기를 나타내는 4자 문자열입니다. + **font-size**는 텍스트 설명의 글꼴 크기 입니다. + **width**는 포함 블록의 비율로 표시되는 버튼 텍스트의 너비입니다. + **height**는 픽셀(px) 단위의 버튼 높이입니다. + **color**는 버튼 텍스트 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. + **background-color**는 버튼의 배경색입니다. 표준 색상 값이면 무엇이든 가능합니다. **배너** + **padding**은 배너의 위쪽, 오른쪽, 아래쪽 및 왼쪽 패딩 크기를 나타내는 4자 문자열입니다. + **background-color**는 배너의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. **제출 버튼 가리키기** + **color**는 커서를 올려 놓았을 때 버튼의 전경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. + **background-color**는 커서를 올려 놓았을 때 버튼의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. **자격 증명 공급자 버튼 가리키기** + **color**는 커서를 올려 놓았을 때 버튼의 전경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. + **background-color**는 커서를 올려 놓았을 때 버튼의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. **암호 확인이 유효하지 않음** + **color**는 `"Password check not valid"` 메시지의 텍스트 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. **배경** + **background-color**는 앱 창의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. **오류 메시지** + **margin**은 위쪽, 오른쪽, 아래쪽 및 왼쪽 마진 크기를 나타내는 4자 문자열입니다. + **padding**은 패딩 크기입니다. + **font-size**는 글꼴 크기 입니다. + **width**는 포함 블록의 비율로 표시되는 오류 메시지의 너비입니다. + **background-color**는 오류 메시지의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다. + **border**는 경계의 너비, 투명도 및 색상을 지정하는 3자 문자열입니다. + **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**는 **기업 ID로 로그인**과 같은 IdP 섹션 헤더의 텍스트 색상입니다. [법적 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 Management Console 를 사용하여 앱 AWS Management Console 에 대한 UI 사용자 지정 설정을 지정할 수 있습니다. **참고** 사용자 풀에 대한 세부 사항을 포함시켜 URL ` https:///login?response_type=code&client_id=&redirect_uri=`을 구성하고 이를 브라우저에 입력하면 사용자가 지정한 호스팅 UI를 볼 수 있습니다. 브라우저를 새로고침하고 콘솔의 변경 내용이 나타나기까지 최대 1분 정도 기다려야 할 수도 있습니다. 도메인은 [**앱 통합(App integration)**] 탭의 [**도메인(Domain)**] 아래에 표시됩니다. 앱 클라이언트 ID와 콜백 URL은 [**앱 클라이언트(App clients)**] 아래에 표시됩니다. **앱 UI 사용자 지정 설정 지정 방법** 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(클래식) 스타일**을 찾아 **재정의**를 선택합니다. **편집**을 선택합니다. 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에 대한 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)