Nuxt.js/auth Google Oauth 설정(연동) 하기

Nuxt.js에서 Google 소셜 로그인을 연동하는법은 여러 가지 방법이 있습니다.

물론 라이브러리를 까보면 실상 크게 2가지로 제한되기도 하죠

 

• Firebase를 이용한 Google 로그인
• Google Oauth2.0 API를 이용한 로그인

 

지난번에 Firebase를 이용한 로그인을 작성한적이 있는데 이 방법은 Firebase 라이브러리 자체가 용량이 방대합니다. 무려 18MB.... 이런 18... Nuxtjs니 Nuxtjs Firebase 모듈을 설치하면 쌉가능하겠지 했지만 경기도 오산이었죠

 

Nuxtjs/Firebase도 firebase를 필요로합니다...

 

 

그래서 이번에는 Google Oauth 2.0을 @nuxtjs/auth를 이용하여 설치하는 방법을 진행해보고자 합니다.

@nuxtjs/auth는 2021.04.09 기준 v5가 최신인데 v5는 확연한 구분을 위해 @nuxtjs/auth-next 라는 패키지를 사용합니다. 현재기준으로는 사용법이 조금 달르고 이전버전보다 귀찮아서 패스하겠습니다.

 

 

의존성 설치

 

npm i D --save-exact @nuxtjs/auth-next@latest @nuxtjs/axios@5.12.1 cookie-universal-nuxt

axios가 설치되어 있지 않으면, Google Login에 성공하여도 redirect 이후 로그인이 진행되지 않습니다.

axios와 auth모듈의 이슈로 axios가 5.12.1 버전을 설치하셔야 합니다.

 

 

 

Google Oauth2.0 Client ID 발급 받기

 

이 부분은 공식문서가 잘 설명해주고 있기 때문에 공식문서 링크로 대체합니다.

cloud.google.com/endpoints/docs/frameworks/java/creating-client-ids?hl=ko#web-client

클라이언트 ID 만들기  |  App Engine용 Cloud Endpoints Frameworks  |  Google Cloud

 

 

 

Nuxt.config.js 설정

// nuxt.config.js || nuxt.config.ts

module.exports = { // export default or module.exports
// ... 생략
  buildModules: [
    '@nuxtjs/auth-next',
    '@nuxtjs/axios',
    'cookie-universal-nuxt',
  ]
  
  auth: {
    strategies: {
      google: {
        client_id: '<Google Client-ID>.apps.googleusercontent.com',
        codeChallengeMethod: '',
        responseType: ['token', 'id_token'],
      },
    },
  }
// ... 생략
}

buildModules로 넣는 이유는 이 글에서 다루지 않습니다. 짧게 표현하자면, Nuxt.js ServerMiddleware를 이용해서 API나 GraphQL등 백엔드서버를 동시에 사용하는 경우가 아니면 buildModules로 포함하여도 상관없습니다. 용량도 줄이고 ㄱㅇㄷ

 

의존성 설치에서 언급한것 처럼 axios가 반드시 포함되어야 합니다. axios 설정을 굳이 할 필요는 없습니다 모듈에 포함되면 알아서 nuxt가 root nuxtContext에서 전역으로 접근이 가능해집니다.

 

 

 

 

Login.Vue

 

// pages/login.vue

<template>
  <div></div>
</template>

<script>
export default {
  name: 'Login',
  middleware: ['auth'],
}
</script>

<style scoped></style>

 

middleware 'auth'는 @nuxtjs/auth-next에 포함되어 있기 때문에 별도로 작성하지 않고 미들웨어에 추가만 해주면 됩니다. auth라는 미들웨어가 있다면 겹칠 수 있으니 주의가 필요합니다.

 

 

 

 

 

이렇게 되면 $auth와 store에 auth 모듈이 생긴것을 확인할 수 있습니다.