개요
React + Firebase 조합으로 개발을 진행하고 있습니다.
아래 그림처럼 Firebase에서는 한국에서 많이 사용하는 네이버나 카카오 로그인을 제공하고 있지 않습니다..
그래서 저는 카카오와 네이버 로그인을 따로 구현하여 넣고자 합니다.
카카오 Developers 공식 문서만으로는 구현하기가 어려워서, 정말 많은 블로그들을 찾아봤습니다. ㅎㅎ
제 경험을 바탕으로 정말 쉽게 카카오 로그인을 구현하실 수 있도록 도와드리겠습니다.
프론트에서 카카오 로그인을 구현하는건 정말 쉬우니까 잘 따라오실 수 있을거에요.
카카오 소셜 로그인 과정
1. 로그인 버튼을 누른다.
2. KakaoAuthUrl에서 로그인 처리되어 RedirectUri로 넘어간다.
3. RedirectUri 뒤에 인가코드가 함께 오면, 프론트에서 추출한다.
4. 인가코드를 api에 쿼리 스트링으로 같이 파싱해서 백엔드로 넘겨준다.
5. 백엔드에서 인가코드로 토큰을 발급해 프론트로 넘겨준다.
6. 토큰을 받아 로그인을 유지한다.
오늘 글에서는 프론트에서 해야하는 3번 과정까지를 보여드리겠습니다.
구현 과정
1. 애플리케이션 등록
카카오계정
accounts.kakao.com
카카오 Developers 사이트에서 내 애플리케이션 등록을 먼저 해야합니다.
위 사진의 요소들을 다 채워주시고 저장을 하면 애플리케이션 등록이 완료됩니다.
(동의항목 설정을 하시려면 앱 아이콘을 등록하셔야 해요!!)
애플리케이션을 추가하면 이렇게 앱 키가 발급이 됩니다!!
저희는 이번에 REST API 키로 카카오 로그인을 구현해 볼거에요!
(이 API 키는 외부로 유출되지 않도록 조심하셔야 합니다)
그리고 플랫폼 설정으로 들어가셔서 사이트 도메인을 설정해주시면 됩니다.
저는 로컬에서 구현할 것이기 때문에, http://localhost:3030으로 설정했습니다.
그리고 카카오 로그인 설정으로 들어가셔서 Redirect URI 설정을 해주어야 하는데,
이 부분은 원하는 Redirect URI로 설정하셔도 돼요!
이까지 해주시면 카카오 Developers에서 설정해야 하는 것은 모두 끝났습니다.
2. 카카오 로그인 구현
1. 앱 키 환경 변수로 관리하기
카카오 Developers에서 발급받은 API KEY는 외부로 유출되면 안되기 때문에, Github에 올리실 때도 조심하셔야 합니다.
그렇기 때문에 .env로 관리하도록 하겠습니다.
먼저 루트 디렉토리에 .env 파일을 추가해주세요.
그리고 .env파일 내에서 REACT_APP으로 시작하도록 해서 API 키를 선언해주세요!!
(반드시 REACT_APP으로 시작해야 합니다. 그 뒤는 원하는 이름으로 설정하셔도 돼요!!)
gitIgnore
> .env이렇게 .env파일을 설정하셨으면 깃허브에 .env파일이 함께 올라가지 않도록 .gitignore 파일도 설정해주셔야 합니다.
gitignore 파일 내에 .env라고 추가해주세요
2. socialKakao.js
import KakaoIcon from './assets/kakao_logo.png';
const SocialKakao = ()=>
{
const Rest_api_key=process.env.REACT_APP_K_API_KEY //REST API KEY
const redirect_uri =process.env.REACT_APP_REDIRECT_URI //Redirect URI
// oauth 요청 URL
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${Rest_api_key}&redirect_uri=${redirect_uri}&response_type=code`
const handleLogin = ()=>{
window.location.href = kakaoURL
}
return(
<>
<div className="social-icon" onClick={handleLogin}>
<img src={KakaoIcon} alt="카카오 아이콘" style={{width:'30px'}}/>
</div>
</>
)
}
export default SocialKakao
카카오 아이콘을 클릭하면 카카오 로그인 페이지로 이동하도록 코드를 작성해주었습니다.
저는 API 키와 redirect URI를 환경 변수로 지정해주었기 때문에, process.env로 접근해주었습니다. (보안에도 신경쓰는 전문가 같죠?)
(카카오 아이콘은 구글에서 png파일을 다운로드 해서 사전에 assets 디렉토리에 넣어두었습니다.)
!! 이 컴포넌트의 역할은 KakaoAuthURI로 접속해 카카오 로그인 완료 후 Redirect URI로 보내주는 역할입니다.
카카오 로그인을 완료하면 Redirect URI로 이동하는데 이 때 Redirect URI 뒤에 인가 코드가 쿼리 파라미터로 함께 전달됩니다.
?code= 뒤의 인가 코드를 백엔드에 전달해줘야겠죠?
이 부분은 redirect.js 파일을 만들어 구현해보겠습니다.
3. Redirect 라우팅 설정
redirect화면을 구성하기 전에 App.js에 라우팅 설정을 해줘야 합니다.
<Route path="/oauth" element={<Redirect />}/>저는 이렇게 라우팅 설정을 했습니다.
(Redirect URI를 http://localhost:3030/oauth로 설정했기 때문입니다.)
4. redirect.js
import { useEffect } from "react";
export function KakaoRedirect() {
const code = new URL(window.location.href).searchParams.get("code");
console.log(code);
const headers = {
"Content-Type": "application/x-www-form-urlencoded",
};
useEffect(() => {
fetch(`백엔드 요청 주소?code=${code}`, {
method: "POST", //
headers: headers,
})
.then((response) => response.json())
.then((data) => {
console.log(data);
console.log(data.result.user_id);
console.log(data.result.jwt);
})
.catch((error) => {
// console.error("오류 발생", error);
});
}, []);
return (
<div>
<h1>소셜 로그인 성공</h1>
</div>
);
}
export default KakaoRedirect;
가장 먼저 보셔야 할 부분은 인가 코드를 파싱하는 부분입니다.
const code = new URL(window.location.href).searchParams.get("code");Redirect URI 뒤의 쿼리 파라미터를 파싱합니다.
그리고 위 코드에서는 쿼리 파라미터에 인가 코드를 담아 백엔드에 전송하였습니다.
여기까지가 프론트에서 카카오 로그인을 처리하는 과정입니다.
이렇게 개발자 도구를 열어보시면 console.log로 출력한 인가 코드가 정상적으로 출력되는 것을 보실 수 있습니다.
(저는 백엔드를 따로 구현하지 않았기 때문에, 패치 부분에서는 에러 메시지가 출력됩니다.)
이후 백엔드가 처리하는 과정을 간단히 알려드리겠습니다.
백엔드에서 이 인가코드로 액세스토큰을 발급받아 그 액세스토큰으로 유저정보를 조회해 DB에 저장한 후
백엔드에서 jwt 토큰을 프론트로 전달해줍니다.
그럼 프론트에서 jwt 토큰을 저장하고, 이 토큰을 활용해 서비스를 이용할 수 있습니다.
잘 따라오셨나요?? 최대한 자세하고 쉽게 설명한다고 노력했는데, 모두 카카오 로그인 구현 성공하셨으면 좋겠습니다!!
다음에는 Firebase에서 카카오 로그인을 연동하는 글로 돌아오겠습니다 (아마도)
긴 글 읽어주셔서 감사합니다!!
