Amazon Cognito에 호스팅 웹 UI를 구성하려면 어떻게 해야 하나요?

3분 분량

Amazon Cognito 사용자 풀에 호스팅 웹 UI를 구성하고 싶은데 어떤 설정을 활성화해야 할지 잘 모르겠습니다. 어떻게 설정하나요?

간략한 설명

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

이를 설정하는 방법이나 사용할 설정(예: OAuth 2.0 흐름 유형 및 활성화할 범위)을 잘 모르는 경우 이 문서의 단계를 따르세요.

해결 방법

아직 생성하지 않은 경우 사용자 풀을 생성하고 사용자 풀에 앱 클라이언트를 생성합니다. 그런 다음, 다음 지침을 따르세요.

참고: 이 지침에서는 새 Amazon Cognito 콘솔을 사용합니다.

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

Amazon Cognito 콘솔에서 사용자 풀을 선택하고 사용자 풀을 선택합니다.
앱 통합에서 도메인 이름을 선택하고 작업을 선택합니다.
Cognito 도메인 생성을 선택하여 Amazon Cognito 호스팅 도메인에 내 도메인 접두사를 추가합니다. 또는 사용자 지정 도메인 생성을 선택하여 사용자 지정 도메인을 추가합니다.

앱 클라이언트 설정 변경

Amazon Cognito 콘솔에서 사용자 풀을 선택하고 사용자 풀을 선택합니다.
앱 통합 아래 앱 클라이언트 및 분석 섹션에서 앱 클라이언트를 선택합니다.
호스팅 UI 섹션에서 편집을 선택합니다.
다음을 실행하세요.
허용된 콜백 URL에 권한 부여 코드를 받을 웹 애플리케이션의 URL을 입력합니다. 사용자가 로그인하면 여기로 리디렉션됩니다.
허용된 로그아웃 URL - 선택 사항에 사용자가 로그아웃할 때 리디렉션할 URL을 입력합니다.
자격 증명 공급자 드롭다운 목록에서 Cognito 사용자 풀을 선택합니다.
OAuth 2.0 grant 유형에서 권한 부여 코드 부여 권한 부여 또는 암시적 권한 부여 OAuth 2.0 인증 흐름을 선택합니다. 권한 부여 코드 권한 부여 유형은 기밀 및 공개 클라이언트가 인증 코드를 액세스 토큰으로 교환하는 데 사용됩니다. 암시적 권한 부여 유형은 권한 부여 코드 권한 부여를 사용할 수 없는 특정한 이유가 있는 경우에만 사용됩니다.
OpenID Connect 범위에서 사용자 인증 시 Amazon Cognito가 토큰에 추가할 openid 및 기타 OAuth 범위를 선택합니다. 예를 들면 전화와 이메일입니다.
사용자 지정 범위에서 이 앱에 대해 승인하려는 사용자 지정 범위를 선택합니다.
변경 사항 저장을 선택합니다.

자세한 내용은 사용자 풀 앱 클라이언트 구성을 참고하세요.

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

사용자 지정 로고를 추가하거나 호스팅 웹 UI에 맞게 CSS를 사용자 지정할 수 있습니다. 자세한 내용은 기본 제공 로그인 및 가입 웹페이지 사용자 지정을 참고하세요.

(선택 사항) 호스팅 웹 UI의 URL 구성

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

Amazon Cognito 콘솔에서 사용자 풀을 선택하고 사용자 풀을 선택합니다.
앱 통합에서 도메인 섹션 아래에서 도메인 URL을 복사합니다. 그런 다음 참조할 수 있도록 URL을 텍스트 편집기에 붙여 넣습니다.
앱 클라이언트 및 분석에서 클라이언트 이름을 클릭합니다.
클라이언트 ID를 클립보드에 복사합니다. 그런 다음 참조를 위해 ID를 텍스트 편집기에 붙여 넣습니다.
허용된 콜백 URL 중 하나를 클립보드에 복사합니다. 그런 다음 참조할 수 있도록 URL을 텍스트 편집기에 붙여 넣습니다.
방금 복사한 정보를 다음 형식으로 붙여 넣어 호스팅 웹 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
-또는-
앱 클라이언트 섹션에서 호스팅 UI 보기를 선택하여 로그인 엔드포인트의 기본 URL에 액세스합니다. 그런 다음 앞서 설명한 대로 URL의 일부를 교체합니다.

이전에 OAuth 2.0 grant 유형에 권한 부여 코드 부여를 켠 경우 이 URL을 사용하면 사용자가 로그인할 때 Amazon Cognito가 인증 코드를 반환하라는 메시지가 표시됩니다. 이전에 OAuth 2.0 grant 유형에 암시적 권한 부여를 활성화한 상태이며, 사용자가 로그인할 때 대신 Amazon Cognito가 액세스 토큰을 반환하도록 하려면 URL에서 response_type=code를 response_type=token으로 바꿉니다.

호스팅 웹 UI 시작

참고: 호스팅 웹 UI의 URL을 수동으로 구성한 경우 대신 웹 브라우저에 해당 URL을 입력하세요.

Amazon Cognito 콘솔에서 사용자 풀을 선택하고 사용자 풀을 선택합니다.
앱 통합 아래 앱 클라이언트 및 분석 섹션에서 클라이언트 이름을 선택합니다.
호스팅 UI에서 호스팅 UI 보기를 선택합니다. 호스팅 웹 UI의 로그인 페이지가 새 브라우저 탭 또는 창에서 열립니다.