[Main-project] 지식 정리_Kakao OAuth

📍 소셜 로그인 (Kakao) 방법

1. Rest api 카카오 로그인 방법 사용
2. FE : 카카오로부터 인가코드를 받고 해당 정보를 백엔드가 요청한 api로 전달해주면 끝!
3. 백엔드에 인가 코드가 정상적으로 전달이 되었다면 백엔드에서는 응답값으로 토큰을 발급해줌
4. 해당 토큰을 받아와서 웹 브라우저의 로컬스토리지에 저장하면 완료!

[그림 설명]

소셜 로그인(Kakao) 로그인 연결

• 카카오에서 제공하는 로그인 RUL : https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code

• REST_API_KEY와 REDIRECT_URI는 백엔드에서 주는건데 리다이렉트 주소는 백엔드와 프론트엔드가 상의해서 결정해야함 (여기서 애먹어서 시간을 좀 보냈다)

  리다이렉트 주소를 배포 주소로만 해놨는데 카카오 서버에서 응답을 받고 리다이렉트 페이지(배포페이지)로 넘어가고 백엔드에서 인가코드를 보내주게 구현했는데 배포페이지에서 아무것도 확인이 안됨....
  
  확인을 해보니 리다이렉트 주소는 FE에서 확인이 가능하게 주소를 연결해야 된다고 함(ex.localhost:3000) 그래야 콘솔창에서 에러도 확인하고 응답이 잘 가고 받아왔는지 확인이 됨

// OauthLoginButton.js
import { styled } from 'styled-components';

const OauthButton = styled.button`
 // css 생략
`;

const OauthLoginButton = () => {
  const handleKakaoBtnClick = () => {
    window.location.assign(
      `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=f7f26eaa2223cfbd3da88212c84375c4&redirect_uri=http://localhost:3000/oauth/kakao/login`,
    );
  };

  return (
    <OauthButton onClick={handleKakaoBtnClick}>
      <div className="brand-logo">
        <img
          // eslint-disable-next-line no-undef
          src={process.env.PUBLIC_URL + '/assets/kakaologo_round.png'}
          alt=""
        />
      </div>
      <div className="button-desc">
        <b>Log in with</b>
        <br />
        <b>Kakao</b>
      </div>
    </OauthButton>
  );
};

export default OauthLoginButton;

Redirect

• 나는 카카오 서버로그인이 완료되고 리다이렉트 페이지를 따로 만들었고 URI는 BE분과 http://localhost:3000/oauth/kakao/login 주소로 연결을 해놔서 이 페이지에서 백엔드로 보낼 인가코드의 내용을 구현하였다.

• 백엔드 서버로 인가코드를 전달이 되고 응답을 잘 받아오게 된다면 콘솔창에 '성공했니'가 뜨면서 메인페이지로 돌아가게 된다. (만약 에러가 뜬다면 아무것도 없는 빈페이지만 뜨게 됨)

[코드]

// KakaoRedirect.js
import axios from 'axios';
import { useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import { login } from '../redux/actions';

export default function Kakao() {
  const navigate = useNavigate();
  // 토큰을 저장해주기 위한 상태 관리 
  const dispatch = useDispatch();

  useEffect(() => {
    const code = new URL(window.location.href).searchParams.get('code');
    console.log('인가코드', code);
    if (code) {
      const data = {
        provider: 'kakao',
        code: code,
      };
      axios
        .post(`http://3.39.76.109:8080/oauth/login`, data)
        .then((response) => {
          console.log(response);
          if (response.status === 200) {
            const token = response.headers.authorization;
            localStorage.setItem('jwtToken', token);
            console.log('성공했니');
            dispatch(login(token));
            navigate('/');
          }
        })
        .catch((error) => {
          console.log('에러', error);
        });
    }
  }, []);
  return <div></div>;
}

---

회고

막상 구현을 하고 나니 정말 어렵지 않았다..
라고 하기엔 몇일동안 구글링과 gpt와의 대화로 내가 무뎌져서 그런건가 ㅎㅎ
백엔드와 소통을 잘 하고 하면 OAuth는 이제 쉽게 할 수 있을 것 같다!

📍 참고 : https://data-jj.tistory.com/53