리액트 카카오 로그인 (프론트 소셜 로그인)

리액트 카카오 로그인 (프론트 소셜 로그인)

이번 프로젝트에서 진행한 코드를 예시로 설명드리겠습니다.

 

 

1. 로그인 클릭 버튼에 클릭시 실행할 함수 추가

<StSocialButton bc="yellow" onClick={onClickSocialLoginKakao}>

 

2. 실행할 함수에 소셜로그인 기본 코드 추가

  const onClickSocialLoginKakao=()=>{ //카카오 로그인
    const restApiKey = '카카오 디벨로퍼에서 받은 REST_API_KEY'
    const redirectUrl = '인가코드 발급 받을 때 돌아올 페이지'
    
    //예시
    const restApiKey = 'abcdefghijklmnopqrstuvwxyz'
    const redirectUrl = 'http://localhost:3000/oauth'

    const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?
    client_id=${restApiKey}&
    redirect_uri=${redirectUrl}&response_type=code`;
    
    window.location.href = KAKAO_AUTH_URL;
  }

 

REST_API_KEY 발급 받는 카카오 로그인 문서

https://developers.kakao.com/docs/latest/ko/kakaologin/rest-api

 

 

3. 실행할 함수에 소셜로그인 기본 코드 추가

const KakaoAuthHandler = (props) => {

  const dispatch = useDispatch();
  
  //카카오에서 param으로 전달받은 인가코드를 자르는 코드
  //백엔드로 인가코드만 보내기 위해 필요한 코드
  const code = new URL(window.location.href).searchParams.get("code");

  useEffect(()=>{ //백엔드로 쿠키 토큰 전송
    dispatch(__userOauthKakao(code))
  },[])

	//코드를 인증하는 동안 인증이 진행중이라는 UI를 보여주기 위한 코드
  return (
    <>
      <Wrap>
        <StLoadingText>사용자 인증하는 중 🔒</StLoadingText>
        //모래시계 모양은 css로 360도 무한 회전효과 적용
        <StInfiniteRotatingLogo>⏳</StInfiniteRotatingLogo>
      </Wrap>
    </>
  )
};

사용자에게 현재 진행 과정을 알려주는 oauth 페이지를 제작했다.

 

4. dispatch로 전달받은 인가코드를 백엔드로 전송하는 API

전송 후 응답에 따라 처리하는 코드를 작성하면 된다.

이번 프로젝트에서는 로그인 인증 시 accessToken, refreshToken, nickname을 필수로 작성했다.

export const __userOauthKakao = createAsyncThunk(
  "oauth/USER_OAUTH_KAKAO",
  async (payload, thunkAPI) => {
    try{
      const data = await api.post(`auth/kakao`, {payload})
      .then((res)=>{
        const accessToken = res.headers.authorization;
        const refreshToken = res.headers.refreshtoken;
        const nickname = res.data.nickname;
        
        //유저 토큰 + 닉네임이 있다면 가져온 후 세팅
         if(accessToken && refreshToken && nickname){
           localStorage.setItem("token", accessToken);
           localStorage.setItem("refreshToken", refreshToken);
           localStorage.setItem("nickname", nickname);
           alert('소셜로그인 인증 완료!')
           return window.location.assign("/main");
         }else{
           alert('인증 오류! 다시 시도해주세요!')
           return window.location.assign("/");
         }
         return res
      })
      return thunkAPI.fulfillWithValue(data)
    }catch(error){
      window.location.assign("/");
      return thunkAPI.rejectWithValue(error)
    }
  }
);

 

절차를 정리한다면

 

카카오 로그인 버튼 클릭

> 카카오로 인가코드 발급 요청

> 발급 받은 인가코드를 백엔드에 전달

> 그 후 상태 핸들링

 

리액트(프론트) 카카오 로그인 설명 끝!

 

 

카카오 로그인 도식화 이미지