[Vue.js] 미니프로젝트:로그인 처리 - 네이버 아이디로 로그인하기

네이버 아이디로 로그인 하기 위해서는

오픈 API 이용 신청

네이버 개발자센터의 ‘네이버 아이디로 로그인 API에 접속한다.

오픈 API 신청 클릭.

신청을 위해서는 이용약관 동의 -> 계정정보 등록 -> 애플리케이션 등록 절차

애플리케이션 등록 단계에서 애플리케이션 이름, 사용 API 선택 및 제공 정보 선택(이메일, 별명), 로그인 오픈 API 서비스 환경을 설정해야 한다.

• 애플리케이션 이름 : 자유롭게 작성.

• 사용 API : 네이버 아이디로 로그인 선택 후 제공 정보 선택에서 이메일, 별명 등 필요한 정보를 선택

• 로그인 오픈 API 서비스 환경 : PC 웹을 선택한 후 서비스 URL과 네이버 아이디 로그인 콜백 URL을 입력.

정보 등록 후 완료 버튼 클릭

내 애플리케이션 정보에서 ‘API 설정’ 탭을 클릭

로그인 오픈 API 서비스 환경을 보면 로고 이미지 업로드를 할 수 있습니다. 로고 이미지 업로드 하단에 보면 ‘애플리케이션 개발 상태’에 ‘검수요청 하러 가기’라는 버튼이 있다.

네이버 로그인에 대한 테스트 코드를 구현할 것이기 때문에 검수요청 하지 않기로 한다. 대신 네이버 로그인을 하기 위해서는 ‘멤버관리’ 탭에서 등록한 아이디만 네이버 로그인을 사용할 수 있다.

멤버관리 탭에서 본인 아이디 등록.

네이버 JavaScript SDK 등록

네이버 로그인 API를 사용하기 위해 public/index.html 파일을 열어서 API 등록

<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.0.js" charset="utf-8"></script>

로그인 컴포넌트 구현

NaverLogin.vue 파일을 views 폴더 밑에 생성하고 다음과 같이 코드를 작성

NaverLogin.vue

<template>
    <div>
        <div id = "naverIdLogin"></div>
        <button type="button" @click="logout">로그아웃</button>
    </div>
</template>
<script>
import axios from 'axios';
export default{ 
    data(){
        return{
            naverLogin: null
        };
    },
    mounted(){
        this.naverLogin = new window.naver.LoginWithNaverId({
            clientId: "Rn51a9mCz1gEtir_SCl3", // 개발자센터에 등록된 ClientID
            callbackUrl: "http://localhost:8081/naverlogin",   // 개발자센터에 등록한 callback Url
            isPopup: false, // 팝업을 통한 연동처리 여부
            loginButton:{
                color: "green", type: 3, height: 60},  // 로그인 버튼의 타입을 지정
            });

            // 설정 정보를 초기화하고 연동을 준비
            this.naverLogin.init();

            this.naverLogin.getLoginStatus((status) =>{
                if(status){
                    console.log(status);
                    console.log(this.naverLogin.user);

                    // 필수적으로 받아야 하는 프로필 정보가 있다면 callback 처리 시점에 체크
                    var email = this.naverLogin.user.getEmail();
                    if(email == undefined || email ==null){
                        alert("이메일은 필수 정보입니다. 정보 제공을 동의해주세요.");
                        // 사용자 정보 재동의를 위하여 다시 네아로 동의 페이지로 이동함
                        this.naverLogin.reprompt();
                        return;
                    }
                }else{
                    console.log("callback 처리에 실패했습니다.")
                }
            })
    },
    methods:{
        logout(){
            const accessToken = this.naverLogin.accessToken.accessToken;
            const url = `/oauth2.0/token?grant_type=delete&client_id=zFcLWPMTcDQTNTB6iIOy&client_secret=bUW7FZMpS9&access_token=${accessToken}&service_provider=NAVER`;

            axios.get(url).then((res) => {
                console.log(res.data)
            });

            //https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id=zFcLWPMTcDQTNTB6iIOy&client_secret=bUW7FZMpS9&access_token=AAAAOOCeX4fAa_NxKPAmJW8C1UeLxGT3nM0wRV33irhyHyRua1JJrfrp0jZwfbOD0r502Id9mbhb0YiA9_NvCXGAwws&service_provider=NAVER
        }
    }
};
</script>

라우터에 등록까지 하면 끝.

다음과 같이 네이버 로그인 버튼이 화면에 나타난다. 다시 코드를 살펴보면 template에 다음과 같이 naverIdLogin이라는 id를 갖는 div 태그를 볼 수 있다.

<div id = "naverIdLogin"></div>

