[React] spring + react router, kakao login 프로세스 및 구현

요즘 사이트들 보면 카카오 로그인, 구글 로그인, 네이버 로그인 등 많다.

그래서 필요시 사용할겸 구현 해보았다

 

# kakao login process

https://developers.kakao.com/docs/latest/ko/kakaologin/common

Kakao Developers

 

# client section

react 폴더에서 

npm install react-router-dom 설치 해주기.

 

router 사용할 준비가 되었다.

 

# App.js에서 

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import KakaoLogin from './kakao/kakaoLogin';

function App() {
    return (
        <Router>
            <Routes>
                <Route path="/login" element={<KakaoLogin />} />
                {/* 다른 경로를 추가할 수도 있습니다 */}
                <Route path="/" element={<h1>Home Page</h1>} />
                <Route path="/home2" element={<h1>Home Page2</h1>} />
            </Routes>
        </Router>
    );
}

export default App;

 

 

# kakaoLogin.js에서

// KakaoLogin.js
import React, { useEffect, useState } from 'react';

function KakaoLogin() {
    const [kakaoInfo, setKakaoInfo] = useState({ client_id: '', redirect_url: '' });

    useEffect(() => {
        fetch('/kakao-info')
            .then((response) => response.json())
            .then((data) => {
                setKakaoInfo(data);
            })
            .catch((error) => console.error('Error fetching Kakao info:', error));
    }, []);

    return (
        <div>
            <a href={`https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoInfo.client_id}&redirect_uri=${kakaoInfo.redirect_url}`}>
                <img src="/img/kakao_login_medium.png" ></img>
            </a>
        </div>
    );
}

export default KakaoLogin;

 

 

이렇게 클라이언트 단은 작업 끝났다.

 

# kakao login design 

https://developers.kakao.com/docs/latest/ko/kakaologin/design-guide

Kakao Developers

 

 

# backend section

 

# client_id, redirect_url 담아주는 api

@Slf4j
@RestController
@RequiredArgsConstructor
@RequestMapping("")
public class KakaoLoginController {

    private final KakaoService kakaoService;
    private final UserService userService;

    @Value("${kakao.client_id}")
    private String client_id;

    @Value("${kakao.redirect_url}")
    private String redirect_url;

    @GetMapping("/kakao-info")
    public Map<String, String> getKakaoInfo() {
        Map<String, String> response = new HashMap<>();
        response.put("client_id", client_id);
        response.put("redirect_url", redirect_url);
        return response;
    }

}

 

# 카카오 login 토큰 값을 redirect_url에 받아오기 

https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${kakaoInfo.client_id}&redirect_uri=${kakaoInfo.redirect_url}

으로 하면 callback으로 kakao의 code 값을 받아옴. 즉 토큰 값을 받아옴.

그 값을 받아오면 회원가입 연동 되도록 해주면 됨.

 

# callback api

@GetMapping("/callback")
public void callback(@RequestParam("code") String code, HttpServletResponse response) {
    String accessToken = kakaoService.getAccessTokenFromKakao(code);
    KakaoUserInfoResponseDto userInfo = kakaoService.getUserInfo(accessToken);

    try {
        // 사용자 계정 확인
        if (userService.isUserExists(userInfo.getId())) { // 계정이 있는 경우
            response.sendRedirect("/"); // 메인 페이지로 리다이렉트
        } else { // 계정이 없는 경우
            // 새 계정 생성
            userService.registerOrGetUser(userInfo);

            Map<String, Object> responseData = new HashMap<>();
            responseData.put("message", "계정이 만들어졌습니다."); // 메시지 추가
            responseData.put("userInfo", userInfo); // 사용자 정보를 추가

            response.setContentType("application/json");
            response.setStatus(HttpServletResponse.SC_OK); // 정상 응답
            response.getWriter().write(new ObjectMapper().writeValueAsString(responseData)); // JSON 응답
        }
    } catch (IOException e) {
        e.printStackTrace();
    }
}

 

이렇게 하면 클라이언트 단에 만들어준 kakao login 버튼을 누르면

토큰 값 받아와서 로그인 인증 처리 한 후, 새로운 계정이면 회원가입을 시키고,

계정이 존재하면 바로 redirect로 넘어간다.