[ React / Next ] Web Google Login 기능 구현 (gsi/client)

회사에서 Next를 사용하고 있는 Web의 Google Login 지원을 위해 웹용 Google 계정으로 로그인 기능을 구현해야 해서 많은 사람들이 사용하던 react-google-login 라이브러리를 사용하려고 했지만

더 이상 구글에서 지원하지 않는 객체를 사용하는 라이브러리라서 에러가 발생했다.

다른 라이브러리를 사용하려다가 아래의 구글 개발자 페이지를 참고하여 Google Identity Service(GSI)를 이용하여 로그인을 구현해보기로 했다.

공식 문서 링크

구글 개발자 페이지 Authentication - 웹용 Google 계정으로 로그인

Google 로그인 특징

- Google 계정으로 웹 서비스에서 사용자 인증을 쉽고 빠르게 관리할 수 있도록 한다.

- 사용자는 Google 계정에 로그인하고 동의하며 프로필 정보를 안전하게 플랫폼과 공유한다.

- Google 계정을 이용한 서비스 가입이란, Google 계정 소유자의 프로필 정보를 플랫폼과 공유하기 위한 동의를 얻는 단계이다.

- 일반적으로 이 공유 데이터를 사용하여 서비스에 새 계정이 생성되지만 필수적이지는 않다.

- 로그인이란, 이미 Google 계정을 이용하여 서비스 가입을 마친 사용자의 경우 활성 Google 계정을 사용하여 웹 서비스에 로그인하는 것을 의미한다.

Google Login Flow ( 우리 웹 서비스의 경우)

1. Google API Console 의 사용자 인증 정보 탭에서 OAuth 2.0 client 정보 생성 또는 확인. (clientId)

2. web-front 코드에 gsi/client srcipt 삽입.

3. 1번의 clientId 및 사용자 인증에 대한 응답 callback을 google initialize안에 세팅.

4. 구글 로그인 버튼을 클릭하여 발생시킬 함수를 만들고, Google에서 응답받은 accessToken(credential)을 이용하여, 서버에서 google측에 토큰 유효성 검사 후 사용자 정보를 요청하여 응답을 받음.

5. 응답 받은 사용자 정보를 통해 웹 서비스의 회원가입을 진행 (이 과정에서 웹 front단에서 서비스 이용 약관 동의 등을 추가적으로 받는다.)

6. 웹 서비스에 회원가입 및 로그인 완료.

Google로 로그인하기 버튼 노출 방법(구글에서 지원하는 로그인 버튼 노출 방법)

1. 코드에 gsi/client srcipt 삽입

<script src="https://accounts.google.com/gsi/client" async defer></script>

2. clientId 및 사용자 인증에 대한 응답 callback을 google initialize안에 세팅 및 renderButton method를 이용하여 구글 로그인 버튼을 렌더링 시켜줌.

window.onload = function () {
          google.accounts.id.initialize({
            client_id: "YOUR_GOOGLE_CLIENT_ID",
            callback: handleCredentialResponse
          });
          google.accounts.id.renderButton(
            document.getElementById("buttonDiv"),
            { theme: "outline", size: "large" }  // customization attributes
          );
          google.accounts.id.prompt(); // also display the One Tap dialog
        }

++ renderButtom 속성 값 참고

3. 전체 코드

<html>
  <body>
      <script src="https://accounts.google.com/gsi/client" async defer></script>
      <script>
         function handleCredentialResponse(response) {
          // response에 accessToken인 credential값을 얻을 수 있다. 
              console.log("Encoded JWT ID token: " + response.credential);
            }
            window.onload = function () {
              google.accounts.id.initialize({
                client_id: "YOUR_GOOGLE_CLIENT_ID",
                callback: handleCredentialResponse
              });
              google.accounts.id.renderButton(
                document.getElementById("buttonDiv"),
                { theme: "outline", size: "large" }  // customization attributes
              );
              google.accounts.id.prompt(); // also display the One Tap dialog
        }
    </script>
    <div id="buttonDiv"></div> 
  </body>
</html>

