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

Web Programming/React.js

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

AlpoxDev 2020. 7. 16. 05:10

사용할 모듈

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

react-google-login

A Google Login Component for React

www.npmjs.com

- 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);를 이용해 데이터를 확인하시면 됩니다.