프로젝트) 소셜 로그인

 

프로젝트에서 로그인 부분을 담당해 구글을 통한 소셜 로그인을 구현하기로 했습니다.

소셜 로그인을 처음 시도해보기도 하고 백엔드 분과 배운 내용과 방식이 달라 서로 연결하는 법을 헤매느라 고통을 받고 있었습니다.

하지만 결국 블로그 하나를 발견하고 문제점을 알아낼 수 있었습니다.

 

https://www.hacksoft.io/blog/google-oauth2-with-django-react-part-2#overview

Google OAuth2 with Django REST Framework & React: Part 2

 

이 블로그에서 볼 수 있듯이 소셜 로그인의 처리를 클라이언트 쪽을 메인으로 하냐 서버 쪽을 메인으로 하냐에 나눠 클라이언트 사이드와 서버 사이드로 나눠 두 가지 방법이 있다고 했습니다.

이 부분을 각자 막 교육을 끝낸 교육생 둘이었고 각자의 방법만 알고 있었기에 오랫동안 헤맸던 것이었습니다.

 

그 후로 토큰을 서버 쪽에서 관리하는 게 좋다고 판단해 우선 서버사이드로 진행하기로 했습니다.

 

서버사이드 플로우 소셜 로그인

 

서버 사이드 방식은 기본적으로 위 그림과 같은 흐름이며 프런트엔드 측에서는 1번과 4번을 수행하면 됩니다.

먼저 1번 코드를 보겠습니다.

 

        <GoogleLogin href={URL_MEMBER_SINGUP} variant="contained">
          <GoogleIcon />
          <div>구글로 로그인하기</div>
        </GoogleLogin>

 

로그인 링크 이동 이름대로 단순히 href 속성을 이용하여 약속된 URI로 이동합니다.

이동하게 되면 구글 아이디를 이용하여 로그인을 하는 화면이 나오게 됩니다.

 

그 후 로그인을 완료하게 되면 이제 4번의 역할을 수행해야 합니다.

 

import axios from 'axios';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import {
  setACCESS_TOKEN,
  setREFRESH_TOKEN,
  setUSER_INFORMATION,
} from '../helper/cookieHelper';
import { ROUTE_PATH_BASE } from '../store/routerStore';
import { URL_MEMBER, getWITH_TOKEN } from '../store/urlStore';

const LoginCallback = () => {
  const navigate = useNavigate();

  const accessToken = new URL(window.location.href).searchParams.get(
    'access_token'
  );
  const refreshToken = new URL(window.location.href).searchParams.get(
    'refresh_token'
  );

  useEffect(() => {
    if (accessToken && refreshToken) {
      setACCESS_TOKEN(accessToken);
      setREFRESH_TOKEN(refreshToken);
      axios
        .get(URL_MEMBER, getWITH_TOKEN())
        .then((response) => {
          const { data } = response;
          setUSER_INFORMATION(data.data);
          navigate(ROUTE_PATH_BASE);
        })
        .catch((error) => {
          const { message } = error;
          navigate(ROUTE_PATH_BASE);
        });
    }
  }, []);

  return <></>;
};

export default LoginCallback;

 

로그인이 성공하면 path가 loginCallback인 URI로 리다이렉트 되고 쿼리 파라미터에 토큰 정보가 담겨오게 됩니다.

(로그인 성공 자체로 백엔드에 요청을 새로 보내는 것이고 그에 대한 응답이 URI 이동)

 

.../LoginCallback/?access_token=~~~~~&refresh_token=~~~~~~~

 

이 이동된 URI에 searchParams를 이용하여 두 토큰을 쿠키에 저장합니다.

그 후 바로 저장된 토큰을 헤더에 실어 유저 정보를 불러와서 유저 정보도 같이 저장했습니다.

모든 통신이 완료되면 마지막으로 메인 페이지로 이동하게 됩니다.

 

 

마치며...

 

이번 프로젝트를 통해 소셜 로그인을 완성하는 방법이 정말 다양하다는 걸 배웠습니다.

방식의 차이라던지 어떻게 토큰을 받아올지와 저장할지 찾아도 찾아도 같은 내용은 하나 없었지만 그래도 하나의 기능을 수행하기 위한 다양한 코드를 보며 이해를 높여 갈 수 있었습니다.

또, 첫 프로젝트에서도 느꼈지만 백엔드와의 연결점을 빨리 정하고 통신 연습을 시도하는 게 정말 중요하다는 것을 다시 느꼈습니다.