가입 및 로그인에 Amazon Cognito 호스트된 UI 사용 - Amazon Cognito

가입 및 로그인에 Amazon Cognito 호스트된 UI 사용

Amazon Cognito 호스트된 UI는 OAuth 2.0 준수 권한 부여 서버를 제공합니다. 등록 및 인증과 같은 최종 사용자 흐름의 기본 구현을 포함합니다. 사용자 풀 구성을 변경하여 멀티 팩터 인증(MFA) 추가와 같이 사용자 흐름을 사용자 정의할 수도 있습니다. 애플리케이션은 사용자 흐름을 처리할 호스팅 UI로 리디렉션됩니다. 브랜드별 로고를 제공하고 호스트된 UI 요소의 디자인을 사용자 정의하여 사용자 환경을 사용자 정의할 수 있습니다. Amazon Cognito 호스트된 UI를 사용하여 최종 사용자가 소셜 공급자(Facebook, Amazon, Google, Apple), OpenID Connect(OIDC) 준수 공급자, SAML 공급자로 로그인하는 기능도 추가할 수 있습니다.

AWS Amplify를 사용하여 호스트된 UI 설정

AWS Amplify를 사용하여 웹 또는 모바일 앱에 인증을 추가하는 경우 AWS Amplify 프레임워크의 명령줄 인터페이스(CLI) 및 라이브러리를 사용하여 호스팅 UI를 설정할 수 있습니다. 앱에 인증을 추가하려면 AWS Amplify CLI를 사용하여 프로젝트에 Auth 카테고리를 추가합니다. 그런 다음 클라이언트 코드에서 AWS Amplify 라이브러리를 사용하여 Amazon Cognito 사용자 풀로 사용자를 인증합니다.

미리 빌드된 호스팅 UI를 표시하거나 Facebook, Google, Amazon 또는 Apple과 같은 소셜 로그인 공급자로 리디렉션되는 OAuth 2.0 Endpoint를 통해 사용자를 연동할 수 있습니다. 사용자가 소셜 공급자를 통해 성공적으로 인증한 후 필요한 경우 AWS Amplify가 사용자 풀에 새 사용자를 생성하고 사용자의 OIDC 토큰을 앱에 제공합니다.

자세한 내용은 앱 플랫폼에 대한 AWS Amplify 프레임워크 설명서를 참조하세요.

Amazon Cognito 콘솔을 사용하여 호스트된 UI 설정

Original console

앱 클라이언트 생성

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

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

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

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

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

  6. 앱 이름을 입력합니다.

  7. 인증 흐름에서 필요한 경우를 제외하고 옵션 클라이언트 보안키 생성을 지웁니다. 클라이언트 암호는 클라이언트 암호를 보호할 수 있는 서버 측 구성요소가 있는 애플리케이션에서 사용됩니다.

  8. (선택 사항) 토큰 만료 설정을 변경합니다.

  9. 인증 흐름 구성(Auth Flows Configuration) 옵션을 선택합니다. 자세한 내용은 사용자 풀 인증 흐름을 참조하세요.

  10. 보안 구성(Security configuration)을 선택합니다. [사용(Enabled)]을 선택하는 것이 좋습니다.

  11. (선택 사항) 속성 읽기 및 쓰기 권한 설정(Set attribute read and write permissions)을 선택합니다. 자세한 내용은 속성 권한 및 범위를 참조하세요.

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

  13. 앱 클라이언트 ID를 기록해 둡니다.

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

앱을 구성합니다.

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

  2. Cognito 사용자 풀(Cognito User Pool)활성화된 자격 증명 공급자(Enabled Identity Providers) 중 하나로 선택합니다.

    참고

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

  3. 콜백 URL(여러 개 가능)(Callback URL(s))을 입력합니다. 콜백 URL은 로그인 성공 후 사용자가 리디렉션되는 위치를 나타냅니다.

  4. 로그아웃 URL(여러 개 가능)(Sign out URL(s))을 입력합니다. 로그아웃 URL은 로그아웃 후 사용자가 리디렉션되는 위치를 나타냅니다.

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

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

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

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

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

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

도메인 구성

  1. 도메인 이름 선택(Choose domain name)을 선택합니다.

  2. [도메인 이름(Domain name)] 페이지에서 도메인 접두사를 입력하고 가용성을 확인하거나 고유한 도메인을 입력합니다.

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

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

New console

