react에서 구글로그인 구현-II(feat. @react-oauth/google)

> npm install @react-oauth/google 

 

 

MyGoogleLogin.jsx

import React from "react";
import axios from "axios";
import { useGoogleLogin } from '@react-oauth/google';
import { useNavigate } from "react-router-dom";

function MyGoogleLogin({ setIsLoggedIn }) {

    // handlers
    // AXIOS
    const handleLoginSuccess = async (res) => {
        console.log('handleLoginSuccess()');
        console.log('res: ', res);

        const accessToken = res.access_token; // Access Token
        console.log('Access Token: ', accessToken);

        try {
            const response = await axios.post(
                'http://localhost:8090/member/oauth/google',
                { accessToken }, // body 데이터
                {
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    withCredentials: true, // 쿠키 포함
                }
            );
    
            console.log('response.status: ', response.status);
    
            if (response.status === 200) {
                const result = response.data;
                alert("로그인 성공: " + result.signInResponse.message);
    
                // 액세스 토큰을 로컬 스토리지에 저장
                localStorage.setItem("accessToken", result.tokenResponse.accessToken);
    
                setIsLoggedIn(true);
                navigate('/');

            } else {
                alert("로그인 실패: " + response.data.signInResponse.message);

            }

        } catch (error) {
            if (error.response) {
                // 서버가 에러를 응답한 경우
                console.log('response error: ', error.response.data);
                alert("로그인 실패: " + error.response.data.signInResponse.message);

            } else {
                // 서버에 요청이 도달하지 못한 경우 또는 네트워크 에러
                console.error('Error during server communication:', error);

            }

        }

    }


    const handleLoginFailure = (err) => {
        console.log('handleLoginFailure()');

    }

    // hooks
    const googleLogin = useGoogleLogin({
        onSuccess: handleLoginSuccess, 
        onError: handleLoginFailure, 
        scope: 'profile email', // 필요한 권한
        flow: 'implicit', // 또는 'authorization_code' (권장)

    });

    const navigate = useNavigate();
    
    return(
        <button
            onClick={() => googleLogin()}
            style={{
                backgroundColor: '#4285F4',
                color: 'white',
                padding: '10px 20px',
                margin: '3px', 
                border: 'none',
                borderRadius: '3px',
                fontSize: '16px',
                cursor: 'pointer',
            }}
        >
            Google Login
        </button>
    );
}

export default MyGoogleLogin;

 

SignIn.jsx에 GoogleOAuthProvider 추가

import MyGoogleLogin from "./MyGoogleLogin";
import { GoogleOAuthProvider } from "@react-oauth/google";

... 생략

// var
const clientId = '-----';

return (
	<article>
		<div className="wrap">
			<input 
				type="text" 
				value={id} 
				placeholder="INPUT ID" 
				onChange={(e) => {
					setId(e.target.value);
				}}/><br />
			<input 
				type="password" 
				value={pw} 
				placeholder="INPUT PW" 
				onChange={(e) => {
					setPw(e.target.value);
				}}/><br />
			<button onClick={signinBtnClickHandler}>SIGN-IN</button>
			<br />
			<GoogleOAuthProvider clientId={clientId}>
				<MyGoogleLogin setIsLoggedIn={setIsLoggedIn} />
			</GoogleOAuthProvider>
		</div>
	</article>
);

 

Modify.jsx

... 생략
return (
	<article>
		<div className="wrap">
			<input 
				type="text" 
				value={id} 
				readOnly disabled
				/><br />
			<input 
				type="password" 
				value={pw} 
				placeholder="INPUT PW" 
				onChange={(e) => {
					setPw(e.target.value);
				}}/><br />
			<input 
				type="text" 
				value={mail} 
				readOnly disabled
				/><br />
			<button onClick={modifyBtnClickHandler}>MODIFY</button>
		</div>
	</article>
)

 

 

jwtex.zip

0.18MB