이번 실전 프로젝트 기간 중 맡은 부분의 일부가 카카오 로그인 파트였다.
저번에 미니프로젝트때 시도했었는데, 3일동안 머리를박았지만 실패해서 솔직히 시도하기 겁이좀 났다.
하지만 이번엔 무조건 해야했기에 약 이틀간 머리를 박아서 해결했다..!!
저같은 경우에는 Node.js와 진행했으며 백엔드와 같이 진행하기에
카카오 애플리케이션에서 REDIRECT_URI를 사용했습니다.
카카오 로그인에 대한 과정은 구글링을 해보면 너무나도 많이 나오기도 하고, 카카오 디벨로퍼에서도 너무 잘 설명하고 있기에 전체적인 과정은
카카오 developers 에서 확인하면 된다.
순서를 간략히 말씀을 드리자면
위의 링크에서 카카오 로그인을 하기위한 설정을 끝냈으면 아래와 같은 과정을 하면 된다.
1. 프론트의 REDIRECT_URI / 백엔드의 REDIRECT_URI 두가지를 설정해주어야 한다
아직 배포 전이기에 로컬주소로 설정을 해놨고, 배포 후엔 배포된 주소로 바꿔주면된다.
2. 카카오에 요청을 보내 인가코드를 받아올 코드를 작성한다.
저의 경우 로그인페이지, 메인페이지에 카카오로그인 버튼을 만들어 해당 버튼에 기능을 걸어두었다.
Login.jsx
...
// 주의할점 !!!
// 아래 코드에서 client_id는 발급받은 REST_API_KEY값을 넣어준다.
// redirect_uri는 여기에선 프론트의 REDIRECT_URI를 사용한다.
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize
?client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}
&redirect_uri=${process.env.REACT_APP_KAKAO_REDIRECT_URI}
&response_type=code`;
// 카카오에 요청을 보내 인가코드 받기
const LoginWithKakao = () => {
window.location.href = KAKAO_AUTH_URL;
};
...
<SocialItem onClick={LoginWithKakao}>
<img
src={kakaoLogin}
alt="kakaoLogin"
width="32px"
height="32px"
/>
<span>카카오톡 로그인</span>
</SocialItem>이후, 해당 요청을 보낸 페이지에 도달했을때를 보여주는 페이지를 하나 만들어야한다.
쉽게 설명하면 로딩페이지 정도로 생각하면 된다.
로딩페이지 이름은 KakaoLogin.jsx로 해줬다. 아무거나 해도 상관X
먼저, Router 설정을 해줘야합니다.
Router.jsx
// path에는 redirect_uri로 설정한 주소뒤에 붙은 값을 넣어줍니다.
// ex) http://localhost:3000/auth/kakao/callback 이면 아래처럼 써줍니다.
// 그러고 element로는 로딩페이지 컴포넌트를 써줍니다.
<Route path="/auth/kakao/callback" element={<KakaoLogin />} />라우터 설정 후
KakaoLogin.jsx
import axios from "axios";
import React, { useEffect } from "react";
import { toast, ToastContainer } from "react-toastify"; //신경 X
import "react-toastify/dist/ReactToastify.css"; // 신경 X
import { setAccessToken } from "../../shared/Cookie/Cookie";
function KakaoLogin() {
// 카카오로 요청보낸 페이지에서 인가코드를 뽑아옵니다.
const code = new URL(window.location.href).searchParams.get("code");
// 페이지 랜더링 시, 아래 함수를 실행합니다.
useEffect(() => {
(async () => {
try {
// 여기서 redirect_uri는 프론트의 redirect_uri입니다.
// 아래 요청은 카카오 로그인을 성공했을 시의 토큰값을 받기 위함입니다.
const kakaoResult = await axios.post(
`https://kauth.kakao.com/oauth/token?grant_type=authorization_code&client_id=${process.env.REACT_APP_KAKAO_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_KAKAO_REDIRECT_URI}&code=${code}`,
{
headers: {
"Content-type": "application/x-www-form-urlencoded;charset=utf-8",
},
}
);
if (kakaoResult.status !== 200) return;
// 성공시 token값을 변수로 저장해줍니다.
const token = kakaoResult.data.access_token;
// 저장한 토큰과 data를 백엔드의 redirect_uri로 보내줍니다.
const response = await axios.post(
`${process.env.REACT_APP_SERVER_URL}auth/kakao`,
kakaoResult.data,
{
headers: {
Authorization: token,
},
}
);
// 백엔드에서 받아온 response값 중 accessToken과 refreshToken을 변수로 저장해줍니다.
const {
status,
data: { accessToken, refreshToken, currentPage },
} = response;
if (status !== 200) return;
// accessToken 저장
setAccessToken(accessToken);
// refreshToken 저장
localStorage.setItem("token", refreshToken);
// 위 요청이 끝났을때 원하는 페이지로 이동 시킵니다.
if (currentPage) {
return window.location.replace(`/groups/${currentPage}`);
} else {
return window.location.replace("/main/write");
}
} catch (e) {
console.error(e);
window.location.replace("/");
toast.error("이미 가입된 이메일 입니다.", {
position: "top-center",
autoClose: 1000,
hideProgressBar: false,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
theme: "light",
});
}
})();
}, [code]);
return (
<div>
<ToastContainer />
</div>
);
}
export default KakaoLogin;이렇게하면 카카오 로그인이 성공적으로 끝나게 됩니다.
카카오 소셜로그인에 머리를 박으면서, 안찾아본 문서, 블로그가 없을정도로 정말 많이 찾아다녔는데, 오히려 더 헷갈렸던것 같다.
이틀동안 머리박으면서 성공을 하니 뿌듯하기도 했고.. 다시 하라고 하면 금방할것 같아서 다행이다.
아마도 카카오로그인같은 소셜로그인을 처음접하는 분들은 저와 비슷한 고충을 느끼셨으리라 짐작을 하고, 이 글이 그런분들에게 도움이 되었으면 좋겠습니다.
궁금하신점이나 틀린부분 있으시면 지적해주시면 감사하겠습니다 :)
