2단계. 앱을 추가하여 호스트된 웹 UI 사용 - Amazon Cognito

2단계. 앱을 추가하여 호스트된 웹 UI 사용

사용자 풀을 생성한 이후 앱을 생성하여 사용자 가입 및 로그인에 대해 내장 웹 페이지를 사용할 수 있습니다.

Original console

사용자 풀에 앱을 생성하려면

  1. Amazon Cognito 콘솔로 이동합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.

  2. Manage User Pools(사용자 풀 관리)를 선택합니다.

  3. 목록에서 기존 사용자 풀을 선택하거나 사용자 풀을 생성합니다.

  4. 페이지 왼쪽에 있는 탐색 모음의 [일반 설정(General settings)]에서 [앱 클라이언트(App clients)]를 선택합니다.

  5. 앱 클라이언트 추가(Add an app client)를 선택합니다.

  6. 앱 클라이언트의 이름을 입력합니다.

  7. 이 연습에서는 [클라이언트 암호 생성(Generate client secret)] 옵션의 선택을 취소합니다. 이 연습에서 사용된 JavaScript와 같이 클라이언트 측 인증으로 클라이언트 암호를 사용하는 것은 안전하지 않으며 프로덕션 앱 클라이언트에 권장되지 않습니다. 클라이언트 암호를 보호할 수 있도록 서버 측 인증 구성 요소가 있는 애플리케이션에서만 클라이언트 암호를 사용해야 합니다.

  8. 앱 클라이언트 생성(Create app client)을 선택합니다.

  9. 앱 클라이언트 ID를 메모합니다.

  10. 풀 세부 정보로 돌아가기를 선택합니다.

  11. 콘솔 페이지 왼쪽에 있는 탐색 모음에서 앱 클라이언트 설정을 선택합니다.

  12. [Cognito 사용자 풀(Cognito User Pool)]을 [사용하는 자격 증명 공급자(Enabled Identity Providers)] 중 하나로 선택합니다.

    참고

    Facebook, Amazon, Google 및 Apple 같은 외부 자격 증명 공급자(IdP)를 비롯해 OpenID Connect(OIDC) 또는 SAML IdP를 통해 로그인하도록 허용하려면 먼저 다음 섹션에 설명된 대로 이들을 구성한 다음, 앱 클라이언트 설정(App client settings) 페이지로 돌아가 이들을 활성화합니다.

  13. Amazon Cognito 권한 부여 서버에 대한 콜백 URL을 입력하여 사용자가 인증된 후 호출합니다. 웹앱의 경우 URL이 https://로 시작해야 합니다(예: https://www.example.com).

    iOS 또는 Android 앱의 경우에는 myapp://와 같은 콜백 URL을 사용할 수 있습니다.

  14. 로그아웃 URL을 입력합니다.

  15. Authorization code grant(인증 코드 권한 부여)를 선택하여 사용자 풀 토큰으로 교환되는 인증 코드를 반환합니다. 토큰은 최종 사용자에게 직접 노출되지 않기 때문에 침해될 가능성이 낮습니다. 하지만 사용자 풀 토큰에 대한 인증 코드를 교환하려면 백엔드에 사용자 지정 애플리케이션이 필요합니다. 보안상의 이유로 모바일 앱에서는 PKCE(Proof Key for Code Exchange)와 함께 인증 코드 권한 부여 흐름을 사용하는 것이 좋습니다.

  16. [허용된 OAuth 흐름(Allowed OAuth Flows)]에서 [암시적 허용(Implicit grant)]를 선택하여 Amazon Cognito에서 사용자 풀 JSON 웹 토큰(JWT)이 반환되도록 합니다. 토큰에 대한 인증 코드를 교환할 수 있는 백엔드가 없을 때 이 흐름을 사용할 수 있습니다. 또한 토큰 디버깅에도 유용합니다.

    참고

    Authorization code grant(인증 코드 권한 부여)Implicit code grant(암시적 코드 부여)를 모두 활성화하고 각각을 필요한 경우 사용할 수 있습니다.

  17. 특별히 하나를 제외하고 싶은 경우가 아니라면 허용된 OAuth Scopes 확인란을 모두 선택합니다.

    참고

    사용자를 대신해서가 아니라 자체적으로 액세스 토큰을 요청해야 하는 경우에만 Client credentials(클라이언트 자격 증명)를 선택합니다.

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

  19. 도메인 이름 페이지에서 사용 가능한 도메인 접두사를 입력합니다.

  20. 전체 도메인 주소를 기록해 둡니다.

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

