기타 애플리케이션 옵션 - Amazon Cognito
React SPA 예시Flutter 모바일 앱 예시

기계 번역으로 제공되는 번역입니다. 제공된 번역과 원본 영어의 내용이 상충하는 경우에는 영어 버전이 우선합니다.

기타 애플리케이션 옵션

Amazon Cognito 인증과 통합하려는 기존 애플리케이션 UI가 있을 수 있습니다. Amazon Cognito 사용자 풀보다 기능이 낮은 디렉터리 설정이 포함된 기존 인증 페이지가 있을 수도 있습니다. 다양한 프로그래밍 언어에 대해 Amazon Cognito 통합 AWS SDKs를 사용하여이 유형의 애플리케이션에 인증 구성 요소를 추가하거나 교체할 수 있습니다. 다음 예를 참조하세요.

Amazon Cognito 콘솔에서이 용도로 사용자 풀을 생성하는 경우 대화형 로그인 페이지와 OpenID Connect(OIDC) 서비스를 호스팅하는 사용자 풀 도메인이 필요하지 않을 수 있습니다. 콘솔에서 사용자 풀을 생성하는 프로세스는 자동으로 도메인을 생성합니다. 사용자 풀의 도메인 탭에서이 도메인을 삭제할 수 있습니다. 다른 옵션으로는 API 요청이 AWS SDKs이고 자동 설정 옵션이 AWS Amplify CLI인 애플리케이션을 위한 Amazon Cognito 리소스의 프로그래밍 방식 생성이 있습니다. 자세한 내용은 웹 및 모바일 앱과 Amazon Cognito 인증 및 권한 부여 통합 단원을 참조하십시오.

React 단일 페이지 애플리케이션 예시 설정

이 자습서에서는 사용자 가입, 확인 및 로그인을 테스트할 수 있는 React 단일 페이지 애플리케이션을 생성합니다. React는 사용자 인터페이스(UI)에 중점을 둔 웹 및 모바일 앱용 JavaScript 기반 라이브러리입니다. 이 예시 애플리케이션은 Amazon Cognito 사용자 풀의 몇 가지 기본 함수를 보여줍니다. React를 사용한 웹 앱 개발 경험이 있는 경우 GitHub에서 예시 앱을 다운로드합니다.

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

React 기반 예시 웹 애플리케이션의 가입 페이지 스크린샷입니다.

이 애플리케이션을 설정하려면 사용자 풀이 다음 요구 사항을 충족해야 합니다.

  • 사용자가 이메일 주소로 로그인할 수 있습니다. Cognito 사용자 풀 로그인 옵션: 이메일.

  • 사용자 이름은 대/소문자를 구분하지 않습니다. 사용자 이름 요구 사항: 사용자 이름 대소문자 구분을 선택하지 않아야 합니다.

  • 다중 인증(MFA)은 필요하지 않습니다. MFA 적용: 선택적 MFA.

  • 사용자 풀은 이메일 메시지를 사용하여 사용자 프로필 확인을 위한 속성을 확인합니다. 확인할 속성: 이메일 메시지 전송, 이메일 주소 확인.

  • 이메일은 유일한 필수 속성입니다. 필수 속성: 이메일.

  • 사용자는 사용자 풀에 직접 가입할 수 있습니다. 자체 등록: 자체 등록 활성화가 선택되었습니다.

  • 초기 앱 클라이언트는 사용자 이름과 암호로 로그인할 수 있는 퍼블릭 클라이언트입니다. 앱 유형: 퍼블릭 클라이언트, 인증 흐름: ALLOW_USER_PASSWORD_AUTH.

애플리케이션 만들기

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

  1. Node.js가 설치 및 업데이트됩니다.

  2. 노드 패키지 관리자(npm)가 설치되고 최소 버전 10.2.3으로 업데이트됩니다.

  3. 웹 브라우저의 TCP 포트 5173에서 환경에 액세스할 수 있습니다.

예시 React 웹 애플리케이션을 만드는 방법

  1. 개발자 환경에 로그인하고 애플리케이션의 상위 디렉터리로 이동합니다.

    cd ~/path/to/project/folder/

  2. 새 React 서비스를 만듭니다.

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

  3. GitHub의 AWS 코드 예제 리포지토리에서 cognito-developer-guide-react-example 프로젝트 폴더를 복제합니다.

    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

  4. 프로젝트의 src 디렉터리로 이동합니다.

    cd ~/path/to/project/folder/frontend-client/src

  5. config.json을 편집하고 다음 값을 바꿉니다.

    1. 를 AWS 리전 코드YOUR_AWS_REGION로 바꿉니다. 예: us-east-1.

    2. YOUR_COGNITO_USER_POOL_ID를 테스트를 위해 지정한 사용자 풀의 ID로 바꿉니다. 예: us-east-1_EXAMPLE. 사용자 풀은 이전 단계에서 AWS 리전 입력한에 있어야 합니다.

    3. YOUR_COGNITO_APP_CLIENT_ID를 테스트를 위해 지정한 앱 클라이언트의 ID로 바꿉니다. 예: 1example23456789. 앱 클라이언트는 이전 단계의 사용자 풀에 있어야 합니다.

  6. localhost 이외의 IP에서 예제 애플리케이션에 액세스하려면 package.json을 편집하고 "dev": "vite", 줄을 "dev": "vite --host 0.0.0.0",으로 변경합니다.

  7. 애플리케이션을 설치합니다.

    npm install

  8. 애플리케이션을 시작합니다.

    npm run dev

  9. http://localhost:5173 또는 http://[IP address]:5173의 웹 브라우저에서 애플리케이션에 액세스합니다.

  10. 유효한 이메일 주소로 새 사용자를 등록합니다.

  11. 이메일 메시지에서 확인 코드를 검색합니다. 애플리케이션에 확인 코드를 입력합니다.

  12. 사용자 이름과 암호로 로그인합니다.

