(풀스택) Node(Nest)와 Vue(Nuxt)로 사이트 만들기 - 04.카카오 로그인

다음은 이 글의 동영상 강좌입니다.

https://youtu.be/7sT3G9ZwyzM

 

카카오 로그인 기능을 만들어봅니다.

 

진행 순서는 다음과 같습니다.

1. 카카오 developer 사이트에서 application 생성
2. 프론트 개발
3. 백엔드 개발

보다 자세한 설명은 이전 영상을 보시면 됩니다.

https://www.youtube.com/watch?v=E-a-wQqybbE 

 

카카오 developer 사이트에서 application 생성

• 우선 카카오 로그인을 사용하기 위해 https://developers.kakao.com/ 에서 로그인을 합니다.
• 상단의 내 애플리케이션 메뉴를 클릭 합니다.

• 애플리케이션 추가하기를 클릭합니다.

• 애플리케이션 정보를 입력합니다.

• 애플리케이션 목록에서 새로 만든 slider를 확인할 수 있습니다.

• slider 앱을 클릭하면 앱에 대한 정보를 확인할 수 있습니다.

• 플랫폼 -> 플랫폼 설정하기를 클릭합니다.

• 우리는 Web으로 개발을 할 것이므로 web을 클릭합니다. 사이트 도메인에 http://localhost:3000 를 입력한 후 저장합니다.
  *http://localhost:3000 는 로컬에서 프론트를 개발하여 테스트 하기 위한 정보입니다.

• 저장이 완료되면 다음과 같이 변경된것을 확인할 수 있습니다. 여기서 Redirect URI 등록하러 가기를 클릭합니다.

• 활성화 설정은 ON 으로 변경하고, Redirect URI 등록을 클릭합니다. 

• Redirect URI에 http://localhost:3000/kakao-callback 을 입력합니다.

• Left 메뉴에서 카카오로그인 -> 동의 항목을 클릭합니다.

•  동의 항목은 카카오 로그인시 가져올 수 있는 고객의 정보를 선택하는 화면입니다.

• 설정 항목을 클릭한 후 필수 또는 선택 동의로 변경하고, 저장합니다.
  * 필수 동의(검수 필요)가 disable되어 있는 경우는 비즈니스 채널을 신청해야만 선택할 수 있습니다.

• 카카오 애플리케이션 설정이 완료되었습니다.

프론트 개발

• slider-front 프로젝트를 open 합니다.
• https://developers.kakao.com/tool/resource/login 에서 카카오 로그인 버튼 이미지를 다운 받습니다.

• 다운로드 받은 이미지를 프로젝트의 /static/images/kakao_login.png로 복사합니다.
• 카카오 로그인 모듈을 사용하기 위해 
  /nuxt.config.js 의 head 부분에 다음을 추가합니다.

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

• index page를 수정합니다.
  /pages/index.vue

<template>
  <a @click="loginWithKakao">
    <img src="/images/kakao_login.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>

