기본 제공 로그인 및 가입 웹 페이지 사용자 정의 - Amazon Cognito
앱의 사용자 정의 로고 지정앱의 CSS 사용자 정의 지정사용자 풀에 대한 앱 UI 사용자 정의 설정 지정(AWS Management Console)사용자 풀에 대한 앱 UI 사용자 정의 설정 지정(AWS CLI 및 AWS API)

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

기본 제공 로그인 및 가입 웹 페이지 사용자 정의

AWS Management Console이나 AWS CLI 또는 API를 사용하여 내장 앱 UI 환경에 대한 사용자 지정 설정을 지정할 수 있습니다. 앱에 표시할 사용자 지정 로고 이미지를 업로드할 수 있습니다. 계단식 스타일 시트(CSS)를 사용하여 UI의 모양을 사용자 정의할 수도 있습니다.

단일 클라이언트(특정 clientId를 가진) 또는 모든 클라이언트(clientId를 ALL로 설정)에서 앱 UI 사용자 지정 설정을 지정할 수 있습니다. ALL을 지정하면 이전에 UI 사용자 지정이 설정되지 않은 모든 클라이언트에서 기본 구성이 사용됩니다. 특정 클라이언트에 대해 UI 사용자 지정 설정을 지정한 경우에는 더 이상 ALL 구성으로 돌아가지 않습니다.

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 엔드포인트의 입력 필드 위 중간에 배치합니다.

사용자 지정 호스팅 UI 로고용으로 350x178픽셀까지 확대할 수 있는 PNG, JPG 또는 JPEG 파일을 선택합니다. 로고 파일의 크기는 100KB를 초과할 수 없으며, Amazon Cognito가 Base64로 인코딩한 후에는 130KB를 초과할 수 없습니다. API의 SetUICustomization에서 ImageFile을 설정하려면 파일을 Base64로 인코딩된 텍스트 문자열로 변환하거나, AWS CLI에 파일 경로를 입력하고 Amazon Cognito가 사용자 대신 인코딩하게 합니다.

앱의 CSS 사용자 정의 지정

호스팅된 앱 페이지에서 CSS를 사용자 지정할 수 있지만, 다음과 같은 제한 사항이 있습니다.

  • 다음 CSS 클래스 이름 중 하나를 사용할 수 있습니다.

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • idpDescription-customizable

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-customizable

    • passwordCheck-valid-customizable

    • passwordCheck-notValid-customizable

    • redirect-customizable

    • socialButton-customizable

    • submitButton-customizable

    • submitButton-customizable:hover

    • textDescription-customizable

  • 속성 값에는 @import, @supports, @page 또는 @media 문이나 Javascript 값을 제외한 HTML이 포함될 수 있습니다.

다음 CSS 속성을 사용자 지정할 수 있습니다.

Labels

  • font-weight는 100에서 900 사이의 100의 배수입니다.

입력 필드

  • width는 포함 블록의 백분율로 표시되는 너비입니다.

  • height는 픽셀(px) 단위의 입력 필드 높이입니다.

  • color는 텍스트 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다.

  • background-color는 입력 필드의 배경색입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다.

  • border는 앱 창 경계의 너비, 투명도 및 색상을 지정하는 표준 CSS 경계 값입니다. 너비의 범위는 1~100px입니다. 투명도는 단색(solid) 또는 없음(none)입니다. 표준 색상 값이면 무엇이든 가능합니다.

텍스트 설명

  • padding-top은 텍스트 설명 위의 패딩 양입니다.

  • padding-bottom은 텍스트 설명 아래의 패딩 양입니다.

  • display는 block 또는 inline일 수 있습니다.

  • font-size는 텍스트 설명의 글꼴 크기 입니다.

제출 버튼

  • 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는 텍스트 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다.

  • font-size는 글꼴 크기 입니다.

참고

