카카오 로그인 구현해보기

안녕하세요 프론트엔드 개발자 ken입니다. 오늘은 카카오 로그인 동작 방식과 간단한 구현 예제에 대해 알아보겠습니다.

카카오 로그인은 기본 방식인 권한 부여 승인 코드 방식을 채택하고 있습니다

작동 방식

1. 사용자가 서비스에서 카카오 로그인 버튼을 클릭하면 카카오 인증 서버로 인가 코드 발급을 요청합니다.

2. 카카오 인증 서버는 사용자에게 인증을 요청합니다.

• - 카카오톡으로 로그인: 카카오톡 실행, 카카오톡에 연결된 카카오계정의 자격정보(Credentials)로 사용자 인증
• - 카카오계정으로 로그인: 계정 정보를 입력해 로그인하는 화면 출력, 해당 카카오계정의 자격정보로 사용자 인증

3. 카카오 인증 서버는 사용자 인증 성공 시, 서비스 앱의 동의 항목 설정을 바탕으로 사용자에게 동의 화면을 출력합니다.

4. 사용자가 필수 동의 항목에 동의하고 로그인을 요청하면, 카카오 인증 서버는 인가 코드(Authorization Code)를 발급해 서비스 앱에 등록된 Redirect URI로 전달합니다.

5. 서비스는 전달받은 인가 코드로 토큰을 요청하여 받습니다.

 

구현

구현 방식에는 REST API 방식을 사용하여 개발하였습니다.

REST API 키 확인 방법

kakao Developers -> 내 애플리케이션 -> 앱설정 -> 요약 정보 -> REST API 키

플랫폼 등록

kakao Developers -> 내 애플리케이션 -> 앱설정 -> 플랫폼 -> Web -> 사이트 주소 입력

http:// , https:// , file://   형식의 도메인을 등록할 수 있고 http와 https 도메인은 둘 중 한 가지만 등록해도 사용가능합니다.
❗로컬에서 진행을 하니 http://localhost:3000을 입력합니다. 꼭 프론트 측 URL을 입력해 주세요!

Redirect URI

카카오 로그인에서 사용할 OAuth Redirect URI를 설정합니다.

Kakao Developers -> 내 애플리케이션 -> 카카오 로그인 -> Redirect URI 등록

이제 개발을 위한 기본적인 설정이 완료되었습니다!

 

카카오 로그인 과정

1. 사용자가 로그인 버튼을 클릭 시 개발자 센터에서 설정한 Redirect URL주소와 API Key가 들어가고 인가 코드를 요청 합니다

const REST_API_KEY = process.env.REACT_APP_KAKAO_KEY //REST API KEY
const redirect_uri = process.env.REACT_APP_HOST + '/auth/kakao/callback' //Redirect URI
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${redirect_uri}&response_type=code` // oauth 요청 URL

 

2. 카카오 인증 서버는 사용자에게 인증을 요청하고 성공 시, 서비스 앱의 동의 항목 설정을 바탕으로 사용자에게 동의 화면을 출력합니다.

사용자가 필수 동의 항목에 동의하고 로그인을 요청하면, 카카오 인증 서버는 인가 코드(Authorization Code)를 발급해 서비스 앱에 등록된 Redirect URI로 전달합니다.

해당 방식이 성공하면 카카오 서버에서는 인가코드를 줍니다. code=인가코드 입니다.

 

3. 인가코드를 백엔드 서버로 전달하면 백엔드에서는 검증 과정을 진행하고 성공 시 코드를 발급해주면 로그인이 성공합니다

const token = await getKaKaoToken(REST_API_KEY, redirect_uri, code) // 카카오에서 인가 코드 받기
await signInSocial({type: 'kakao', token: token, platform: 'web'}) // 인가코드를 백엔드로 넘겨주기