카카오 로그인 기능 구현

 

1. 카카오 디벨로퍼스 사이트에 가서 회원 가입

https://developers.kakao.com/

Kakao Developers

 

 

2. 내 에플리케이션 추가

 

 대략적으로 작성하고 저장

 

 

3. 설정하기

  1) 카카오 로그인 활성화 

    대시보드 > 설정 > 카카오로그인 > 설정하기 클릭

 

카카오 호그인 활성화 설정  on 으로 설정

 

2) 동의 항목 설정 (닉네임 / 프로필 사진 등 )

 

 

 3) 앱키로 가서 REST API 키를 복사 한다.

   아래 코드의 VITE_KAKAOCLIENT_ID 에 넣을 예정

 

4. 카카오 로그인 문서를 확인 하면서 진행 

 

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

Kakao Developers

 

 

 문서의 카카오 로그인의 인가코드 받기 토큰 받기 후 사용자 정보 가져오기를 차례대로 API 를 아래 코드와 같이 요청 하면

 받아 올 수 있다.

const getToken = async (authorizationCode) => { // 아래의 useEffect 가 실행되면 함수실행
    axios
      .post(
        `https://kauth.kakao.com/oauth/token`,  // 토큰 받기 요청
        {
          grant_type: "authorization_code",    // 헤더 작성
          client_id: VITE_KAKAOCLIENT_ID,
          redirect_uri: redirectURI,
          code: authorizationCode,
        },
        {
          headers: {
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        }
      )
      .then((res) => {
        kakaoAccessToken = res.data.access_token;   // 응답에서 토큰을 받아서
        dispatch(kakaoTokenSlice.actions.update(kakaoAccessToken));
        return axios.get(`https://kapi.kakao.com/v2/user/me`, {  // 토큰으로 다시요청
          headers: {
            Authorization: `Bearer ${kakaoAccessToken}`,
            "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
          },
        });
      })
      .then((response) => {   // 응답을 받으면 유저 이름 과 Profile 을 받을 수 있다.
        const { nickname, profile_image } = response.data.properties;
        dispatch(userInfoSlice.actions.update({ nickname, profile_image })); // 리덕스 툴킷으로 전역으로 저장
        dispatch(userLoginSlice.actions.isLogin(true));
      });
  };

  useEffect(() => {              //로그인 클릭하면 아래의 리다이렉션된 페이지의 url에서 코드를 받아온다.
    const authorizationCode = serchParams.get("code");  //인가코드받기 : 리다이렉션된 url 의 code 부분에 accessToken 이있다.
    if (authorizationCode) {  // accessToken 이 있으면
      getToken(authorizationCode);  // 위의 함수 실행( token 받아서 유저 정보 받기 )
    }
  }, [serchParams]);