[TIL] React 카카오/구글 로그인 구현하기

Google Login

1. Google Developers에 애플리케이션 등록

Google Developers
메뉴 -> API 및 서비스 -> 사용자 인증 정보 에서 사용자 인증 정보를 만들면 되는데, 유형은 웹 애플리케이션으로 만들고 RedirectURI와 React가 실행되는 주소를 등록

2. react-google-login 패키지 다운로드

$ yarn add react-google-login

구현

import GoogleLogin from "react-google-login"

const LoginGoogle = () => {
  render (
    <GoogleLogin 
		clientId={clientId}
		onSuccess={onSignIn}
		onFailure={onFailured}
		cookiePolicy={'single_host_origin'}
		responseType={"id_token"}
		render={customForm}	// 구글 로그인 버튼의 사용자 정의 폼 지정
		/>
  )
}

clientId는 애플리케이션 등록시 발급받았던 clientId를 등록해주면 되고, onSuccess 속성으로 로그인 성공시 실행할 로직, onFailure는 로그인 실패시 실행할 로직을 등록해줘야 한다.

Kakao Login

1. Kakao Developers에 애플리케이션 등록 후 Javascript Key 발급받기

Kakao Developers

2. react-kakao-login 패키지 다운로드

$ yarn add react-kakao-login

3. 구현

import KakaoLogin from 'react-kakao-login'

const LoginKakao = ()=>{
  render(
    <div>
    	<KakaoLogin
    		onSuccess={result=>console.log(result)}
		onFail={err=>console.log(err)}
		token={Kakao_JSKey}
		neddProfile={true} 	// optional
		useLoginForm={true}	// optional
		/>
    </div>
  )
}

구글 로그인과 마찬가지고 onSuccess, onFail은 각각 로그인 성공/실패시 실행할 비즈니스 로직이다. token에는 애플리케이션 등록시 발급받은 Javascript Key를 등록하면 작동할 것이다.

마치며

스프링과 함께 리액트에 대해서 공부를 진행하고 있는데, 확실히 자바스크립트 쪽이 쉽게 원하는 것을 구현할 수 있도록 되어있는 것 같다. 스프링 부트로 넘어오면서도 많은 부분이 간소화되어 쉽다고 생각했는데, 아직 자바스크립트만큼은 아닌거같다.