GoogleLoginButton.js

import {GoogleLogin} from "@react-oauth/google";
import {GoogleOAuthProvider} from "@react-oauth/google";
import { useNavigate, Navigate } from "react-router-dom";

import base64 from 'base-64';
import axios from 'axios';

/*

*/


const GoogleLoginButton = () => {
    const clientId = '716858812522-rb0pfisq317unkh4so5hvbu16p19kqp8.apps.googleusercontent.com'
	const navigate = useNavigate();
	const goMain = () => {
		navigate("/main");
	}
    return (
        <>
            <GoogleOAuthProvider clientId={clientId}>
                <GoogleLogin
                    onSuccess={(res) => {
						/* 발급받은 토큰은 . 을 기준으로 3 개로 나뉜다.
						aaaa.bbbb.cccc
						
						[base64]aaaa: 헤더
						[base64]bbbb: 페이로드 (실질적인 데이터)
						[RS256]cccc: 서명
						
						RS256 : 암호화 알고리즘, JWT 서명할 때 사용한다고 함
						*/
						
						let datas = res.credential.split('.')
						const obj = JSON.parse(b64DecodeUnicode(datas[1]));
						console.log(obj);
						let response = commuTest(obj);
						console.log(response);
						if (response) {
							goMain();
						}
                    }}
                    onFailure={(err) => {
						console.log("Login Failed");
                        console.log(err);
                    }}
                />
            </GoogleOAuthProvider>
        </>
    );
};

function b64DecodeUnicode(str) {
    // Going backwards: from bytestream, to percent-encoding, to original string.
    return decodeURIComponent(atob(str)
		.split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));
}

async function commuTest(payloadObj) {

    const response = await axios({
		url: 'http://localhost:8080/login', // 통신할 웹문서
		method: 'post', // 통신할 방식
		data: payloadObj
	});
	
	console.log(response)
	
	if (response.status === 200) {
		return response.data;
	}
	else {
		return null;
	}
	
}

export default GoogleLoginButton