React 카카오 소셜 로그인 Spring Boot 연동 , 리액트 카카오 로그인 (프론트엔드)

React, Spring Boot 카카오 소셜 로그인 , 리액트 카카오 로그인

 

 

 

먼저, 이 글을 작성하는 이유를 조금 써볼려고 한다.

관심없으면, 그냥 바로 밑의 코드를 확인하면 된다.

 

현재 나는 학교 졸업프로젝트를 진행중이고, 그 과정에서 소셜로그인을 구현하게 되었다.

 

저번주22일부터 구현을 시작했는데, 진짜 생각보다 너무 어렵게 느껴졌다.

 

구글링을 해봐도 React와 spring boot를 연동하는 글을 별로 없었고, 거기다 우리는 백엔드 설정상 좀 더 코드를 간단하게 작성가능한 카카오 라이브러리를 사용하지 않아서 더더욱 어렵게 느껴졌다.

 

최종 발표가 얼마남지 않은 시점에서 이 로그인 구현이 되지않으면 프로젝트 진행이 일절 되지않는 구조였기 때문에, 압박감과 스트레스는 생각보다 엄청났다... 내가 팀장이라 그런지 그 무언의 압박이 정말...

 

백엔드 팀과 정말 아침부터 새벽까지 계속계속 통신을 주고 받으면서 코드를 계속계속해서 수정하였고, 이 과정에서 진짜 리액트 관련 카카오 로그인 게시물을 작성한 모든 블로그를 찾아보았던거같다. 

 

코드도 5개 종류 정도로구성해서 다 돌려보면서 최대한 에러가 안나고 진행이 조금이라도 되는걸 위주로 계속계속 파고 들면서 진행하였다.

 

그리고 28일 아침에 스카에서 똑같이 작업하던 와중에 백엔드로부터 헤더값에 값이 잘넘겨져 왔고, 이때의 쾌감은 정말...

 

이후 조금조금씩 막히긴 했지만, 그래도 큰산을 넘었다는 생각에 더 탄력을 받아 진행하였고, 얼마 안되서 로그인을 완전히 구현할 수 있게 되었다.

 

누군가에게는 쉬울 수 있지만, 팀 프로젝트를 처음 진행해보고 프론트엔드를 나 혼자 담당하고 있었기에, 모든 정보는 나 스스로 찾아서 구현을 해야해서 공부도 많이 해야했고, 시간도 정말 많이 썼다. 

 

안될때는 이렇게 어려운게 있나 싶었는데, 막상 되니 별거아니였네? 라는 생각도 든다 ㅋㅋ

 

백엔드와 주고받는 로직을 잘 이해하고 있다면, 더 잘 해결할 수 있을 것이다.

 

해결해 나아가는 과정 자체는 그 어느때보다 힘들었지만, 그만큼 값진 경험이였다.

 

이 글을 남기는 이유는 내가 공부된걸 정리하는 이유도 있지만, 생각보다 구글에 필요한 정보가 많이 없었던 아쉬움에 나처럼 이런 고민을 하고 있을 누군가에게 조금의 도움이라도 주고 싶은 마음으로 글을 써본다.

 

생각보다 그냥 기록식의 블로그들이 많았지, 정보를 얻고자하는 사람에게 친절한 블로그는 별로 없었기도 하다.

 

 

------------------------------------------------------------------------------------------------------------------

 

 

전체적인 로직을 간단히 적어본다면,

 

 

1. 프론트엔드에서 카카오로부터 인가코드를 받아온다. 이후 이 인가코드를 백엔드 측으로 넘긴다.

2. 백엔드는 받은 인가코드를 처리하여 jwt토큰을 받아 헤더에 담아 프론트로 넘겨준다.

3. 헤더에 담겨져온 jwt토큰을 프론트에서 확인하여 로컬에 저장해둔뒤, 헤더와 request에 다시 담아 백엔드 측으로 넘긴다.

4. 백엔드는 받은 토큰을 가지고 유저정보를 카카오로부터 받아와 이 유저정보를 프론트로 넘긴다.

5. 프론트는 받은 유저정보를 로컬에 저장한 뒤, 이제 로그인 처리시키고, 필요한 정보들을 뽑아 사용한다.

 

 

내가 구글링을 해서 찾아봤을때, 인가코드를 넘겨 access  token과 refresh token을 백엔드로부터 넘겨받아 처리하는 방식이 대부분이였다. 이 방법은 그 방법과 다르니 그 방법으로 해결하고자 한다면, 큰 도움이 안될 것이다.

 

 

다른 방법으로 카카오라이브러리를 설치해서 사용하는 방법도 있는데, 이러면 프론트가 자체적으로 access token과 refresh token을 받아올 수 있다.

 

