Amazon Cognito의 호스팅 웹 UI를 구성하려면 어떻게 해야 합니까?

최종 업데이트 날짜: 2020년 1월 23일

Amazon Cognito 사용자 풀에 맞게 호스팅 웹 UI를 구성하고 싶은데, 어떤 설정을 사용해야 하는지 잘 모르겠습니다. 어떻게 설정해야 합니까?

간략한 설명

Amazon Cognito에서 사용자 풀을 생성한 다음 이에 대한 도메인을 구성하면 Amazon Cognito는 앱에 가입 및 로그인 페이지를 추가할 수 있는 호스팅 웹 UI를 자동으로 프로비저닝합니다.

이를 설정하는 방법이나 사용할 설정(예: OAuth 2.0 흐름 및 범위 유형)을 잘 모르는 경우 본 문서의 단계를 수행합니다.

​해결 방법

아직 사용자 풀을 생성하지 않았다면 사용자 풀에서 앱 클라이언트를 생성합니다. 그런 다음 아래 지침을 따릅니다.

사용자 풀에 도메인 이름 추가

  1. Amazon Cognito 콘솔에서 [사용자 풀 관리]를 선택한 다음, 사용자 풀을 선택합니다.
  2. 왼쪽 탐색 창의 [앱 통합]에서 [도메인 이름]을 선택합니다.
  3. Amazon Cognito 호스팅 도메인에 자체 도메인 접두사를 추가하거나 자체 사용자 정의 도메인을 추가합니다.

앱 클라이언트 설정 변경

  1. Amazon Cognito 콘솔에서 [사용자 풀 관리]를 선택한 다음, 사용자 풀을 선택합니다.
  2. 왼쪽 탐색 창의 [앱 통합]에서 [앱 클라이언트 설정]을 선택합니다.
  3. 다음을 수행합니다.
    [자격 증명 공급자 활성화]에서 [Cognito 사용자 풀] 확인란을 선택합니다.
    [콜백 URL]에는 인증 코드를 수신할 웹 애플리케이션의 URL을 입력합니다. 사용자가 로그인하면 여기로 리디렉션됩니다.
    [로그아웃 URL]에는 로그아웃할 때 사용자를 리디렉션할 URL을 입력합니다.
    [허용된 OAuth Flows]에서 활성화하려는 OAuth 2.0 인증 흐름을 선택합니다. 예를 들어, [Authorization code grant] 및 [Implicit grant]가 있습니다. 자세한 내용은 OAuth 웹 사이트의 OAuth Grant Types를 참조하십시오.
    [허용돈 OAuth 범위]에서 사용자가 인증될 때 Amazon Cognito에서 토큰에 추가할 OAuth 범위를 선택합니다. 예를 들어, [phone], [email] 및 [openid]가 있습니다.
  4. [변경 내용 저장]을 선택합니다.

자세한 내용은 사용자 풀 앱 클라이언트 구성을 참조하십시오.

(선택 사항) 호스팅 웹 UI 사용자 지정

호스팅 웹 UI에 대해 사용자 지정 로고를 추가하거나 CSS를 사용자 지정할 수 있습니다. 자세한 내용은 내장 로그인 및 가입 웹페이지 사용자 지정을 참조하십시오.

(선택 사항) 호스팅 웹 UI에 대한 URL 구성

호스팅 웹 UI의 로그인 URL에 포함되는 파라미터를 제어하려면 URL을 수동으로 구성합니다.

  1. Amazon Cognito 콘솔에서 [사용자 풀 관리]를 선택한 다음, 사용자 풀을 선택합니다.
  2. 왼쪽 탐색 창에서 [앱 통합]을 선택합니다.
  3. 클립보드에 도메인 URL을 복사한 후 참조를 위해 텍스트 편집기에 붙여넣습니다.
  4. 왼쪽 탐색 창의 [앱 통합]에서 [앱 클라이언트 설정]을 선택합니다.
  5. 다음을 수행합니다.
    [App client [name]]에서 클립보드에 ID를 복사한 후 참조를 위해 텍스트 편집기에 붙여넣습니다.
    [로그인 및 로그아웃 URL]에서 [콜백 URL]에 입력했던 URL을 복사합니다.
  6. 방금 복사한 정보를 다음 형식으로 붙여 넣어 호스팅 웹 UI에 대한 URL을 구성합니다.
    domainUrl/login?response_type=code&client_id=appClientId&redirect_uri=callbackUrl
    예:
    https://my-user-pool.auth.us-east-1.amazoncognito.com/login?response_type=code&client_id=a1b2c3d4e5f6g7h8i9j0k1l2m3&redirect_uri=https://my-website.com

앞서 [허용된 OAuth Flows]에 대해 [Authorization code grant]를 활성화한 경우, 이 URL을 사용하면 사용자가 로그인할 때 Amazon Cognito에서 인증 코드를 반환하게 합니다. 앞서 [허용된 OAuth Flows]에 대해 [Implicit grant]를 활성화했으며 사용자가 로그인할 때 Amazon Cognito에서 액세스 토큰을 반환하게 하려는 경우에는 URL에서 response_type=coderesponse_type=token으로 대체합니다.

호스팅 웹 UI 시작

참고: 호스팅 웹 UI에 대한 URL을 수동으로 구성한 경우, 웹 브라우저에 해당 URL을 입력하십시오.

  1. Amazon Cognito 콘솔에서 [사용자 풀 관리]를 선택한 다음, 사용자 풀을 선택합니다.
  2. 왼쪽 탐색 창의 [앱 통합]에서 [앱 클라이언트 설정]을 선택합니다.
  3. [호스팅 UI]에서 [호스팅 UI 시작]을 선택합니다. 새 브라우저 탭이나 창에서 호스팅 웹 UI의 로그인 페이지가 열립니다.

이 문서가 도움이 되었습니까?

AWS에서 개선해야 할 부분이 있습니까?


도움이 필요하십니까?