Amazon Lightsail을 사용하여 React 개발자 환경 생성

이 애플리케이션을 시작하는 빠른 방법은 Amazon Lightsail을 사용하여 가상 클라우드 서버를 생성하는 것입니다.

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

이 예시 애플리케이션의 Lightsail 인스턴스를 생성하는 방법

  1. Lightsail 콘솔로 이동합니다. 메시지가 표시되면 AWS 자격 증명을 입력합니다.

  2. 인스턴스 생성을 선택합니다.

  3. 플랫폼 선택에서 Linux/Unix를 선택합니다.

  4. 블루프린트 선택에서 Node.js를 선택합니다.

  5. 인스턴스 식별에서 개발 환경에 친숙한 이름을 지정합니다.

  6. 인스턴스 생성을 선택합니다.

  7. Lightsail이 인스턴스를 생성한 후 인스턴스를 선택하고 연결 탭에서 SSH를 사용하여 연결을 선택합니다.

  8. SSH 세션이 브라우저 창에서 열립니다. node -v 및 npm -v를 실행하여 인스턴스가 Node.js 및 최소 npm 버전 10.2.3으로 프로비저닝되었는지 확인합니다.

  9. React 애플리케이션 구성을 진행합니다.

Flutter를 사용하여 예시 Android 앱 설정

이 자습서에서는 Android Studio에서 디바이스를 에뮬레이션하고 사용자 가입, 확인 및 로그인을 테스트할 수 있는 모바일 애플리케이션을 생성합니다. 이 예시 애플리케이션은 Flutter에서 Android용 기본 Amazon Cognito 사용자 풀 모바일 클라이언트를 생성합니다. Flutter를 사용한 모바일 앱 개발 경험이 있는 경우 GitHub에서 예시 앱을 다운로드하세요.

다음 스크린샷은 가상 Android 디바이스에서 실행되는 앱을 보여줍니다.

가상화된 Android 예시 앱의 가입 페이지 스크린샷입니다.

이 애플리케이션을 설정하려면 사용자 풀이 다음 요구 사항을 충족해야 합니다.

  • 사용자가 이메일 주소로 로그인할 수 있습니다. Cognito 사용자 풀 로그인 옵션: 이메일.

  • 사용자 이름은 대/소문자를 구분하지 않습니다. 사용자 이름 요구 사항: 사용자 이름 대소문자 구분을 선택하지 않아야 합니다.

  • 다중 인증(MFA)은 필요하지 않습니다. MFA 적용: 선택적 MFA.

  • 사용자 풀은 이메일 메시지를 사용하여 사용자 프로필 확인을 위한 속성을 확인합니다. 확인할 속성: 이메일 메시지 전송, 이메일 주소 확인.

  • 이메일은 유일한 필수 속성입니다. 필수 속성: 이메일.

  • 사용자는 사용자 풀에 직접 가입할 수 있습니다. 자체 등록: 자체 등록 활성화가 선택되었습니다.

  • 초기 앱 클라이언트는 사용자 이름과 암호로 로그인할 수 있는 퍼블릭 클라이언트입니다. 앱 유형: 퍼블릭 클라이언트, 인증 흐름: ALLOW_USER_PASSWORD_AUTH.

애플리케이션 만들기

예시 Android 앱을 만드는 방법

  1. Android Studio 및 명령줄 도구를 설치합니다.

  2. Android Studio에서 Flutter 플러그인을 설치합니다.

  3. 이 예제 앱의 cognito_flutter_mobile_app 디렉터리 콘텐츠에서 새 Android Studio 프로젝트를 생성합니다.

    1. <<YOUR USER POOL ID>> 및를 편집assets/config.json하고 사용자 풀 및 앱 클라이언트의 IDs<< YOUR CLIENT ID>>로 바꿉니다.

  4. Flutter를 설치합니다.

    1. PATH 변수에 Flutter를 추가합니다.

    2. 다음 명령을 사용하여 라이선스를 수락합니다.

      flutter doctor --android-licenses

    3. Flutter 환경을 확인하고 누락된 구성 요소를 설치합니다.

      flutter doctor

      1. 누락된 구성 요소가 있는 경우 flutter doctor -v를 실행하여 문제를 해결하는 방법을 알아봅니다.

    4. 새 Flutter 프로젝트의 디렉터리로 변경하고 종속성을 설치합니다.

      1. flutter pub add amazon_cognito_identity_dart_2을(를) 실행합니다.

    5. flutter pub add flutter_secure_storage을(를) 실행합니다.

  5. 가상 Android 디바이스를 생성합니다.

    1. Android Studio GUI에서 디바이스 관리자로 새 디바이스를 생성합니다.

    2. CLI에서 flutter emulators --create --name android-device를 실행합니다.

  6. 가상 Android 디바이스를 시작합니다.

    1. Android Studio GUI에서 가상 디바이스 옆의 시작 아이콘을 선택합니다.

    2. CLI에서 flutter emulators --launch android-device를 실행합니다.

  7. 가상 디바이스에서 앱을 시작합니다.

    1. Android Studio GUI에서 배포 아이콘을 선택합니다.

    2. CLI에서 flutter run를 실행합니다.

  8. Android Studio에서 실행 중인 가상 디바이스로 이동합니다.

  9. 유효한 이메일 주소로 새 사용자를 등록합니다.

  10. 이메일 메시지에서 확인 코드를 검색합니다. 애플리케이션에 확인 코드를 입력합니다.

  11. 사용자 이름과 암호로 로그인합니다.