시작하기 전, 필자는 vite를 이용해 typescript 환경의 react 프로젝트를 생성하였습니다.
JavaScript SDK 초기화
보다 자세한 내용은 Kakao developers에 정리되어 있습니다.
설치
❶ 해당 링크에서 script 태그 코드를 복사해 줍니다.
❷ index.html 파일에 script를 붙여 넣습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/tightee.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tightee</title>
<!-- 복사한 script 태그 코드 추가 -->
<script
src="https://t1.kakaocdn.net/kakao_js_sdk/2.0.0/kakao.min.js"
integrity="sha384-PFHeU/4gvSH8kpvhrigAPfZGBDPs372JceJq3jAXce11bVA6rMvGWzvP4fMQuBGL"
crossorigin="anonymous"
></script>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>초기화
❶ 내 애플리케이션에서 애플리케이션을 추가하고 JavaScript 키를 복사합니다.
❷ Login.tsx에 초기화 코드를 추가합니다.
declare global {
interface Window {
Kakao: any;
}
}
const Login = () => {
if (!window.Kakao.isInitialized()) {
window.Kakao.init(import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY);
}
return (...);
}플랫폼 설정
플랫폼 등록을 참고하여 설정해 줍시다.
저는 아래 이미지와 같이 설정하였습니다.
설정하기
해당 링크에 보다 자세한 설명이 나와 있습니다.
❶ [내 애플리케이션] > [제품 설정] > [카카오 로그인]에서 상태를 활성화합니다.
❷ Redirect URI를 설정합니다.
위에서 초기화한 SDK를 사용하여 Kakao.Auth.authorize()를 호출해 사용자 동의를 받을 경우 인가 코드를 전달받게 되는데, 그때 사용할 주소를 설정해 주어야 합니다. 올바르게 등록하지 않을 경우 KOE006 에러가 발생합니다.
❸ [내 애플리케이션] > [제품 설정] > [카카오 로그인] > [동의항목]에서 사용자에게 동의받고자 하는 항목을 설정합니다.
필자는 닉네임, 성별, 생일을 선택 동의로 설정했습니다.
카카오 로그인 과정
본격적인 기능 구현에 앞서 어떤 과정을 거치는지 알아보도록 하겠습니다.
[출처] Kakao developers
-
Client에서 초기화한 SDK를 이용하여 Kakao.Auth.authorize()를 호출해 카카오톡을 실행합니다.
-
[내 애플리케이션] > [제품 설정] > [카카오 로그인] > [동의항목] 설정에 따라 화면이 출력되며 사용자로부터 정보 제공 동의를 받습니다.
-
[내 애플리케이션] > [제품 설정] > [카카오 로그인]에서 설정한 Redirect URI로 인가 코드가 전달됩니다.
-
Firebase Cloud Functions를 사용해 전달받은 인가 코드를 이용하여 REST API로 토큰을 발급 받습니다.
-
토큰을 이용하여 사용자 정보를 조회합니다.
-
firebase auth를 이용해 custom token을 생성하고 로그인 혹은 회원가입 처리합니다.
인가 코드 발급 (간편 로그인 요청)
이제 본격적인 기능 구현에 대해 정리하겠습니다.
카카오 로그인 버튼을 추가하고 onClick 이벤트 핸들러를 등록해 주었습니다.
간편 로그인 요청을 위해 SDK를 이용하여 authorize 함수를 호출합니다. 이때 redirectUri는 required parameter로 인가 코드를 전달받을 URI를 입력해 주어야 합니다. ([내 애플리케이션] > [카카오 로그인] > [Redirect URI]에 등록되어 있어야 함)
저는 동의 받을 추가 항목이 있었으므로 scope도 전달하였습니다. 동의 항목 ID는 [내 애플리케이션] > [카카오 로그인] > [동의 항목]에서 확인이 가능합니다.
함수에 대한 자세한 내용은 링크에서 확인해 주세요.
const onLoginWithKakao = () => {
const redirectUri = `${location.origin}/callback/kakaotalk`;
const scope = [
KAKAO_SCOPE_NICKNAME,
KAKAO_SCOPE_GENDER,
KAKAO_SCOPE_BIRTHDAY,
].join(",");
window.Kakao.Auth.authorize({
redirectUri,
scope,
});
};
// https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide
<button onClick={onLoginWithKakao}>카카오 로그인</button>버튼을 클릭하면 카카오 계정 로그인을 진행하게 되고, 동의를 마치면 아래 이미지와 같이 설정한 redirectUri에 query string으로 인가 코드가 주어집니다.
콜백 페이지에서 URLSearchParams를 이용해 code 값을 가져오고, 만약 존재하지 않는다면 로그인 화면으로 이동하도록 코드를 작성하였습니다.
const searchParams = new URLSearchParams(location.search);
const code = searchParams.get("code");
if (!code) {
return <Navigate to="/login" />;
}이제 가져온 코드를 이용해 REST API로 Access token을 발급받아야 합니다.
다음 글에서 Firebase Cloud Functions를 이용해 Access token을 발급받아 유저 정보를 가져오고, Firebase Authentication으로 사용자를 관리하는 방법에 대해 다뤄보도록 하겠습니다.
[React + Firebase] 카카오 로그인 구현하기 (2)
참고