++ 참고 - initialize 속성 값.

google.account.id.initialize({ client_id, callback })

google.accounts.id.initialize 설정 값

Google JavaScript API로 로그인 참조 | Authentication | Google Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. Switch to English 의견 보내기 Google JavaScript API로 로그인 참조 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세

developers.google.com

Next.js를 이용한 Google Login 구현 코드 ( 코드 예시 )

import React, { useRef } from 'react';
import { GOOGLE_CLIENT_ID } from '../../../../common/const';
import useSocialLogin from '../../../../utils/useSocialLogin';

interface GoogleLoginProviderProps {
  children?: any;
}

const GoogleLoginProvider = ({ children }: GoogleLoginProviderProps) => {

  const googleRef = useRef<HTMLDivElement>();
  // 해당 부분은 각 소셜 로그인별 response accessToken를 받아서 우리 서버에 보내주는 커스텀 hook.
  const { responseCallback } = useSocialLogin({ socialId: 'google' });


  useEffect(() => {
    const script = document.createElement('script');
    script.src = 'https://accounts.google.com/gsi/client';
    document.body.appendChild(script);
    
    script.onload = () => {
      const { google } = window as any;
      const redirectUrl = `${location.origin}/login`;

      google.accounts.id.initialize({
        client_id: GOOGLE_CLIENT_ID,
        callback: onSignIn,
        auto_select: false,
        login_uri: redirectUrl,
      });
      google.accounts.id.renderButton( googleRef.current, {
     theme: "outline", size: "large" });
    };
  }, []);

  const onSignIn = async (res) => {
    await responseCallback({accessToken: res.credential});
  };

  return (
    <div style={{position: 'relative'}}>
	<!-- 나는 커스텀 디자인 버튼 사용을 위해, 실제 google-login-button을 css로 보이지 않게 처리해주었다. -->
        <div 
          id="google-login-button"
          ref={googleRef}
          style={{ opacity: 0, position: 'absolute', zIndex: 100, left: 0, top: 0, right:0, bottom: 0 }}
          />
          <div>
            {children}
          </div>
    </div>
  );
};

export default GoogleLoginProvider;

++ 참고 - responseCallback에서는 파라미터의 accessToken 값과 socialId 값을 받아서, 우리 서비스의 로그인 로직을 태워 로그인을 시도하고, 사용자 계정 정보가 없을 시(서비스에 회원 가입한 유저가 아닐 경우) 페이지 redirect를 통해 회원 가입을 로직을 타게 된다.

🌸 출처 🌸

OAuth 2.0을 사용하여 Google API에 액세스 하기

웹용 Google 계정으로 로그인

저작자표시 비영리 동일조건

'React' 카테고리의 다른 글

[ webpack ] React(리액트)와 webpack(웹팩) (0)	2023.03.05
[ React ] React Element 와 Component의 차이점 (0)	2023.02.24
[ React / Redux ] Redux 상태 관리 개념정리. (0)	2022.09.25
[ NEXT.JS ] Next.js에 대해 알아보기. (0)	2022.09.18
[ React / Recoil ] React의 상태관리 라이브러리 Recoil의 effects 사용하기. (0)	2022.07.11

🧚🏻 D_Dual Dev Blog🧚🏻

[ React / Next ] Web Google Login 기능 구현 (gsi/client)

Google 로그인 특징

Google Login Flow ( 우리 웹 서비스의 경우)

Google로 로그인하기 버튼 노출 방법(구글에서 지원하는 로그인 버튼 노출 방법)

Next.js를 이용한 Google Login 구현 코드 ( 코드 예시 )

'React' 카테고리의 다른 글

티스토리툴바

[ React / Next ] Web Google Login 기능 구현 (gsi/client)

Google 로그인 특징

Google Login Flow ( 우리 웹 서비스의 경우)

Google로 로그인하기 버튼 노출 방법(구글에서 지원하는 로그인 버튼 노출 방법)

Next.js를 이용한 Google Login 구현 코드 ( 코드 예시 )

'React' 카테고리의 다른 글

'React' Related Articles

티스토리툴바