[REST API] 네이버 로그인 구현하기 (2) - vue.js

[최종 완성본]

 

 

[진행 순서] 

네이버 아이콘 클릭 -> 네이버 로그인 창 -> 로그인하는 순간 ->  요청 값들을 가지고 -> redirect 페이지로 이동 ->  Access Token 발급 -> 토큰을 이용해서 사용자 정보 가져오기 -> 사용자 정보가 DB에 있는지 확인 -> 없다면 회원가입 -> 있다면 자동 로그인

 

 

[네이버 아이콘 클릭] 

@click 이벤트를 만들어 놓고 아래의 method 실행

<img class="naverIdLogin" :src="require('@/assets/image/naverlogin.jpg')" @click="naverlogin" />

 

@click="naverlogin" 메서드

 naverlogin() {
      let client_id = "본인 client_id"
      let redirect_uri = encodeURIComponent("redirct_url", "UTF-8")
      const state = this.generateRandomState()
      const apiURL = "https://nid.naver.com/oauth2.0/authorize?response_type=code"
        + "&client_id=" + client_id
        + "&redirect_uri=" + redirect_uri
        + "&state=" + state
      window.location.href = apiURL
    },

 

네이버에 로그인 인증요청 문서를 살펴보면 필수 여부(Y)로 아래의 4개의 값들을 가져간다. 따라서  const apiURL을 보면 response_type=code로 첫 번째 요청 & client_id & redirect_uri & state를 보냈다. 

 

문서에 나와 있는 것 처럼 state는 사이트 간 요청 위조를 위해 사용하는 것이라고 나와 있다. 따라서 나는 state를 String 형태로 난수를 생성해서 함께 보낼 것이다. 

 

아래 난수 코드를 조금 자세한 설명을 원하면 아래의 링크로... 

자바, 자바스크립트 난수 생성 코드

    // state 난수 생성
    generateRandomState() {
      const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
      let state = "";
      for (let i = 0; i < 16; i++) {
        const randomIndex = Math.floor(Math.random() * characters.length);
        state += characters.charAt(randomIndex);
      }
      return state;
    }
  }

 

이렇게 담아 갈 것들을 담아가서 redirect_uri 페이지로 가보자 

 

[naverjoin.vue]

페이지가 시작되자마자 code 와 state를 가지고 Token을 발급하러 간다 

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

 

[getToken 메서드] 

 getToken() {
      const self = this;
      let formData = new FormData();
      formData.append('code', self.code);
      formData.append('state', self.state);
      self.$axios.post('http://localhost:8181/api/naver/login', formData)
        .then((res) => {
          if(res.status==200){
            if(res.data.userinfo.message){
              alert(res.data.userinfo.message);
              location.href = "/"
            } else {
              console.log(res.data);
              self.form.email = res.data.userinfo.naverResponse.email;
              self.form.pwd = res.data.userinfo.naverResponse.id;
              self.form.nickname = res.data.userinfo.naverResponse.nickname;
              self.form.navertoken = res.data.access_token;
            }
            self.$axios.get('http://localhost:8181/members/getSnsMember/' + 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);
                  } else {
                    self.Nlogin(); 
                    // Nlogin()메서드는 로그인 메서드와 동일하게  구현 
                  }
                }
              });
          }
        });
    },

첫번째 $axios는 Access Token을 받으려는 비동기 요청이고 두 번째 $axios는  Access Token 으로 받아온 사용자의 정보가 DB에 저장되어 있나 중복 검사를 하는 요청이다. 

 

아래의 3탄에서 서버 단의 코드를 구현 해보겠다.

[REST API] 네이버 로그인 구현하기 (3) - Java 코드