[AWS] amplify

 

---

 

 

사내 웹 앱을 개발하면서, Cognito로 로그인 연동을 좀 간편한 방법으로 하고싶어서 찾아보았다.

 

사내 앱을 개발하는 중 React 부분에서 Cognito랑 연동하여 로그인 + 회원가입 추가를 기존과는 다르게 간편한 방법으로 진행하고싶었다..

 

찾아낸건 Amplify 라는 라이브러리를 찾게되었다.

 

기존엔 로그인, 회원가입 컴포넌트를 각각 만들어 연동 시키고, CSS 처리가 필요했다.

다만 Amplify의 경우엔 별 다른 처리 없이 진행을 할 수 있어 편했다.(??)

---

 

Amplify에 대해서 찾아보니 로그인, 회원가입 컴포넌트를 만들 필요가 없었다.

 

로그인의 경우 Docs를 참조하여 구성했다.

import React from 'react';
import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

const formFields = {
  signIn: {
    username: {
      placeholder: '아이디를 입력하세요',
    },
    password: {
      placeholder: '비밀번호를 입력하세요',
    },
  },
};

function App() {
  return (
    <Authenticator formFields={formFields}>
      {({ signOut, user }) => (
        <main>
          <h1>안녕하세요, {user.username}님!</h1>
          <button onClick={signOut}>로그아웃</button>
        </main>
      )}
    </Authenticator>
  );
}

export default App;

 

이런 형태로 코드를 구성했으며, Authenticator 를 통해서 로그인을 진행하게 된다.

여기서 Authenticator 를 통해서 하게 되면, 가입된 유저의 경우 Cognito에서 정보를 전달받는다.

 

참고로 authenticator 컴포넌트로 간단하게 로그인, 회원가입, 비밀번호 재설정 같은 기능 구현가능하다.

 

그리고 여기에 한글화를 적용하기 위해서 아래와 같이 코드를 추가 작성하면 된다.

 

import { I18n } from '@aws-amplify/core';

const dict = {
  ko: {
    'Sign In': '로그인',
    'Sign in': '로그인하기',
    'Signing': '로그인중..',
    'Sign Up': '회원가입',
    'Sign Out': '로그아웃',
    'Username': '사용자 이름',
    'Password': '비밀번호',
    'Forgot your password?': '비밀번호를 잊으셨나요?',
    'Reset your password': '비밀번호 재설정',
    'No account?': '계정이 없으신가요?',
    'Create Account': '계정 생성',
    'Email': '이메일',
    'Phone Number': '휴대폰 번호',
    'Confirm Password':'비밀번호 재확인'
    // 필요한 다른 텍스트들도 추가 가능
  },
};

I18n.putVocabularies(dict);
I18n.setLanguage('ko');

 

이렇게 코드를 추가로 작성하게되면   

 

 

이렇게 한글화가 된 로그인 화면을 볼 수 있다..

---

별게 없었는데, 추가적으로 컴포넌트 생성을 하지 않고 라이브러리 내장 컴포넌트를 이용해서 AWS와 직접 연결하여 진행 할 수 있는게 장점인것 같다.

 

React 부분 코드도 짧아지고 가독성이 좋아져서, 간단한 로그인, 회원가입 등은 amplify를 이용하여 만드는 것도 생산성을 향상시키기에 좋은 방법인것 같다.

---

 

출처

 

https://docs.amplify.aws/gen1/react/build-a-backend/auth/enable-sign-up/

Enable sign-up, sign-in, and sign-out - React - AWS Amplify Gen 1 Documentation

 

Internationalization - React - AWS Amplify Gen 1 Documentation

Internationalization - React - AWS Amplify Gen 1 Documentation