앱 클라이언트 생성

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

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

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

  4. [앱 통합(App integration)] 탭을 선택합니다.

  5. [앱 클라이언트(App clients)]에서 [앱 클라이언트 생성(Create an app client)]을 선택합니다.

  6. [앱 유형(App type)]에서 [퍼블릭 클라이언트(Public client)], [기밀 클라이언트(Confidential client)] 또는 [기타(Other)]를 선택합니다. [퍼블릭 클라이언트(Public client)]는 일반적으로 사용자 디바이스에서 작동하며, 인증되지 않은 API와 토큰 인증 API를 사용합니다. [기밀 클라이언트(Confidential client)]는 일반적으로 클라이언트 암호와 API 자격 증명으로 신뢰하는 중앙 서버의 앱에서 작동하며, 권한 부여 헤더와 AWS Identity and Access Management 자격 증명을 사용하여 요청에 서명합니다. 사용 사례가 [퍼블릭 클라이언트(Public client)] 또는 [기밀 클라이언트(Confidential client)]에 맞게 미리 구성된 앱 클라이언트 설정과 다른 경우 [기타(Other)]를 선택합니다.

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

  8. 앱 클라이언트에서 허용할 [인증 흐름(Authentication flows)]을 선택합니다.

  9. Authentication flow session duration(인증 흐름 세션 기간)을 구성합니다. 세션 토큰이 만료되기 전에 사용자가 각 인증 챌린지를 완료해야 하는 시간입니다.

  10. (선택 사항) 토큰 만료를 구성합니다.

    1. 앱 클라이언트의 [새로 고침 토큰 만료(Refresh token expiration)]를 지정합니다. 기본값은 30일입니다. 이 값을 1시간에서 10년 사이의 값으로 변경할 수 있습니다.

    2. 앱 클라이언트의 [액세스 토큰 만료(Access token expiration)]를 지정합니다. 기본값은 1시간입니다. 이 값을 5분에서 24시간 사이의 값으로 변경할 수 있습니다.

    3. 앱 클라이언트의 [ID 토큰 만료(ID token expiration)]를 지정합니다. 기본값은 1시간입니다. 이 값을 5분에서 24시간 사이의 값으로 변경할 수 있습니다.

      중요

      호스트된 UI를 사용하여 1시간 미만의 토큰 수명을 구성할 경우 사용자는 현재 1시간으로 고정된 세션 쿠키 기간에 따라 토큰을 사용할 수 있습니다.

  11. [클라이언트 암호 생성(Generate client secret)]을 선택하여 Amazon Cognito에서 클라이언트 암호를 자동으로 생성하도록 합니다. 클라이언트 암호는 일반적으로 기밀 클라이언트와 연결됩니다.

  12. [토큰 철회 사용(Enable token revocation)]에서 이 앱 클라이언트에 토큰 철회를 사용할지 여부를 선택합니다. 사용할 경우 토큰의 크기가 늘어납니다. 자세한 내용은 토큰 철회를 참조하세요.

  13. [사용자 존재를 나타내는 오류 메시지 방지(Prevent error messages that reveal user existence)]에서 이 앱 클라이언트에 사용자 존재를 나타내는 오류 메시지를 표시하지 않을지 여부를 선택합니다. Amazon Cognito는 존재하지 않는 사용자에 대한 로그인 요청에 사용자 이름이나 암호가 잘못되었다는 일반적인 메시지로 응답합니다.

  14. (선택 사항) 이 앱 클라이언트에 대한 속성 읽기 및 쓰기 권한(Attribute read and write permissions)]을 구성합니다. 앱 클라이언트는 사용자 풀 속성 스키마의 제한된 하위 집합에 대한 읽기 및 쓰기 권한을 가질 수 있습니다.

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

  16. [클라이언트 ID(Client id)]를 적어 둡니다. 클라이언트 ID는 가입 및 로그인 요청에서 앱 클라이언트를 식별합니다.

