Amplify 로그인 구현(AWS 활용)

목적

• 앞서 진행된 Full Cloud DevOps 구성 환경을 이용하여 프로젝트의 로그인 환경을 가장 간단한 형태로 구현
• 로그인 구현을 통해 유저들이 활동할 수 있는 웹서비스 기반 마련

자원스택

• Amplify : 아마존에서 제공하는 풀스텍 서비스
• Cognito : 아마존에서 제공하는 사용자 풀 서비스
• Vue3 : 자바스크립트 웹 프레임워크

사용예시

https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-scenarios.html

환경세팅

• Full Cloud DevOps 구설(AWS 활용) 에서 세팅한 환경 이용

• amplify env 에서 dev 환경 이용

로그인 구현

Amplify  구성요소 추가

1. Amplify CLI로 기능 추가

amplify auth add
amplify push

2. Amplify console에 추가된 내용 확인

3. Amplify console에 추가된 내용 확인

  - 아직 아무 유저도 없습니다.

Vue 환경에 적용

여기서는 amplify의 UI Components를 사용해 미리 준비된 요소를 사용합니다.

1. Amplify UI Components 설치

  - 사전 정의된 요소들을 사용토록 해주는 패키지를 설치 합니다.

npm install aws-amplify @aws-amplify/ui-components

2. main.js 수정

  - 위에서 설치한 Ui Components 사용하기 위해 Vue의 src/main.js를 아래와 같이 수정 합니다.

import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

// 위에는 Default 내용
// 아래는 신규 추가된 내용

import Amplify from 'aws-amplify';
import aws_exports from './aws-exports';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';

Amplify.configure(aws_exports);
applyPolyfills().then(() => {
  defineCustomElements(window);
});

  - 정상작동 확인

amplify serve

3. app.vue 수정

  - Vue 파일을 수정하여 로그인 영역 및 버튼을 생성 하기위해 src/App.vue 파일을 수정

// template 영역
<template>
  <div v-if="authState !== 'signedin'">You are signed out.</div>
    <amplify-authenticator>
      <div v-if="authState === 'signedin' && user">
        <div>Hello, {{user.username}}</div>
      </div>
      
      <img alt="Vue logo" src="./assets/logo.png">
      <HelloWorld msg="Welcome to Your Vue.js App"/>
      
      <amplify-sign-out></amplify-sign-out>
    </amplify-authenticator>
</template>

// script 영역
<script>
import HelloWorld from './components/HelloWorld.vue'
import { onAuthUIStateChange } from '@aws-amplify/ui-components'

export default {
  name: 'App',
  components: {
    HelloWorld
  },
  created() {
    this.unsubscribeAuth = onAuthUIStateChange((authState, authData) => {
      this.authState = authState;
      this.user = authData;
    })
  },
  data() {
    return {
      user: undefined,
      authState: undefined,
      unsubscribeAuth: undefined
    }
  },
  beforeUnmount() {
    this.unsubscribeAuth();
  }
}
</script>

4. 구동 및 테스트

  - 동작을 확인 합니다.

amplify serve

  - 최초 접근

  - Create account로 개정을 생성하면 메일을 통한 인증이 진행됩니다.

  - 로그인 된 화면 입니다. 생성한 username도 확인 가능합니다.

5. congnito 확인

  - 가입된 내역을 backend에서 확인 합니다.

발전방향

  - 커스터마이징 : 원하는 영역에 로그인을 설정

  - 소셜 로그인 구현 : sns 인증을 통하여 손쉽게 가입할 수 있도록.

   끝.