이 방법은 백엔드에서 이 토큰을 처리할 방법을 몰라 시도해보지 못했지만, 과정을 더 줄여줄 수 있을 것이다.

 

작성 코드 index.html

 

 

 

해당 코드 index.html에 추가

 

 <script
      type="text/javascript"
      src="//dapi.kakao.com/v2/maps/sdk.js?appkey=자바스크립트앱키&libraries=services"
      src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js"
      charset="utf-8"
    ></script>
    <script src="https://developers.kakao.com/sdk/js/kakao.js"></script>

 

 

 

작성 코드 kakaoLogin.js

 

 

각 코드의 필요한 설명들은 주석으로 기입해두었다.

 

해당 로직들을 이해한 뒤, 코드를 각자 프로젝트에 맞게 설정해줘야하는 부분들을 설정해주자.

 

 

(1) 앱키 설정 및 인가코드 받아오기

 

 

(2) 백엔드로부터 인가코드 넘기고 jwt 토큰 받는 코드

 

 

 

(3) 백엔드로 토큰 다시 넘기는 코드

 

 

 

(4) return 문 작성

 

 

 

 

 

 

 

 

 

 

 

import axios from "axios";
import React, { useEffect } from "react";
import { useNavigate } from "react-router-dom";
import "./kakaoLogin.css";

const KakaoLogin = () => {
  // 카카오 개발자 앱 키 선언
  const REST_API_KEY = "카카오RestAPI키"; // RestAPI 키
  const REDIRECT_URI = "http://localhost:3000/Macgyver/login"; // redirect 주소
  const KAKAO_AUTH_URI = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
  // 인가코드 받아오기
  const code = new URL(window.location.href).searchParams.get("code");

  // 로그인 성공시 MyPage로 이동시키기위해 useNavigate 사용
  const navigate = useNavigate();
  useEffect(() => {
    //////////////////////////////////////////////////////////////
    //       백엔드로부터 인가코드 넘기고 jwt 토큰 받기
    ////////////////////////////////////////////////////////////
    (async () => {
      try {
        const res = await axios
          // 백엔드 주소 뒤에 인가코드 붙여서 GET 설정
          // 백엔드는 이 주소를 통해 뒤에 붙여져있는 인가코드를 전달 받게 된다.
          .get(
            `http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/oauth/token?code=${code}`
          )
          // 백엔드 쪽에서 보내준 응답 확인
          .then((response) => {
            console.log("응답 확인", response);
            // 이때,
            // 백엔드로부터 받아온 헤더값에 저장되어있는 authorization 을 접근해 token 이라는 변수에 저장
            const token = response.headers.authorization;
            // 이 토큰은 프론트엔드, 즉 현재 내 서버에 저장시킨다.
            window.localStorage.setItem("token", token);
          });
        console.log(res);
      } catch (e) {
        // 에러 발생 시, 에러 응답 출력
        console.error(e);
      }

      // 위에서 setItem 을 사용하여 내부에 저장시킨 토크을 다시 불러온다.
      // 이때, 내부 저장소에서 가져온 토큰을 다시 token 이라는 변수에 담는다.
      const token = window.localStorage.getItem("token");
      ////////////////////////////////////////////////////////////
      //               백엔드로 토큰 다시 넘기기
      ////////////////////////////////////////////////////////////
      try {
        const res = await axios
          // 이때, post가 아닌 get으로 접근한다.
          // 접근 주소는 백엔드에서 설정한 주소로 한다.
          .get(
            "http://ec2-3-35-91-109.ap-northeast-2.compute.amazonaws.com:8081/api/user/mypage",
            {
              // 헤더값에는 받아온 토큰을 Authorization과 request 에 담아서 보낸다/
              headers: {
                Authorization: token,
                request: token,
              },
            }
          )
          // 위에서 백엔드가 토큰을 잘받고 처리해서 유저정보를 다시 넘겨준다면, 그 응답을 처리한다.
          // data 라는 변수에 유저 정보를 저장하고, setItem을 사용해 로컬에 다시 저장한다.
          .then((data) => {
            window.localStorage.setItem("profile", data);
            console.log(data);
            // 만약, 유저정보를 잘 불러왔다면 navigate를 사용해 프론트엔드에서 설정한 마이페이지 경로를 설정해서 이동시킨다.
            if (data) {
              navigate("../myPage");
            }
          });
      } catch (e) {
        // 에러 발생 시, 에러 응답 출력
        console.error(e);
      }
    })();
  }, []);

  return (
    <>
      <div className="KaKaoBtn">
        <a href={KAKAO_AUTH_URI}>카카오로 시작하기</a>
      </div>
    </>
  );
};

export default KakaoLogin;