AWS 시작하기

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

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

모듈 2: 사용자 관리

사용자의 계정을 관리하기 위한 Amazon Cognito 사용자 풀을 만들어 봅니다.

개요

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

아키텍처 개요

아키텍처 개요

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

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

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

 소요 시간

30분

 사용 서비스

 CloudFormation 템플릿

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

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

구현

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

    1. Amazon Cognito 콘솔에서 사용자 풀 생성을 선택합니다.
    2. 로그인 환경 구성 페이지의 Cognito 사용자 풀 로그인 옵션 섹션에서 사용자 이름을 선택합니다. 공급자 유형과 같은 다른 설정의 기본값을 유지하고 사용자 이름 요구 사항은 선택하지 않습니다. 다음을 선택합니다.
    3. 보안 요구 사항 구성 페이지에서 암호 정책 모드Cognito 기본값으로 유지합니다. 다중 인증(MFA)을 구성하거나 MFA 없음을 선택하고 다른 구성을 기본값으로 유지하도록 선택할 수 있습니다. 다음을 선택합니다.
    4. 가입 환경 구성 페이지에서 모든 항목을 기본값으로 유지합니다. 다음을 선택합니다.
    5. 메시지 전송 구성 페이지에서 이메일 공급자에 대해 Amazon SES를 사용하여 이메일 전송 - 권장됨이 선택되어 있는지 확인합니다. 발신 이메일 주소 필드에서 Amazon Simple Email Service 개발자 안내서이메일 주소 ID 확인의 지침에 따라 Amazon SES에서 확인한 이메일 주소를 선택합니다.
      참고: 드롭다운에 확인된 이메일 주소가 채워지지 않는 경우, 자습서 시작 시 선택한 리전과 동일한 리전에서 확인된 이메일 주소를 생성했는지 확인하세요.
    6. 앱 통합 페이지에서 사용자 풀 이름을 WildRydes로 지정합니다. 초기 앱 클라이언트에서 앱 클라이언트의 이름을 WildRydesWebApp으로 지정하고 다른 설정은 기본값으로 유지합니다.
    7. 검토 및 생성 페이지에서 사용자 풀 생성을 선택합니다.
    8. 사용자 풀 페이지에서 사용자 풀 이름을 선택하면 생성한 사용자 풀에 대한 세부 정보를 볼 수 있습니다. 사용자 풀 개요 섹션에서 사용자 풀 ID를 복사하여 로컬 시스템의 안전한 위치에 저장합니다. 
    9. 앱 통합 탭을 선택하고 새로 만든 사용자 풀의 앱 클라이언트 및 분석 섹션에 클라이언트 ID를 복사하여 저장합니다.
  • /js/config.js 파일에는 사용자 풀 ID, 앱 클라이언트 ID 및 리전에 대한 설정이 포함되어 있습니다. 이전 단계에서 생성한 앱과 사용자 풀의 설정으로 이 파일을 업데이트하고, 파일을 다시 버킷에 업로드하세요.

    1. 로컬 시스템에서 원하는 텍스트 편집기에 있는 wildryde-site/js/config.js 파일을 엽니다.
    2. 이전 섹션의 8단계와 9단계에서 저장한 사용자 풀 ID앱 클라이언트 ID의 올바른 값으로 파일의 cognito 섹션을 업데이트합니다. userPoolID사용자 풀 개요 섹션의 사용자 풀 ID이고, userPoolClientID는 Amazon Cognito의 앱 통합 > 앱 클라이언트 및 분석 섹션에 있는 앱 클라이언트 ID입니다. 
    3. 리전 값은 사용자 풀을 생성한 AWS 리전 코드와 같아야 합니다. 예를 들어 버지니아 북부 리전은 us-east-1이고, 오레건 리전은 us-west-2입니다. 사용할 코드를 잘 모를 경우 사용자 풀 개요에서 풀 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',
        }
    };

        4. 수정된 파일을 저장합니다.

        5. 터미널 창에서 파일을 Git 리포지토리에 추가, 커밋, 푸시하면 Amplify 콘솔에 자동으로 배포됩니다.

    다음 코드 블록은 터미널 창에 표시되는 내용의 예시입니다.

    $ git add .
    $ git commit -m "new_config"
    $ git push
    
    1. Finder 창 또는 Windows 파일 탐색기에서 모듈 1의 로컬 시스템에 복사한 wildrydes-site 폴더로 이동합니다. 
    2. /register.html 파일을 열거나 사이트의 홈페이지(index.html 페이지)에 있는 Giddy Up!을 선택합니다.
    3. 등록 양식을 작성하고 Let's Ryde를 선택합니다. 자신의 이메일을 사용하거나 가짜 이메일을 입력할 수 있습니다. 최소한 대문자 하나, 숫자 하나, 특수문자 하나가 포함된 암호를 선택하십시오. 입력한 암호는 나중을 위해 기억해 두십시오. 사용자가 생성되었음을 확인하는 알림이 나타납니다.
    4. 다음 두 가지 방법 중 하나로 새 사용자를 확인합니다.
      1. 사용자가 통제하는 이메일 주소를 사용한 경우, 웹 사이트 도메인의 /verify.html에서 이메일로 받은 확인 코드를 입력하여 계정 확인 프로세스를 완료할 수 있습니다. 확인 이메일이 스팸 폴더로 들어갔을 수도 있으니 주의하세요. 실제 배포에서는 Amazon Simple Email Service를 사용하도록 사용자 풀을 구성하여 자체 도메인에서 이메일을 보내는 것이 좋습니다.
      2. 가짜 이메일 주소를 사용한 경우, Cognito 콘솔에서 해당 사용자를 수동으로 확인해야 합니다.
        1. Amazon Cognito 콘솔에서 WildRydes 사용자 풀을 선택합니다.
        2. 사용자 탭에 등록 페이지에서 제출한 이메일 주소에 해당하는 사용자가 표시됩니다. 사용자 이름을 선택하여 사용자 세부 정보 페이지를 봅니다.
        3. 작업 드롭다운에서 계정 확인을 선택하여 계정 생성 프로세스를 완료합니다.
        4. 사용자 계정 확인 팝업에서 확인을 선택합니다.
    5. /verify.html 페이지 또는 Cognito 콘솔을 사용하여 새 사용자를 확인한 후, /signin.html을 방문하여 등록 단계에서 입력한 이메일 주소와 암호로 로그인합니다.
    6. 성공하면 /ride.html로 리디렉션됩니다. API가 구성되지 않았다는 알림이 나타납니다.
      중요: 다음 모듈에서 Amazon Cognito 사용자 풀 권한 부여자를 생성하려면 인증 토큰을 복사하고 저장합니다.
    성공적으로 인증되었습니다!

이 페이지의 내용이 도움이 되었나요?

서버리스 백엔드 구축