• callback 페이지를 추가합니다.
  /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}`)
      // 서버 로그인 요청(kakao 인증 코드 전달)
      const body = {
        code: this.$route.query.code,
        domain: window.location.origin
      }
      const response = await this.$axios.$post(
        '/auth/login', body, {}
      )
      console.log(response)
    } catch (error) {
      console.log(error)
    }
  }
}
</script>

• 이제 프론트를 실행하고 테스트 해봅니다.

yarn dev

• 카카오 로그인 버튼을 클릭합니다.

• 동의 화면이 나오고 동의 체크 후

• 크롬의 콘솔을 실행해보면 code 값이 찍힌 것을 확인할 수 있습니다.

백엔드 개발

• slider-api 프로젝트를 open 합니다.
• 포트 변경 - frontend에서 3000번 포트를 사용하고 있으므로, backend 포트를 3003으로 바꿔주겠습니다.
  /src/main.ts

  await app.listen(3003);

• front의 호출 url도 http://localhost:3003으로 변경합니다.
  /nuxt.config.js

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

• 카카오 api 호출을 위해 axios 패키지를 추가합니다.

yarn add axios

• generator로 auth module/controller/service를 생성합니다.

nest g module auth
nest g controller auth
nest g service auth

• authController에 다음을 추가합니다.
  src/auth/auth.controller.ts

import { Controller, Post, Body, Response, BadRequestException, UnauthorizedException } from '@nestjs/common';
import { AuthService } from './auth.service';

@Controller('auth')
export class AuthController {
    constructor(
        private authService: AuthService
    ){}
    @Post('/login')
    async login(@Body() body: any, @Response() res): Promise<any> {
        try {
        // 카카오 토큰 조회 후 계정 정보 가져오기
        const { code, domain } = body;
        if (!code || !domain) {
            throw new BadRequestException('카카오 정보가 없습니다.');
        }
        const kakao = await this.authService.kakaoLogin({ code, domain });

        console.log(`kakaoUserInfo : ${JSON.stringify(kakao)}`);
        if (!kakao.id) {
            throw new BadRequestException('카카오 정보가 없습니다.');
        }

        res.send({
            user: kakao,
            message: 'success',
        });
        } catch (e) {
            console.log(e);
            throw new UnauthorizedException();
        }
    }
}

• authService에 다음을 추가합니다.
  /src/auth/auth.service.ts

import { Injectable, UnauthorizedException } from '@nestjs/common';
import axios from 'axios';
import * as qs from 'qs';

@Injectable()
export class AuthService {
    async kakaoLogin(options: { code: string; domain: string }): Promise<any> {
        const { code, domain } = options;
        const kakaoKey = '87073966cb41...';
        const kakaoTokenUrl = 'https://kauth.kakao.com/oauth/token';
        const kakaoUserInfoUrl = 'https://kapi.kakao.com/v2/user/me';
        const body = {
          grant_type: 'authorization_code',
          client_id: kakaoKey,
          redirect_uri: `${domain}/kakao-callback`,
          code,
        };
        const headers = {
          'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
        };
        try {
          const response = await axios({
            method: 'POST',
            url: kakaoTokenUrl,
            timeout: 30000,
            headers,
            data: qs.stringify(body),
          });
          if (response.status === 200) {
            console.log(`kakaoToken : ${JSON.stringify(response.data)}`);
            // Token 을 가져왔을 경우 사용자 정보 조회
            const headerUserInfo = {
              'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
              Authorization: 'Bearer ' + response.data.access_token,
            };
            console.log(`url : ${kakaoTokenUrl}`);
            console.log(`headers : ${JSON.stringify(headerUserInfo)}`);
            const responseUserInfo = await axios({
              method: 'GET',
              url: kakaoUserInfoUrl,
              timeout: 30000,
              headers: headerUserInfo,
            });
            console.log(`responseUserInfo.status : ${responseUserInfo.status}`);
            if (responseUserInfo.status === 200) {
              console.log(
                `kakaoUserInfo : ${JSON.stringify(responseUserInfo.data)}`,
              );
              return responseUserInfo.data;
            } else {
              throw new UnauthorizedException();
            }
          } else {
            throw new UnauthorizedException();
          }
        } catch (error) {
          console.log(error);
          throw new UnauthorizedException();
        }
      }
}

* kakaoKey는 kakao developers 사이트에서 생성한 RestAPI 키를 입력합니다.

• 브라우저에서 http://localhost:3000을 입력하고 로그인을 해보면 다음과 같이 CORS 오류를 만나게 됩니다.

• CORS를 해결하기 위해 main.ts에 설정을 추가합니다.
  /src/main.ts

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  const whitelist = [
    'http://localhost:3000'
  ];
  app.enableCors({
    origin: function (origin, callback) {
      if (!origin || whitelist.indexOf(origin) !== -1) {
        callback(null, true)
      } else {
        callback(new Error('Not allowed by CORS'))
      }
    },
    allowedHeaders: '*',
    methods: "GET,PUT,PATCH,POST,DELETE,UPDATE,OPTIONS",
    credentials: true,
  });
  await app.listen(3003);
}
bootstrap();

• 다시 브라우저에서 로그인을 시도합니다.
  로그인이 완료되면 크롬 콘솔에서 다음과 같은 로그를 확인할 수 있습니다.

카카오 로그인이 완료되었습니다.

 

다음 시간에는 로그인에 JWT 인증을 추가하는 것을 진행합니다.