Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(2)

이전 포스팅(Google OAuth2 - 구글 로그인 with React, Vue (2022 ver) - React(1))에서

결과물로 얻은 값은 jwt라고 하는데 jwt는 (Json Web Token)의 약자로,

Json 포맷을 이용해 인증에 필요한 정보를 암호화 한 웹 토큰이라고 한다.

자세한건 아래 블로그 참고

https://velog.io/@khy226/jwt로-로그인-기능-만들기-React-Rails

jwt로 로그인 기능 만들기 (React + Rails )

 

먼저 이전 포스팅에서 획득한 jwt의 해석을 위해 jwt-decode 설치

npm install jwt-decode

 

설치 후 App.js에 아래 코드를 추가해준다.

import jwt_decode from 'jwt-decode'

function handleCallbackResponse(res){
    console.log('Encoded JWT ID token: ' + res.credential);
    let userObject = jwt_decode(res.credential);
    console.log(userObject);
}

jwt-decode 를 import 해준 뒤 callback 다루는 함수에 두줄 추가해서

이전에 얻은 jwt 가 디코딩 된 결과를 출력해보자

 

decode된 jwt를 출력한 결과다. Object 형태인걸 보아 state에 넣어 사용하면

원하는 값을 뽑아 쓸 수 있을 것으로 보인다. 

import { useEffect, useState } from 'react'
import jwt_decode from 'jwt-decode'
import './App.css';

function App() {
  const [user, setUser] = useState({});

  function handleCallbackResponse(res){
    console.log('Encoded JWT ID token: ' + res.credential);
    let userObject = jwt_decode(res.credential);
    console.log(userObject);
    setUser(userObject);
    document.querySelector('#G_OAuth_btn').hidden = true;  // 로그인 시 로그인 버튼 감추기
  }

(생략)

  return (
    <div className="App">
      <div id='G_OAuth_btn'></div>
      { user &&
        <div>
          <img src={user.picture} />
          <h3>{user.name}</h3>
        </div>
      }
    </div>
  );

위 코드를 통해 이제 로그인하면 내 프로필 사진과 이름이 나오고 로그인 버튼은 숨게 된다.

 

 

여기에 로그아웃 기능까지 간단하게 구현한 전체 코드는 아래와 같다.

import { useEffect, useState } from 'react'
import jwt_decode from 'jwt-decode'
import './App.css';

function App() {
  const [user, setUser] = useState({});

  function handleCallbackResponse(res){
    console.log('Encoded JWT ID token: ' + res.credential);
    let userObject = jwt_decode(res.credential);
    console.log(userObject);
    setUser(userObject);
    document.querySelector('#G_OAuth_btn').hidden = true;
  }

  function handleSignOut(){
    setUser({});
    document.querySelector('#G_OAuth_btn').hidden = false;
  }

  useEffect(()=>{
    /* global google */
    google.accounts.id.initialize({
      client_id: '클라이언트 ID', 
      callback: handleCallbackResponse
    })

    google.accounts.id.renderButton(
      document.getElementById('G_OAuth_btn'), 
      { theme: 'outline', size: 'large' }
    )
  }, [])

  return (
    <div className="App">
      <div id='G_OAuth_btn'></div>
      { Object.keys(user).length != 0 &&
        <button onClick={()=>handleSignOut()}>Sign Out</button>
      }
      { user &&
        <div>
          <img src={user.picture} />
          <h3>{user.name}</h3>
        </div>
      }
    </div>
  );
}

export default App;

여기까지가 Google OAuth2 - React 연동 과정 끝이다.

위 과정을 통해 필요한 데이터를 다 받을 수 있으니

나머지 로그인 과정은 OAuth2와 관련이 없다고 생각하니 알아서 해보길 바란다.

 

 

혹시나 안되는 분들을 위한 샘플 프로젝트

https://github.com/cchoseonghun/React_Google_OAuth2_Sample

GitHub - cchoseonghun/React_Google_OAuth2_Sample

 

** 해당 과정에 변경점이 있다면 댓글로 알려주시기 바랍니다.