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

최종 업데이트 날짜: 2022년 10월 27일

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

간략한 설명

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

설정하는 방법 또는 사용할 설정을 모르는 경우(예: 켜야 할 OAuth 2.0 흐름 및 범위)에는 이 문서의 단계에 따르세요.

해결 방법

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

참고: 이러한 지침은 새로운 Amazon Cognito 콘솔을 사용합니다.

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

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

앱 클라이언트 설정 변경

  1. Amazon Cognito 콘솔에서 사용자 풀을 선택한 다음, 원하는 사용자 풀을 선택합니다.
  2. 앱 통합앱 클라이언트 및 분석 섹션에서 앱 클라이언트를 선택합니다.
  3. 호스팅 UI 섹션에서 편집을 선택합니다.
  4. 다음을 수행합니다.
    허용되는 콜백 URL에 인증 코드를 수신할 웹 애플리케이션의 URL을 입력합니다. 사용자가 로그인하면 여기로 리디렉션됩니다.
    허용되는 로그아웃 URL - 선택 사항에 로그아웃할 때 사용자를 리디렉션할 URL을 입력합니다.
    ID 제공업체의 드롭다운 목록에서 Cognito 사용자 풀을 선택합니다.
    OAuth 2.0 부여 유형에서 인증 코드 부여 또는암시적 부여 OAuth 2.0 인증 흐름을 선택합니다. 인증 코드 부여 유형은 기밀 및 공용 클라이언트에서 인증 코드를 액세스 토큰으로 교환하는 데 사용됩니다. 암시적 부여 유형은 인증 코드 부여를 사용할 수 없는 특별한 이유가 있는 경우에만 사용됩니다. 자세한 내용은 Amazon Cognito 사용자 풀 OAuth 2.0 부여 이해를 참조하세요.
    OpenID Connect 범위에서 openid 및 사용자가 인증할 때 Amazon Cognito에서 토큰을 추가하게 할 기타 모든 OAuth 범위를 선택합니다. 전화 이메일을 예로 들 수 있습니다.
    사용자 지정 범위에서 이 앱에 대해 승인하려는 사용자 지정 범위를 선택합니다.
  5. 변경 사항 저장을 선택합니다.

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

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

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

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

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

  1. Amazon Cognito 콘솔에서 사용자 풀을 선택한 다음, 원하는 사용자 풀을 선택합니다.
  2. 앱 통합도메인 섹션에서 도메인 URL을 복사합니다. 그런 다음 참조할 수 있도록 URL을 텍스트 편집기에 붙여넣습니다.
  3. 앱 클라이언트 및 분석에서 클라이언트 이름을 클릭합니다.
  4. 클라이언트 ID를 클립보드에 복사합니다. 그런 다음 참조할 수 있도록 ID를 텍스트 편집기에 붙여넣습니다.
  5. 허용되는 콜백 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
    -또는-
    로그인 엔드포인트의 기본 URL에 액세스하려면 앱 클라이언트 섹션에서 호스팅 UI 보기를 선택합니다. 그런 다음 앞에서 설명한 대로 URL의 일부를 바꿉니다.

앞서 OAuth 2.0 부여 유형에 대해 인증 코드 부여를 켠 경우, 이 URL을 사용하면 사용자가 로그인할 때 Amazon Cognito에서 인증 코드를 반환하게 합니다. 앞서 OAuth 2.0 부여 유형에 대해 묵시적 부여를 켰으며 사용자가 로그인할 때 Amazon Cognito가 액세스 토큰을 대신 반환하게 하려는 경우에는 URL의 response_type=coderesponse_type=token으로 변경합니다.

호스팅 웹 UI 시작

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

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

이 문서가 도움이 되었나요?


결제 또는 기술 지원이 필요하세요?