카카오 소셜로그인 구현하기

Dansup 프로젝트에서, 사용자가 더 편리하게 서비스에 로그인할 수 있도록 프론트엔드에서 카카오 소셜로그인을 구현해보았다.
이 글에서는 카카오 소셜로그인 과정을 자세히 알아보기 위해 백엔드와 카카오 인증 서버에서의 동작 과정 또한 알아볼 것이지만, 관련 코드는 프론트엔드 코드만 다룰 예정이다. (프레임워크로 Next.js를 사용하였다.)

전체적인 카카오 로그인 구현과정은 다음과 같다.

1. 사용자가 로그인 페이지에서 '카카오톡으로 시작하기' 버튼을 누르면, 백엔드에서 카카오 인증 서버로 인가 코드를 요청하고, 카카오 인증 서버가 인증을 위한 카카오계정 로그인 화면을 띄워준다.
   

이 과정에서 프론트 코드는 다음과 같다.

📄 LoginPage

export default function LoginPage() {
  const KAKAO_AUTH_URL = ~ //(백엔드가 카카오 인증 서버에게 인가코드를 요청하도록 하는 url); 
  
  return (
  	  ...
        
      <a href={KAKAO_AUTH_URL}>
       	  //('카카오톡으로 시작하기' 버튼)
      </a>
  );
}

'카카오톡으로 시작하기' 버튼에 백엔드가 카카오 인증 서버에게 인가코드를 요청하도록 하는 url을 < a > 태그로 걸어준다.


2. 사용자가 카카오계정 로그인에 성공하면 카카오 인증 서버가 인가를 위한 동의 화면을 출력하고, 사용자가 '동의하고 계속하기'를 누르면 카카오 인증 서버가 Redirect URI로 백엔드에게 인가 코드를 발급한다. (사용자가 이미 서비스의 회원이여서 이미 동의한 경우에는 동의 화면이 나타나지 않고, 즉시 인가 코드가 발급된다.)

3. 백엔드는 전달 받은 인가 코드를 이용해 카카오 인증 서버로 토큰을 요청하고, 카카오 인증 서버는 토큰을 발급해 백엔드에게 전달한다.
   
   
4. 백엔드는 발급 받은 토큰을 이용해 카카오 API 서버에 사용자 정보를 요청하고, 카카오 API 서버는 토큰의 유효성을 검증한 후 백엔드에게 사용자 정보를 제공한다. 이후 백엔드는 제공 받은 사용자 정보로 사용자가 서비스의 회원인지 확인한다. 그리고 백엔드는 Oauth 성공 페이지로 리다이렉트 해주면서 프론트에게 accessToken,refreshToken,isGuest(서비스 회원 여부)를 보내준다.
   
   
5. 프론트는 백엔드가 보내준 accessToken,refreshToken,isGuest(서비스 회원 여부)를 받아서 이것을 이용해 사용자가 서비스 비회원인 경우 accessToken을 쿼리 파라미터에 넣어서 회원가입 페이지로 전환시켜주고, 이미 회원인 경우 로그인 시켜준다.

이 과정에서 프론트 코드는 다음과 같다.

📄 OauthSuccessPage

export default function OauthSuccessPage() {
  ~

  useEffect(() => {  
    if (!router.isReady) return;

    if (isGuest === 'true') {  //비회원인 경우
      router.push({
        pathname: '/register',
        query: { accessToken: accessToken }, 
      });  //회원가입 페이지로 화면 전환시킬 때, accessToken을 쿼리 파라미터로 같이 넘겨준다.
    } else {  //이미 회원인 경우
  	  (accessToken,refreshToken을 이용해 로그인 시켜준다)
    }

  }, [router.isReady]);

  return <></>;  
}

다음 글 : JWT를 이용해 로그인 구현하기