(React) 소셜 로그인 구현 (카카오, 구글, 네이버)

구현하기 전에...

다른 기능들과 마찬가지로 소셜 로그인을 구현하는 방법은 한 가지가 아니다.
나는 카카오, 구글, 네이버 로그인을 같은 방식(Redirect)으로 구현했고,
그러기 위해서는 3개 사이트의 URI 형식이 모두 같아야 한다.

URI

구글

https://accounts.google.com/o/oauth2/v2/auth?scope=email%20openid&response_type=code&redirect_uri=${REDIRECT_URI}&client_id=${REST_API_KEY}

카카오

https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code

네이버 (구글, 카카오 URI에서 state만 추가됨)

https://nid.naver.com/oauth2.0/authorize?client_id=${REST_API_KEY}&response_type=code&redirect_uri=${REDIRECT_URI}&state=${STATE}

위 주소들의 형식을 살펴보면 알겠지만, 전부 비슷하게 생겼다.
client_id 에는 발급받은 API KEY를 넣고,
Redirect_uri 에는 리다이렉트 시킬 프론트 주소를 입력한다. (예: localhost:3000/authnaver)
네이버는 여기에 추가적으로 state를 요구하는데, API KEY와 같이 발급해 주는 고정값이다.
따라서 환경변수에 넣어놓고 뒤에 적어주기만 하면 된다. (쉬움)

네이버 로그인 구현방법

구현 방식이 모두 같으므로 그나마 가장 복잡한 네이버로 코드를 살펴보자.

1. NaverLogin 컴포넌트를 로그인 페이지에 import

NaverLogin.jsx

import styled from "styled-components";

function NaverLogin() {
  const NAVER_URI = `https://nid.naver.com/oauth2.0/authorize?client_id=${process.env.REACT_APP_NAVER_CLIENT_ID}&response_type=code&redirect_uri=${process.env.REACT_APP_NAVER_REDIRECT_URI}&state=${process.env.REACT_APP_NAVER_STATE}`;

  return (
    <a href={NAVER_URI}>
      <NaverLoginBtn src={"/naverlogin.png"} alt="naverlogin"></NaverLoginBtn>
    </a>
  );
}

const NaverLoginBtn = styled.img`
  width: 50px;
  height: 50px;
`;

export default NaverLogin;

각 버튼을 클릭하면 사이트가 제공하는 로그인 화면으로 이동한다.
그 후 별 문제가 없다면 API 키를 발급받을 때 설정했던 redirect_uri로 이동되고, URI에는 유저를 식별하는 코드가 담겨 있을 것이다.

2. App.js에 라우팅

redirect_uri로 이동시 보여줄 컴포넌트를 라우팅한다.

App.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import KakaoRedirect from "./components/login/kakao/KakaoRedirect";
import GoogleRedirect from "./components/login/google/GoogleRedirect";
import NaverRedirect from "./components/login/naver/NaverRedirect";

function App() {

  return (
          <Routes>
            <Route path="/" element={<MainPage />} />
            <Route path="/login" element={<LoginPage />} />
            <Route path="/authkakao" element={<KakaoRedirect />} />
            <Route path="/authgoogle" element={<GoogleRedirect />} />
            <Route path="/authnaver" element={<NaverRedirect />} 
          </Routes>
  );
}

export default App;

3. 로그인 로직이 담긴 컴포넌트 만들기

redirect_uri로 이동되고 나면,

(1) URI에 담긴 유저 식별 코드를 추출, 서버에 보냄
(2) 서버에서는 코드로 유저를 식별해 access-token과 refresh-token을 발급
(3) 클라이언트는 발급받은 토큰을 쿠키(or 로컬 스토리지 or 세션 스토리지 등)에 저장

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

function NaverRedirect() {
  const code = new URL(window.location.href).searchParams.get("code"); // 현재 URL에서 코드만 추출
  const [cookies, setCookie] = useCookies();
  const navigate = useNavigate();

  // 컴포넌트가 마운트되면 로그인 로직 실행 
  useEffect(() => {
    async function NaverLogin() {
      const res = await axios.get(
        process.env.REACT_APP_API +
          `/api/member/login/naver?code=${code}&state=${process.env.NAVER_STATE}`
      ); // 이 부분은 서버 API에 따라 바뀔 수 있으니 API 명세서를 잘 확인하세요.
      const ACCESS_TOKEN = res.headers["authorization"];
      const REFRESH_TOKEN = res.headers["refresh-token"];
      setCookie("accessToken", ACCESS_TOKEN);
      setCookie("refreshToken", REFRESH_TOKEN);
    };
      NaverLogin();
      navigate("/", { replace: true }) // 로그인 완료시 메인으로 이동
  }, []);

  return;
}

export default NaverRedirect;

마치면서

네이버만 설명했지만, 카카오와 구글 모두 원리가 같으니
모두 소셜 로그인 성공하시길 빕니다!