react-google-login 을 통해서 구글 로그인 구현하기

 

 

 

 

node js를 통해서 oauth2를 구현하는 방법도 있지만, 

라이브러리를 통해서 react(프론트엔드)단에서 바로 구글 로그일을 구현하는 방법도 있다. 

 

 

 

React Google Login 라이브러리 설치

npm install react-google-login

먼저 해당 라이브러리를 설치해준다. 

 

 

 

사용하기

import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';


//로그인 성공했을 떄 처리 함수 
const successGoogle = (response) => {
  console.log(response);
}

//로그인 실패했을 때 처리 함수 
const failGoogle = (response) => {
  console.log(response);
}

ReactDOM.render(
  <GoogleLogin
    clientId="발급받은 사용자 키"
    buttonText="Login"
    onSuccess={successGoogle}
    onFailure={failGoogle}
    cookiePolicy={'single_host_origin'}
  />,
  document.getElementById('googleButton')
);

사용방법은 정말 간단하다. <GoogleLogin>을 통해서 클라이언트 키, 버튼, 성공/실패 처리함수 cookiePolicy를 넣어주면 끝이다. 

button custom, 로그인 유지, 로그아웃과 같은 기능도 있는데 공식 페이지에서 정확한 사용법을  확인할 수 있다. 

 

 

(참고한 사이트)

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

react-google-login