카카오 로그인 API 구현하기 : REST API키 이용

이미 조금씩 기록해둔 임시저장글만 대여섯개ㅠ. 하지만 오늘 다룰 이야기도 무척 중요한 내용이니 이것 먼저 기록해둔다.

 

지금까지

Home.js의 기본적인 레이아웃은 구현 완료

• 2*N 사이즈로 레시피 정렬
• 좋아요 버튼 생성
  • 로그인한 경우에만 좋아요 기능 사용가능 < 이거 잘 되는지 확인해보고자 로그인 페이지 개발 시작!!!

 

DetailRecipe.js의 기본적인 레이아웃도 구현 완료

• 레시피 제목부터 분량, 난이도, 레시피 단계와 팁, 태그까지 server.js를 통해 백엔드에서 데이터 불러오기 완료

 

∴ 디자인은 뒤로하고 먼저 백엔드의 데이터들을 불러오는 것을 우선순위로 삼고 있다.

 

 

이제 Login.js를 구현할 차례인데, 카카오 로그인 API를 사용하기 위한 방법을 찾아보며 알게된 것을 기록한다.

카카오톡 디벨롭스를 통해 내 애플리케이션을 만들었더니 부여된 키는 총 4개였는데 그 중에 2개의 키를 선택해서 만드는 것 같았다. Web의 경우로 찾아봤을 때는.

 

1. JavaScript 키

2. REST API 키

요 둘을 이용해서 말이다~~

 

 

 

 

자바스크립트 키 vs REST API 키

카카오 키	JavaScript 키	✅ REST API 키
여기서 클라이언트는 브라우저를 의미합니다. 저의 프로젝트는 웹 브라우저 환경에서 리액트로 개발이 되고 있습니다.
사용	클라이언트(브라우저)에서 카카오 API 사용 리액트 클라이언트에서 직접 카카오 로그인과 사용자 정보를 처리할 때 - 간단하게 구현할 경우 - 보안에 민감하지 않을은 프로젝트의 경우	서버와의 직접 통신으로 카카오 API 호출 백엔드에서 카카오 API와 통신해서 인증 정보를 관리함 - 모든 API 호출을 서버에서 처리하는 경우 - 보안이 중요하거나 데이터를 서버에 저장해야 하는 경우
특징	브라우저 환경에서 실행 - 간편로그인으로 사용자 인증 - SDK 라이브러리로 작동 (kakao 객체 사용)	서버에서 직접 통신으로 실행 - 카카오 로그인으로 사용자 인증 - SDK 라이브러리 없이 - HTTP 요청을 직접 작성하여 작동
장점	간편하게 프론트에서 로그인 + 사용자 정보 처리 가능	- 백엔드에 토큰 저장과 처리 가능 - 서버에서만 사용 가능 - 보안 강화
단점	보안에 민감한 작업은 수행하지 못함 - 브라우저 환경에서 동작, 키 노출 위험성 (ex. 토큰 저장...)	프론트에서 백엔드와 통신하는 작업이 필요
방식	1. 사용자가 로그인 버튼 클릭하면 클라이언트가 카카오톡한테 호출을 하여 인증 페이지로 이동함 2. 인증/동의가 완료되면 카카오 서버에서 프론트로 Redirect URI를 통해 인가 코드를 전달함 3. 프론트에서 카카오 Auth 서버로 토큰을 요청함 4. 카카오 Auth 서버가 프론트로 토큰을 발급하여 전달함 5. 사용자 정보 조회 후 회원 정보 확인/가입을 처리함	아래에서 좀 더 상세히 기재했다. 1. 클라이언트가 서버로 카카오 로그인 요청을  보냄 2. 카카오 Auth 서버에서 GET로 카카오 REST API를 호출하여 인가 코드 받고 Redirect URI로 전달 3. 카카오 Auth 서버에서 POST로 토큰을 발급 받고 서버로 보내줌 4. 사용자 로그인 처리함
차이점	- 액세스 토큰을 발급 받음 - SDK 라이브러리로 간편하게 인증 가능	- Authorization Code - HTTP 요청으로 보안을 강화하여 인증 가능
인가코드 요청방법	Kakao.Auth.authorize() SDK 라이브러리를 이용하여 위의 함수를 호출하여 요청함	GET /oauth/authorize GET방식을 이용하여 API 호출하여 요청함

 

 

 

 

