import { GoogleLogin } from "@react-oauth/google"; import { GoogleOAuthProvider } from "@react-oauth/google"; import { useNavigate, Navigate } from "react-router-dom"; import { useCookies } from 'react-cookie' // 안써도 자동으로 한국 시간을 불러온다. 명확하게 하기 위해 import import moment from 'moment'; import 'moment/locale/ko'; import base64 from 'base-64'; import axios from 'axios'; axios.defaults.withCredentials = true; /* */ const GoogleLoginButton = () => { const [cookies, setCookie, removeCookie] = useCookies(); 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 서명할 때 사용한다고 함 */ // 쿠키 테스트 1분 뒤 만료 const expires = moment().add('1','m').toDate() setCookie('cookieTest','hello',{expires}) let datas = res.credential.split('.') const obj = JSON.parse(b64DecodeUnicode(datas[1])); // 토큰을 보내 로그인 로직 처리 // 로그인이 정상적으로 되었다면 쿠키를 등록 let response = requestLogin(obj); console.log(cookies.jwt) 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 requestLogin(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