2단계. 앱을 추가하여 호스트된 웹 UI 사용
사용자 풀을 생성한 이후 앱을 생성하여 사용자 가입 및 로그인에 대해 내장 웹 페이지를 사용할 수 있습니다.
- Original console
-
사용자 풀에 앱을 생성하려면
-
Amazon Cognito 콘솔로 이동합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.
-
Manage User Pools(사용자 풀 관리)를 선택합니다.
-
목록에서 기존 사용자 풀을 선택하거나 사용자 풀을 생성합니다.
-
페이지 왼쪽에 있는 탐색 모음의 [일반 설정(General settings)]에서 [앱 클라이언트(App clients)]를 선택합니다.
-
앱 클라이언트 추가(Add an app client)를 선택합니다.
-
앱 클라이언트의 이름을 입력합니다.
-
이 연습에서는 [클라이언트 암호 생성(Generate client secret)] 옵션의 선택을 취소합니다. 이 연습에서 사용된 JavaScript와 같이 클라이언트 측 인증으로 클라이언트 암호를 사용하는 것은 안전하지 않으며 프로덕션 앱 클라이언트에 권장되지 않습니다. 클라이언트 암호를 보호할 수 있도록 서버 측 인증 구성 요소가 있는 애플리케이션에서만 클라이언트 암호를 사용해야 합니다.
-
앱 클라이언트 생성(Create app client)을 선택합니다.
-
앱 클라이언트 ID를 메모합니다.
-
풀 세부 정보로 돌아가기를 선택합니다.
-
콘솔 페이지 왼쪽에 있는 탐색 모음에서 앱 클라이언트 설정을 선택합니다.
-
[Cognito 사용자 풀(Cognito User Pool)]을 [사용하는 자격 증명 공급자(Enabled Identity Providers)] 중 하나로 선택합니다.
Facebook, Amazon, Google 및 Apple 같은 외부 자격 증명 공급자(IdP)를 비롯해 OpenID Connect(OIDC) 또는 SAML IdP를 통해 로그인하도록 허용하려면 먼저 다음 섹션에 설명된 대로 이들을 구성한 다음, 앱 클라이언트 설정(App client settings) 페이지로 돌아가 이들을 활성화합니다.
-
Amazon Cognito 권한 부여 서버에 대한 콜백 URL을 입력하여 사용자가 인증된 후 호출합니다. 웹앱의 경우 URL이 https://로 시작해야 합니다(예: https://www.example.com).
iOS 또는 Android 앱의 경우에는 myapp://와 같은 콜백 URL을 사용할 수 있습니다.
-
로그아웃 URL을 입력합니다.
-
Authorization code grant(인증 코드 권한 부여)를 선택하여 사용자 풀 토큰으로 교환되는 인증 코드를 반환합니다. 토큰은 최종 사용자에게 직접 노출되지 않기 때문에 침해될 가능성이 낮습니다. 하지만 사용자 풀 토큰에 대한 인증 코드를 교환하려면 백엔드에 사용자 지정 애플리케이션이 필요합니다. 보안상의 이유로 모바일 앱에서는 PKCE(Proof Key for Code Exchange)와 함께 인증 코드 권한 부여 흐름을 사용하는 것이 좋습니다.
-
[허용된 OAuth 흐름(Allowed OAuth Flows)]에서 [암시적 허용(Implicit grant)]를 선택하여 Amazon Cognito에서 사용자 풀 JSON 웹 토큰(JWT)이 반환되도록 합니다. 토큰에 대한 인증 코드를 교환할 수 있는 백엔드가 없을 때 이 흐름을 사용할 수 있습니다. 또한 토큰 디버깅에도 유용합니다.
Authorization code grant(인증 코드 권한 부여) 및 Implicit code grant(암시적 코드 부여)를 모두 활성화하고 각각을 필요한 경우 사용할 수 있습니다.
-
특별히 하나를 제외하고 싶은 경우가 아니라면 허용된 OAuth Scopes 확인란을 모두 선택합니다.
사용자를 대신해서가 아니라 자체적으로 액세스 토큰을 요청해야 하는 경우에만 Client credentials(클라이언트 자격 증명)를 선택합니다.
-
변경 사항 저장(Save changes)을 선택합니다.
-
도메인 이름 페이지에서 사용 가능한 도메인 접두사를 입력합니다.
-
전체 도메인 주소를 기록해 둡니다.
-
변경 사항 저장(Save changes)을 선택합니다.
- New console
-
사용자 풀에 앱을 생성하려면
-
Amazon Cognito 콘솔로 이동합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.
-
[사용자 풀(User Pools)]을 선택합니다.
-
목록에서 기존 사용자 풀을 선택하거나 사용자 풀을 생성합니다. 새 사용자 풀을 생성하는 경우 마법사 중에 앱 클라이언트를 설정하고 호스트된 UI를 구성하라는 메시지가 표시됩니다.
-
사용자 풀의 [앱 통합(App integration)] 탭을 선택합니다.
-
[도메인(Domain)] 옆의 [작업(Actions)]을 선택한 다음, [사용자 정의 도메인 생성(Create custom domain)] 또는 [Cognito 도메인 생성(Create Cognito domain)]을 선택합니다. 사용자 풀 도메인을 이미 구성한 경우 새 사용자 정의 도메인을 생성하기 전에 [Cognito 도메인 삭제(Delete Cognito domain)] 또는 [사용자 정의 도메인 삭제(Delete custom domain)]를 선택합니다.
-
[Cognito 도메인(Cognito domain)]에서 사용할 사용 가능한 도메인 접두사를 입력합니다. 사용자 정의 도메인을 설정하는 방법에 대한 자세한 내용은 호스트된 UI에 고유한 도메인 사용을 참조하세요.
-
생성(Create)을 선택합니다.
-
동일한 사용자 풀에 대한 [앱 통합(App integration)] 탭으로 다시 이동한 다음, [앱 클라이언트(App clients)]를 찾습니다. [앱 클라이언트 생성(Create an app client)]을 선택합니다.
-
[애플리케이션 유형(Application type)]을 선택합니다. 선택 내용에 따라 몇 가지 권장 설정이 제공됩니다. 호스트된 UI를 사용하는 앱은 퍼블릭 클라이언트입니다.
-
[앱 클라이언트 이름(App client name)]을 입력합니다.
-
이 연습에서는 [클라이언트 암호 생성 안 함(Don't generate client secret)]을 선택합니다. 클라이언트 암호는 중앙 집중식 애플리케이션에서 사용자를 인증하는 기밀 앱에서 사용됩니다. 이 연습에서는 사용자에게 호스트된 UI 로그인 페이지를 제공하며 클라이언트 암호가 필요하지 않습니다.
-
앱에서 허용할 [인증 흐름(Authentication flows)]을 선택합니다. USER_SRP_AUTH가 선택되었는지 확인합니다.
-
필요에 따라 [토큰 만료(token expiration)], [고급 보안 구성(Advanced security configuration)], [속성 읽기 및 쓰기 권한(Attribute read and write permissions)]을 사용자 정의합니다. 자세한 내용은 앱 클라이언트 설정 구성을 참조하세요.
-
콜백 URL 추가(Add a callback URL)를 통해 앱 클라이언트의 콜백 URL을 추가합니다. 호스트된 UI 인증 후에 여기로 이동됩니다. 앱에서 로그아웃을 구현할 수 있을 때까지 [허용된 로그아웃 URL(Allowed sign-out URL)]을 추가할 필요는 없습니다.
iOS 또는 Android 앱의 경우에는 myapp://와 같은 콜백 URL을 사용할 수 있습니다.
-
앱 클라이언트의 [자격 증명 공급자(Identity providers)]를 선택합니다. 최소한 공급자로 [Cognito 사용자 풀(Cognito user pool)]을 사용하도록 설정합니다.
Facebook, Amazon, Google, Apple 같은 외부 자격 증명 공급자(IdP)뿐 아니라 OpenID Connect(OIDC) 또는 SAML IdP를 통해 로그인하려면 먼저 사용자 풀에 소셜 로그인 추가에 표시된 대로 구성한 다음, [앱 클라이언트 설정(App client settings)] 페이지로 돌아가서 사용하도록 설정합니다.
-
[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(클라이언트 자격 증명)를 선택합니다.
-
구체적으로 하나를 제외하려는 경우가 아니면 모든 OpenID Connect 범위(OpenID Connect scopes)를 선택합니다.
-
구성한 [사용자 정의 범위(Custom scopes)]를 선택합니다. 사용자 정의 범위는 일반적으로 기밀 클라이언트에서 사용됩니다.
-
생성(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단계. 사용자 풀에 소셜 로그인 추가(선택 사항)