[법적 고지 텍스트(Legal text)]를 사용자 정의하는 경우 로그인 페이지에서 소셜 자격 증명 공급자 아래에 표시되는 [먼저 묻지 않고 계정에 게시하지 않습니다.(We won't post to any of your accounts without asking first)]라는 메시지를 사용자 정의하는 것입니다.

로고

  • max-width는 포함 블록의 비율로 표시되는 최대 너비입니다.

  • max-height는 포함 블록의 비율로 표시되는 최대 높이입니다.

입력 필드 포커스

  • border-color는 입력 필드의 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다.

  • outline은 픽셀 단위의 입력 필드 경계 너비입니다.

소셜 버튼

  • height는 픽셀(px) 단위의 버튼 높이입니다.

  • text-align은 텍스트 정렬 설정입니다. left, right 또는 center일 수 있습니다.

  • width는 포함 블록의 비율로 표시되는 버튼 텍스트의 너비입니다.

  • margin-bottom은 아래쪽 마진 설정입니다.

암호 확인이 유효함

  • color는 "Password check valid" 메시지의 텍스트 색상입니다. 표준 CSS 색상 값이면 무엇이든 가능합니다.

사용자 풀에 대한 앱 UI 사용자 정의 설정 지정(AWS Management Console)

AWS Management Console을 사용하여 앱의 UI 사용자 지정 설정을 지정할 수 있습니다.

참고

사용자 풀에 대한 세부 사항을 포함시켜 URL https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>을 구성하고 이를 브라우저에 입력하면 사용자가 지정한 호스팅 UI를 볼 수 있습니다. 브라우저를 새로고침하고 콘솔의 변경 내용이 나타나기까지 최대 1분 정도 기다려야 할 수도 있습니다.

도메인은 [앱 통합(App integration)] 탭의 [도메인(Domain)] 아래에 표시됩니다. 앱 클라이언트 ID와 콜백 URL은 [앱 클라이언트(App clients)] 아래에 표시됩니다.

앱 UI 사용자 지정 설정 지정 방법

  1. Amazon Cognito 콘솔에 로그인합니다.

  2. 탐색 창에서 [사용자 풀(User Pools)]을 선택한 다음 편집할 사용자 풀을 선택합니다.

  3. [앱 통합(App integration)] 탭을 선택합니다.

  4. 모든 앱 클라이언트에 대한 UI 설정을 사용자 정의하려면 [호스트된 UI 사용자 정의(Hosted UI customization)]를 찾아서 [편집(Edit)]을 선택합니다.

  5. 단일 앱 클라이언트의 UI 설정을 사용자 지정하려면 앱 클라이언트를 찾고 수정할 앱 클라이언트를 선택한 다음 호스팅 UI 사용자 지정을 찾고 편집을 선택합니다. 앱 클라이언트를 사용자 풀 기본 사용자 정의에서 클라이언트별 사용자 정의로 전환하려면 [클라이언트 수준 설정 사용(Use client-level settings)]을 선택합니다.

  6. 고유한 로고 이미지 파일을 업로드하려면 [파일 선택(Choose file)] 또는 [현재 파일 바꾸기(Replace current file)]를 선택합니다.

  7. 호스팅 UI CSS를 사용자 지정하려면 CSS template.css를 다운로드한 다음, 사용자 지정하려는 값으로 템플릿을 수정합니다. 템플릿에 포함된 키만 호스트된 UI에 사용할 수 있습니다. 추가된 CSS 키는 UI에 반영되지 않습니다. CSS 파일을 사용자 정의한 후 [파일 선택(Choose file)] 또는 [현재 파일 바꾸기(Replace current file)]를 선택하여 사용자 정의 CSS 파일을 업로드합니다.

사용자 풀에 대한 앱 UI 사용자 정의 설정 지정(AWS CLI 및 AWS API)

다음 명령을 사용하여 사용자 풀에 대한 앱 UI 사용자 지정 설정을 지정합니다.

사용자 풀의 내장 앱 UI에 대한 UI 사용자 지정 설정을 가져오려면 다음 API 작업을 사용합니다.
사용자 풀의 내장 앱 UI에 대한 UI 사용자 지정 설정을 설정하려면 다음 API 작업을 사용합니다.

  • 이미지 파일의 AWS CLI: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file fileb://"<path-to-logo-image-file>" --css ".label-customizable{ color: <color>;}"

  • Base64 이진 텍스트로 인코딩된 이미지가 포함된 AWS CLI: aws cognito-idp set-ui-customization --user-pool-id <your-user-pool-id> --client-id <your-app-client-id> --image-file <base64-encoded-image-file> --css ".label-customizable{ color: <color>;}"

  • AWS API: SetUICustomization