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

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

 

카카오 로그인(REST API)을 활용하여 웹애플리케이션에서 로그인 기능을 구현하는 것을 배워보도록 하겠습니다.

 

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

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

이번시간은 REST API를 이용한 카카오로그인 전체 Workflow에 대해 설명드립니다. 

1. 서비스 화면에서 카카오로그인 버튼을 클릭합니다. 이때 카카오에서 제공하는 동의 화면이 아래와 같이 나타납니다.

2. 동의를 클릭하면 카카오 인증서버에서 인가코드를 발급해서 우리가 등록한 redirect URI로 전달을 합니다.

 

3. frontend에서 backend로 로그인을 요청합니다.
    URI는 "/auth/login"이고 post로 요청합니다.
    이때 "인가코드"를 파라메터로 전달합니다.

 

4. backend에서 카카오인증 서버로 토큰 발급을 요청합니다.

https://kauth.kakao.com/oauth/token

    이때 인가코드, redirect uri, 애플리케이션Key 등을 파라메터로 전달합니다.

 

5. 정보가 일치할 경우 카카오에서 토큰을 발급하여 backend로 return합니다.

 

6. backend에서 카카오API 서버로 "사용자정보"를 요청합니다.

https://kapi.kakao.com/v2/user/me

7. 사용자 DB에서 해당 사용자를 확인하고 인증 토큰을 발급합니다.

   이때 신규 사용자일 경우 회원가입 처리를 진행한 후 인증 토큰을 발급합니다.

 

8. frontend에서 전달받은 토큰으로 backend로 사용자 정보를 요청합니다.

9. backend에서 토큰을 받아 사용자 정보를 return합니다.

10. frontend에서 사용자 정보 중 이름이 없을 경우 이름을 입력받습니다.

11. frontend에서 입력받은 이름으로 사용자 정보를 update 요청합니다.

12. backend에서 사용자 정보를 update 한 후 변경된 정보를 return 합니다.

 

이상이 전체 로그인을 처리하는 flow입니다.