[FastAPI + React] 소셜 로그인 구현 (2) React

github - https://github.com/sku-likelion11th/sportFestival_wave_front.git

GitHub - sku-likelion11th/sportFestival_wave_front: 2023 영암체전 波動

웹 페이지 - https://wave-renew.sku-sku.com 

혹시 2023 영암체전을 아세요?

이번에는 구글 소셜 로그인 리액트 측 처리를 다뤄보도록 하겠다.

 

물론 내가 깃허브에 구현한 코드와는 다르고 정리된 방법이니 코드를 읽을 땐 아 이렇게 구현했구나~ 생각하면 편하다.

---

 

이번에는 리액트 측에서 어떻게 구글 서버로 인증 요청을 보내고 응답을 받는지 구현해보도록 하겠다.

npx create-react-app frontend
cd frontend
npm install @react-oauth/google@latest

먼저 리액트 프로젝트를 생성해주고, @react-oauth/google 라이브러리를 설치해주도록 하겠다.

라이브러리를 사용하지 않고 만드는 방법도 있지만, 굳이 직접 만들 필요가 있는지 따져보고 만들도록 하자

직접 만드는 방법도 원리가 크게 다르지 않다.

우리가 이번에 할 것은

1. 구글 인증 서버로 로그인 정보를 요청하고

2. 로그인 된 사용자 정보를 돌려받으면

3. 백엔드로 사용자 정보를 돌려주기

이 세 가지를 진행해보도록 하겠다.

 

먼저 우리가 인증 요청을 보낼 클라이언트 ID부터 찾아준다.

index.js를 수정해준다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { GoogleOAuthProvider } from '@react-oauth/google';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <GoogleOAuthProvider clientId={process.env.REACT_APP_GOOGLE_AUTH_CLIENT_ID}>
      <App />
    </GoogleOAuthProvider>
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

여기서 참고로 GoogleClinet ID는 숨겨주는 것이 좋다.

난 .env를 사용해서 git 형상 관리에서 제외하여 사용했다.

리액트 최상위 디렉토리에서 .env를 만들면 된다.

create-react-app으로 생성된 프로젝트에서 .env의 변수명엔 규칙이 있는데

REACT_APP_GOOGLE_AUTH_CLIENT_ID="구글 클라이언트 ID"

REACT_APP으로 시작해야한다는 규칙이 있다. 다음과 같이 작성해주고 사용하도록 하자.

 

그리고 당연히 .gitignore에 추가를 해주어야 한다.

 

그리고 구글 로그인 Component를 하나 만들어준다.

이제 코드를 작성해줄건데, 당연히 라이브러리에서 지원하는 다양한 스타일이 있다.

https://github.com/MomenSherif/react-oauth

GitHub - MomenSherif/react-oauth: Google OAuth2 using the new Google Identity Services SDK for React 🚀

해당 라이브러리의 Github이므로 README를 읽어서 사용법을 익히면 더욱 좋다.

 

import { GoogleLogin } from '@react-oauth/google'
import React from 'react'

export const GoogleLoginBtn = () => {
	return (
		<>
			<GoogleLogin
				onSuccess={(response) => {
					console.log(response);
                    //로그인 성공 시 response라는 이름으로 값이 돌아옴
				}}
				onError={() => {
					console.log("Login Failed");
                    //로그인 실패 시 Login Failed가 console로 출력
				}}
				width={"500px"}
				/>
		</>
	)
}

export default GoogleLoginBtn

간단하게 로그인 컴포넌트를 만들어주고, App.js를 수정해준다.

import './App.css';
import { GoogleLoginBtn } from './components/GoogleLoginBtn';

function App() {
  return (
    <div className="App">
      <GoogleLoginBtn />
    </div>
  );
}

export default App;

GoogleLoginBtn 컴포넌트를 호출해주고 npm start를 통해 서버를 열어보자

 

이런 그지같은 모양이 나온다.. 예쁘게 커마도 가능하니 걱정말 것

로그인을 진행하면, 구글 서버에서 인증에 성공할 경우 다음과 같은 값이 response로 돌아온다.

이 값을 따로 바로 백엔드로 보내주면 JWT토큰을 쉽게 만들 수 있다.

jwt.io에서 간단하게 디코딩하여 결과 값을 볼 수 있다.

구글에서 발행한 token

이 문자열을 디코딩해서 backend 서버로 넘겨주기만 하면 된다.

아니면 백엔드 서버에서 디코딩하도록 만들어주는 것도 좋다.

 

이 글에서는 리액트에서 decode해서 백 서버로 넘겨보도록 하겠다.

npm install jwt-decode

jsonwebtoken 라이브러리를 설치해준다.

GoogleLoginBtn 컴포넌트를 수정해준다.

 

import { GoogleLogin } from '@react-oauth/google'
import jwtDecode from 'jwt-decode' //라이브러리 import
import React from 'react'

export const GoogleLoginBtn = () => {
	const loginHandle = (response) => {
		console.log(response)
		const decode_token = jwtDecode(response.credential) //token decode
		console.log(decode_token)
	}
	return (
		<>
			<GoogleLogin
				onSuccess={loginHandle}
				onError={() => {
					console.log("Login Failed");
				}}
				width={"500px"}
				/>
		</>
	)
}

export default GoogleLoginBtn

간단하게 구현이 됐다.

백엔드로 넘겨서 사용하는건 다음에 작성하도록 하겠다.

로그인 버튼 스타일 바꾸는 법

이 내용 또한 모두 https://github.com/MomenSherif/react-oauth에 기록되어 있다.

GoogleLogin 컴포넌트에 type 속성을 추가할 수있다.

https://developers.google.com/identity/gsi/web/reference/js-reference?hl=ko#type 

Google JavaScript API로 로그인 참조  |  Authentication  |  Google for Developers

이런식으로 prop을 추가해주면 되는데 문서에 나온대로 사용해보면 된다.

			<GoogleLogin
				onSuccess={loginHandle}
				onError={() => {
					console.log("Login Failed");
				}}
				width='300px' //버튼 크기 지정
				text="continue_with" //로그인 버튼 텍스트 지정 (구글에서 제공하는 문구만 사용)
				locale='zh_CN' //언어 표시
				shape='circle' //버튼 shape 지정
				theme='filled_blue' //테마 blue 또는 black
				logo_alignment='left' //로고 정렬 위치
                useOneTap='true'//팝업 창을 띄우지 않고 현재 탭에서 로그인
				/>

위의 코드를 적용하면 이런 결과가 나온다.

이런 식으로 사용해주면 된다.

 

useOneTap 속성은 팝업창을 새로 띄우지 않고 현재 탭에서 로그인 가능하도록 해준다.

Figma같은 사이트에서 이런 스타일을 사용한다.

 

그외에도 다양한 속성들이 있으니 잘 사용해보면 좋다.

모두 다루기에는 많은 분량이므로 이정도만 작성하도록 하겠다.