[기록용] 카카오 소셜 로그인

카카오 소셜로그인

간단한 흐름

오늘 제가 직접 연동해보니 이런 순서더라구요. 각 단계별로 예제코드와 함께 살펴보겠습니다.
(저는 javascript SDK 말고 REST API 방식으로 했으니 SDK 원하시는 분들은 다른 곳 ㄱㄱ)

1. 프론트가 카카오한테 인가코드 받아오기

1. 카카오 로그인 하려면 카카오 개발자 계정에 있는 앱 중에 어떤 앱이고, 로그인하면 어디로 리다이렉트 받을지 써놔야함.
2. 유저가 a태그를 누르고 저 url로 이동하면 익숙한 카카오 로그인 화면이 뜬다.
3. 로그인하면 리다이렉트 주소로 보내주는데, 이때 url에 query string으로 code를 껴준다.
4. 이 code가 바로 인가코드다.

const KAKAO_URL = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}`;

const KakaoLogin = () => {
  return <a href={KAKAO_URL}>{"ASDS"}</a>;
};

3번

2. 프론트가 백엔드로 인가코드 보내주기

1. 나는 리다이렉트 페이지에 useEffect를 설정해놓았는데 다음과 같다.
   1. window에서 현재 url 읽어다가 code(인가코드)만 분리함
   2. 분리한 코드를 가지고 백엔드에 요청 보냄.
2. 이제 우리 백엔드 서버에서 잘 처리해서 응답이 오길 기다리면 되겠죠?

3. 백엔드가 카카오한테 토큰 받아오기

1. 백엔드가 받은 request에는 2-1-ii에서 프론트가 보낸 인가코드가 있을 겁니다.
2. 이걸 다시 카카오로 보내면 카카오에서 액세스토큰, 리프레시 토큰 등등 줌
3. 카카오에서 준 토큰이 생겼다!

4. 백엔드가 프론트한테 최종적으로 토큰 보내주기

1. 위에서 받은 토큰 + (optional) 그외 부가 정보를 프론트로 내려줍니다.
2. 그럼 2-2에서 기다리고 있던 프론트가 토큰을 받고 로그인에 성공한 것입니다.

 

혹시나 싶어 테스트용으로 대충 만든 서버 코드 공유

const express = require('express')
const http = require('http')
const request = require('request')
const app = express()
const port = 5000

app.get('/oauth/kakao', (req, res) = {
  const code = req.query.code;
  const host = `https://kauth.kakao.com/oauth/token?code=${code}`



  request.post({
    qs: {
      grant_type:'authorization_code', // 고정임
      client_id: 님들 코드,
      redirect_uri: 님들이 쓴 redirect_uri,
      code
    },
    headers: {
      'Content-type': 'application/x-www-form-urlencoded;charset=utf-8',
    },
    url: host,
    method:'POST',
  }, function(err,response,body){
    const {
      access_token,
      expires_in,
      refresh_token,
      refresh_token_expires_in,
      token_type,
      scope
      } = body
      // db 저장 기타 등등
    res.send({토큰을 보낸다던가~})

  })
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})