[React.js] 리액트js 구글 로그인 구현하기

사용할 모듈

- https://www.npmjs.com/package/react-google-login

react-google-login

- https://github.com/anthonyjgrove/react-google-login

시작하기

우리는 사이트를 개발할 때에는 대부분 사용자의 정보가 필요합니다. 글을 쓸 때나 댓글을 달 때와 같은 기본적인 기능 뿐만 아니라 사용자의 입맛에 맞게끔 구현하는데 있어서 사용자 정보는 필수가 되었습니다.

사용자는 귀찮음을 싫어하기 때문에 유명한 사이트가 아니면 그 사이트에 회원가입을 꺼려합니다. 그렇기에 우리는 유명한 사이트의 기본 유저 데이터를 이용해서 사용자가 로그인을 이끌게 끔 해야합니다.

 

이번 포스팅은 수많은 사람들이 하나쯤은 있는 구글 계정을 이용해서 우리가 제작하는 사이트의 이용을 이끌도록 소셜로그인을 구현해보도록 하겠습니다.

 

모듈 설치하기

// yarn
yarn add react-google-login

// npm
npm install react-google-login

만들어 둔 React.js프로젝트에 react-google-login을 설치해줍니다.

준비완료!

 

컴포넌트 구현하기

// GoogleButton.js

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

const clientId = "OAuth Web Client ID";

export default function GoogleButton({ onSocial }){
    const onSuccess = async(response) => {
    	console.log(response);
    
        const { googleId, profileObj : { email, name } } = response;
        
        await onSocial({
            socialId : googleId,
            socialType : 'google',
            email,
            nickname : name
        });
    }

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

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

프로젝트에 GoogleButton.js파일을 만들어 준 후, 이와 같이 작성합니다. onSocial은 구글로그인이 성공하게 되면 받은 데이터를 이용해 웹사이트 서버와 연결하는 함수입니다. 

웹사이트 서버 로그인 함수가 구현되어 있지 않다면 onSocial을 지우고 console.log(response);를 이용해 데이터를 확인하시면 됩니다.

 

GoogleLogin 기본 파라미터 알아보기

- clientId : OAuth Client ID입니다. 설정 및 ClientID를 구하는 방법은 밑에 상세히 알아보도록 합시다.

- onSuccess : 구글 로그인을 성공했을 때 response를 받아오게 됩니다.

- onFailure : 구글 로그인을 실패했을 때 error object를 받아오게 됩니다.

- responseType : 구글 로그인을 성공할 때 어떤 response를 받아올지 결정합니다. 자세한 responseType은 github에서 확인할 수 있습니다.

 

클라우드 구글 플랫폼에서 OAuth설정하기 (clientID 얻기)

접속 : console.developers.google.com/?hl=ko

Google Cloud Platform

구글 로그인 후 접속해줍니다.

 

초기 화면

 

프로젝트 생성

프로젝트가 없으면 만들어줍니다. 저는 프로젝트 이름을 'Google Login'로 만들어준 상태이기에 밑에 프로젝트가 있지만 만든 적이 없으신분은 없으실 겁니다.

 

프로젝트 생성화면

이름은 마음대로 작성하신 후 만들기 버튼 클릭!

사용자 인증 정보화면으로

사용자 인증 정보 탭으로 이동합니다.

사용자 인증 정보 만들기 클릭합니다.

OAuth 클라이언트 ID 클릭합니다.

애플리케이션 유형 -> 웹 애플리케이션 클릭합니다.

이름은 마음껏 작성해준 후 URI 추가 버튼 클릭

URI를 작성해줍니다. 이때 개발서버를 등록하고 싶을 경우 http://localhost:포트넘버 로 입력해주시면 됩니다.

입력이 완료되었으면 하단에 있는 만들기 버튼을 눌러주세요.

 

클라이언트 ID가 만들어진 모습

클라이언트 ID가 만들어진 것을 확인할 수 있습니다!

클라이언트 ID를 복사해 clientID에 복사 붙여넣기를 하시면 됩니다.

 

마무리

우리는 사이트를 개발할 때 '거의' 필수로 사용되는 소셜로그인 중 구글로그인을 이용해 개발해보았습니다. 잘 만들어진 모듈과 간단한 구글의 설정으로 포스팅이 길어지지 않았습니다.

좀 더 디테일한 포스팅(특히 설정부분)이 없어 과정을 모두 담았으며 여러분들께 도움이 되면 좋겠습니다. 감사합니다!