[React] 구글 로그인 Google OAuth2.0

회사에서 진행하고 있는 서비스에 SNS 간편 로그인을 추가 하기로 하였다. 처음에는 react-google-login 모듈을 사용하여 구현하려 하였지만 웹용 Google Sign-In Javascript Platform Library가 중단될 예정이라 새로운 웹용 Google ID 서비스 SDK를 사용해야 한다고 한다.

OAuth 웹 클라이언트 ID

먼저 구글 클라우드 플랫폼에서 Client ID를 발급받아 프로젝트의 .env 파일에 추가해 준다. 발급받는 내용과 초기 세팅 방법은 이미 구글에 많이 있으니 참조에 달아놓은 블로그를 참고하여 받으면 된다.

코드

react-google-login 대신에 구글 공식 사이트에서 제안하는 gapi.auth2모듈을 사용할 것이기 때문에 script를 불러올 수 있는 커스텀 훅 useScript를 만들었다.

useScript

import { useEffect } from 'react';

const useScript = (url, onload) => {
  useEffect(() => {
    const script = document.createElement('script');

    script.src = url;
    script.onload = onload;

    document.head.appendChild(script);

    return () => {
      document.head.removeChild(script);
    };
  }, [url, onload]);
};

export default useScript;

GoogleLogin

window.google.accounts.id.initialize 메서드로 인증 자격 증명의 클라이언트 아이디와 로그인이 완료된 후 호출될 콜백을 설정해 주었다.

onGoogleSignIn 핸들러에서 구글 로그인 후 credential 토큰을 받아서 우리 서버에게 토큰을 전달해 주는 postGoogleLogin API 요청을 보내면 서버는 받은 토큰 값으로 로그인 처리를 수행한 다음, 인증 정보가 담긴 토큰을 클라이언트에 전달해 준다.

window.google.accounts.id.renderButton 메서드로 로그인 버튼이 실제로 위치할 위치의 부모 요소와, 버튼의 스타일에 대한 option들을 설정해 줄 수 있는데 커스텀 버튼을 사용할 예정이기에 없어도 무방하다.

import React, { useRef } from 'react';
import useScript from 'hooks/useScript';
import { postGoogleLogin } from 'api/auth';

export default function GoogleLogin() {
  const googleSignInButton = useRef(null);

  const onGoogleSignIn = async (res) => {
    const result = await postGoogleLogin(res.credential);
    //콜백 함수
  };

  useScript('https://accounts.google.com/gsi/client', () => {
    window.google.accounts.id.initialize({
      client_id: process.env.REACT_APP_GOOGLE_CLIENT_ID,
      callback: onGoogleSignIn,
    });
    window.google.accounts.id.renderButton(googleSignInButton.current, {
      width: '250',
      type: 'icon',
      shape: 'circle',
    });
  });

  return (
    <div
      id="google-login-api"
      ref={googleSignInButton}
    />
  );
}

결과 화면처럼 구글 로그인 버튼을 사용하지않고 커스텀한 버튼을 사용하고 싶다면 구글 로그인 버튼을 display : none 을 해준 후 아래처럼 사용하면 된다!

  function onClickGooglelogin() {
    document.querySelector('[aria-labelledby="button-label"]').click();
  }

  <button onClick={onClickGooglelogin}> Login </button>

적용 결과

Google Login 버튼을 클릭하면 팝업이 잘 나온다!

⚡읽어주셔서 감사합니다!⚡
🙂틀린 부분이나 보완할 점이 있을 경우 언제든지 댓글 혹은 메일로 지적해 주시면 감사하겠습니다!🙂

Reference :

• 구글 OAuth2 연동용 클라이언트 아이디 및 비밀번호 발급받는 방법
• 구글 공식 사이트