[Rest Api] vue와 Spring boot를 이용한 카카오톡 로그인 api 구현 (5) - 가져온 사용자 정보를 DB에 저장하기

지난 4편까지는 로그인하는 회원의 정보를 얻어오는 카카오톡 api  작업을 마무리했다. 이제는 프로젝트 서버의 데이터베이스에 저장하고 비교해 회원가입을 진행시켜 클라이언트가 서비스를 이용할 수 있도록 해주는 작업을 진행해야 한다. 

카카오톡 로그인으로 회원가입

 

카카오로 로그인 하기를 누르면 카카오에서 받아온 이메일과 닉네임이 자동으로 들어가는 것을 볼 수 있다.

왜냐하면 vue 에서 토큰을 받는 메서드를 통해 data에 저장시켜 주었기 때문이다.

 getToken() { //토큰 냅다 받아~~ 
      const self = this;
      self.$axios.get('http://localhost:8181/kakaologin/' + self.code)
        .then((res) => {
          console.log(res)
          self.form.email = res.data.email;
          self.form.pwd = res.data.id;
          self.form.nickname = res.data.nickname;
          self.form.kakaotoken = res.data.accessToken;
          self.$axios.get('http://localhost:8181/members/getKakaomember/' + self.form.email)
            .then(function (res) {
              if (res.status == 200) {
                console.log(res.data.flag)
                if (res.data.flag == false) {
                  console.log(res.data.flag)
                  alert('회원가입을하세요')
                } else {
                  self.klogin()
                }
              }
            });
        });
    },

이걸 이용해서 새롭게 회원 가입을 진행시켜주면 된다. 마이페이지에 가 보면  정보가 잘 나온 것을 볼 수 있음! 

 

그렇다면 이미 가입이 되어 있는 사람은 어떻게 되는 걸까? 

아래에서 보는 것처럼 회원가입 진행 없이 바로 메인페이지로 가는 것을 볼 수 있다! 또한, 회원의 원활한 로그아웃과 탈퇴를 위해서 매 로그인 시 발급받은 카카오톡 access_Token을 다른 Table에 저장시켜 준다. 

가입 되어 있는 회원의 로그인

근데 여기서 문제... 꼭 Redirect 페이지를 거치는 게 조금 이상하긴 한데 현재로서는 시간이 없음으로 끝나고 리팩터링 할 때 수정 하던가 해야 할 것 같다! 

 

이렇게 되면 오라클 데이터 베이스에 아래와 같이 저장된 것을 확인할 수 있다. 나는 카카오톡 로그인과 일반 로그인을 구분하기 위해서 1과 0으로 구분을 지어주었다. 왜냐하면 추가 기능으로 카카오톡 로그인을 했으면 하지 못하는 기능과 나나누어져 있기 때문! 

 

 

아래는 카카오 토큰만 업데이트해주는 테이블이다. 이렇게 받아온 토큰으로 로그아웃과 탈퇴 그리고 재 로그인 시 굳이 또 아이디를 입력하는 번거로움을 줄 일 수 있다.