AWS 시작하기

React 애플리케이션 구축

AWS Amplify를 사용하여 간단한 웹 애플리케이션 생성

모듈 3: 인증 추가

이 모듈에서는 Amplify CLI와 라이브러리를 사용하여 인증을 구성하고 앱에 추가합니다.

소개

다음으로 추가할 기능은 인증입니다. 이 모듈에서는 관리형 사용자 자격 증명 서비스인 Amazon Cognito를 사용하여 Amplify CLI와 라이브러리에서 사용자를 인증하는 방법을 알아봅니다.

또한 Amplify UI 구성 요소 라이브러리를 사용하여 사용자가 가입하고 로그인하고 암호를 재설정할 수 있도록 단 몇 줄의 코드만으로 전체 사용자 인증 흐름을 구성하는 방법도 배웁니다.

배우게 될 내용

  • Amplify 라이브러리 설치
  • 인증 서비스 생성 및 배포
  • 인증을 포함하도록 React 앱 구성

주요 개념

Amplify 라이브러리 – Amplify 라이브러리는 웹 또는 모바일 애플리케이션에서 AWS 서비스와 상호 작용할 수 있도록 해줍니다.

인증 – 소프트웨어에서 인증이란 인증 서비스 또는 API를 사용하여 사용자의 자격 증명을 확인하고 관리하는 프로세스를 의미합니다.

 완료 시간

10분

 사용되는 서비스

구현

  • Amplify 라이브러리 설치

    이 프로젝트에는 Amplify 라이브러리가 2개 필요합니다. 기본 aws-amplify 라이브러리에는 함께 작동하는 다양한 AWS 서비스와 상호 작용하는 데 사용되는 모든 클라이언트 측 API가 포함되어 있고 @aws-amplify/ui-react 라이브러리에는 프레임워크별 UI 구성 요소가 포함되어 있습니다. 이 두 라이브러리를 프로젝트의 루트에 설치합니다.

    npm install aws-amplify @aws-amplify/ui-react
  • 인증 서비스 생성

    인증 서비스를 생성하려면 Amplify CLI를 사용합니다.

    amplify add auth
    
    ? Do you want to use the default authentication and security configuration? Default configuration
    ? How do you want users to be able to sign in? Username
    ? Do you want to configure advanced settings? No, I am done.
  • 인증 서비스 배포

    인증 서비스가 로컬로 구성되었으므로, 이제 Amplify 푸시 명령을 실행하여 배포할 수 있습니다.

    amplify push --y
  • Amplify 리소스를 사용하여 React 프로젝트 구성

    CLI가 생성되었습니다. 이 CLI는 프로젝트의 src 디렉터리에 있는 aws-exports.js라는 파일을 지속적으로 업데이트합니다. 이 파일은 Amplify 프로젝트에서 제공되는 다양한 AWS 리소스에 대해 React 프로젝트에 알리는 데 사용됩니다.

    이러한 리소스를 사용하여 앱을 구성하려면 src/index.js를 열고 마지막 가져오기 아래에 다음 코드를 추가합니다.

    import Amplify from 'aws-amplify';
    import config from './aws-exports';
    Amplify.configure(config);
    
  • App.js에 인증 흐름 추가

    다음으로, src/App.js를 열고 다음 코드를 업데이트합니다.

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
    
    function App() {
      return (
        <div className="App">
          <header>
            <img src={logo} className="App-logo" alt="logo" />
            <h1>We now have Auth!</h1>
          </header>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    이 구성 요소에는 withAuthenticator 구성 요소를 사용했습니다. 이 구성 요소는 사용자가 가입하고, 로그인하고, 암호를 재설정하고, MFA(다단계 인증)를 위해 로그인을 확인할 수 있도록 전체 사용자 인증 흐름을 구성합니다. 또한 로그아웃 버튼을 렌더링하는 AmplifySignOut 구성 요소도 사용했습니다.

  • 로컬로 앱 실행

    다음으로, 앱을 실행하여 새 인증 흐름에서 앱이 보호되는지 확인합니다.

    npm start
    Front End Sign In Screen Module 3

    여기에서 가입하면 다음에 자동으로 로그인됩니다. 로그인하면, 사용자를 로그아웃하고 인증 흐름을 다시 시작하는 로그아웃 버튼이 표시됩니다.

  • 라이브 환경에 변경 사항 배포

    GitHub에 변경 사항을 배포하여 Amplify에서 새 빌드를 시작합니다.

    git add .
    git commit -m “added auth”
    git push origin master
    

결론

단 몇 줄의 코드만으로 앱에 사용자 인증을 추가했습니다! 다음 모듈에서는 앱에 API를 추가합니다.

이 모듈이 유용했습니까?

감사합니다.
좋아하는 사항을 알려주세요.
실망을 드려 죄송합니다.
오래되었거나 혼란스럽거나 부정확한 사항이 있습니까? 피드백을 제공하여 이 자습서를 개선할 수 있도록 도와주십시오.

GraphQL 추가