[Amplify사진] 인증 추가하기

 

백엔드 구성하기

이제 우리에게 간단한 리액트 어플리케이션이 있으니, 어플리케이션으로 사용자 등록하고 로그인하도록 만들겠습니다. 지금 아무 것도 할 수 없지만 백엔드 API에 조회하는 기능을 추가하면 어떤 사용자가 우리 시스템을 사용하는지 알 수 있습니다.

 

 

AWS Amplify CLI는 리엑트와 리엑트 네이티브용 iOS와 안드로이드에 SDK를 제공하여 웹과 모바일 어플리케이션에 클라우드 기능을 손쉽게 추가할 수 있습니다. 시작을 위해 새 애플리케이션을 만들고 사용자 인증을 가능토록 합니다. 어플리케이션에 AWS Amplify CLI로 구성하여 어플리케이션과 오픈소스 AWS Amplify 라이브러리를 연결합니다. 이제 해야 할 것은 리액트 어플리케이션에서 이것을 사용하면 됩니다. AWS Amplify는 클라우드 서비스에서 동작하는 괜찮은 추상화와 어플리케이션에서 사용할 유용한 리액트 컴포넌트를 포함합니다.

 

 

amplify 초기화 및 인증을 추가합니다.

커맨드라인에 아래 명령어를 입력하면 대화형식으로 진행할수 있습니다.

 

amplify init 
amplify add auth

그다음 반영 하기위해 amplify push를 해줍니다.

amplify push

Amazon Cognito를 사용하면 웹과 모바일 애플리케이션에 사용자 등록, 로그인, 접근제어 기능을 쉽고 빠르게 추가할 수 있습니다. 방금 생성한 유저 풀은 보안된 사용자 디렉터리로 이를 이용하여 사용자가 생성한 사용자명과 암호로 로그인할 수 있습니다. Amazon Cognito(Amplify CLI 함께)는 또한 Facebook, Google, Amazon 같은 소셜 인증 공급자와 SAML 2.0을 통한 엔터프라이즈 인증 공급자를 이용한 로그인 구성도 지원합니다. 자세한 내용을 알기 원하시면 Amazon Cognito Developer Resources page와 AWS Amplify Authentication documentation를 살펴보십시요.

Amplify CLI는 적절한 클라우드 리소스로 프로비저닝하고 src/aws-exports.js 파일을 어플리케이션에서 사용하는 클라우드 리소스의 모든 구성 데이터로 갱신합니다.

 

 

프론트엔드 렌더링

이제 등록과 로그인을 관리하는 백엔드가 구성되었으니 withAuthenticator AWS Amplify의 상위 리액트 컴포넌트를 이용해서 기존 App 컴포넌트를 감싸도록 합니다. 그러면 어플리케이션에서 사용자 등록, 확인, 로그인, 로그 아웃, 비밀번호 재설정을 할 수 있는 간단한 UI를 제공합니다.

 

 

Amplify npm 라이브러리 추가

아직 aws-amplify, aws-amplify-react 모듈을 어플리케이션에 추가하지 않았으니 이제 추가합니다.

 

npm install --save aws-amplify aws-amplify-react@3.1.9

 

aws-amplify 3.0.7 로 설치하면 나중에 오류가 생깁니다..ㅠㅠ

하지만 aws-amplify-react의 경우 3.1.9버전으로 하지않으면 ui가 적용되지 않습니다.

 

 

그리고 app.js를 변경해 줍니다.

 

// src/App.js

import React, { Component } from 'react';
import { Header } from 'semantic-ui-react';

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import { withAuthenticator } from 'aws-amplify-react';
Amplify.configure(aws_exports);


class App extends Component { 
    render() { 
        return (
            <div>
                <Header as='h1'>Hello World!</Header>
            </div>
        );
    }
}

export default withAuthenticator(App, {includeGreetings: true});

App.js에서 변경된 사항

• AWS Amplify JS 라이브러리 가져오기 및 구성
• aws-amplify-react에서 withAuthenticator 고차 구성 요소를 가져왔습니다.
• withAuthenticator를 사용하여 앱 구성 요소 래핑

 

계정 만들기

이제 실행후 계정을 만들어봅니다

커맨드라인에서 npm start를 하고 create account를 합니다.

 

 

이메일로 코드가 날라오는데 확인후 로그인이 가능합니다!

 

위와 같은화면을 볼수있습니다(위는 semantic-ui-react가 적용되지 않은것입니다.)

 

cognito 에 가면 생성이 되어 있는것을 볼수 있는데

 

사용자풀과 연동자격증명이 하나씩 생성되어 있는것을 볼수 있습니다.

 

 

 

지금은 꽤 간단한 인증 UI이지만 직접 리액트 컴포넌트를 교체하거나 어플리케이션으로 리다이렉션할 수 있는 완전히 호스트된 UI를 사용하는 등의 많은 것을 사용자가 정의할 수 있습니다. 자세한 내용은 AWS Amplify 인증 가이드의 사용자 정의 항목을 보십시요.