Node.js(express) & React를 이용한 카카오 소셜 로그인 구현하기 - 2

router.get(
  "/kakao/callback",
  async (req, res, next) => {
    let token;
    // 사용자가 '동의하고 계속하기'를 누르면 redirect uri로 인가코드가 전송됨.(get요청) 이를 담아서 다시 카카오 서버로 POST 요청을 보내서 액세스 토큰을 받는 과정
    try {
      token = await axios({
        method: "POST",
        url: "https://kauth.kakao.com/oauth/token",
        headers: {
          "content-type": "application/x-www-form-urlencoded",
        },
        data: qs.stringify({
          grant_type: "authorization_code", //특정 스트링
          client_id: kakao.clientId,
          client_secret: kakao.clientSecret,
          redirectUri: kakao.redirectUri,
          code: req.query.code, // 카카오 서버에서 redirect uri로 인가코드를 보낼때, url 속에 query문으로 담아서 보내줌. 이를 받아서 다시 쓰는 것.
        }),
      });
    } catch (err) {
      res.json(err.data);
    }
    ...

위와 같이 액세스 토큰을 받아오는 데까지 성공했다.

 

액세스 토큰 요청에 대한 response는 다음과 같이 전달된다. (카카오 서버로부터)

 

 

액세스 토큰값을 이용해서 카카오 서버에 유저의 데이터를 요청할 수 있다.

 

...
let user;
try{
    user = await axios({
        method:'get',
        url:'https://kapi.kakao.com/v2/user/me', // 유저 정보를 받아오는 카카오에서 지정한 api url
        headers:{
            Authorization: `Bearer ${token.data.access_token}`//아까 받아온 액세스토큰
        }//헤더에 액세스 토큰 내용을 보고 보내주겠다.(from 카카오 서버)
    })
}catch(e){
    res.json(e.data);
}

req.session.kakao = user.data;
// 이렇게 세션에 유저 정보를 담아두고 사용할 수도 있음

res.send('success');
})

 

이렇게 받아온 유저의 정보를 활용해서 로그인, 회원가입 등의 로직을 구현하면 된다.

 

 

 

 

 

++ 위의 과정을 통해 로그인 및 회원가입을 성공했다 하더라도, 유저가 방문하는 모든 페이지마다 로그인이 필요하다면 UX적으로 매우 안좋은 서비스가 될 것이다.

 

그렇다고 한번 로그인한 유저의 브라우저에 평생 로그인 정보를 저장하고 사이트를 이용할 수 있게 한다면 보안 상 취약할 것이다.

 

따라서, 로그인한 유저로 하여금 '로그인했음을 브라우저 상에서 일정 기간 동안 인증'받을 수 있도록 해야 한다.

 

그러한 과정에 대해서도 추후 기술하겠다.