React 구글(Google)로그인

1. Google Cloud Platform 클라이언트 ID 발급

구글 로그인을 하기에 앞서 console.cloud.google.com에서 클라이언트 ID를 발급 받아야 합니다.


(1) 프로젝트를 생성합니다.

(2) 프로젝트 생성 후 API 및 서비스 탭에서 사용자 인증정보에 들어갑니다. 상단 사용자 인증 정보 만들기를 클릭 후 OAuth 클라이언트ID를 선택합니다.

(3) react 3000번 포트로 브라우저, 리다이렉션 uri를 작성하였습니다.

모든 작업이 끝나면 아래의 클라이언트 ID를 발급받을 수 있으면 해당 값을 복사합니다.

2. React 구글 로그인 구현

react-google-login 패키지를 설치 후 아래 GoogleLogin에 클라이언트 ID를 입력합니다.

import React from 'react'
import styled from 'styled-components'
import { GoogleLogin } from 'react-google-login';

const SigninPage: React.FC = () => {

    const responseGoogle = (response: any) => {
        console.log(response);
      }

    return (
        <SignInContainer>
            <Container>
                <ContainerTop>
                   <h1>Sign In whith Google</h1>
                </ContainerTop>
                <ContainerBody>
                <GoogleLogin 
                         clientId="클라이언트ID 입력"
                         buttonText="GoogleLogin"
                         onSuccess={responseGoogle}
                         onFailure={responseGoogle}
                         cookiePolicy={'single_host_origin'}
                    />
                </ContainerBody>
            </Container>
        </SignInContainer>
    )
}


export default SigninPage;

const SignInContainer = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
`

const Container = styled.div`
  border: 2px solid grey;
  box-shadow: -5px 5px darkgray;
  width: 600px;
  height: 500px;
`

const ContainerTop = styled.div`
    background-color: white;
    border: none;
    text-align:center;
`

const ContainerBody = styled.div`
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 300px;
`

구글로그인을 시도하면 개발자 툴에서 다음과 같은 결과를 확인할 수 있습니다.