자바스크립트 키,  REST API 키 인증 방식

출처: kakao developers

 

 

자바스크립트 키 사용:

간편로그인 형태로 카카오톡 인증 or 카카오계정을 인증함

 

 

REST API 키 사용:

카카오 로그인 형태로 카카오계정을 인증함

 

그래서 상대적으로 자바스크립트 키를 사용했을 때 보안성이 취약하고, 간편하게 로그인이 가능한 장단점을 가지고 있다는 것 같다.

 

 

 

 

간편로그인 vs 카카오 로그인

	간편로그인	카카오로그인
	자바스크립트 키로 구현	자바스크립트 키와 REST API키로 구현 (-> 확인 후 다시 수정 예정)
로그인 방식	카카오계정 ID 및 비밀번호 입력 없이 카카오톡을 통해 사용자를 인증하고 인가 코드를 발급받는 기능	카카오 로그인 후, 회원 가입 처리나 회원 정보 갱신은 서버에서 인가 코드 및 토큰을 받은 후 구현해야 함
요청 방법	사용자가 로그인 버튼 클릭하면 Kakao.Auth.authorize() 함수 호출 1. Kakao.Auth.authorize()로 간편로그인 요청 2. 자바스크립트 SDK가 간편로그인을 위해 카톡을 실행 3. 카톡이 없는 환경에서는 카카오계정으로 로그인 시도
사용 키	자바스크립트 키	REST API 키

 

 

 

SDK와 키의 차이

 

자바스크립트 SDK:

카카오에서 제공하는 라이브러리

자바스크립트 환경에서 카카오 API를 쉽게 사용할 수 있도록 도와줌

사용하려면 자바스크립트 키가 필요함

 

• 사용:
  • 자바스크립트 키가 필요함
  • SDK로 로그인 / 토큰 발급 / 사용자 정보 요청 등 실행

 

자바스크립트 키:

카카오 개발자 콘솔에서 발급되는 인증 키

카카오 API를 호출할 때 2가지에 사용

- 프로젝트 식별

- 권한 확인

자바스크립트 SDK를 통해서 직접 호출하는 데만 사용 가능

 

• 주의점: 브라우저 콘솔 등에서 노출될 위험이 있어, 민감한 작업(서버와 데이터 연동...)에는 좋지 않음.

 

---

 

출처: kakaodevelops.카카오로그인>REST API. https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

 

 

 

REST API 방식

 

클라이언트가 서버로 카카오 로그인을 요청한다.

 

기본

1. 내 서버가 카카오 인증 서버로 인가 코드를 받는다

2. 토큰을 받는다

3. 사용자 로그인을 처리한다

 

 

상세

1. 내 서버가 카카오 Auth 서버로 인가코드를 요청한다.

1. GET 방식으로 요청한다.
2. (카카오 Auth 서버 → 클라이언트에게) 카카오계정 로그인을 요청한다
3. (클라이언트가 → 카카오 Auth 서버로) 카카오계정으로 로그인을 한다
4. (카카오 Auth 서버가 자신에게) 사용자 인증 앱 설정을 확인하고
5. (카카오 Auth 서버 → 클라이언트에게) 동의 화면을 출력한다
6. (클라이언트 → 카카오 Auth 서버에게) 동의하고 계속한다
7.  ∴ (카카오 Auth 서버 → 내 서버에게) Redirect URI로 인가 코드를 전달한다.

 

2. 내 서버가 카카오 Auth 서버에게 토큰을 요청한다.

1. POST 방식으로 요청한다.
2. (카카오 Auth 서버 → 내 서버로) 토큰을 발급해서 보내준다.

 

3. 발급받은 토큰으로 내 서버에서 사용자 정보 조회를 하고 확인 또는 가입 처리를 한다.

• OpneID Connect 사용시: (내 서버가 내 서버에게로) ID 토큰 유효성을 검증
• 일반적인 경우: 발급받은 토큰으로 사용자 정보 조회를 함
  • 회원 정보 확인의 목적: 로그인 처리
  • 가입 처리의 목적: 신규 가입
• (내 서버 →  클라이언트에게) 로그인 완료

 

 

출처

<REST API, kakao developers, https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api>.

<회원가입, kakao developers, https://developers.kakao.com/user/register >.

<JavaScript (Kakao SDK for JS), kakao developers, https://developers.kakao.com/docs/latest/ko/kakaologin/js#login>.