카카오 로그인을 구현해보자
우리가 흔히 사용하는 구글이나 카카오 등의 로그인. 이런 로그인을 구현하려면 어떻게 해야할까.
우선 이러한 기능들은 oauth2.0 프로토콜을 따른다. 웹상에서 구현해볼건데 플로우를 간단히 요약하면 아래와 같다.
1. 카카오 로그인을 누른다.
2. 카카오 로그인 페이지로 이동한다. (우리 페이지로 다시 돌아올수 있도록 redirect_url을 적어준다.)
3. 카카오 로그인이 완료되면 redirect_url로 리다이렉트 된다. 이때 현재 url의 쿼리스트링을 확인해보면 authorization code를 가지고 있다.
4. authorization code를 가지고 access token을 발급받는다.
5. access token을 가지고 kakao의 다양한 api를 사용한다.
우선 kakao developers에 가입해야 한다.
Kakao Developers
카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.
developers.kakao.com
가입을 하고나면 "내 애플리케이션"에 들어가 애플리케이션 추가하기를 누르자
아래와 같이 필요한 내용을 작성해주자.
생성한 애플리케이션을 눌러서 나머지 설정을 해보자. 우선 웹에서만 실습을 할 생각이므로 "플랫폼" > "Web 플랫폼 등록"을 누르자
localhost도 가능하다. 포트번호까지 적어서 등록해보자.
도메인 입력하고나면 리다이렉트URL도 등록하라고 뜬다. 해당 버튼 클릭해서 리다이렉트URL도 등록해주자.
코드는 express를 사용해서 구현했다. 아래처럼 5개의 경로가 있다.
/ --> 홈화면. "카카오로그인" 버튼이 있다.
/issue-token --> redirect_url이 된다.토큰을 발급하는 동안 기다려달라는 메시지를 보여준다.
/get-data --> issue-token페이지에서 토큰을 발급이 완료되면 이 페이지로 이동하도록 했다. 여기서 데이터를 가져올것이다.
/api/issue-token --> 토큰을 발행하는 백엔드를 구현했다.
/api/get-data --> 데이터를 가져오는 백엔드를 구현했다.
