구현

• Amazon Cognito 사용자 풀을 생성하고 앱을 사용자 풀과 통합합니다.

  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',
      }
  };

  Code snippet copied

  복사

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

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

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

  $ git add .
  $ git commit -m "new_config"
  $ git push
  

  Code snippet copied

  복사
• 구현 검증
  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 사용자 풀 권한 부여자를 생성하려면 인증 토큰을 복사하고 저장합니다.