카카오 소셜 로그인(Social Login) 구현 1편(REST API란 무엇인가? / 인가코드 받기)

위코드(wecode) 2차 프로젝트

• 크림(https://kream.co.kr/) 클론코딩
• 카카오 소셜로그인 기능
  

소셜로그인 기능 구현이라는 큰 목표를 구현하기 위해서 기능단위로 목표를 다시 쪼개어 보았다.

• 1단계: 카카오에서 Sucream으로 인증코드롤 보내주는 것을 받는다.
• 2단계: Sucream에서 다시 인가 코드를 가지고 카카오에 토큰을 요청한다.
• 3단계: 카카오에서 준 토큰을 다시 백엔드에게 넘기고 받기

[1단계]: 카카오에서 인증코드 요청하고 받기

우리 팀은 프론트에서 전부 다 처리하는 것이 아니라, 프론트에서 카카오 토큰을 받고 그것을 백엔드로 넘겨주면 백엔드에서 우리 서비스의 토큰을 발행해서 다시 프론트에 전달해주는 방식으로 구현하기로 정했기 때문에 REST API를 활용해서 하기로 합의를 했다.

• 첫번째 물음: REST API란 무엇인가?
  여기서 가장 먼저 든 의문은 REST API란 무엇인가? 이다. REST는 “Representational State Transfer” 의 약자이며, 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.월드 와이드 웹(www)과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 개발 아키텍처의 한 형식으로 REST는 기본적으로 웹의 기존 기술과 HTTP 프로토콜을 그대로 활용하기 때문에 웹의 장점을 최대한 활용할 수 있는 아키텍처 스타일이다. REST는 네트워크 상에서 Client와 Server 사이의 통신 방식 중 하나이다.
  REST가 이러한 개념이라면 API란 무엇인가? API란 Application Programming Interface의 약자이며, 데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환가능 하도록 하는 것이다.
  결국, REST API란 REST 기반으로 서비스 API를 구현한 것으로 최근 Open API(누구나 사용할 수 있도록 공개된 API: 구글맵, 공공데이터, 소셜로그인 기능 등) 등을 제공하는 업체에서는 대부분 REST API를 제공한다.

• 두번째 물음: 어떻게 인가 코드를 카카오로부터 받아오는가?
  공식문서를 보니 GET은 이런식으로 받아오라고 적혀있었다. 그래서 아래와 같이 작성을 하였다. 앱 키 등은 git에 올라가면 안되기 때문에 config에 담아서 따로 관리를 해주었다.
  그리고 로그인 화면에서 카카오 로그인 버튼을 클릭하니 인가 코드를 받아 오는 것을 확인했다.

URL
GET /oauth/authorize?client_id={REST_API_KEY}&redirect_uri={REDIRECT_URI}&response_type=code HTTP/1.1
Host: kauth.kakao.com

 <button className="loginKakao">
    <a href={kakaoAuthUrl}>
       <img src="https://developers.kakao.com/tool/resource/static/img/button/login/full/ko/kakao_login_large_wide.png" />
    </a>
 </button>

참고자료들

https://gmlwjd9405.github.io/2018/09/21/rest-and-restful.html

[카카오 공식문서]
https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api