New console

사용자 풀에 앱을 생성하려면

  1. Amazon Cognito 콘솔로 이동합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.

  2. [사용자 풀(User Pools)]을 선택합니다.

  3. 목록에서 기존 사용자 풀을 선택하거나 사용자 풀을 생성합니다. 새 사용자 풀을 생성하는 경우 마법사 중에 앱 클라이언트를 설정하고 호스트된 UI를 구성하라는 메시지가 표시됩니다.

  4. 사용자 풀의 [앱 통합(App integration)] 탭을 선택합니다.

  5. [도메인(Domain)] 옆의 [작업(Actions)]을 선택한 다음, [사용자 정의 도메인 생성(Create custom domain)] 또는 [Cognito 도메인 생성(Create Cognito domain)]을 선택합니다. 사용자 풀 도메인을 이미 구성한 경우 새 사용자 정의 도메인을 생성하기 전에 [Cognito 도메인 삭제(Delete Cognito domain)] 또는 [사용자 정의 도메인 삭제(Delete custom domain)]를 선택합니다.

  6. [Cognito 도메인(Cognito domain)]에서 사용할 사용 가능한 도메인 접두사를 입력합니다. 사용자 정의 도메인을 설정하는 방법에 대한 자세한 내용은 호스트된 UI에 고유한 도메인 사용을 참조하세요.

  7. 생성(Create)을 선택합니다.

  8. 동일한 사용자 풀에 대한 [앱 통합(App integration)] 탭으로 다시 이동한 다음, [앱 클라이언트(App clients)]를 찾습니다. [앱 클라이언트 생성(Create an app client)]을 선택합니다.

  9. [애플리케이션 유형(Application type)]을 선택합니다. 선택 내용에 따라 몇 가지 권장 설정이 제공됩니다. 호스트된 UI를 사용하는 앱은 퍼블릭 클라이언트입니다.

  10. [앱 클라이언트 이름(App client name)]을 입력합니다.

  11. 이 연습에서는 [클라이언트 암호 생성 안 함(Don't generate client secret)]을 선택합니다. 클라이언트 암호는 중앙 집중식 애플리케이션에서 사용자를 인증하는 기밀 앱에서 사용됩니다. 이 연습에서는 사용자에게 호스트된 UI 로그인 페이지를 제공하며 클라이언트 암호가 필요하지 않습니다.

  12. 앱에서 허용할 [인증 흐름(Authentication flows)]을 선택합니다. USER_SRP_AUTH가 선택되었는지 확인합니다.

  13. 필요에 따라 [토큰 만료(token expiration)], [고급 보안 구성(Advanced security configuration)], [속성 읽기 및 쓰기 권한(Attribute read and write permissions)]을 사용자 정의합니다. 자세한 내용은 앱 클라이언트 설정 구성을 참조하세요.

  14. 콜백 URL 추가(Add a callback URL)를 통해 앱 클라이언트의 콜백 URL을 추가합니다. 호스트된 UI 인증 후에 여기로 이동됩니다. 앱에서 로그아웃을 구현할 수 있을 때까지 [허용된 로그아웃 URL(Allowed sign-out URL)]을 추가할 필요는 없습니다.

    iOS 또는 Android 앱의 경우에는 myapp://와 같은 콜백 URL을 사용할 수 있습니다.

  15. 앱 클라이언트의 [자격 증명 공급자(Identity providers)]를 선택합니다. 최소한 공급자로 [Cognito 사용자 풀(Cognito user pool)]을 사용하도록 설정합니다.

    참고

    Facebook, Amazon, Google, Apple 같은 외부 자격 증명 공급자(IdP)뿐 아니라 OpenID Connect(OIDC) 또는 SAML IdP를 통해 로그인하려면 먼저 사용자 풀에 소셜 로그인 추가에 표시된 대로 구성한 다음, [앱 클라이언트 설정(App client settings)] 페이지로 돌아가서 사용하도록 설정합니다.

  16. [OAuth 2.0 권한 부여 유형(OAuth 2.0 Grant Types)]을 선택합니다. Authorization code grant(인증 코드 권한 부여)를 선택하여 사용자 풀 토큰으로 교환되는 인증 코드를 반환합니다. 토큰은 최종 사용자에게 직접 노출되지 않기 때문에 침해될 가능성이 낮습니다. 하지만 사용자 풀 토큰에 대한 인증 코드를 교환하려면 백엔드에 사용자 지정 애플리케이션이 필요합니다. 보안상의 이유로 모바일 앱에서는 PKCE(Proof Key for Code Exchange)와 함께 인증 코드 권한 부여 흐름을 사용하는 것이 좋습니다.

    [암시적 허용(Implicit grant)]를 선택하여 Amazon Cognito에서 사용자 풀 JSON 웹 토큰(JWT)이 반환되도록 합니다. 토큰에 대한 인증 코드를 교환할 수 있는 백엔드가 없을 때 이 흐름을 사용할 수 있습니다. 또한 토큰 디버깅에도 유용합니다.

    참고

    Authorization code grant(인증 코드 권한 부여)Implicit code grant(암시적 코드 부여)를 모두 활성화하고 각각을 필요한 경우 사용할 수 있습니다.

    사용자를 대신해서가 아니라 자체적으로 액세스 토큰을 요청해야 하는 경우에만 Client credentials(클라이언트 자격 증명)를 선택합니다.

  17. 구체적으로 하나를 제외하려는 경우가 아니면 모든 OpenID Connect 범위(OpenID Connect scopes)를 선택합니다.

  18. 구성한 [사용자 정의 범위(Custom scopes)]를 선택합니다. 사용자 정의 범위는 일반적으로 기밀 클라이언트에서 사용됩니다.

  19. 생성(Create)을 선택합니다.

로그인 페이지를 보려면

[앱 클라이언트(App client)] 페이지에서 [호스트된 UI 보기(View hosted UI)]를 선택하여 앱 클라이언트 ID, 범위, 권한 부여, 콜백 URL 파라미터가 미리 채워진 로그인 페이지로 새 브라우저 탭을 엽니다.

다음 URL을 사용하여 호스트된 UI 로그인 웹 페이지를 수동으로 볼 수 있습니다. response_type을 기록합니다. 이 경우 response_type=code는 인증 코드 권한 부여입니다.

https://your_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url

다음 URL을 사용하여 호스팅 UI 로그인 웹 페이지를 볼 수 있습니다. 여기서 response_type=token은 묵시적 코드 부여입니다. 로그인 성공 이후 Amazon Cognito는 사용자 풀 토큰을 웹 브라우저의 주소 표시줄로 반환합니다.

https://your_domain/login?response_type=token&client_id=your_app_client_id&redirect_uri=your_callback_url

#idtoken= 파라미터 응답 이후 JSON 웹 토큰(JWT) 자격 증명을 찾을 수 있습니다.

다음 URL은 암시적 권한 부여 요청의 샘플 응답입니다. 사용자의 자격 증명 토큰 문자열이 훨씬 더 길어집니다.

https://www.example.com/#id_token=123456789tokens123456789&expires_in=3600&token_type=Bearer

Amazon Cognito 사용자 풀 토큰은 RS256 알고리즘을 사용하여 서명됩니다. AWS Lambda를 사용하여 사용자 풀 토큰을 디코딩하고 확인할 수 있습니다. AWS GitHub 웹 사이트에서 Amazon Cognito JWT 토큰 디코딩 및 확인을 참조하세요.

도메인 이름 페이지에 도메인이 표시됩니다. 일반 설정 페이지에 앱 클라이언트 ID와 콜백 URL이 표시됩니다. 콘솔에서 변경한 내용이 즉시 표시되지 않는 경우 몇 분간 기다린 후 브라우저를 새로 고칩니다.

다음 단계

3단계. 사용자 풀에 소셜 로그인 추가(선택 사항)