ECEtaskHelper: 소셜 로그인 기능 구현하기(2) (React + SpringBoot + OAuth2.0 + MySQL) 로그인 정보 표기

로그인이 제대로 되었는지 테스트를 위해 작성했던 리디렉션페이지들로 이동하지 않고, 로그인 직후 HomePage로 이동해 로그인한 회원 정보를 표기해보겠다. 

 

우선  LoginPage.js를 수정한다.

// src/main/frontend/src/pages/HomePage.js

import React, { useEffect, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import axios from 'axios';

function HomePage() {
    const [hello, setHello] = useState('');
    const location = useLocation();
    const navigate = useNavigate();

    // OAuth 리디렉션 처리
    useEffect(() => {
        const searchParams = new URLSearchParams(location.search);
        const code = searchParams.get('code');
        const oauthProvider = location.pathname.split('/').pop(); // URL 경로에서 OAuth 제공자 정보 추출

        if (code) {
            handleOAuthLogin(oauthProvider, code).then(r => {});
        }
    }, [location]);

    const handleOAuthLogin = async (oauthProvider, code) => {
        try {
            const response = await axios.get(`http://localhost:8080/oauth/login/${oauthProvider}?code=${code}`);
            const data = response.data;
            alert("로그인 성공: " + data);
            navigate("/home", { replace: true }); // URL을 /home으로 변경

        } catch (error) {
            alert("로그인 실패");
            navigate("/fail");
        }
    };

    // 백엔드의 /api/hello 엔드포인트로부터 데이터를 가져오는 비동기 요청
    useEffect(() => {
        axios.get('/api/hello')
            .then(response => {
                setHello(response.data);
            })
            .catch(error => {
                console.log(error);
            });
    }, []);

    // UI 렌더링
    return (
        <div>
            <h1>Welcome to the Task Helper</h1>
            <p>백엔드에서 가져온 데이터입니다: {hello}</p>
        </div>
    );
}

export default HomePage;

기존 코드와 달라진 점은 리디렉션 페이지들에서 처리하던 로그인을 HomePage에서 바로 처리하는 것이다. 이를 위해 다음과 같이 라우팅을 HomePage로 가도록 변경했다. 

 

App.js

// src/main/frontend/src/App.js

import React from 'react';
import { BrowserRouter, Route, Routes } from 'react-router-dom';

import HomePage from './pages/HomePage'; // HomePage 컴포넌트를 import
import SchedulePage from './pages/SchedulePage'; // SchedulePage 컴포넌트를 import
import SubjectInfoPage from "./pages/SubjectInfoPage"; // SubjectInfoPage 컴포넌트를 import
import AboutPage from './pages/AboutPage'; // AboutPage 컴포넌트를 import
import LoginPage from './pages/Login/LoginPage'; // LoginPage 컴포넌트를 import
import NavBar from './components/NavBar'; // NavBar 컴포넌트를 import

function App() {
    return (
        <div className="App">
            <BrowserRouter>
                <NavBar />
                <Routes>
                    <Route path="/" element={<LoginPage />} />
                    <Route path="/home" element={<HomePage />} />
                    <Route path="/schedule" element={<SchedulePage />} />
                    <Route path="/subjectInfo" element={<SubjectInfoPage />} />
                    <Route path="/about" element={<AboutPage />} />
                    {/* 리디렉션 페이지들을 HomePage로 통합 */}
                    <Route path="/oauth/redirected/kakao" element={<HomePage />} />
                    <Route path="/oauth/redirected/naver" element={<HomePage />} />
                    <Route path="/oauth/redirected/google" element={<HomePage />} />
                    <Route path="/fail" element={<div>로그인 실패</div>} />
                </Routes>
            </BrowserRouter>
        </div>
    );
}

export default App;

 

영상에서 보이는 바와 같이, 로그인 직후 메시지 확인 전에는 url에 쿼리파라미터가 포함되어 있는 것을 알 수 있다.

navigate("/home", { replace: true }); // URL을 /home으로 변경

 

따라서 위와 같이, /home으로 변경해주는 코드를 삽입하였다. 

 

현재 코드의 흐름은 다음과 같다.

 

1. 백엔드의 OauthController.java의 login 메소드가 oauth_member 테이블에서 로그인한 계정의 id 값을 반환한다.

@GetMapping("/login/{oauthServerType}")
ResponseEntity<Long> login(
    @PathVariable OauthServerType oauthServerType,
    @RequestParam("code") String code
) {
    Long login = oauthService.login(oauthServerType, code);
    System.out.println("로그인 성공, 반환된 ID: " + login); // 디버깅 로그 추가
    return ResponseEntity.ok(login);
}

 

2. HomePage.js에서 axios 요청으로 로그인한 계정의 id 값을 불러온다. 

const handleOAuthLogin = async (oauthProvider, code) => {
    try {
        const response = await axios.get(`http://localhost:8080/oauth/login/${oauthProvider}?code=${code}`);
        const data = response.data; // 응답 데이터로 로그인한 계정의 ID를 받아옴
        alert("로그인 성공: " + data);
        navigate("/home", { replace: true });
    } catch (error) {
        alert("로그인 실패");
        navigate("/fail", { replace: true });
    }
};

위에서 response.data가  id 값이다. 

 

이제 이 id값을 이용해 HomePage에서 로그인한 계정을 표기해보도록하겠다. 우선 백엔드에 사용자 정보를 조회하는 엔드포인트를 추가한다. 

 

OauthController.java

private final OauthService oauthService;
private final OauthMemberRepository oauthMemberRepository; // 이 부분을 추가

@GetMapping("/user/{id}")
public ResponseEntity<OauthMember> getUserInfo(@PathVariable Long id) {
    OauthMember member = oauthMemberRepository.findById(id).orElse(null);
    if (member != null) {
        System.out.println("사용자 정보 조회 성공, ID: " + id);
    } else {
        System.out.println("사용자 정보 조회 실패, 존재하지 않는 ID: " + id);
    }
    return ResponseEntity.ok(member);  // 여기서 반환되는 객체가 올바른지 확인
}

 

OauthMember 엔티티에 다음 어노테이션을 추가

@Entity
@Builder
@Data  // 추가
@AllArgsConstructor
@NoArgsConstructor(access = PROTECTED)

 

그리고 HomePage.js의 handleOAuthLogin을 다음과 같이 변경하고

const handleOAuthLogin = async (oauthProvider, code) => {
    try {
        const response = await axios.get(`http://localhost:8080/oauth/login/${oauthProvider}?code=${code}`);
        const userId = response.data; // 로그인한 계정의 ID를 받아옴
        alert("로그인 성공: " + userId);

        // 사용자 정보를 요청
        const userInfoResponse = await axios.get(`http://localhost:8080/oauth/user/${userId}`);
        console.log("받아온 사용자 정보:", userInfoResponse.data); // 데이터 구조 확인

        setUserInfo(userInfoResponse.data);

        navigate("/home", { replace: true }); // URL을 /home으로 변경
    } catch (error) {
        console.error("로그인 또는 사용자 정보 조회 중 오류 발생:", error);
        alert("로그인 실패");
        navigate("/fail", { replace: true });
    }
};

 

다음과 같이 사용자 정보 표기를 추가한다.

{userInfo && (
    <div>
        <h2>사용자 정보</h2>
        <p>ID: {userInfo.id}</p>
        <p>닉네임: {userInfo.nickname}</p>
    </div>
)}

 

다시 로그인해보면

 

로그 출력

API /api/hello was called
[Hibernate] 
    /* <criteria> */ select
        om1_0.id,
        om1_0.nickname,
        om1_0.oauth_server_id,
        om1_0.oauth_server,
        om1_0.profile_image_url 
    from
        oauth_member om1_0 
    where
        (
            om1_0.oauth_server_id, om1_0.oauth_server
        )=(
            ?, ?
        )
2024-07-31T21:09:05.669+09:00 TRACE 31764 --- [ECEtaskHelper] [nio-8080-exec-8] org.hibernate.orm.jdbc.bind              : binding parameter (1:VARCHAR) <- [111928446026694084216]
2024-07-31T21:09:05.670+09:00 TRACE 31764 --- [ECEtaskHelper] [nio-8080-exec-8] org.hibernate.orm.jdbc.bind              : binding parameter (2:ENUM) <- [GOOGLE]
로그인 성공, 반환된 ID: 4
[Hibernate] 
    select
        om1_0.id,
        om1_0.nickname,
        om1_0.oauth_server_id,
        om1_0.oauth_server,
        om1_0.profile_image_url 
    from
        oauth_member om1_0 
    where
        om1_0.id=?
2024-07-31T21:09:07.081+09:00 TRACE 31764 --- [ECEtaskHelper] [nio-8080-exec-4] org.hibernate.orm.jdbc.bind              : binding parameter (1:BIGINT) <- [4]
사용자 정보 조회 성공, ID: 4

 

다음 포스트에서는 로그인 유지 부분을 다루겠다. 현재는 다른 페이지로 이동했다 다시 HomePage로 돌아오면 회원 정보가 나타나지 않는다. 다른 페이지로 이동하면서 로그인이 유지되지 않기 때문이다.