[Rest Api] 카카오톡 로그인 api 구현 (6) - vue.js 최종 코드

카카오톡 로그인 메서드 구현 

<img :src="require('@/assets/image/kakao.png')" @click="kakaoLogin" />

kakaoLogin() {
      const redirect_uri = 'http://localhost:8182/kakaojoin';
      const clientId = '자신의 키';
      const Auth_url = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${clientId}&redirect_uri=${redirect_uri}`;
      window.location.href = Auth_url;
    }

 

created 함수 적용

카카오디벨로퍼스에 미리 정해 놓은 클라이언트 측 redirect_uri 페이지를 component로 작성한다.

그 뒤 해당 페이지가 로딩되자마자 인자로 받았던 인가코드를 빼내어 카카오톡에게 토큰값을 요청한다. 

 created() {
    this.code = this.$route.query.code;
    console.log(this.code)
    this.getToken();
  },

 

토큰 값 요청 메서드 

백단에서 카카오 엑세스 토큰을 요청해야 하므로 axios로

또한 해당 아이디가 이미 서버 측 DB에 있는지 확인해야 한다.

있다면 아래의 회원가입 페이지를 스킵하고 아니라면 회원가입을 진행시켜준다. 

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()
                }
              }
            });
        });
    },

 

회원가입 폼 작성 

원하는 회원가입 폼 코드를 작성하여 회원가입을 진행 시켜준다. 

나 같은 경우에는 접은 글처럼 templete을 작성해 주었다. 

<template>
  <div class="form" :class="activeForm">
  
    <br/>
    <div>
  </div>
    <div class="form-header">
      <img :src="require('@/assets/image/KakaoTalk_logo.png')" style="width: 25%;  "/>
      </div>
    <div class="form-elements">
      <div class="form-element" style="display: flex;">
        <input v-model="form.email" type="text" style="flex: 1; margin-right: 5px;"
          required disabled />
      </div>
      <div  class="form-element">
        <input type="text" @input="autoHyphen($event.target)" maxlength="13" v-model="phone" placeholder="phone number">
      </div>
      <div class="form-element">
        <input type="text" v-model="form.nickname" required disabled />
      </div>
      <div style="margin-top : 10px;">
        <label  class="input-file-wrapper">
          <div class="upload-button-text" style="text-align: left; color : grey;">{{ uploadButtonText }}</div>
          <input type="file" id="img-input-file" class="form-element" style="display :none;" @change="handleFileUpload" />
        </label>
      </div>
<div class="form-element">
        <button id="submit-btn" @click="onSubmit()">카카오톡으로 회원가입 하기</button>
      </div>
    </div>
    <div class="button-wrapper">
          <router-link to="/" class="custom-link">돌아가기</router-link>
        </div>
      </div>

</template>

 

회원가입 메서드 작성

카카오톡으로 회원가입 하기 버튼을 누르면 진행될 메서드를 작성해준다. 

onSubmit() {
      const self = this;
      const form = new FormData();
      //전화번호 11자리로 고정 
      if (self.phone.replace(/[^0-9]/g, '').length !== 11) {
        alert('전화번호는 11자리의 숫자로만 입력해야 합니다.');
        return;
      } else if (!self.phone.startsWith('010')) {
        alert('전화번호 형식이 잘 못 되었습니다');
        return;
      } else {
        form.append('phone', self.phone.replace(/[^0-9]/g, ''));
      }

      form.append('email', self.form.email);
      form.append('nickname', self.form.nickname);
      form.append('pwd', self.form.pwd)
      form.append('id', 1)
      if (document.getElementById('img-input-file').value !== '') {
        const file = document.getElementById('img-input-file').files[0];
        form.append('f', file);
      }
      self.$axios.post('http://localhost:8181/members', form, { headers: { "Content-Type": "multipart/form-data" } })
        .then(function (res) {
          if (res.status === 200) {
            let dto = res.data.dto;
            console.log(dto);
            self.klogin();
          } else {
            alert('에러코드 :' + res.status);
          }
        })
        .catch(function (error) {
          alert('에러 :' + error);
        });
    },

 

자동로그인 진행 

만약에 회원가입이 되어 있다면 회원가입을 지나쳐 바로 로그인을 시켜주어야 한다. 따라서 아이디가 있는지 미리 getToken() 메서드에서 확인하였고 아이디가 저장되어 있다면 klogin() 아래의 메서드를 통해 자동으로 로그인을 시켜준다. 

klogin() { //아이디 저장이 되어 있으면 갈 곳 
      const self = this;
      const loginform = new FormData();
      loginform.append('email', self.form.email)
      loginform.append('pwd', self.form.pwd)
      self.$axios.post('http://localhost:8181/members/login', loginform)
      .then(function (res) { //결과 
          if (res.status == 200) { 
              sessionStorage.setItem('token', res.data.token)            
              sessionStorage.setItem('loginId', res.data.loginId)             
          const addform = new FormData();
          addform.append('email', self.form.email)
          addform.append('token', self.form.kakaotoken)
          console.log(self.form.kakaotoken)
          self.$axios.post('http://localhost:8181/tokensave', addform)
            .then(function (rep) {
              if (rep.status == 200) {
                location.href="/calendar"            
              } else {
                alert ('여기서 오류다~ ')
              }
            });
          }
          })
        },

 

 

이렇게 vue.js (프론트)에서 해야 할 일이 모두 끝이 났다. 7에는 backend에서 어떻게 카카오에게 토큰값을 요청하고 사용자 정보를 받아오는지 정리하겠다~