[Vue.js] Vue.js에서 네이버 로그인 구현
웹 사이트를 사용하다보면 회원가입을 해야 서비스를 이용할 수 있는 경우들이 있습니다.
예를 들어 넷플릭스나 티빙 등의 *OTT(Over The Top)를 이용하는 경우 회원가입을 해야 영상 목록을 확인할 수 있고 또한 회원가입 후 멤버십 가입을 해야 영상 시청을 할 수 있는 경우가 대다수입니다.
* OTT(Over The Top)는 인터넷을 통해 볼 수 있는 TV 서비스를 일컫는다.
웹 사이트에 회원가입을 하는 경우 자신의 정보를 입력해야 회원가입을 진행할 수 있습니다.
회원가입 후 서비스를 이용할 수 있지만 사용자 입장에서 회원가입은 번거로운 작업일 수도 있습니다.
만약 이미 회원가입 된 사이트의 정보를 이용하여 따로 입력폼을 작성하지 않고 회원가입이 된다면 매우 편리하게 이용할 수 있을 것입니다.
실제로 제가 사용하는 아래 예시 사이트에선 다양한 로그인 방법을 제공하고 있습니다.
저는 이미 네이버에 회원가입이 되어 있고 "네이버로 시작하기" 버튼을 통해 네이버 정보 제공에 동의 시 따로 회원가입 폼을 작성하지 않더라도 서비스를 이용할 수 있습니다.
아래 내용부터는 다양한 개발환경 중 Vue.js에서 기본적인 방법으로 네이버 로그인 구현에 대해 작성하고자 합니다.
- 목차 -
가. NAVER Developers 세팅
나. Vue에서 로그인 코드 세팅
다. 참고자료
가. NAVER Developers 세팅
1. NAVER Developers 접속 후 우측 상단 로그인 버튼을 클릭, 로그인까지 진행합니다.
https://developers.naver.com/products/login/api/api.md
2-1. 네이버 Application을 처음 이용하는 경우 약관동의, 계정 정보 등록, 애플리케이션 등록까지 진행해야 합니다.
① 상단 메뉴 중 Application을 클릭합니다.
② 이용약관을 확인 후 동의합니다.
③ 확인버튼을 누릅니다.
2-2. 계정 정보 등록
① 휴대폰 인증을 진행합니다.
② 체크박스를 클릭합니다.
③ 위 진행 시 버튼이 활성화되고 확인을 클릭합니다.
2-3. 애플리케이션 등록
① 자신의 애플리케이션 이름을 작성합니다. (저는 테스트로 진행하므로 임의로 작성했습니다)
② 사용 API, "선택하세요." 를 클릭하여 네이버 로그인을 클릭합니다.
③ 네이버 로그인을 클릭하면 제공 정보를 선택할 수 있습니다. 사용자에게 필수로 받을 정보라면 필수쪽 체크박스에 체크하고 선택적으로 받을 정보라면 추가쪽의 체크박스를 체크합니다.
* 아래 이미지에서 필수에 체크된 항목은 필수 제공 항목으로 되며 추가에 체크된 항목은 추가 제공 항목에 추가됩니다.
④ "환경 추가" 를 누른 뒤 "PC 웹"을 클릭합니다.
⑤ 서비스 URL을 입력합니다. (아래 이미지에서는 vue 로컬 주소를 입력했습니다)
⑥ Vue 라우터 path가 추가된 URL을 입력합니다.
⑦ "등록하기"를 클릭하면 NAVER Developers의 네이버 로그인 세팅이 완료됩니다.
2-4 멤버관리에 주소 추가
① 위 과정을 거치면 아래 화면이 나옵니다. 메뉴 중 멤버관리를 클릭합니다.
② 테스트할 아이디를 등록합니다. (관리자 ID 등록 시 테스트 ID에 따로 등록하지 않아도 관리자 ID로 테스트가 가능합니다)
나. Vue에서 로그인 코드 세팅
1. 터미널에서 vue 프로젝트를 생성합니다.
2. 네이버 로그인 화면 파일을 생성합니다.
3. /router/index.js, path에 /login/naver 로 라우터를 작성합니다.
// /router/index.js, 라우터 작성
{
path: '/login/naver',
name: 'naverLoginView',
component: () =>
import(
/* webpackChunkName: "login", webpackPrefetch:true */ '../views/0_login/naverLoginView.vue'
)
}4. /public/index.html, head태그 안에 script (sdk 주소가 추가된) 태그를 아래와 같이 추가합니다.
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>
<%= htmlWebpackPlugin.options.title %>
</title>
<script src="https://static.nid.naver.com/js/naveridlogin_js_sdk_2.0.2.js"></script> // sdk 코드 추가
</head>5. 아래 주소의 SDK 다운로드로 접속하면 javascript용 네이버 로그인 라이브러리의 샘플이 존재하지만 Vue를 이용하므로 아래 6번의 코드를 작성합니다.
https://developers.naver.com/docs/login/sdks/sdks.md
6. 네이버 로그인 View.vue 파일 template에 전체 코드를 아래와 같이 추가합니다.
- clientId 와 callbackUrl은 naver Developers의 application 메뉴에서 client Id 확인이 가능하며 콜백 URL은 설정 시 작성했던 주소를 입력합니다
(콜백 URL 예시 : http://localhost:8080/login/naver, 콜백 URL을 기억하지 못 한다면 NAVER Developers의 Application메뉴에서 확인이 가능합니다.)
// NaverLoginView.vue
<template>
<div>
<div id="naverIdLogin">
<a id="naverIdLogin_loginButton" href="#" role="button"
><img src="https://static.nid.naver.com/oauth/big_g.PNG" width="320"
/></a>
</div>
<button @click="naverLogout($event)">로그아웃</button>
</div>
</template>
<script>
export default {
/* eslint-disable */
components: {},
data() {
return {
nickName: '',
naverLogin: null
}
},
setup() {},
created() {},
mounted() {
this.naverLogin = new window.naver.LoginWithNaverId({
clientId: 'client Id', // client id 작성
callbackUrl: 'http://localhost:8080/login/naver', // call back url 작성
isPopup: true,
loginButton: { color: 'green', type: 3, height: 60 }
})
/* 네아로 로그인 정보를 초기화하기 위하여 init을 호출 */
this.naverLogin.init()
/* 현재 로그인 상태를 확인 */
this.naverLogin.getLoginStatus((status) => {
if (status) {
console.log(this.naverLogin.user.getNickName()) // 제공 정보 중 닉네임에 대한 정보 출력
this.nickName = this.naverLogin.user.getNickName()
}
})
},
unmounted() {},
methods: {
naverLogout(event) {
event.preventDefault()
this.naverLogin.logout()
}
}
}
</script>* [eslint] 오류 발생 시 mounted()안에 /* eslint-disable */을 작성하여 eslint규칙을 무시할 수 있습니다.
7. 정상적으로 작성되었다면 아래 네이버 로그인 버튼이 나오고 클릭 시 네이버 로그인 팝업이 등장합니다.
8. 동의항목을 클릭하고 "동의하기"버튼을 누르면 콘솔창에 닉네임이 출력됩니다. (정상 로그인)
// mounted() 코드 일부분
console.log(this.naverLogin.user.getNickName()) // 닉네임 출력
9. 화면상의 로그아웃 버튼을 누르고 새로고침 시 콘솔창에 닉네임이 출력이 안 된다면 정상적으로 로그아웃된 상태가 됩니다.
10. NickName을 제외한 다른 값을 받고 싶다면 아래 주소로 접속합니다. (네이버 로그인 개발 가이드)
네이버 로그인 개발가이드 - LOGIN
네이버 로그인 개발가이드 1. 개요 4,200만 네이버 회원을 여러분의 사용자로! 네이버 회원이라면, 여러분의 사이트를 간편하게 이용할 수 있습니다. 전 국민 모두가 가지고 있는 네이버 아이디
developers.naver.com
* 출력결과 필드 항목에 response/nickname 이라면 user.getNickName() 의 형식으로 하여 값들을 받아올 수 있습니다.
console.log(this.naverLogin.user.getNickName()) // 닉네임
console.log(this.naverLogin.user.getId()) // Id
console.log(this.naverLogin.user.getName()) // 이름
console.log(this.naverLogin.user.getEmail()) // 이메일
console.log(this.naverLogin.user.getGender()) // 성별
console.log(this.naverLogin.user.getAge()) // 나이
console.log(this.naverLogin.user.getBirthday()) // 생일 (년도 제외)
위와 같이 서비스를 운영할 때 자체 회원가입도 필요하지만 네이버와 구글과 같은 이미 많은 사용자가 있는 플랫폼의 로그인 기능들을 포함한다면 사용자에게 더 좋은 선택지를 제공할 수 있으며 간편하게 회원가입을 진행할 수 있게 됩니다.
해당 글은 vue.js 환경에서 로그인 구현에 대해 알아보았습니다.
네이버 로그인 개발가이드 - LOGIN
네이버 로그인 개발가이드 1. 개요 4,200만 네이버 회원을 여러분의 사용자로! 네이버 회원이라면, 여러분의 사이트를 간편하게 이용할 수 있습니다. 전 국민 모두가 가지고 있는 네이버 아이디
developers.naver.com
네이버 로그인에 더 필요한 정보가 있다면 위의 링크(네이버 로그인 개발가이드)를 확인하시면 됩니다.
저의 글을 읽어주셔서 감사합니다.
다. 참고자료
1. https://www.youtube.com/c/개발자의품격 - 부트캠프, Vue.js 네이버 로그인
2. https://developers.naver.com/products/login/api/api.md - NAVER Developers, 네이버 로그인
3. https://developers.naver.com/docs/login/overview/overview.md - NAVER Developers, 네이버 로그인, 개요
4. https://terms.naver.com/entry.naver?docId=3579352&cid=59088&categoryId=59096 - NAVER 지식백과, OTT