[React] 카카오 로그인 연결해보기 - 2

이렇게 넘어오는게 토큰인줄 알았는데,,,

얘네는 인가 코드였다,,,!

 

 

 

 

내가 하고싶었던 거는 토큰 받아서? 사용자 정보를 console에 띄우고 싶었는데

뒤지도록 안되더라 한 10시간 동안 한거 같다.

그래서 결국 다른 분 블로그 보고 해결해따.

 

https://velog.io/@sayi/React-%EC%B9%B4%EC%B9%B4%EC%98%A4-%EB%A1%9C%EA%B7%B8%EC%9D%B8%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EC%82%AC%EC%9A%A9%EC%9E%90-%EC%A0%95%EB%B3%B4-%EC%88%98%EC%A7%91

[React] 카카오 로그인(로그인, 사용자 정보 가져오기)

감사합니당 감사합니당

 

 

아래는 전체코드,,,

const loginWithKakao = () => {

  const scope = "profile_nickname,profile_image, account_email";
  Kakao.Auth.login({
    scope,
    // success는 인증 정보를 응답(response)으로 받는다. 
    success: function (response) {
     //카카오 SDK에 사용자 토큰을 설정한다.
      window.Kakao.Auth.setAccessToken(response.access_token);
      console.log(`is set?: ${window.Kakao.Auth.getAccessToken()}`);
      
      var ACCESS_TOKEN = window.Kakao.Auth.getAccessToken();

      
      window.Kakao.API.request({
      url: "/v2/user/me",
      success: function ({ kakao_account }) {
        //어떤 정보 넘어오는지 확인
        console.log(kakao_account);
        const {  email,profile } = kakao_account;
        
        console.log(email);
        console.log(`responsed img: ${profile.profile_image_url}`);
        console.log(profile.nickname);

        axios({
          method: "post",
          url: "/auth/sns",
          data: {
            "id": email,
            "nickname": profile.nickname,
            "image" :profile.profile_image_url,
          },
        })
          .then((res) => {
            console.log(res);
            // history.push("/main/feed");
          })
          .catch((error) => {
            // console.log(error);
            console.error(error);
            alert("카카오 로그인 에러?");
          });

      },
      fail: function (error) {
        console.log(error);
      },
    });


    },
    fail: function (error) {
      console.log(error);
    },
  });

};

 

참고로

이렇게 버튼 만들어줘서 버튼 누르면 함수 실행되게 하였다.

 

 

 

이거보고 로그인 하기 위해 Kakao.Auth.authorize 써서 리다이렉트 해주어서 인가코드를 받아왔었다.

근데 인가코드로 토큰을 받고 싶었는데 이거를 어떻게 하는지 아직 잘 모르겠다.

 

나는 현재 사용자 이름, 사용자 프로필 사진, 그리고 이메일을 필요로 해서 이렇게 가져왔다.

이렇게 해서 AccessToken 찍어보니까 매우매우 잘나오더라

 

이제 토큰도 발급 받았겠다

사용자 정보를 가져와보았다.

 

 

/v2/user/me 로 보내면 알아서 뚝딱뚝딱 정보 보내주더라

그래서 한번 어떻게 넘어오는지 찍어보았다.

 

 

드디어 나와땅

 

내가 하고싶었던 거는

이렇게 사용자 정보 받아와서 데이터베이스에 저장하는 거였다.

 

백엔드는 다른 분이 완성해놓으셔서 내가 값만 보내면 되는건데 10시간이나 걸려버렸다.

 

postman으로 테스트해보니까 너무너무 잘들어가구 데이터베이스 안에 값도 예쁘게 들어가있었다.

 

 

axios로 전송해서 완료...!

 

 

이제 자자,,,,

 

 

공식문서를 보고 따라하고 싶었으나,, 아직 까지는 역량부족인것 같다.

누군가가 이걸 볼지모르겠지만,,, 작게나마,,,,도움이 되었으면,,,,,,,,합니다.....

다들 화이팅 ❤❤❤💖💖💖