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

기타 애플리케이션 옵션

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

Amazon Cognito 콘솔에서 이 용도로 사용자 풀을 생성하는 경우 대화형 로그인 페이지와 OpenID Connect(OIDC) 서비스를 호스팅하는 사용자 풀 도메인이 필요하지 않을 수 있습니다. 콘솔에서 사용자 풀을 생성하는 프로세스는 자동으로 도메인을 생성합니다. 사용자 풀의 도메인 탭에서 이 도메인을 삭제할 수 있습니다. 다른 옵션으로는 AWS SDK의 API 요청과 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/

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

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

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

    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입니다. 앱 클라이언트는 이전 단계의 사용자 풀에 있어야 합니다.

  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. assets/config.json을 편집하고 <<YOUR USER POOL ID>> 및 << YOUR CLIENT ID>>를 사용자 풀 및 앱 클라이언트의 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에서 가상 디바이스 옆의 시작 Play button icon with a blue triangle pointing to the right. 아이콘을 선택합니다.

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

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

    1. Android Studio GUI에서 배포 Green play button icon representing a start or play action. 아이콘을 선택합니다.

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

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

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

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

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