🎙️Social Login

로그인 파트 하면 빠질 수 없는 존재 -> 소셜 로그인. 구글, 카카오, 네이버 등

로그인을 할 때의 제약들이 있기에 OAuth 로그인은 클라이언트 개발자라면 무조건 할 줄 알아야 한다. (흐름이라도.)

키값들은 워크북에 나와있는 부분이고 중요한 부분이라 생략하도록 한다. 이는 절대로 임의로 수정하면 안 되는 것이고 수정해야 하는 것은 그 뒤에 value 값만 본인의 키값, 구글 클라우드나 이쪽 API 및 서비스에 들어가면 발급받을 수 있는데 그 부분도 워크북을 참고해서 따라해보면 된다.  

로컬 호스트는 8000이고 클라이언트 코드도 로컬 호스트 5173번 포트를 열리게 설정을 해줘야 잘 작동을 한다. 

작동과정

클라이언트 입장에서 구글 로그인으로 버튼을 누른다. -> 그럼 백엔드에 /v1/auth/google/login이라는 것이 있는데 api 라우터에 존재한다. 구글 인증 페이지로 이동을 해서 로그인을 시작하는 것이다. 리다이렉트 -> 구글 인증 페이지에 가면 로그인을 진행. 계정을 고르고 이 앱의 접근을 승인. -> callback ->  검증 진행 -> 구글에 정보들을 넣어줌. -> 이를 통해서 이제 서버가 정보를 제공을 하게 됨. 호출해서 엑세스 토큰과 리프레쉬 토큰을 생성해 준다. 여기서도 앞선 내용에서 배운 것처럼 적용을 하게 될 것이다. 

하지만, 소셜 로그인은 다른게 response 오는 게 아니라 콜백 url(특정 url)로 리다이렉트를 시키는데 쿼리 파라미터 형태로 엑세스 토큰이나 리프레쉬 토큰 그리고 umc 웹 맞춤 서버의 userId, userName 이 4가지 정보를 담가서 준다. 그래서 response 엑세스 토큰을 저장하는 것이 아니라 서치 파람들(  토큰들을  )을 추출을 해서 로컬 스토리지에 저장하거나 상태 관리(useState)에서 관리해서 사용한다고 이해하면 된다.

 

기존 로그인 페이지 수정하기

소셜 로그인 중 구글 로그인으로 처리해주기 위해 google.svg를 다운받아서 ima 태그에 넣어주고 스타일을 적용해서 구글 로그인 버튼을 만들어준다.

            <button 
                type="button"
                onClick={handleSubmit} 
                disabled={isDisabled}
                className="w-[300px] flex items-center justify-center gap-4 border border-white rounded-sm py-2 hover:bg-[#CEEDFF] hover:text-black transition-colors">
                <img
                    src="/images/google.svg"
                    alt="google logo image"
                    className="w-5 h-5"
                />
                <span>구글 로그인</span>
            </button>

• 위의 과정 설명해서 언급했듯이, 페이지를 이동해주는 과정이 필요하다. 

    const handleGoogleLogin = () => {
        window.localStorage.href = import.meta.env.VITE_SERVER_API_URL + "/v1/auth/google/login";
    }

• 이런 식으로 적용하고, 구글 로그인 버튼에 onClick에도 설정을 해준다. 
• 그럼 아마 서버가 켜져있으면 이동을 할 것이다. (구글 인증 페이지로 리다이렉트시킨 단계)
• 그 다음, 구글 인증 어떤 식으로 할지 정한다. 그럼 아마 경로에 맞게 화면이 띄워질 것이다. 
• 구글 콜백으로 위에서 얘기한 4가지 속성이 담겨져 올 것이다.
• 근데 경로에 함께 담겨져 오는데 이것도 페이지 하나를 채워야 한다. /v1/auth/google/callback 페이지가 있어야 한다!
• App.tsx에서 새 페이지 관련된 걸 작성하고, 페이지를 만들어준다. -> GoogleLoginRedirectPage.tsx

• 위 콘솔에 찍힌 내용은 앞에서 얘기한 4가지 속성을 의미한다.
• window.location.search는 그 뒤에 쿼리 파라미터들을 가져오는 것이다. 
• 그 다음에 이전 강의 내용에서 만들었던 useLocalStorage를 가져와서 accessToken과 refreshToken 관련된 것을 useEffect를 사용해서 처리하고, MyPage로 리다이렉트 되도록 작성해준다.  

import { useEffect } from "react";
import { useLocalStorage } from "../hooks/useLocalStorage";
import { LOCAL_STORAGE_KEY } from "../constants/key";

const GoogleLoginRedirectPage = () => {
  const { setItem: setAccessToken } = useLocalStorage(LOCAL_STORAGE_KEY.accessToken);
  const { setItem: setRefreshToken } = useLocalStorage(LOCAL_STORAGE_KEY.refreshToken);
  
  useEffect(() => {
    const urlParams = new URLSearchParams(window.location.search);
    const accessToken = urlParams.get(LOCAL_STORAGE_KEY.accessToken);
    const refreshToken = urlParams.get(LOCAL_STORAGE_KEY.refreshToken);

    if (accessToken) {
      setAccessToken(accessToken);
      setRefreshToken(refreshToken);
      window.location.href = "/my"; 
    }
  }, [setAccessToken, setRefreshToken]);

    return (
    <div>구글 로그인 리다이렉트 화면</div>
  )
}

export default GoogleLoginRedirectPage;

• 이렇게 코드를 작성해주면, 아래처럼 정상적으로 리다이렉트 되는 걸 알 수 있다!

• 위의 로그인 코드는 맞을 수도 있지만, 다른 코드에서는 서버의 구현에 따라서 되게 많이 달라질 것이다. 위 코드들은 전형적인 토큰 방식이고, 어떤 팀 같은 경우는 쿠키 방식으로 할 수도 있다. 쿠키 방식으로 할 경우는 쿠키를 받기 위해서 axios.ts에서withCredentails: true로 해야 쿠키가 잘 처리될 것이고, cors 그런 것들도 잘 고려해서 처리하면 된다.