=> Vue 컴포넌트 실행 시 mounted 훅에서 다음 코드를 통해서 네이버 아이디 로그인 기능이 활성화 되고, loginButton 속성을 통해 정의한 로그인 버튼 타입에 따라 화면에 로그인 버튼이 나타나는 것이다.

        this.naverLogin = new window.naver.LoginWithNaverId({
            clientId: "Rn51a9mCz1gEtir_SCl3", // 개발자센터에 등록된 ClientID
            callbackUrl: "http://localhost:8081/naverlogin",   // 개발자센터에 등록한 callback Url
            isPopup: false, // 팝업을 통한 연동처리 여부
            loginButton:{
                color: "green", type: 3, height: 60},  // 로그인 버튼의 타입을 지정
            });

            // 설정 정보를 초기화하고 연동을 준비
            this.naverLogin.init();

사용자가 네이버 아이디로 로그인 버튼을 클릭하면 다음과 같이 화면이 전환된다. 만약 화면 전환이 아니라 팝업으로 진행하고 싶다면 isPopup 속성을 true로 설정하면 된다.

필수 동의 항목들을 체크하고 동의하기를 누르면 네이버 개발자 센터에서 애플리케이션 생성시 등록한 callBack URL로 리다이렉트 되고, 다음 코드를 통해 사용자 정보를 받아오게 된다.

this.naverLogin.getLoginStatus((status) =>{
    if(status){
        console.log(status);
        console.log(this.naverLogin.user);

        // 필수적으로 받아야 하는 프로필 정보가 있다면 callback 처리 시점에 체크
        var email = this.naverLogin.user.getEmail();
        if(email == undefined || email ==null){
            alert("이메일은 필수 정보입니다. 정보 제공을 동의해주세요.");
            // 사용자 정보 재동의를 위하여 다시 네아로 동의 페이지로 이동함
            this.naverLogin.reprompt();
            return;
        }
    }else{
        console.log("callback 처리에 실패했습니다.")
    }
})

콘솔에 naverLogin.user 정보를 출력하면 다음과 같은 정보가 네이버로부터 전달된다. 등록한 항목은 채워져 있고 신청하지 않은 항복들은 전달되지 않은것 확인가능

위 사진에는 임의로 이메일 주소를 바꿔서 캡쳐했지만 @hanmail.net 이메일로 출력되어 있었음 ==> 내 네이버 이메일 주소가 아닌 내가 네이버에 저장해둔 내 이메일 주소가 출력됨.

위 정보들을 이용해서 로그인을 구현하면 된다. 일반적으로 사용자의 이메일 정보를 사용자 ID로 등록해서 사용한다.

즉, 사용자가 네이버 로그인을 진행하면 사용자의 이메일 정보가 우리 애플리케이션 서버 DB의 사용자 테이블에 등록되어 있는지 확인하고, 등록이 안되어 있다면 데이터베이스에 등록한 다음 로그인 시키면 된다. 사용자 이메일이 이미 등록되어 있다면 등록절차 없이 로그인하면 된다.

네이버에서는 별도의 로그아웃 함수를 제공하지 않는다. 로그아웃에 대한 별도의 api가 없으며 사용자가 직접 네이버 서비스에서 로그아웃 하도록 처리해야 한다. 그 이유는 이용자 보호를 위해 정책상 네이버 이외의 서비스에서 네이버 로그아웃을 수행하는 것을 허용하지 않고 있기 때문. 그래서 로그아웃을 하려면 로그인 시 발급받은 토큰을 삭제해야 함.

https://nid.naver.com/oauth2.0/token?grant_type=delete&client_id={ 발급받은 clientID }&client_secret={ 발급받은 client Sercret }&access_token={ 로그인 시 발급받은 토큰 }&service_provider=NAVER

토큰 색제 메소드

    logout(){
        const accessToken = this.naverLogin.accessToken.accessToken;
        const url = `/oauth2.0/token?grant_type=delete&client_id=zFcLWPMTcDQTNTB6iIOy&client_secret=bUW7FZMpS9&access_token=${accessToken}&service_provider=NAVER`;

        axios.get(url).then((res) => {
            console.log(res.data)
        });

여기서 토큰 삭제 API를 axios를 이용해서 호출하면 CORS 위배로 에러가 발생한다. 그래서 vue.config.js에 proxy를 등록해서 사용해야 한다.

module.exports = {
  chainWebpack: config =>{
    config.plugins.delete('prefetch');  // prefetch 삭제
  },
  devServer:{
    port: 8080,
    proxy: {
      // proxy 요청을 보낼 api 시작 부분
      '^api': {
        target,
        changeOrigin : true
      },
      '/oauth2.0':{
        target: 'https://nid.naver.com'
      }
    }
  }
} 

proxy 등록하고 재기동하면