이 모듈에서는 사용자의 계정을 관리하기 위한 Amazon Cognito 사용자 풀을 생성합니다. 고객이 신규 사용자로 등록하고, 이메일 주소를 확인하고, 사이트에 로그인할 수 있는 페이지를 배포합니다.

Serverless_Web_App_LP_assets-03

웹 사이트를 방문하는 사용자는 먼저 새 사용자 계정을 등록하게 됩니다. 이 워크숍에서는 사용자가 이메일 주소와 암호만 입력하여 등록하게 합니다. 하지만 실제 애플리케이션에서는 추가 속성을 요구하도록 Amazon Cognito를 구성할 수 있습니다.

사용자가 등록을 제출하면 Amazon Cognito가 사용자가 제공한 주소로 확인 코드가 포함된 확인 이메일을 보냅니다. 사용자는 사이트로 돌아가 이메일 주소와 수신한 확인 코드를 입력하여 계정을 확인합니다. 테스트를 목적으로 가상의 이메일 주소를 사용하려는 경우 Amazon Cognito 콘솔을 사용하여 사용자 계정을 확인할 수도 있습니다.

이메일 확인 프로세스를 통해 확인하거나 콘솔에서 수동 확인하여 계정을 확인하고 나면, 사용자가 로그인할 수 있습니다. 사용자는 로그인 시에 사용자 이름(또는 이메일)과 암호를 입력합니다. 그러면 JavaScript 함수가 Amazon Cognito와 통신하고, Secure Remote Password(SRP) 프로토콜을 사용하여 인증하고, JSON 웹 토큰(JWT) 세트를 다시 수신함니다. JWT는 사용자의 자격 증명에 대한 주장을 포함하며 다음 모듈에서 Amazon API Gateway를 사용하여 구축하는 RESTful API에 대해 인증하는 데 사용됩니다.

모듈 소요 시간: 30분

사용된 서비스: Amazon Cognito

CloudFormation 템플릿: 모듈 1에서 사용한 것과 동일한 리전에서 AWS CloudFormation 템플릿 중 하나를 시작하면 다음 모듈로 건너뛸 수 있습니다.

리전 CloudFormation 템플릿
미국 동부(버지니아 북부) 스택 시작 >
미국 동부(오하이오) 스택 시작 >
미국 서부(오레곤) 스택 시작 >
EU(프랑크푸르트) 스택 시작 >
EU(아일랜드) 스택 시작 >
EU(런던) 스택 시작 >
아시아 태평양(도쿄) 스택 시작 >
아시아 태평양(서울) 스택 시작 >
아시아 태평양(시드니) 스택 시작 >
아시아 태평양(뭄바이) 스택 시작 >
Serverless_Web_App_LP_assets-17

CloudFormation 시작 지침

  1. 위에서 원하는 리전의 스택 시작 링크를 선택합니다.

  2. Select Template(템플릿 선택) 페이지에서 Next(다음)를 선택합니다.

  3. Website Bucket Name에 모듈 1에서 설정한 웹 사이트 버킷의 이름(예: wildrydes-yourname)을 입력하고 Next를 선택합니다.

    참고: 이전 모듈에서 사용한 것과 동일한 버킷 이름을 지정해야 합니다. 존재하지 않거나 쓰기 액세스 권한이 없는 버킷 이름을 입력할 경우 CloudFormation 스택의 생성이 실패합니다.

  4. Options(옵션) 페이지에서 기본값을 모두 그대로 두고 Next(다음)를 선택합니다.

  5. Review(검토) 페이지에서 해당 확인란을 선택하여 CloudFormation이 IAM 리소스를 생성하도록 하고 Create(생성)를 선택합니다.

    이 템플릿은 사용자 정의 리소스를 사용하여 Amazon Cognito 사용자 풀과 클라이언트를 생성할 뿐만 아니라, 이 사용자 풀에 연결하고 웹 사이트 버킷에 업로드하는 데 필요한 세부 정보가 포함된 구성 파일을 생성합니다. 이 템플릿은 이러한 리소스를 생성하고 구성 파일을 버킷에 업로드하기 위한 액세스 권한을 제공하는 역할을 생성합니다.

  6. wildrydes-webapp-2 스택이 CREATE_COMPLETE 상태로 바뀔 때까지 기다립니다.

  7. 4단계에서 설명하는 단계를 따릅니다. 구현을 테스트하여 다음 모듈을 진행할 준비가 되었는지 확인합니다.


