[프론트엔드]카카오 로그인 구현하기

개요

프로젝트에서 로그인 기능 구현을 맡게 되었다. 로그인을 맡았던 이유는 이전에 로그인 기능 구현 경험이 없었고 어떻게 구현해야 하는지 궁금해서 좋은 기회라고 생각하고 맡게 되었다. 하지만 실제 작업을 시작하려고 했을 때 어디서부터 시작해야 할지 공식 문서를 읽어도 이해가 어려웠으며, 프론트엔드가 어떤 부분을 구현해야되는지 잘 몰라서 너무 당황스러웠다😭다행히 로그인 기능은 완성할 수 있었고 다른 분들도 대략적인 과정을 알면 좋을 것 같아서 카카오 로그인 구현 과정에 대해서 프론트엔드가 어떤 부분을 구현해야되는지 정리하게 되었다.

(팀원분이 그려준 카카오 로그인 시퀀스다이어그램, 너무 잘그렸다.👍)

카카오 로그인 과정의 이 그림과 같이 진행된다. 그리고 프론트엔드에서 구현 해야되는 구간은 1번, 2번, 3번, 11번 이후 과정이다.

0. 카카오 설정

카카오 로그인을 적용하기 위해서는 카카오에 애플리케이션을 등록하고 몇가지 설정을 해야 합니다. 이 과정은 카카오에서도 문서화가 잘 되어 있어서 따라가면 쉽게 할 수 있습니다.
설정하기 | Kakao Developers 문서

기본적인 로그인만 필요하다면 위 이미지와 같이 '필수' 표시가 있는 부분만 설정해주면 됩니디.

production환경과 local환경 두 곳 모두 카카오 로그인을 적용하기 위해서는 두개의 URI를 redirectURI로 등록해줘야 합니다. 그리고 redirectURI는 프로젝트에서 로그인 관련 로직을 처리해줄 페이지를 정해서 설정하시면 됩니다.(우리 팀은 '/oauth' 페이지를 로그인 관련 로직을 처리하는 곳으로 정했습니다.)

1. 회원 가입 / 로그인 요청

카카오 설정을 완료했다면 사용자에게 회원 가입/ 로그인을 요청할 수 있습니다. 이 요청을 위해서는 카카오 로그인을 진행할 수 있는 페이지로 사용자를 이동시켜야 합니다. 이 부분도 카카오 문서를 보면 쉽게 할 수 있습니다.

REST API | Kakao Developers 문서

위의 기본적인 URL에 0번에서 설정했던 내용을 queryParameter로 추가해서 로그인 페이지 URL을 만들 수 있습니다.

//기본적으로 필요한 queryParameter를 추가한 url
const KAKAO_LOGIN_URL = `https://kauth.kakao.com/oauth/authorize?way=login 
&client_id=${process.env.NEXT_PUBLIC_KAKAO_CLIENT_ID} 
&redirect_uri=${process.env.NEXT_PUBLIC_REDIRECT_URL} 
&response_type=code`;

기본 URL에 우리 팀이 설정 했던 정보를 queryParameter에 추가 해준 코드입니다. client_id, redirect_uri는 환경 변수를 통해서 넣어주고 있다. client_id는 0번 과정에 애플리케이션을 등록하면 받을 수 있다. redirect_uri도 환경 변수로 넣어 주는 이유는 local환경과 production환경에서 사용되는 redirectURI가 달라서 이것을 환경 변수를 통해서 조절하기 위해서 환경 변수로 넣어주고 있다. way parameter는 로그인, 로그아웃을 한 곳에서 처리하기 위해서 우리팀에서 임의로 넣어준 queryparameter이다.

<a href=`${KAKAO_LOGIN_URL}`>카카오 로그인 하기 </a>

이 URL을 통해서 a태그를 만들거나, 클릭시 push를 해서 유저를 이동시키는 버튼을 만들 수 있다.

위 URL로 이동하면 카카오 로그인을 할 수 있는 페이지로 이동된다. 사용자는 로그인 / 회원가입을 진행하고 카카오에 인가 코드를 요청할 수 있다.

2. 인가 코드 응답

사용자가 로그인을 진행해서 정상적으로 요청이 완료되면 queryParameter로 넣어준 redirectURL로 리다이렉트 된다.

3. 인가 코드 전달

리다이렉트된다면 카카오에서 queryParametor를 통해서 인가코드를 전달해준다.이 인가코드를 우리는 백엔드에 넘겨 주면 된다.

리다이렉트 되었을 때의 URL로 code의 value가 인가 코드이다.

//oauthPage.tsx 
//redirectURL로 등록했던 페이지 

export default function OauthPage(){
	const code= searchParams.get('code');//next에서 제공하는 queryParameter를 받을 수 있는 함수
	const router=useRouter();
  
	useEffect(()=>{
		(async()=>{
			//인가 코드를 백엔드에 전달하고, 요청에 성공하면 토큰을 반환해 준다.
			const {data}=await fetch(...백엔드 api, 협의된 방식으로 code 전달...);
			
			//받은 토큰을 client단에 저장한다. 우리팀은 cookie에 저장했다.  
			setCookie('key',data );
			
			//사용자를 원하는 페이지로 이동시킨다. 우리 팀은 로그인 성공시 /home으로 이동시켰다.
			router.replace('/home');
			
			//로그인에 실패에 대한 에러 처리도 필요. 
		})()
	},[code,router])
  
	return<div>
	//해당 과정 중 빈화면이 보이면 ux상 좋지 않으니 로딩 화면을 보여준다.
	<Loading/>
	</div>
}

4. Token 응답

백엔드로부터 정상적으로 token을 받았다면 로그인에 성공한것이다. 🎉🎉🎉🎉
시퀀스 다이어그램 11번 이 후의 과정으로 백엔드에서 전달해준 token을 클라이언트단에 저장하면 된다.
저장 위치는 session Storage, local Storage,cookie가 있으며 팀 협의를 통해서 정하면 된다.
Token에는 accessToken 과 refreshToken이 있으며 accessToken은 accessToken이 필요한 api에 사용해주고, refreshToken은 accessToekn이 만료 됐을 때 새로운 토큰을 발급 받기 위해 사용된다.