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

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

카카오 로그인을 사용하려면 kakao developer 사이트에서 애플리케이션을 만들어야합니다.

이번 글에서는 Kakao Login의 개념과 애플리케이션을 생성하는 법을 알아보도록 하겠습니다.

 

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

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

오늘은 첫번째 순서로 kakao develper에서 애플리케이션을 생성하는 방법에 대한 내용입니다.
그 전에 카카오 로그인이 어떻게 처리되는지도 간략하게 설명합니다.

1. Kakao Login 이해하기
2. Kakao Login용 애플리케이션 생성

1. Kakao Login 이해하기

카카오 로그인을 이용하면 사용자가 별도의 정보를 입력하지 않고도 손쉽게 로그인을 할 수 있습니다.

간편하게 로그인을 할 수 있으므로 요즘 많은 서비스에서 카카오로그인을 이용하여 로그인 처리를 하고 있습니다.

 

Kakao developers에서 자세한 문서를 제공하고 있으므로 아래 페이지를 방문하여 내용을 읽어보도록 합니다.

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

카카오로그인 Step을 요약하면 다음과 같습니다.

1. 카카오로그인 버튼을 클릭합니다.
2. 카카오 동의 화면에서 동의를 합니다. 이때 카카오 인가코드가 발급됩니다.
3. RedirectURI로 인가코드가 전달됩니다.
4. 인가코드로 카카오 인증토큰을 요청합니다.
5. 발급받은 인증토큰으로 카카오 사용자 정보를 요청합니다.
6. 사용자 정보를 확인하여 신규회원일 경우 회원 가입을 처리합니다.
7. 기존 회원일 경우 서버에서 로그인 세션 또는 토큰을 발급합니다.

카카오 로그인은 모바일, 웹, 서버등 다양한 플랫폼에서 처리가 가능합니다. 우리는 Backend와 Frontend를 분리하여 처리하므로 로그인을 위해서는 Backend Server에서 토큰을 발급하여 로그인을 체크하도록 합니다. 그러기 위해서는 Frontend에서 로그인 인가코드를 받아 서버로 로그인 요청시 인가코드를 전송하고, 서버에서 인가코드를 받아 카카오토큰을 발급받고, 카카오 사용자 정보를 조회하는 순서로 처리를 합니다. 이 단계가 완료되면 서버에서 토큰을 발급해 사용자의 로그인을 처리합니다.

 

2. 애플리케이션 생성(in Kakao Developers)

카카오 로그인을 사용하기 위해서는 Kakao Developers 사이트에서 애플리케이션을 생성하여 키를 발급받아야 합니다.

자세한 안내는 아래 url을 참고하세요.

https://developers.kakao.com/docs/latest/ko/getting-started/app

Kakao Developers

애플리케이션 생성을 간단히 요약하면 다음과 같습니다.

1. kakao developers 사이트에 로그인합니다.

2. 상단의 내애플리케이션 메뉴를 클릭하고 애플리케이션 추가하기 버튼을 클릭합니다.

3. 앱 이름과 사업자명을 입력하고 저장 버튼을 클릭합니다.
    저는 nestSocialLogin라는 이름으로 생성을 했습니다.

4. 아래와 같이 앱이 만들어졌습니다.

5. 앱을 클릭하고 들어가면 다음과 같이 앱키를 확인하실 수 있습니다.

6. 앱을 사용하기 위해서는 하단의 플랫폼 설정하기를 해주어야 합니다.

7. 우리는 web을 개발할 것이므로 web 플랫폼 등록을 선택합니다.
   사이트 도메인은 최대 10개까지 등록이 가능합니다.
   우선은 로컬에서만 개발을 진행하므로 "http://localhost:3000"을 등록합니다.(3000은 포트입니다.)

8. 아래와 같이 도메인이 등록되면, Redirect URI를 등록해 주시면 됩니다.
   Redirect URI는 카카오 로그인화면에서 호출될 우리가 만든 서비스 URI입니다.

9. 우선 로그인 기능을 사용하기 위해 "활성화 설정"을 ON으로 변경합니다. 그리고 하단의 "Redirect URI 등록" 버튼을 클릭합니다. 

10. Redirection 될 URI 를 입력하고 저장합니다.

11. 카카오로그인 -> 동의항목 설정을 해줍니다.

    좌측의 카카오로그인 메뉴 아래 동의항목을 클릭합니다.

   로그인시에 카카오에서 가져올 정보를 설정을 통해 "필수 동의" 또는 "선택 동의"로 설정합니다.

 

이렇게 하면 카카오 로그인을 개발하기 위한 설정은 완료되었습니다.

 

실제 로그인 프로그램을 만드는 것은 다음 글을 참고 해주세요.