react spa - boot 3 ) kakao 소셜로그인 연동

구조는 다음과 같다.

브라우저 -> 백엔드 요청

백엔드 -> 프론트로 300코드

브라우저 -> 카카오 서버로 인증 요청

카카오 -> 브라우저 (300, 토큰 전달)

브라우저 -> 백엔드 (토큰전달)

백엔드 -> 카카오(토큰 및 인가요청)

백엔드 -> 브라우저(세션id, crsf토큰전달)

 

마지막으로는 

code값 200으로 끝난다. 

 

rest api가 아닌 link 자체 이동을 해야하기 때문에

a 태그나 react의 link를 사용해야함. 

 

혹은

 

window.open을 사용해서 요청하고 

응답값이 잘 온다면 

부모 window에서 자식window 종료 후 

리다이렉팅 시켜줘야함.

 

해당 내용을 setInterval로 

window 자식의 cookie를 감지하고 

감지되고 체크한 뒤 맞다면

홈으로 랜딩시킨다. 

 

---

import React, { useEffect, useRef, useState, useCallback } from 'react';


const LoginPage = () => {
  const intervalId = useRef();

  // 카카오 로그인
  const kakaoLogin = async () => {
    const width = 500; // 팝업의 가로 길이: 500
    const height = 400; // 팝업의 세로 길이 : 500
    const left = window.screenX + (window.outerWidth - width) / 2;
    const top = window.screenY + (window.outerHeight - height) / 2;
	//_kakaowindow 에다가 자식 윈도우 저장
    let _kakaowindow = window.open(
      '백엔드주소',
      'kakako-',
      `width=${width},height=${height},left=${left},top=${top}`,
    );

    intervalId.current = setInterval(() => {
      if (!_kakaowindow?.document) return;

      const childcookie = _kakaowindow.document.cookie;
      const parentcookie = document.cookie;

      const [_key1, val1] = childcookie.split('=');
      const [_key2, val2] = parentcookie.split('=');
		
      // 맞으면 홈으로 라우팅
      if (val1 == val2) {
        navigate('/');
        _kakaowindow.close();
      }
    }, 4000);
  };

  useEffect(() => {
  	// 컴포넌트 destroy시에 interval 제거
    return () => clearInterval(intervalId.current);
  });



  return (
	로그인컴포넌트
  );
};

export default LoginPage;