리액트 프로젝트에 구글 로그인 연동하기

리액트를 이용하여 개발할 때, 구글 로그인을 연동하는 방법에 대해 알아보겠습니다.

1. Google Cloud Platform에 프로젝트 만들기

구글 인증을 사용하기 위해는 Google Cloud Platform에 접속하여, 프로젝트를 생성해야 합니다.

Google Cloud Platform

구글 로그인을 연동하고자 하는 서비스 이름으로 만들어주세요.

 

2. 사용자 인증 정보 만들기

프로젝트 생성 이후 대시보드에서 다음과 같이 이동해주세요.

좌측 메뉴의 사용자 인증 정보 - OAuth 클라이언트 ID 만들기에 오셔서 해당하는 정보들을 적어주고, URI에는 http://localhost:3000을 넣어주세요.

 

3. Google Login 모듈 설치하기

콘솔창에서 다음과 같이 입력하여 react-google-login 모듈을 설치합니다.

// yarn
yarn add react-google-login

// npm
npm i react-google-login

이후, 구글 로그인 버튼에 대한 Component를 생성해주세요.

import React from 'react';
import GoogleLogin from 'react-google-login';

const clientId = "위의 Google Cloud Platform에서 발급받은 Client ID";

export default function GoogleLoginBtn({ onGoogleLogin }){
    const onSuccess = async(response) => {
        const { googleId, profileObj : { email, name } } = response;
        
        await onGoogleLogin (
          // 구글 로그인 성공시 서버에 전달할 데이터
        );
    }

    const onFailure = (error) => {
        console.log(error);
    }

    return(
        <div>
            <GoogleLogin
                clientId={clientId}
                responseType={"id_token"}
                onSuccess={onSuccess}
                onFailure={onFailure}/>
        </div>
    )
}

여기까지 기본적인 사용방법에 대해 알아보았습니다.

콜백 데이터 및 Hook 등 추가 정보는 아래 링크에서 확인해주세요.

리액트 구글 로그인

react-google-login