vue에서 네이버 API를 활용하여 로그인 연동을 하는 샘플을 구현해본다
네이버 개발자 센터 오픈 API 이용 신청
네이버 개발자 센터에 접속하고 로그인 후 하단에 '네이버 로그인'을 클릭한다.
하단에 '오픈 API 이용 신청'을 클릭한다.
'애플리케이션 이름' 항목과 사용 API에서 필요한 정보를 선택한다. 필자는 테스트를 위해 '연락처 이메일 주소'와 '별명'을 체크했다. 그리고 '서비스 URL'과 'Callback URL'은 로컬 접속 정보로 http://localhost:8080, http://localhost:8080/naverlogin 을 각각 입력하고 등록한다.
등록을 완료하면 내 애플리케이션 메뉴에서 다음과 같이 확인 가능하다. 개발 상태인 경우에는 검수요청이 별도로 필요하지 않지만 실제 운영을 위한 환경일 경우 검수요청을 진행해야 한다. 여기서 'ClientID'와 'Client Secret' 정보는 Vue코드에서 사용될 예정이다.
vue 구현
먼저 public/index.html에 SDK를 등록한다.
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>네이버 로그인</title>
<script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
...
그리고 LoginView.vue 파일을 작성해준다.
<template>
<div>
<!-- 네이버 로그인 버튼 노출 영역 -->
<div id="naver_id_login"></div>
</div>
</template>
<script>
// 네이버 개발자센터에서 어플리케이션 등록 시 발급된 값
const clientId = "xxxxxxxxxxx";
export default {
components: {},
data() {
return {};
},
mounted() {
this.naverLogin = new window.naver_id_login(
clientId,
"http://localhost:8080/naverlogin" // 개발자센터에서 등록한 Callback URL
);
var state = this.naverLogin.getUniqState();
this.naverLogin.setButton("white", 2, 40); // 버튼설정
this.naverLogin.setDomain("http://localhost:8080");
this.naverLogin.setState(state);
//this.naverLogin.setPopup(); // 팝업 여부
this.naverLogin.init_naver_id_login();
},
};
</script>
위 컴포넌트를 랜더링하면 아래와 같은 네이버 로그인 버튼이 표시가 된다.
로그인 버튼을 클릭하면 네이버 연동 로그인 화면이 표시된다.
이제 로그인 이후 Callback URL을 받아줄 수 있는 NaverLogin.vue 파일을 작성하고 callback URL에 맞게 router를 등록해준다. 그리고 vue.config.js파일에 proxy를 등록해준다.
<template>
<div>
<h2>Naver Login Callback</h2>
<div>
<p>email: {{ email }}</p>
<p>nickname: {{ nickname }}</p>
</div>
<button type="button" @click="logout">로그아웃</button>
</div>
</template>
<script>
import axios from "axios";
import router from "@/router";
// 네이버 개발자센터에서 어플리케이션 등록 시 발급된 값
const clientId = "xxxxxxxxxxxxxxxxxx";
const clientSecret = "xxxxxxx";
export default {
data() {
return {
accessToken: "",
email: "",
nickname: "",
};
},
mounted() {
this.naverLogin = new window.naver_id_login(clientId);
this.accessToken = this.naverLogin.oauthParams.access_token;
this.userInfo();
},
methods: {
// 사용자 프로필 조회
async userInfo() {
const url = `/v1/nid/me`;
let header = "Bearer " + this.accessToken;
const headers = { Authorization: header };
const { data } = await axios.get(url, { headers });
console.log("userInfo: ", data);
this.email = data.response.email; // 이메일
this.nickname = data.response.nickname; // 별명
},
// 로그인 연동 해제 샘플
logout() {
const url = `/oauth2.0/token?grant_type=delete&client_id=${clientId}&client_secret=${clientSecret}&access_token=${this.accessToken}&service_provider=NAVER`;
axios.get(url).then((res) => {
console.log(res.data);
router.push({ path: "login" });
});
},
},
};
</script>
vue.config.js파일은 아래와 같이 작성한다. 아래 Proxy 등록 없이 직접 URL을 선언해서 사용하면 CORS 에러가 난다.
...
devServer: {
proxy: {
"/oauth2.0": {
target: "https://nid.naver.com/",
changeOrigin: true,
logLevel: "debug",
},
"/v1": {
target: "https://openapi.naver.com/",
changeOrigin: true,
logLevel: "debug",
},
},
},
...
이제 네이버 로그인을 하게 되면 callback URL에 호출에 따라 NaverLogin.vue가 랜더링 되고 아래와 같은 결과를 볼 수 있다.
하단에 로그아웃 버튼은 실제 네이버 로그아웃 처리가 아닌 네이버 로그인 연동해제(토큰 삭제)를 하는 API 샘플이다. 로그아웃 버튼 클릭 없이 처음의 LoginView 화면으로 이동해서 네이버 로그인 버튼을 클릭해보면 네이버 로그인 과정없이 바로 NaverLogin Callback화면으로 이동이 된다. 하지만 로그아웃 버튼 클릭 후 다시 로그인을 하면 매번 네이버 로그인을 해야지만 NaverLogin Callback 화면으로 이동이 가능하다.
연관 내용:
Vue.js 카카오 로그인 연동하기
Vue.js에서 카카오 로그인 연동하는 방법을 알아본다. 카카오 로그인 연동 프로세스는 다음과 같다. 1. 카카오톡 연동을 통해 동의를 거친 후 인가코드를 발급 받는다 2. 발급 받은 인가코드를 통
happy-jjang-a.tistory.com
Vue.js Google 로그인 연동하기
Vue.js에서 Google 연동하는 방법을 알아본다.Google 계정 로그인은 OAuth 2.0 기반의 사용자 인증을 제공한다. 구글 개발자 센터 설정 먼저 구글 개발자 센터로 접속하여 프로젝트 생성부터 진행을 해
happy-jjang-a.tistory.com
'개발 > Vue.js' 카테고리의 다른 글
| Vue.js 카카오 로그인 연동하기 (3) | 2024.03.17 |
|---|---|
| Vue.js Google 로그인 연동하기 (0) | 2024.03.15 |
| Vue.js slot 기본 이해하기 (0) | 2024.03.08 |
| Vue.js emit 이해 및 사용(자식컴포넌트 -> 부모컴포넌트 이벤트/데이터 전달) (0) | 2024.03.07 |
| Vue.js computed와 watch 이해하기 (0) | 2024.03.03 |
댓글