예제 React 단일 페이지 애플리케이션을 설정하세요.

이 튜토리얼에서는 사용자 가입, 확인, 로그인을 테스트할 수 있는 React 단일 페이지 애플리케이션을 만들어 보겠습니다. React는 사용자 인터페이스 (UI) 에 중점을 둔 웹 및 모바일 앱용 JavaScript 기반 라이브러리입니다. 이 예제 애플리케이션은 Amazon Cognito 사용자 풀의 몇 가지 기본 기능을 보여줍니다. 이미 React를 사용한 웹 앱 개발 경험이 있다면 에서 예제 앱을 다운로드하십시오. GitHub

다음 스크린샷은 생성할 애플리케이션의 초기 인증 페이지입니다.

사용자 풀 생성 프로시저는 예제 애플리케이션과 호환되는 사용자 풀을 설정합니다. 다음 요구 사항을 충족하는 사용자 풀이 있는 경우 이 단계를 건너뛸 수 있습니다.

사용자는 자신의 이메일 주소로 로그인할 수 있습니다. Cognito 사용자 풀 로그인 옵션: 이메일.
사용자 이름은 대소문자를 구분하지 않습니다. 사용자 이름 요구 사항: 사용자 이름 대소문자를 구분하도록 설정이 선택되지 않았습니다.
다단계 인증 (MFA) 은 필요하지 않습니다. MFA 적용: 선택적 MFA.
사용자 풀은 이메일 메시지로 사용자 프로필 확인을 위한 속성을 확인합니다. 확인할 속성: 이메일 메시지 전송, 이메일 주소 확인.
이메일은 유일한 필수 속성입니다. 필수 속성: 이메일.
사용자는 사용자 풀에 자신을 등록할 수 있습니다. 셀프 등록: 셀프 등록 활성화가 선택되었습니다.
초기 앱 클라이언트는 사용자 이름과 비밀번호로 로그인할 수 있는 공개 클라이언트입니다. 앱 유형: 퍼블릭 클라이언트, 인증 흐름:. ALLOW_USER_PASSWORD_AUTH

새 사용자 풀 생성

Amazon Cognito 콘솔로 이동합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.
사용자 풀 생성 버튼을 선택합니다. 이 옵션을 표시하려면 왼쪽 탐색 창에서 사용자 풀을 선택해야 할 수도 있습니다.
페이지 오른쪽 상단에서 사용자 풀 생성(Create a user pool)을 선택하여 사용자 풀 생성 마법사를 시작합니다.
로그인 환경 구성에서 이 사용자 풀에 사용할 ID 공급자 (IdPs) 를 선택할 수 있습니다. 자세한 정보는 서드 파티를 통한 사용자 풀 로그인 추가을 참조하세요.
1. 인증 제공자에서 공급자 유형에는 Cognito 사용자 풀만 선택되어 있는지 확인합니다.
2. Cognito 사용자 풀 로그인 옵션의 경우 사용자 이름을 선택합니다. 추가 사용자 이름 요구 사항을 선택하지 마세요.
3. 다른 모든 옵션은 기본값으로 유지하고 다음을 선택합니다.
보안 요구 사항 구성에서 암호 정책, 다단계 인증 (MFA) 요구 사항 및 사용자 계정 복구 옵션을 선택할 수 있습니다. 자세한 정보는 Amazon Cognito 사용자 풀의 보안 기능 사용을 참조하세요.
1. 암호 정책의 경우 암호 정책 모드가 Cognito 기본값으로 설정되어 있는지 확인합니다.
2. 멀티 팩터 인증에서 MFA를 적용하려면 옵션 MFA를 선택합니다.
3. MFA 방법의 경우 인증자 앱 및 SMS 메시지를 선택합니다.
4. 사용자 계정 복구의 경우 셀프 서비스 계정 복구 활성화가 선택되어 있고 사용자 계정 복구 메시지 전송 방법이 이메일 전용으로 설정되어 있는지 확인합니다.
5. 다른 모든 옵션은 기본값으로 유지하고 다음을 선택합니다.
가입 환경 구성에서 새 사용자로 가입할 때 새 사용자가 자신의 ID를 확인하는 방법과 사용자 가입 과정에서 필수 또는 선택 사항으로 설정해야 하는 속성을 결정할 수 있습니다. 자세한 정보는 사용자 풀의 사용자 관리을 참조하세요.
1. 셀프 등록 활성화가 선택되었는지 확인합니다. 이 설정을 사용하면 사용자 풀이 열려 인터넷상의 모든 사용자가 가입할 수 있습니다. 이는 예제 애플리케이션을 위한 것이지만 프로덕션 환경에서는 이 설정을 주의해서 적용하십시오.
2. Cognito 지원 확인 및 확인에서 Cognito가 확인 및 확인을 위해 메시지를 자동으로 보내도록 허용 확인란이 선택되어 있는지 확인합니다.
3. 확인할 속성이 이메일 메시지 전송, 이메일 주소 확인으로 설정되어 있는지 확인합니다.
4. 속성 변경 확인에서 기본 옵션이 선택되어 있는지 확인합니다. 즉, 업데이트 보류 시 원래 속성 값 유지가 선택되고, 업데이트 보류 중 활성 속성 값이 이메일 주소로 설정되어 있는지 확인합니다.
5. 필수 속성에서 이전 선택 항목을 기반으로 하는 필수 속성에 이메일이 표시되는지 확인합니다.
  중요
  이 예제 응용 프로그램의 경우 사용자 풀이 phone_number를 필수 속성으로 설정해서는 안 됩니다. phone_number가 필수 속성으로 표시된 경우 이전 선택 사항을 검토하고 업데이트하십시오.
  사용자 계정 복구 메시지를 위한 선택적 MFA, 이메일 전용 전송 방법
  
  이메일 메시지 전송, 확인할 속성에 대한 이메일 주소 확인
