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

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

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

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

참고

이 기능을 사용하려면 사용자 풀에 기능과 연결된 도메인이 있어야 합니다.

로고 이미지에 허용되는 최대 파일 크기는 100KB입니다.

앱의 CSS 사용자 정의 지정

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

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

    • background-customizable

    • banner-customizable

    • errorMessage-customizable

    • idpButton-customizable

    • idpButton-customizable:hover

    • inputField-customizable

    • inputField-customizable:focus

    • label-customizable

    • legalText-customizable

    • logo-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은 텍스트 설명 아래의 패딩 양입니다.

  • displayblock 또는 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은 설명 아래의 패딩 양입니다.

  • displayblock 또는 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 사용자 지정 설정을 지정할 수 있습니다.

Original console
참고

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

도메인 이름 탭에 도메인이 나타납니다. 일반 설정 탭에 앱 클라이언트 ID와 콜백 URL이 표시됩니다.

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

  1. Amazon Cognito 콘솔에 로그인합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.

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

  3. UI 사용자 지정 탭을 선택합니다.

  4. 사용자 지정할 앱 클라이언트로 가서 이전에 앱 클라이언트 탭에서 생성한 앱 클라이언트의 드롭다운 메뉴에서 사용자 지정을 원하는 앱을 선택합니다.

  5. 자체의 로고 이미지 파일을 업로드하려면 파일 선택을 선택하거나 로고(선택 사항) 상자로 파일을 끌어 옵니다.

  6. [CSS 사용자 정의(선택 사항)(CSS customizations (optional))]에서 CSS 속성을 기본값에서 변경하여 앱의 모양을 사용자 정의할 수 있습니다.

New console
참고

사용자 풀에 대한 세부 사항을 포함시켜 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 설정을 사용자 정의하려면 [앱 클라이언트(App clients)]를 찾아서 수정할 앱 클라이언트를 선택한 다음 [호스트된 UI 사용자 정의(Hosted UI customization)]를 찾아서 [편집(Edit)]을 선택합니다. 앱 클라이언트를 사용자 풀 기본 사용자 정의에서 클라이언트별 사용자 정의로 전환하려면 [클라이언트 수준 설정 사용(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에 대해 사용자 지정을 설정하려면

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

  • AWS API: SetUICustomization