사용자를 가입 및 로그인하기 위한 기본 제공 앱 UI 사용자 정의 - Amazon Cognito

사용자를 가입 및 로그인하기 위한 기본 제공 앱 UI 사용자 정의

Original console
참고

[UI 사용자 정의(UI customization)] 탭은 기존 사용자 풀을 편집하는 경우에만 나타납니다.

UI 사용자 지정 탭에서 기본 앱 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. [사용자 정의할 앱 클라이언트(App client to customize)]의 드롭다운 메뉴에서 이전에 생성한 앱 클라이언트 중 하나를 선택합니다.

  2. 기본 앱 UI에 로고를 추가하려면 파일 선택(Choose a file)을 선택하거나 파일을 로고(Logo) 상자로 끌어 옵니다.

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

  4. 변경 사항 저장(Save changes)을 선택합니다.

New console

[앱 통합(App integration)] 탭의 [호스트된 UI 사용자 정의(Hosted UI customization)]를 사용하여 기본 앱 UI에 고유한 사용자 정의를 추가할 수 있습니다.

앱 클라이언트에 맞게 호스트된 UI를 사용자 정의할 수도 있습니다. [앱 통합(App integration)] 탭에서 앱 클라이언트를 선택하고 [호스트된 UI 사용자 정의(Hosted UI customization)]를 찾습니다. [클라이언트 수준 설정 사용(Use client-level settings)]을 선택하여 해당 앱 클라이언트 전용 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를 시작할 수도 있습니다. [앱 통합(App integration)] 탭에서 앱 클라이언트를 선택하고 [호스트된 UI 설정(Hosted UI settings)]을 찾습니다. [호스트된 UI 보기(View hosted UI)]를 선택합니다.

기본 제공 앱 UI를 사용자 지정하려면

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

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

  3. 변경 사항 저장(Save changes)을 선택합니다.