이번 못난이 농작물 프로젝트에서 프론트엔드 개발 팀원으로 참여하게 되었다!
이미 진행중인 프로젝트에 참여하게 된 것이기 때문에 많은 작업이 되어있어서 내가 할 것이 없으면 어쩌지 하면서 걱정했었는데 다행이도 프론트 쪽 개발은 아직 완성되지 않은 상태였다!
해당 프로젝트에서 첫번째로 부여받았던 임무는 펀딩페이지 구현과 카카오 로그인 구현이었다! 백엔드 담당하시는 분이 토큰까지 받아오는 것을 구현해달라고 하셔서 이번기회에 토큰까지 작업해 보았다. (이전에는 인가코드를 백엔드에 넘기고 jwt를 받아오는 방식으로 진행하였음)
이전에도 카카오 로그인을 구현해본 경험이 있었지만 생각외로 구현하는 과정에서 헷갈렸던 부분들이 있어서 이번 기회에 전체적인 흐름을 정리하고자 글을 쓰게 되었다! :)
전체적인 흐름은 다음과 같다
1. 앱 등록
카카오 Developers 에 들어가서 아래와 같이 앱을 등록하여야 한다.
위와 같이 앱을 등록한 후에는 내 애플리케이션 -> 앱 설정 -> 앱 키 를 통해 여러 개의 앱 키들을 확인할 수 있다.
여기서는 REST_API 키를 사용하여 구현해 보겠다!!
2. 플랫폼 등록
다음은 위와 같이 플랫폼을 등록하여야 한다.
현재는 개발단계이고 실제 배포단계 이전이기에 http://localhost:3000 을 입력하여주었다!
실제 배포단계에서는 실제 주소로 입력해주어야 한다
3. Redirect URI부분 설정
위와 같이 내 애플리케이션 -> 제품 설정 -> 카카오 로그인 으로 가서 활성화 설정을 모두 ON으로 하고 Redirect URI 주소를 정해주어야 한다.
(해당 Redirect URI의 의미는 우리가 카카오에 가서 로그인을 하면 카카오 쪽에서는 위에서 적은 Redirect URI로 인가코드를 보내준다. 나중에 이 인가코드를 사용하여 토큰을 얻을 것임!)
위의 3번까지의 과정을 마쳤다면 이제 코드를 적을 준비가 된 것이다!
이제 본격적으로 코드를 작성하여 카카오로 부터 인가코드를 받고 인가코드로 부터 토큰을 얻는 과정을 진행하면 다음과 같이 진행할 수 있다
나는 먼저 위와 같이 카카오 로그인 이미지를 클릭하여 `handleKakaoLogin` 함수가 동작하도록 하였다.
즉 웹페이지에서 아래와 같은 카카오 로그인하기 버튼을 클릭하면 `handleKakaoLogin` 함수 실행!
handleKakaoLogin함수는 다음과 같다.
const handleKakaoLogin = () => {
// kakao login api 연결
const baseUrl = "https://kauth.kakao.com/oauth/authorize";
const config = {
client_id: "여기에는 위에서 받은 REST_API값",
redirect_uri: "http://localhost:3000/oauth/kakao",
response_type: "code",
};
const params = new URLSearchParams(config).toString();
const finalUrl = `${baseUrl}?${params}`;
window.location.href = finalUrl;
};해당 코드에서는 앱 키 등록시에 받은 REST_API값을 가져와서 https://kauth.kakao.com/oauth/authorize 경로에 쿼리로 넣어주었고, 뿐만 아니라 redirect_uri, response_type도 같이 쿼리로 넣어주었다. (REST_API 값의 경우 .env파일에 등록하여놓고 추후에 process.env.REACT_APP_KAKAO_REST_API_KEY 의 형식으로 사용하는 것을 추천한다!)
(이 과정은 카카오톡에 로그인을 하겠다고 하고 로그인을 하는 과정으로 카카오쪽에서는 위 코드의 redirect_uri경로에 code="인가코드"가 붙어서 줄 것임. 즉 "http://localhost:3000/oauth/kakao?code='인가코드'")
위에서 본 것처럼 해당 redirect_uri 경로로 인가코드가 함께 올 것이기 때문에, 아래와 같이 라우팅 설정을 해주었다.
그 후 KakaoLogin 컴포넌트는 아래와 같이 코드를 짜주었다.
const KakaoLogin = () => {
const navigate = useNavigate();
const client_id = "여기에는 위에서 받은 REST_API값";
const redirect_uri = "http://localhost:3000/oauth/kakao";
const code = useSearchParams()[0].get("code");
const getKakaoToken = async () => {
const baseUrl = "https://kauth.kakao.com/oauth/token";
const config = {
grant_type: "authorization_code",
client_id,
redirect_uri,
code,
};
const params = new URLSearchParams(config).toString();
const finalUrl = `${baseUrl}?${params}`;
const { data: tokenRequest } = await axios.post(finalUrl);
navigate("/");
};
useEffect(() => {
getKakaoToken();
});
return <Loading>Loading...</Loading>;
};먼저 해당 경로에서 code부분(이 부분이 인가코드에 해당함)을 useSearchParams hook을 통해 추출하였고 이 값을 통해 https://kauth.kakao.com/oauth/token 에 post요청을 보내서 token을 받을 수 있었다!
여기까지 일단 구현해 보았고, 추후에 백엔드 분들과 상의하여 어느 경로에 저 토큰을 줄 것인지를 정해야겠다!
추가로 이 이후에는 백엔드로 부터 받은 access token은 localstorage에 refresh token은 httpOnly 옵션을 가진 쿠키에 넣어서 보관하고 access token 의 만료시간을 확인하여 30초 남았을 경우에는 백엔드에 refresh token을 주어 Reissue하는 과정을 진행하면 된다.
cf) 로그인이 되어야지만 접속이 가능한 마이페이지를 접속할 때에는 백엔드에 저 access token값을 주어 정보를 확인받는 과정을 진행하면 되고, 이렇게 백엔드에 access token을 요청할 때에는 만료시간을 확인하여 만료되었을 경우 Reissue하는 과정을 진행해주도록 하면 된다
자세한건 -> 카카오 로그인 공식 문서 를 참고하자!!
참고 블로그
kakao login -> 카카오 로그인 참고
jwt -> JWT 개념 관련 참고