6. 다른 모든 옵션은 기본값으로 유지하고 다음을 선택합니다.
메시지 전송 구성에서 가입, 계정 확인, MFA 및 계정 복구를 위해 사용자에게 이메일 및 SMS 메시지를 보내도록 Amazon Simple Email Service 및 Amazon Simple Notification Service와의 통합을 구성할 수 있습니다. 자세한 내용은 Amazon Cognito 사용자 풀에 대한 이메일 설정 및 Amazon Cognito 사용자 풀의 SMS 메시지 설정 섹션을 참조하세요.
1. 이메일 공급자의 경우 Cognito로 이메일 보내기를 선택하고 Amazon Cognito에서 제공하는 기본 이메일 발신자를 사용합니다. 이메일 용량이 적은 이 설정은 애플리케이션 테스트에 충분합니다. Amazon Simple Email Service (Amazon SES) 를 통해 이메일 주소를 확인하고 Amazon SES로 이메일 보내기를 선택하면 반송할 수 있습니다.
2. SMS의 경우 새 IAM 역할 생성을 선택하고 IAM 역할 이름을 입력합니다. 그러면 Amazon Cognito에 SMS 메시지를 전송할 수 있는 권한을 부여하는 역할이 생성됩니다.
3. 다른 모든 옵션은 기본값으로 유지하고 다음을 선택합니다.
앱 통합에서 사용자 풀의 이름을 지정하고, 호스팅된 UI를 구성하고, 앱 클라이언트를 생성할 수 있습니다. 자세한 정보는 호스팅된 UI가 있는 앱 클라이언트 추가을 참조하세요. 예제 애플리케이션은 호스팅된 UI를 사용하지 않습니다.
1. 사용자 풀 이름에 사용자 풀 이름을 입력합니다.
2. Cognito 호스팅 UI 사용을 선택하지 마세요.
3. 초기 앱 클라이언트에서 앱 유형이 퍼블릭 클라이언트로 설정되어 있는지 확인합니다.
4. 클라이언트 암호에서 클라이언트 암호를 생성하지 않음이 선택되어 있는지 확인합니다.
5. [앱 클라이언트 이름(App client name)]을 입력합니다.
6. 고급 앱 클라이언트 설정을 확장합니다. 인증 흐름 목록에 ALLOW_USER_PASSWORD_AUTH 추가합니다.
7. 다른 모든 옵션은 기본값으로 유지하고 다음을 선택합니다.
검토 및 작성 화면에서 선택 사항을 검토하고 필요에 따라 선택 내용을 수정합니다. 사용자 풀 구성에 만족하면 사용자 풀 생성을 선택하여 계속 진행하십시오.
사용자 풀 페이지에서 새 사용자 풀을 선택합니다.
사용자 풀 개요에서 사용자 풀 ID를 기록해 둡니다. 예제 애플리케이션을 만들 때 이 문자열을 제공하게 됩니다.
앱 통합 탭을 선택하고 앱 클라이언트 및 분석 섹션을 찾으십시오. 새 앱 클라이언트를 선택합니다. 클라이언트 ID를 기록해 둡니다.

애플리케이션 생성

