리액트로 카카오톡 간편 로그인 구현하기
레퍼런스를 엄청나게 찾아봤다. 레퍼런스대로 하고 나니 로그인 창으로 넘어가는 것까지는 된다. 정보 제공 동의 창도 나오고 ... 그런데 사람 환장하게 로그인이 자꾸 풀려 버리는 거다. 백엔드 파트너 님과 정말 많은 정보 공유를 하며 문제를 해결하려고 애썼다.
일단 카카오 로그인 로직부터 이해하려고 노력했다.
카카오 로그인 버튼을 누르고 아이디와 비밀번호를 친다. -> 정보 제공 동의를 물어보는 창이 뜨고 동의를 누르면 -> 카카오가 프론트 쪽으로 인가 코드를 준다. -> 이 인가 코드를 프론트가 백엔드 쪽으로 넘기면 이걸 빌미(?)로 백엔드가 카카오에 토큰을 요청한다. -> 카카오가 토큰을 주면 백엔드는 우리 서버 전용 토큰을 발행해 프론트 쪽에 전송한다. -> 프론트는 세션 스토리지나 로컬 스토리지에 받은 토큰을 저장하고 자동 로그인이 가능하게끔 한다.
여러 자료를 찾다 보니 어떤 분이 OAuth라는 파일을 별도로 만들어 관리하시길래 나도 따라했다.
/OAuth.jsx
const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY
const REDIRECT_URL = import.meta.env.VITE_KAKAO_REDIRECT_URL
export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`;
// 사실 참고하신 분 벨로그를 보면 ⬆️ 여기까지만 파일에 들어가 있는데
// 파일이 분산되니까 헷갈려서 밑에 버튼 컴포넌트도 함께 넣어 주었다.
export const KaKaoButton = () => {
return (
<div>
<a href={KAKAO_AUTH_URL}>
<img className="kakaologo" src="/img/kakao_login_medium_wide.png" />
</a>
</div>
)
};redirect url도 App.jsx에 넣어 주었다.
<Route path="login/oauth2/code/kakao" element={<KakaoAuth />} />자 그리고 대망의 인가 코드를 주고 받고 토큰을 받고 저장하는 코드를 짜보자.
/KakaoAuth.jsx
const KakaoAuth = () => {
const navigate = useNavigate();
const dispatch = useContext(DispatchContext);
const [code, setCode] = useState("");
// 순서를 숫자로 표현해 따라가보려고 한다.
const kakaoLogin = async (_code) => {
if (!_code) return;
// 4️⃣코드를 백엔드 쪽으로 넘겨 준다.
const res = await Api.post("kakaoOauth", {code: _code});
// 5️⃣백엔드에게 받은 토큰을 저장한다.
const kakaoUser = res.data;
const kakaoToken = kakaoUser.token;
sessionStorage.setItem("userToken", kakaoToken);
// 6️⃣dispatch 함수를 이용해 로그인 상태로 변환해준다.
dispatch({
type: "LOGIN",
payload: kakaoUser,
})
// 7️⃣위 과정이 끝나면 useNavigate 함수를 이용해 메인 페이지로 보내준다.
navigate("/");
};
// 👋1️⃣카카오가 url에 인가 코드를 붙여 준다.
const getSourceCode = () => {
// 2️⃣url에 붙어 있는 코드를 가져온다.
const params = new URL(window.location.href).searchParams;
const _code = params.get("code");
if (!code) {
kakaoLogin(_code);
}
setCode(_code);
}
// 3️⃣useEffect를 이용해 redirect url에서 코드를 받아 온다.
useEffect(()=> {
getSourceCode();
}, [])
return (
<div>로그인 중입니다. 잠시만 기다려주세요.</div>
)
}
export default KakaoAuth;로그인이 . . . 된다! 🥰
감격스러워서 눈물이 날 것 같았다 . . . .
✔️ 도움 많이 된 블로그들 ✔️
- https://2dowon.github.io/docs/react/social_login/
- https://velog.io/@isabel_noh/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0-REST-API
정말 감사합니다. 🙇♀️🙇
그런데 . . . 한 가지 문제점 . . . . .
이미 위 과정을 밟은 사용자가 로그인 버튼을 또 눌렀을 때 바로 로그인이 되는데 로그인 정보를 받아오질 못한다. App.jsx에 로그인 정보를 받아오게끔 처리해놨는데 왜 안 되는 건지 영문을 알 수 없다. 로컬 로그인은 잘 되고 정보도 잘 받아오는 걸로 봐선 카카오 쪽 코드 문제가 확실한데 ... 아직 역량이 부족해서 그런가 여전히 모르겠다. 프로젝트는 끝났지만 며칠 째 매달려 문제를 해결해보려고 노력하고 있다.
백엔드 코드도 살펴보며 애쓰고 있다. 나만의 과제로 남겨두고 계속 해결해보고자 한다. 이 부분은 잊지 않고 다음 프로젝트에서 또 도전해서 꼭 성공하고 싶다. 벨로그에 여정을 기필코 기록할 것이다 . . .
+) 아쉬운 점 추가
네이버 간편 로그인도 구현하기로 초반에 계획을 잡아놨는데 카카오톡 구현하느라 네이버는 손도 못 댔다. 다음 프로젝트에는 꼭꼭 성공하고 싶다. 그러니까 이번에 해결 안 된 부분 손 봐야겠지? 힘내자. 파이팅 파이팅🔥🔥🔥
혹시 위 코드에 문제점이나 오류를 발견하신 분이 있다면 알려주시면 감사하겠습니다.😢
