[React] 드디어 해낸... 리액트로 카카오 소셜 로그인 구현하기

개요

프로젝트에서 소셜 로그인을 쓰기로 해서 카카오 로그인을 구현해야 했다.

카카오 developers 공식 문서와 많은 블로그들(진짜 거짓말 안 하고 모든 블로그를 다 본 것 같다...) 을 봤는데도 어려운 점이 있었다... 프로젝트 시작할 때 포기했다가 프로젝트가 중후반쯤 온 지금에서야 드디어 완성을 했다...ㅠㅠ

결론은... 프론트에서 카카오 로그인을 구현하는 건 진짜 간단하다..!!

백엔드 개발자분과 충분히 회의를 안 하고 바로 시작해서 좀 엉켰던 것 같다.

프론트에서 인가코드를 백엔드로 넘겨주고, 토큰을 받는 형식으로 진행해야 편한 것 같당☺️☺️

 

 

[카카오 소셜 로그인 과정]

1. 로그인 버튼을 누른다. (클릭하면 kakaoAuthUrl로 가게 설정)

2. KakaoAuthUrl에서 로그인 처리가 되고, RedirectUri로 자동으로 넘어간다.

3. RedirectUri 뒤에 인가코드에 같이 올 건데, 이걸 프론트에서 추출한다.

4. 이 인가코드를 api에 쿼리스트링으로 같이 파싱해서 백엔드로 준다.

5. 백엔드에서는 이 인가코드를 받아서 토큰을 받아 프론트로 넘겨준다.

6. 토큰을 받아 로그인을 유지한다.

 

[내 애플리케이션 등록]

1. 카카오 developers에 들어가서 내 애플리케이을 등록해야 한다.

https://developers.kakao.com/

애플리케이션 추가하기를 누르면 아래 화면이 뜨는데 하나씩 입력해주면

앱 키가 발급된다..! 

그 다음, 플랫폼을 설정해준다.

나는 web 플랫폼으로 등록해주었다. (그냥 혼자 공부하는 거라면 localhost로 등록해도 됨)

그럼 Redirect Uri를 등록하라고 한다. 백엔드와 협업할 때는 꼭 백에서도 접근 가능한 uri로 지정해야 한다.

그 다음, 동의항목 설정까지 해주면 끝이다!

그럼 애플리케이션 등록은 끝난 거고, Redirect uri와 앱 키로 소셜 로그인을 구현하면 된다.

 

[카카오 로그인 구현]

1. 앱 키는 무조건 .env에서 관리하기!

github에 올라가면 안 된다..!

.env

주의할 점은, 무조건 REACT_APP_으로 시작해야 한다.

또, REACT_APP_KEY = 30이런 식으로 띄어쓰기를 하면 안 된다! REACT_APP_KEY=30 이렇게 붙여주자..!

 

그 다음, 앱 키를 사용할 파일에서 아래와 같이 불러오면 된다. (import 필요 없음)

2. 파일을 두 개 만들어야 한다.

로그인 화면 페이지와 redirectURI로 갈 때 보여질 화면 이렇게 두 개가 있어야 한다.

나는 Loginpage.js와 KakaoRedirect.js 이렇게 만들었다.

KakaoRedirect.js는 꼭 라우팅 설정을 해줘야 한다!!

예를 들어, redirectURI가 http://localhost:3000/oauth였다면 아래처럼 라우팅 설정을 해준다.

RedirectUri로 접속이 되면 자동으로 <Redirect>컴포넌트가 보여질 것이다.

<Route path="/oauth" element={<Redirect />} />
          {/*kakao Redirect 화면 */}

 

3. Loginpage.js

여기에 넣을 것들은

- 로그인 버튼

- KakaoURL로 이동하는 코드

이렇게 두 개다.

그런데 KakaoURL에는 RedirectURI와 RestApiKey를 넣어야 하기 때문에 이 변수들을 같이 넣어줘야 한다.

const K_REST_API_KEY = process.env.REACT_APP_K_REST_API_KEY; 
const K_REDIRECT_URI = `http://localhost:3001/oauth`;
const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${K_REST_API_KEY}&redirect_uri=${K_REDIRECT_URI}&response_type=code`;

const Loginpage = () => {

  const handleKakaoLogin = () => {
    window.location.href = kakaoURL; //kakaoURL로 이동
    
   return(
    <div>
     <button onClick={handleKakaoLogin} className="KakaoButton"></button>
    </div
   
   )

    
  };}

kakaoURL은

const kakaoURL =
`https://kauth.kakao.com/oauth/authorize?client_id=${K_REST_API_KEY}&redirect_uri=${K_REDIRECT_URI}&response_type=code`;

이걸 그대로 넣어주면 된다.

그럼 설정해 준 apiKey와 Redirect_URI가 들어갈 거다.

이 kakaoURL(KakaoAuthUrl)로 들어가면, 자동으로 카카오 로그인 화면이 나타나고, 다 동의하고 확인을 누르면 설정한 Redirect_Uri로 접속이 되는 거다.

 

4. Redirect.js

자, 그럼 이제 Redirect_Uri에서 인가코드를 뽑아야 한다.

인가코드는 아래처럼 설정한 Redirect_Uri 뒤에 붙어있다. 

현재의 사이트 링크에서 code=뒷부분만 가져오려면 아래 코드를 작성해주면 된다.

const code = new URL(window.location.href).searchParams.get("code");

그 다음, 이 code를 쿼리스트링으로 백엔드에 보내주고, 토큰을 받아오면 된다.

전체 코드는 아래와 같다.

import { useNavigate } from "react-router-dom";
import { useEffect } from "react";


export function KakaoRedirect() {
  const navigate = useNavigate();
  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;

Redirect_Uri에 아무것도 안 떠서 로그인 중입니다.라는 글씨를 넣어주었다.

 

그럼 끝이다!!

받은 토큰을 저장했다가 앞으로 api 요청 보낼 때 헤더에 같이 보내주면 된다..!

 

이걸 읽으신 분들은 꼭 성공하세요!! 화이팅입니다~😊😊