React로 카카오 로그인 연동하는 방법 안내

React로 카카오 연동하기

React로 카카오 로그인을 하는 방법을 알아볼까요? 요즘 많은 웹 서비스에서 사용자들이 간편하게 로그인할 수 있도록 카카오 로그인을 필수적으로 제공하고 있죠. 그럼, 어떻게 설정하고 구현할 수 있는지 단계별로 살펴보겠습니다.

1. Kakao Developer 설정하기

먼저, 카카오 로그인을 시작하려면 Kakao Developer 콘솔에서 몇 가지 설정을 해야 해요. 이 과정은 모든 방법에서 동일하니 잘 따라오세요.

애플리케이션 등록: Kakao Developer 콘솔에 가서 새로운 애플리케이션을 등록해 줘요.
카카오 로그인 활성화: 내 애플리케이션 -> 제품 설정 -> 카카오 로그인에서 활성화를 ON으로 바꿔주세요.
Web 플랫폼 등록: 플랫폼 메뉴에서 Web을 선택한 후, 현재 개발 중인 주소를 입력합니다. localhost:3000 같은 주소를 입력하면 됩니다.
Redirect URI 설정: 카카오 로그인 메뉴에서 Redirect URI를 추가해야 해요. 이 주소는 사용자가 카카오 로그인을 완료한 후 돌아갈 주소입니다.

이사를 도와주는 어플은?

2. REST API 방식으로 카카오 로그인 구현하기

REST API 방식을 사용하면 URL을 통해 인가코드를 받아서 로그인 과정을 처리할 수 있어요. 아래 코드를 참고해 보세요.

const Rest_api_key = 'REST API KEY';
const redirect_uri = 'http://localhost:3000/auth';
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 (
  <button onClick={handleLogin}>카카오 로그인</button>
);

사용자가 버튼을 클릭하면 카카오 인증 서버로 이동해 로그인을 진행하게 돼요. 로그인이 끝나면 미리 설정한 Redirect URI로 인가코드가 전달됩니다. 이 인가코드는 백엔드로 보내서 액세스 토큰을 발급받고 사용자 정보를 DB에 저장하는 데 사용돼요.

3. JavaScript SDK 방식으로 카카오 로그인 구현하기

JavaScript SDK 방식을 사용하면 react-kakao-login 라이브러리를 통해 더 쉽게 로그인을 구현할 수 있어요. 다음 코드를 확인해 보세요.

import KakaoLogin from "react-kakao-login";

const SocialKakao = () => {
  const kakaoClientId = 'JavaScript KEY';

  const kakaoOnSuccess = async (data) => {
    const idToken = data.response.access_token;
    // 백엔드로 액세스 토큰 전달
  };

  const kakaoOnFailure = (error) => {
    console.log(error);
  };

  return (
    <KakaoLogin
      token={kakaoClientId}
      onSuccess={kakaoOnSuccess}
      onFail={kakaoOnFailure}
    />
  );
};

이 방법은 사용자가 버튼을 클릭하면 바로 카카오 로그인 창이 열리고, 성공적으로 로그인이 되면 액세스 토큰이 즉시 반환돼요. 이 토큰은 백엔드로 전달되어 사용자 정보를 처리하는 데 쓰입니다.

국민은행 atm 입금한도는?

4. 로그인 과정과 백엔드 처리

카카오 로그인 과정은 다음과 같아요.

사용자 로그인 요청: 사용자가 카카오 로그인 버튼을 클릭합니다.
카카오 인증 서버에서 인증 및 동의 요청: 사용자는 카카오 페이지로 이동해 로그인을 진행하고 동의를 합니다.
인가코드 발급: 로그인이 완료되면 카카오는 인가코드를 발급합니다.
백엔드로 인가코드 전달: 프론트엔드에서 받은 인가코드를 백엔드에 보냅니다.
액세스 토큰 발급 및 사용자 정보 저장: 백엔드는 인가코드를 통해 액세스 토큰을 받고, 사용자 정보를 조회하여 DB에 저장합니다.
jwt 토큰 생성 및 전달: 마지막으로 백엔드는 jwt 토큰을 생성해서 프론트엔드로 전달합니다.

5. Redirect URI 설정과 에러 처리

Redirect URI는 사용자가 카카오 로그인이 완료된 후 돌아갈 주소를 지정하는 거예요. 이 주소를 정확히 설정하지 않으면 로그인이 제대로 이루어지지 않으니 주의하세요!

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

로그인 실패 시에는 에러 처리가 중요해요. 실패했을 때 사용자에게 알림 메시지를 보여줄 수 있습니다.

if (result === "fail") {
  alert("로그인에 실패했습니다. 잠시 후 다시 시도해 주세요.");
}

결론

카카오 로그인을 연동하는 게 처음에는 생소하겠지만 위의 단계를 차근차근 따라 하면 금방 할 수 있어요. Kakao Developer 설정부터 REST API나 JavaScript SDK 방식의 구현, 그리고 백엔드 처리까지 각 단계를 신중히 진행하면 사용자들이 편하게 로그인할 수 있는 환경이 만들어질 거예요. 이제 여러분도 카카오 로그인을 더 간편하게 해보세요.🚀