아래의 단계별 지침에 따라 사용자 풀을 생성합니다. 섹션을 확장하려면 각 단계 번호를 클릭하십시오.

  • 1단계. Amazon Cognito 사용자 풀 생성

    Amazon Cognito는 사용자를 인증하기 위한 2가지 메커니즘을 제공합니다. Cognito 사용자 풀을 사용하여 애플리케이션에 등록 및 로그인 기능을 추가하거나, Cognito 자격 증명 풀을 사용하여 Facebook, Twitter, Amazon 등의 소셜 자격 증명 공급자를 통해 SAML 자격 증명 솔루션으로 사용자를 인증하거나, 자체 자격 증명 시스템을 사용하여 사용자를 인증할 수 있습니다. 이 모듈에서는 사용자 풀을 제공된 등록 및 로그인 페이지의 백엔드로 사용합니다.


    1. AWS 콘솔에서 Services(서비스)를 클릭한 후 Mobile Services(모바일 서비스)에서 Cognito를 선택합니다.
    2. Manage your User Pools(사용자 풀 관리)를 선택합니다.
    3. Create a User Pool(사용자 풀 생성)을 선택합니다.
    4. 사용자 풀의 이름을 WildRydes와 같이 입력한 후 Review Defaults(기본값 검토)를 선택합니다.
    5. Review(검토) 페이지에서 Create pool(풀 생성)을 클릭합니다.
    6. 새로 생성한 사용자 풀의 Pool details(풀 세부 정보) 페이지에서 Pool ID(풀 ID)를 기록해 둡니다.
  • 2단계. 사용자 풀에 앱 추가

    Amazon Cognito 콘솔에서 사용자 풀을 선택한 후 App clients(앱 클라이언트) 섹션을 선택합니다. 새 앱 클라이언트를 추가하고 Generate client secret(클라이언트 암호 생성) 옵션이 선택 취소되어 있는지 확인합니다. 클라이언트 암호는 현재 JavaScript SDK에서 지원되지 않습니다. 생성된 암호를 사용하여 앱을 생성한 경우 해당 앱을 삭제하고 올바른 구성으로 다시 생성하십시오.


    1. 사용자 풀의 [Pool Details] 페이지에서 탐색 모음의 왼쪽 General Settings 섹션에 있는 App clients를 선택합니다.
    2. Add an app client를 선택합니다.
    3. 앱 클라이언트에 WildRydesWebApp과 같은 이름을 지정합니다.
    4. Generate client secret(클라이언트 암호 생성) 옵션을 선택 취소합니다. 클라이언트 암호는 현재 브라우저 기반 애플리케이션에서 사용하도록 지원되지 않습니다.
    5. Create app client를 선택합니다.
    6. 새로 생성된 애플리케이션의 App client id(앱 클라이언트 ID)를 기록해 둡니다.
  • 3단계. 웹 사이트 버킷의 config.js 파일 업데이트

    /js/config.js 파일에는 사용자 풀 ID, 앱 클라이언트 ID 및 리전의 설정이 포함되어 있습니다. 이전 단계에서 생성한 사용자 풀과 앱의 설정으로 이 파일을 업데이트하고 파일을 다시 버킷에 업로드합니다.


    1. 이 리포지토리에 있는 첫 번째 모듈의 website 디렉터리에서 로컬 시스템으로 config.js 파일을 다운로드합니다. 생성한 S3 버킷으로 돌아가 'js'라는 이름의 폴더로 이동하면 이 파일을 찾을 수 있습니다.
    2. 원하는 텍스트 편집기를 사용하여 다운로드한 파일을 엽니다.
    3. 앞서 생성한 사용자 풀과 앱에 대해 올바른 값으로 cognito 섹션을 업데이트합니다.
    4. 생성한 사용자 풀을 선택한 후 Amazon Cognito 콘솔의 풀 세부 정보 페이지에서 userPoolId 값을 찾을 수 있습니다.
      왼쪽 탐색 모음에서 App clients를 선택하면 userPoolClientId 값을 찾을 수 있습니다. 이전 섹션에서 생성한 앱에 대한 App client id 필드의 값을 사용합니다.
      region 값은 사용자 풀을 생성한 AWS 리전 코드와 같아야 합니다. 예: 버지니아 북부 리전은 us-east-1 또는 오레곤 리전은 us-west-2. 사용할 코드를 잘 모를 경우 풀 세부 정보 페이지에서 Pool ARN 값을 확인하면 됩니다. 리전 코드는 ARN에서 arn:aws:cognito-idp: 다음에 나오는 부분입니다.
      업데이트된 config.js 파일은 다음과 같습니다. 파일의 실제 값은 다를 수 있습니다.

    window._config = { cognito: { userPoolId: 'us-west-2_uXboG5pAb', // 예: us-east-2_uXboG5pAb userPoolClientId: '25ddkmj4v6hfsfvruhpfi7n4hv', // 예: 25ddkmj4v6hfsfvruhpfi7n4hv region: 'us-west-2' // 예: us-east-2 }, api: { invokeUrl: '' // 예: https://rc7nyt4tql.execute-api.us-west-2.amazonaws.com/prod', } };

    1. 수정된 파일을 저장합니다. 이때 파일 이름이 여전히 config.js여야 합니다.
    2. https://console.aws.amazon.com/s3/에 접속해 Amazon S3 콘솔을 엽니다.
    3. 이전 모듈에서 생성한 Wild Rydes 웹 사이트 버킷을 선택합니다.
    4. js 접두사를 검색합니다.
    5. Upload, Add Files를 차례로 선택합니다.
    6. 로컬로 수정한 버전의 config.js 파일을 저장한 디렉터리로 이동한 후 해당 파일을 선택하고 Open을 선택합니다.
    7. 대화 상자 왼쪽에서 Upload를 선택합니다.

    참고: 등록, 검증 및 로그인 흐름을 관리하기 위한 브라우저 측 코드를 사용자가 작성할 필요가 없도록, ㅊ멋 번째 모듈에서 배포한 자산에서 작동하는 구현 파일을 제공합니다. cognito-auth.js 파일에는 UI 이벤트를 처리하고 적절한 Amazon Cognito 자격 증명 SDK 메서드를 호출하는 코드가 포함되어 있습니다. SDK에 대한 자세한 내용은 GitHub에서 프로젝트 페이지를 참조하십시오.

  • 4단계. 구현 테스트


    1. 웹 사이트 도메인에서 /register.html로 이동하거나 사이트 홈페이지에서 Giddy Up! 버튼을 클릭합니다.
    2. 등록 양식을 작성하고 Let's Ryde를 선택합니다. 본인의 이메일을 사용하거나 가상의 이메일을 입력할 수 있습니다. 대문자, 숫자, 특수문자를 각각 하나 이상 포함하는 암호를 선택해야 합니다. 나중에 사용할 수 있도록 입력한 암호를 꼭 기억하십시오. 사용자가 생성되었음을 확인하는 알림이 표시됩니다.
    3. 다음 두 가지 방법 중 하나로 새 사용자를 확인합니다.
    4. 본인이 제어하는 이메일 주소를 사용한 경우, 웹 사이트 도메인에서 /verify.html로 이동하고 이메일로 받은 인증 코드를 입력하면 계정 인증 프로세스를 완료할 수 있습니다. 확인 이메일이 스팸 폴더로 들어갈 수 있습니다. 실제 배포 시에는 Amazon Simple Email Service를 사용하여 사용자 소유의 도메인에서 이메일을 보내도록 사용자 풀을 구성하는 것이 좋습니다.
    5. 더미 이메일 주소를 사용한 경우 Cognito 콘솔을 통해 수동으로 사용자를 확인해야 합니다.
    6. AWS 콘솔에서 Services(서비스)를 클릭한 후 Security, Identity & Compliance(보안, 자격 증명 및 규정 준수)에서 Cognito를 선택합니다.
    7. Manage your User Pools(사용자 풀 관리)를 선택합니다.
    8. 왼쪽 탐색 모음에서 WildRydes 사용자 풀을 선택하고 Users and groups를 클릭합니다.
    9. 등록 페이지를 통해 제출한 이메일 주소에 해당하는 사용자가 표시됩니다. 사용자 세부 정보 페이지를 보려면 해당 사용자 이름을 선택합니다.
    10. Confirm user(사용자 확인)를 선택하여 계정 생성 프로세스를 마무리합니다.
    11. /verify.html 페이지 또는 Cognito 콘솔을 사용하여 새로운 사용자를 확인한 후, /signin.html로 이동하여 등록 단계에서 입력했던 이메일 주소와 암호로 로그인합니다.
    12. 로그인에 성공하면 /ride.html로 리디렉션됩니다. API가 구성되지 않았다는 알림이 표시됩니다.
    successful-login