이 애플리케이션을 빌드하려면 개발자 환경을 설정해야 합니다. 개발자 환경 요구 사항은 다음과 같습니다.

Node.js 설치 및 업데이트되었습니다.
노드 패키지 관리자 (npm) 가 설치되고 버전 10.2.3 이상으로 업데이트되었습니다.
웹 브라우저의 TCP 포트 5173에서 환경에 액세스할 수 있습니다.

예제 React 웹 애플리케이션을 만들려면

개발자 환경에 로그인하고 애플리케이션의 상위 디렉토리로 이동합니다.
```
cd ~/path/to/project/folder/
```

새 React 서비스를 만드세요.


npm create vite@latest frontend-client -- --template react-ts

의 AWS 코드 예제 저장소에서 cognito-developer-guide-react-example 프로젝트 폴더를 GitHub 복제합니다.


cd ~/some/other/path


git clone https://github.com/awsdocs/aws-doc-sdk-examples.git


cp -r ./aws-doc-sdk-examples/javascriptv3/example_code/cognito-identity-provider/scenarios/cognito-developer-guide-react-example/frontend-client ~/path/to/project/folder/frontend-client

프로젝트의 src 디렉터리로 이동합니다.
```
cd ~/path/to/project/folder/frontend-client/src
```
다음 값을 config.ts 편집하고 바꾸십시오.
1. YOUR_AWS_REGION AWS 리전 코드로 바꾸십시오. 예를 들면 us-east-1입니다.
2. 테스트용으로 지정한 사용자 풀의 YOUR_COGNITO_USER_POOL_ID ID로 바꾸십시오. 예를 들면 us-east-1_EXAMPLE입니다. 사용자 풀은 이전 단계에서 입력한 AWS 리전 것과 같아야 합니다.
3. 테스트용으로 지정한 앱 클라이언트의 YOUR_COGNITO_APP_CLIENT_ID ID로 바꾸십시오. 예를 들면 1example23456789입니다. 앱 클라이언트는 이전 단계의 사용자 풀에 있어야 합니다.
다른 localhost IP에서 예제 애플리케이션에 액세스하려면 해당 줄을 package.json 편집하고 "dev": "vite", 로 "dev": "vite --host 0.0.0.0", 변경하십시오.
애플리케이션을 설치합니다.
```
npm install
```
애플리케이션을 실행합니다.
```
npm run dev
```
http://localhost:5173또는 에서 웹 브라우저를 사용하여 애플리케이션에 http://[IP address]:5173 액세스합니다.
유효한 이메일 주소로 새 사용자를 등록하십시오.
이메일 메시지에서 확인 코드를 검색하세요. 신청서에 확인 코드를 입력합니다.
사용자 이름과 비밀번호로 로그인합니다.

Amazon Lightsail을 사용하여 React 개발자 환경 만들기

Amazon Lightsail을 사용하여 가상 클라우드 서버를 생성하면 이 애플리케이션을 빠르게 시작할 수 있습니다.

Lightsail을 사용하면 이 예제 애플리케이션의 사전 요구 사항으로 사전 구성된 소규모 서버 인스턴스를 빠르게 만들 수 있습니다. 브라우저 기반 클라이언트를 사용하여 인스턴스에 SSH로 연결하고 퍼블릭 또는 프라이빗 IP 주소로 웹 서버에 연결할 수 있습니다.

이 예제 애플리케이션을 위한 Lightsail 인스턴스를 만들려면

Lightsail 콘솔로 이동합니다. 메시지가 표시되면 자격 증명을 입력합니다. AWS
인스턴스 생성을 선택합니다.
플랫폼 선택에서 Linux/Unix를 선택합니다.
블루프린트 선택에서 Node.js 를 선택합니다.
인스턴스 식별에서 개발 환경에 친숙한 이름을 지정합니다.
인스턴스 생성을 선택합니다.
Lightsail에서 인스턴스를 생성한 후 인스턴스를 선택하고 Connect 탭에서 SSH를 사용한 연결을 선택합니다.
SSH 세션이 브라우저 창에서 열립니다. npm -v실행하여 인스턴스에 Node.js node -v 및 최소 npm 버전 10.2.3이 프로비저닝되었는지 확인합니다.
React 애플리케이션 구성을 진행하세요.

javascript가 브라우저에서 비활성화되거나 사용이 불가합니다.

AWS 설명서를 사용하려면 Javascript가 활성화되어야 합니다. 지침을 보려면 브라우저의 도움말 페이지를 참조하십시오.

문서 규칙

사용자 풀 시작하기

플러터 모바일 앱 예제