AWS 기반 프로젝트:

서버리스 웹 애플리케이션 구축

AWS Lambda, Amazon API Gateway, AWS Amplify, Amazon DynamoDB, Amazon Cognito 사용

소개

정적 웹 사이트 호스팅

사용자 관리

서버리스 백엔드 구축

RESTful API 배포

템플릿 리소스

모듈 2. 사용자 관리

이 모듈에서는 사용자의 계정을 관리하기 위한 Amazon Cognito 사용자 풀을 만들어 봅니다. 고객이 새 사용자로 등록하고, 이메일 주소를 확인하고, 사이트에 로그인할 수 있는 페이지를 배포해 보겠습니다.

아키텍처 개요

웹 사이트를 방문하는 사용자는 먼저 새 사용자 계정을 등록하게 됩니다. 이 워크숍의 취지상, 이메일 주소와 암호만 입력하면 등록할 수 있도록 하겠습니다. 그러나 여러분은 자체 애플리케이션의 추가 속성을 요구하도록 Amazon Cognito를 구성할 수 있습니다.

사용자가 등록 신청을 제출하면 Amazon Cognito에서 확인 코드가 담긴 확인 이메일을 해당 주소로 보내 줍니다. 사용자는 계정 확인을 위해 사이트로 돌아가서 자신의 이메일 주소와 이메일로 받은 확인 코드를 입력합니다. 가짜 이메일 주소로 테스트해 보려는 경우, Amazon Cognito 콘솔에서 사용자 계정을 확인할 수도 있습니다.

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

모듈 완료 시간: 30분

사용된 서비스: Amazon Cognito

CloudFormation 템플릿: 다음 모듈로 건너뛰려면 모듈 1에서 사용했던 동일 리전에서 아래의 AWS CloudFormation 템플릿 중 하나를 시작하면 됩니다.

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

CloudFormation 시작 지침

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

  2. 템플릿 선택 페이지에서 다음을 선택합니다.

  3. 웹 사이트 버킷 이름에 모듈 1에서 만든 웹 사이트 버킷의 이름(예: wildrydes-yourname)을 입력하고 다음을 선택합니다.

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

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

  5. 검토 페이지에서 CloudFormation의 IAM 리소스 생성을 확인하는 확인란에 표시하고 생성을 선택합니다.

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

  6. wildrydes-webapp-2 스택이 CREATE_COMPLETE 상태가 될 때까지 기다립니다.

  7. 4단계. 구현 테스트에 명시된 단계에 따라 다음 모듈로 넘어갈 준비가 되었는지 확인합니다.

