내장 로그인 및 가입 웹페이지 사용자 지정 - Amazon Cognito

문서의 영문과 번역 사이에 충돌이 있는 경우에는 영문 버전을 따릅니다. 번역 버전은 기계 번역을 사용하여 제공합니다.

내장 로그인 및 가입 웹페이지 사용자 지정

AWS Management 콘솔이나 AWS CLI 또는 API를 사용하여 내장 앱 UI 환경에 대한 사용자 지정 설정을 지정할 수 있습니다. 앱에 표시할 사용자 지정 로고 이미지를 업로드할 수 있습니다. 다수의 CSS 사용자 지정을 선택할 수도 있습니다.

단일 클라이언트(특정 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

  • 속성 값에는 HTML, @import, @supports, @page, @media 문이나 Javascript가 포함될 수 없습니다.

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

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

입력 필드
  • width는 포함 블록의 비율로 표시되는 너비입니다.

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

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

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

  • 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는 버튼의 배경색입니다. 표준 색상 값이면 무엇이든 가능합니다.

  • border-color는 버튼 경계의 색상입니다. 표준 색상 값이면 무엇이든 가능합니다.

자격 증명 공급자 설명
  • padding-top은 설명 위의 패딩 양입니다.

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

  • displayblock 또는 inline일 수 있습니다.

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

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

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

로고
  • 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 콘솔)

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

참고

사용자 풀에 대한 세부 사항을 포함시켜 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 콘솔에 로그인합니다.

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

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

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

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

  6. 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