카카오 로그인(REST API)③ - Vue(nuxtjs) + Node(nestjs)

이 글은 아래 동영상 강의로 제공됩니다.

 

Frontend 개발은 Nuxtjs를 이용하여 진행하도록 합니다.

 

전체적인 진행 순서는 다음과 같습니다.

1. kakao developer에서 애플리케이션 생성
2. 전체 Workflow 이해하기
3. Nuxtjs(Frontend) 개발
4. Nestjs(Backend) 개발

 

우선 아래 명령으로 Nuxt 프로젝트를 생성합니다.

npx create-nuxt-app kakao-login-front

- 프로젝트 명 : kakao-login-front

- programing language : Javascript

- Package manager : Yarn

- UI framework : None

- Nuxt.js modules : Axios

- Linting tools : ESLint

- Testing framework : None

- Rendering mode : Single Page App

- Server : Node.js

- Development tools : Enter

- Continuous integration : None

- Version control system : None

 

프로젝트 생성이 완료되면 아래와 같은 메시지가 나옵니다.

에디터에서 프로젝트를 열고, yarn dev를 사용해서 프로젝트를 실행합니다.

브라우저에서 http://localhost:3000번을 입력합니다.

이때 아래와 같은 페이지가 나오면 프로젝트가 정상적으로 만들어진 것입니다.

 

카카오 로그인 기능을 만들기 위해 아래와 같은 버튼이미지가 필요합니다.

아래 사이트에서 다운로드 하실 수 있습니다.

https://developers.kakao.com/tool/resource/login

Kakao Developers

이미지를 static 폴더 아래에 copy합니다.

 

카카오로그인을 사용하기 위해서 kakao.js 파일이 필요합니다.
nuxt.config.js의 'head' 아래에 다음 코드를 추가합니다.

script: [
  {
    src: 'https://developers.kakao.com/sdk/js/kakao.js'
  }
]

 

pages/index.vue 파일에 카카오 로그인 버튼을 추가하고 로그인 method를 작성 합니다.

<template>
  <a @click="loginWithKakao">
    <img src="/kakao_login_large_narrow.png"/>
  </a>
</template>

<script>
export default {
  name: 'IndexPage',
  methods: {
    kakaoInit () {
      Kakao.init('329a6a74...')// KaKao client key
      Kakao.isInitialized()
    },
    async loginWithKakao () {
      await Kakao.Auth.authorize({
        redirectUri: `${window.location.origin}/kakao-callback`
      })
    }
  },
  mounted () {
    this.kakaoInit()
  }
}
</script>

다음과 같이 컴파일 오류가 발생할 수 있습니다.

이 경우 .eslintrc.js 파일을 열고 아래 내용을 추가하면 오류를 해결 할 수 있습니다.

'Kakao' 변수가 선언되지 않았다는 오류이고, 선언되지 않은 변수를 eslint에서 인식할 수 있도록 해 준것입니다.

  globals: {
    Kakao: true
  }

카카오 인증 후 callback 페이지를 아래와 같이 만듭니다.

axios를 이용해 서버API를 호출할 것이기 때문에 nuxt.config.js 다음을 추가합니다.

- baseURL은 서버의 주소를 지정합니다.

  modules: [
    '@nuxtjs/axios'
  ],

  axios: {
    baseURL: 'http://localhost:3001/'
  },

 

pages/kakao-callback.vue

<template>
  <div>
    로그인 중 입니다...
  </div>
</template>

<script>
export default {
  async mounted () {
    try {
      // code 유무 체크
      if (!this.$route.query.code) {
        return this.$router.push('/')
      }
      console.log(`code : ${this.$route.query.code}`)

      // 카카오 로그인 요청
      const body = {
        code: this.$route.query.code,
        domain: window.location.origin
      }
      const response = await this.$axios.$post(
        '/login', body, {}
      )
      console.log(response)
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

브라우저에서 확인을 해봅니다.

확인하고 계속하기를 클릭하면 아래와 같은 화면이 보입니다.

브라우저의 콘솔을 확인해보면 다음과 같이 code 값이 넘어온것을 확인 할 수 있습니다.

이렇게 해서 frontend 작업이 완료되었습니다.

다음시간은 backend 작업을 진행해보겠습니다.