이번 기사는 AWS amplify의 기능 중 하나인 Authentication에 대한 기사입니다.
Nuxt.js와 Amazon Cognito의 애플리케이션에 사용자 가입, 로그인 등의 기능을 추가하고 실제로 로그인 화면을 구현하고 싶습니다.

환경

· Pug 사용
· 코딩 규약은 Nuxt.js에 따라 StandardJS
・Visual Studio Code
※ amplify init 에 의해 프로젝트가 초기화되고 있는 전제하에 이야기를 진행시켜 갑니다.

Cognito 준비

Cognito를 사용하기 위해 AWS 서비스 기능의 auth를 추가합시다.

쉘

$ amplify add auth

$ amplify push

라이브러리 추가

Amplify 라이브러리를 설치합니다.

쉘

$ npm install aws-amplify --save

로그인 화면 구현

Amplify 라이브러리 사용 가능

우선은 Amplify를 Vue로 사용하기 위한 설정을 합니다. plugins 폴더에 amplify.js 를 만들어 아래와 같이 합니다

amplify-vue.js

import Vue from 'vue'
import * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from '@/aws-exports'
Amplify.configure(awsconfig)

Vue.use(AmplifyPlugin, AmplifyModules)

middleware에서 로그인 판정

사용자의 로그인을 확인할 수 없는 경우 제어 작성middleware 의 폴더에 auth.js 를 만들고 다음과 같이 합니다.

auth.js

import { Auth } from 'aws-amplify'

export default async ({ redirect }) => {
  const userInfo = await Auth.currentUserInfo()

  if (!userInfo) {
    redirect('/signin')
  }
}

currentUserInfo 메소드는 Auth 로부터 사용자 정보를 가져오는 메소드입니다. 따라서 사용자가 로그인 요청을 보낼 때 userInfo에 사용자 정보가 없으면 로그인 페이지 (/signin)로 리디렉션됩니다.

로그인 기능

pages 폴더 안에 signin.vue 를 만들어 아래와 같이 합니다

signin.vue

<template lang="pug">
    amplify-sign-out(
      v-if="isLoggedIn"
    )
    amplify-authenticator(
      v-else
      :authConfig="authConfig"
    )
</template>

<script>
export default {
  data () {
    return {
      isLoggedIn: false,
      authConfig: {
        usernameAttributes: 'My user name',
        signUpConfig: {
          header: 'My Customized Sign Up!',
          hideAllDefaults: true,
          defaultCountryCode: '1',
          signUpFields: [
            {
              label: 'My user name',
              key: 'username',
              required: true,
              displayOrder: 1,
              type: 'string'
            },
            {
              label: 'Password',
              key: 'password',
              required: true,
              displayOrder: 2,
              type: 'password'
            },
            {
              label: 'Phone Number',
              key: 'phone_number',
              required: true,
              displayOrder: 3,
              type: 'string'
            }
          ]
        }
      }
    }
  },
  async mounted () {
    const currentUserInfo = await this.$Amplify.Auth.currentUserInfo()
    this.isLoggedIn = Boolean(currentUserInfo)

    }
  }
}
</script>

authenticator의 구성 요소

Amplify 라이브러리는 사용자 로그인 기능과 관련된 구성 요소를 제공합니다.
이번에 사용하는 것은 amplify-authenticator와 amplify-signout의 두 가지입니다.

amplify-authenticator

이 구성 요소는 가입/로그인 양식을 제공합니다. 사용자가 가입 양식에 등록 정보를 입력하면 Cognito 사용자 풀에서 사용자 정보를 관리합니다.

로그인 화면


가입 화면


가입 내용은 쉽게 사용자 정의할 수 있습니다. 그것은 data 안에 있는 signUpConfig 에서 편집합니다

script

  signUpConfig: {

          header: 'My Customized Sign Up!',
          hideAllDefaults: true,
          defaultCountryCode: '1',
          signUpFields: [
            {
              label: 'My user name',
              key: 'username',
              required: true,
              displayOrder: 1,
              type: 'string'
            },
            {
              label: 'Password',
              key: 'password',
              required: true,
              displayOrder: 2,
              type: 'password'
            },
            {
              label: 'Phone Number',
              key: 'phone_number',
              required: true,
              displayOrder: 3,
              type: 'string'
            }
          ]
        }

amplify-sign-out

로그아웃 버튼을 표시합니다. 버튼을 누르면 로그인 화면으로 돌아갑니다.

프로그램 흐름

절차를 따라 설명하겠습니다.

1 로그인 후

async/await 를 사용해 $Amplify.Auth 에 대해, currentuserInfo() 메소드에 의해, 유저 정보를 취득한 것을 확인하면, 정수 currentuserInfo 에 대입된다

script

const currentUserInfo = await this.$Amplify.Auth.currentUserInfo()

2 Boolean 값 전환

사용자 정보를 얻을 수있는 경우 가입 및 로그 아웃 전환에 사용되는 isLoggedIn의 Boolean 값 변경

script

this.isLoggedIn = Boolean(currentUserInfo)

3 화면 전환

v-if에 의한 조건 분기로 가입 또는 아웃 화면 전환

signin.vue

amplify-sign-out(
      v-if="isLoggedIn"
    )
    amplify-authenticator(
      v-else
      :authConfig="authConfig"
    )

이상이 Amlify 라이브러리를 사용한 로그인 기능의 일련의 흐름입니다!
참고로 가입된 사용자 정보는 Cognito에 다음과 같이 관리됩니다.


DB를 사용하지 않고 컴포넌트 하나로 등록, 관리해주는 것은 매우 편리하고, 기술의 진보를 실감하네요!
앞으로도 최신 기술에 대해 기사를 쓰고 싶습니다!