앱을 구성합니다.

  1. [앱 통합(App integration)] 탭의 [앱 클라이언트(App clients)]에서 앱 클라이언트를 선택합니다. 현재 [호스트된 UI(Hosted UI)] 정보를 검토합니다.

  2. 허용된 콜백 URL(Allowed callback URL(s))에서 콜백 URL 추가(Add a callback URL)를 수행합니다. 콜백 URL은 로그인 성공 후 사용자가 리디렉션되는 위치입니다.

  3. [허용된 로그아웃 URL(Allowed sign-out URL(s))]에서 [로그아웃 URL 추가(Add a sign-out URL)]를 수행합니다. 로그아웃 URL은 로그아웃 후 사용자가 리디렉션되는 위치입니다.

  4. [자격 증명 공급자(Identity providers)] 목록에서 나열된 옵션 중 하나 이상을 추가합니다.

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

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

  7. [인증 코드(Authorization code)] 및 [암시적 코드(Implicit code)] 권한 부여를 둘 다 사용하도록 설정하고 필요에 따라 각 권한 부여를 사용할 수 있습니다. [인증 코드(Authorization code)] 또는 [암시적 코드(Implicit code)] 권한 부여를 선택하지 않았으며 앱 클라이언트에 클라이언트 암호가 있는 경우 [클라이언트 자격 증명(Client credentials)] 권한 부여를 사용하도록 설정할 수 있습니다. 앱이 사용자를 대신해서가 아니라 자체적으로 액세스 토큰을 요청해야 하는 경우에만 [클라이언트 자격 증명(Client credentials)]을 선택합니다.

  8. 이 앱 클라이언트에 권한을 부여할 [OpenID Connect 범위(OpenID Connect scopes)]를 선택합니다.

  9. [Save changes]를 선택합니다.

도메인 구성

  1. 사용자 풀의 [앱 통합(App integration)] 탭으로 이동합니다.

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

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

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

로그인 페이지를 보려면

Amazon Cognito 콘솔에서 App integration(앱 통합) 탭의 App clients and analytics(앱 클라이언트 및 분석) 아래에 있는 앱 클라이언트 구성에서 View Hosted UI(호스팅 UI 보기) 버튼을 선택합니다. 이 버튼을 클릭하면 다음 기본 파라미터를 통해 호스팅 UI의 로그인 페이지로 이동합니다.

  • 앱 클라이언트 ID

  • 권한 부여 코드 부여 요청

  • 현재 앱 클라이언트에 대해 활성화한 모든 범위에 대한 요청

  • 현재 앱 클라이언트에 대한 목록의 첫 번째 콜백 URL

View hosted UI(호스팅 UI 보기) 버튼은 호스팅 UI의 기본 기능을 테스트하려는 경우에 유용합니다. 추가 및 수정된 파라미터를 사용하여 로그인 URL을 사용자 지정할 수 있습니다. 대부분의 경우 자동으로 생성된 파라미터가 View hosted UI(호스팅 UI 보기) 링크가 앱의 요구 사항과 완전히 일치하지 않습니다. 이러한 경우 앱에서 사용자가 로그인할 때 호출하는 URL을 사용자 지정해야 합니다. 파라미터 및 파라미터 값에 대한 자세한 내용은 사용자 풀 OIDC 및 호스트된 UI API 엔드포인트 참조 단원을 참조하십시오.

호스팅 UI 로그인 웹 페이지는 다음 URL 형식을 사용합니다. response_type을 기록합니다. 이 경우 response_type=code는 인증 코드 권한 부여입니다.

https://<your_domain>/oauth2/authorize?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url>

사용자 지정 파라미터를 사용하여 /oauth2/authorize 엔드포인트로 이동하면 Amazon Cognito가 /oauth2/login 엔드포인트로 리디렉션하거나 identity_provider 또는 idp_identifier 파라미터가 있는 경우 자동으로 IdP 로그인 페이지로 리디렉션합니다. 호스팅 UI를 우회하는 예제 URL은 Amazon Cognito 사용자 풀에서 SAML 세션 시작 단원을 참조하세요.

다음 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) 자격 증명을 찾을 수 있습니다.

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

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

호스트된 UI 페이지의 변경 사항이 즉시 표시되지 않는 경우 몇 분 동안 기다린 다음 페이지를 새로 고칩니다. Amazon Cognito 사용자 풀 토큰은 RS256 알고리즘을 사용하여 서명됩니다. AWS Lambda를 사용하여 사용자 풀 토큰을 디코딩하고 확인할 수 있습니다. GitHub 웹 사이트에서 Amazon Cognito JWT 토큰 디코딩 및 확인을 참조하세요.

도메인 이름(Domain name) 페이지에 도메인이 표시됩니다. 앱 클라이언트 설정(App client settings) 페이지에 앱 클라이언트 ID와 콜백 URL이 표시됩니다.

참고

Amazon Cognito 호스팅 UI는 사용자 지정 인증 흐름을 지원하지 않습니다.

Amazon Cognito 호스팅 UI는 사용자 지정 CORS(Cross-Origin Resource Sharing) 원본 정책을 지원하지 않습니다. Amazon Cognito는 모든 요청에 대한 Access-Control-Allow-Origin: * 응답 헤더를 반환합니다. 호스팅 UI의 CORS 정책은 사용자가 요청에 인증 파라미터를 전달하지 못하도록 합니다. 대신 앱의 웹 프론트엔드에서 CORS 정책을 구현하세요.