구현 지침

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

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

    Amazon Cognito 사용자 풀 생성

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

    1. AWS Console에서 서비스를 클릭한 다음 모바일 서비스 아래에서 Cognito를 선택합니다.
    2. 사용자 풀 관리​를 선택합니다.
    3. 사용자 풀 생성을 선택합니다.​
    4. 사용자 풀의 이름을 WildRydes 등으로 입력한 다음 기본값 검토를 선택합니다.​
    5. 검토 페이지에서 풀 생성을 클릭합니다.​
    6. 새로 만든 사용자 풀의 풀 세부 정보 페이지에서 풀 ID를 기록해 둡니다.

  • 2단계. 사용자 풀에 앱 추가

    사용자 풀에 앱 추가

    Amazon Cognito 콘솔에서 사용자 풀을 선택한 다음 앱 클라이언트 섹션을 선택합니다. 새 앱 클라이언트를 추가하고, 클라이언트 보안키 생성 옵션이 선택 취소되어 있는지 확인합니다. 현재 JavaScript SDK에서는 클라이언트 보안키를 지원하지 않습니다. 그럼에도 이렇게 생성된 보안키로 앱을 만들려면 일단 삭제하고 올바른 구성으로 새로 만드십시오.

    1. 사용자 풀의 풀 세부 정보 페이지에서 탐색 모음의 왼쪽 일반 설정 섹션에 있는 앱 클라이언트를 선택합니다.
    2. 앱 클라이언트 추가​를 선택합니다.
    3. 앱 클라이언트에 WildRydesWebApp과 같은 이름을 지정합니다.
    4. 클라이언트 보안키 생성 옵션을 ​선택 취소합니다. 현재 브라우저 기반 애플리케이션에는 클라이언트 암호를 사용할 수 없습니다.
    5. 앱 클라이언트 생성을 선택합니다.​
    6. 새로 생성된 애플리케이션의 앱 클라이언트 ID를 기록해 둡니다.

  • 3단계. 웹 사이트 Config 업데이트

    웹 사이트 Config 업데이트

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

    a. 로컬 장치에서 원하는 텍스트 편집기로 `wild-ryde-site/js/config.js`를 엽니다.

    b. 방금 생성한 앱과 사용자 풀에 알맞은 값으로 Cognito 섹션을 업데이트합니다.

    생성한 사용자 풀을 선택한 다음, Amazon Cognito 콘솔의 풀 세부 정보 페이지에서 userPoolId 값을 찾을 수 있습니다.
    userPoolClientId 값은 왼쪽 탐색 모음에서 앱 클라이언트를 선택하여 찾을 수 있습니다. 이전 섹션에서 생성한 앱의 App client ID 필드에 있는 값을 사용하십시오.

    리전 값은 사용자 풀을 생성한 AWS 리전 코드와 같아야 합니다. 예를 들어 버지니아 북부 리전은 us-east-1이고, 오리건 리전은 us-west-2입니다. 사용할 코드를 잘 모를 경우 풀 세부 정보 페이지에서 Pool ARN 값을 확인하면 됩니다. 리전 코드는 ARN에서 arn:aws:cognito-idp: 바로 다음에 나오는 부분입니다.

    업데이트된 config.js 파일은 다음과 같은 모양입니다. 파일의 실제 값은 이와 다릅니다.

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

    d. 수정한 파일을 저장하고 Git repository로 보내면 Amplify Console에 자동으로 배포됩니다.

    $ git push

  • 4단계. 구현 테스트

    구현 검증

    1. 웹 사이트 도메인의 /register.html을 방문하거나 사이트 홈 페이지에서 Giddy Up!(가자!) 버튼을 선택합니다.
    2. 등록 양식을 작성하고 Let's Ryde(하자)를 선택합니다. 자신의 이메일을 사용하거나 가짜 이메일을 입력할 수 있습니다. 최소한 대문자 하나, 숫자 하나, 특수문자 하나가 포함된 암호를 선택하십시오. 입력한 암호는 나중을 위해 기억해 두십시오. 사용자가 생성되었음을 확인하는 알림이 나타납니다.
    3. 다음 두 가지 방법 중 하나로 새 사용자를 확인합니다.
    4. 본인이 통제하는 이메일 주소를 사용한 경우, 웹 사이트 도메인의 /verify.html에서 이메일로 받은 확인 코드를 입력하여 계정 확인 프로세스를 완료할 수 있습니다. 확인 이메일이 스팸 폴더로 들어갔을 수도 있으니 주의하십시오. 실제 배포에서는 Amazon Simple Email Service를 사용하도록 사용자 풀을 구성하여 자체 도메인에서 이메일을 보내는 것이 좋습니다.
    5. 가짜 이메일 주소를 사용한 경우, Cognito 콘솔에서 해당 사용자를 수동으로 확인해야 합니다.
    6. AWS 콘솔에서 서비스를 클릭한 다음 보안, 자격 증명 및 규정 준수 아래에서 Cognito를 선택합니다.
    7. 사용자 풀 관리를 선택합니다.
    8. 왼쪽 탐색 모음에서 WildRydes 사용자 풀을 선택하고 사용자 및 그룹을 클릭합니다.
    9. 그러면 등록 페이지에서 제출한 이메일 주소에 해당하는 사용자가 표시됩니다. 사용자 이름을 선택하여 사용자 세부 정보 페이지를 봅니다.
    10. 사용자 확인을 선택하여 계정 생성 프로세스를 최종 확정합니다.
    11. /verify.html 페이지 또는 Cognito 콘솔을 사용하여 새 사용자를 확인한 후, /signin.html을 방문하여 등록 단계에서 입력한 이메일 주소와 암호로 로그인합니다.
    12. 성공하면 /ride.html로 리디렉션됩니다. API가 구성되지 않았다는 알림이 나타납니다.
다음: 서버리스 백엔드 구축