본문 바로가기
Dev.FrontEnd/Vue

[Vue] Naver 간편 로그인 (naverLogin_implicit-1.0.3.js) 구현

by superpil 2021. 7. 31.

목차

"SNS 간편 로그인을 언젠가 한번 만들어 봐야지" 생각은 있었다.

생각은 있었지만 계획은 없었는지 계속 미루고 있다가 만들어야만 하는 경우가 생겨, 자의가 아닌 타의에 의해 만들게 되었다.

그러다 보니 프로세스가 약간 이상할 수 있다. 그래도 SNS 간편 로그인에 대해 많은 공부를 하게 되었다.

(Google, Kakao 간편 로그인도 했는데 대부분 프로세스는 같고 용어만 살짝 다르다.)

 

Vue를 이용해 구현한 예제가 많다. 대부분 SDK를 사용한 예제들 이다.

하지만 Naver 개발 문서에 튜토리얼은 naverLogin_implicit-1.0.3.js를 사용한 예제로 짜여있어 참고하여 만들었다.

SDK랑 크게 다르지 않는 것 같다.

 

예제 시퀀스 다이어그램

예제 시퀀스 다이어그램

  1. 사용자가 Naver 계정으로 로그인 시 Naver에 access token발급을 요청 한다.
  2. Naver는 계정을 확인 후 정상이면 Client에게 access token을 발급 해준다.
  3. Client는 개발Server로 access token과 함께 로그인을 요청 한다.
  4. 개발Server는 Client에게 전달 받은 access token을 Naver에 정상 token인지 확인 요청 한다.
  5. Naver는 token확인 후 정상 token이면 회원 정보를 개발server로 응답 한다.
  6. 회원정보를 받은 개발server는 Client의 로그인 요청을 수락 한다.

 

현재 예제에는 3, 4, 5, 6번은 생략 되어 있다.

 

설정하기

Naver developers

Naver 간편 로그인 구현을 위해서는 Naver Developers에서 간단한 설정이 필요하다.

https://developers.naver.com/main/에 접속 하자.

 

애플리케이션 등록

애플리케이션 등록

  1. 개인 Naver 계정으로 로그인 완료후 상단 메뉴에 Application을 클릭 후 애플리케이션 등록을 클릭 한다.
  2. Naver 간편 로그인 뿐만 아니라 Naver가 제공하는 서비스(캡차, papago번역, 단축URL 등)를 이용하여 개발하기 위해서는 애플리케이션 등록이 필요하다.

 

API 신청

👉 애플리케이션 이름

  1. 등록하고 싶은 이름을 작성 하면 된다.

 

👉 사용 API

  1. Naver에서 제공하는 서비스 중 네이버 아이디로 로그인을 이용하기 위해서 네아로를 선택 한다.

 

👉 사용 API

  1. 네아로를 선택하면 이용자의 어떤 정보를 얻을 것 인가에 대한 선택지가 나온다.

 

👉 로그인 오픈 API 서비스 환경

  1. 현재 개발하는 환경을 선택한다.
  2. 웹에서 Vue를 사용하여 기능을 만들 예정이니 PC웹을 선택한다. 만약, 앱이면 안드로이드 또는 IOS를 선택하면 될 것 이다.

 

서비스URL, Callback URL 설정
Client와 Naver 시퀀스 다이어그램

👉 서비스 URL

  1. 로그인 오픈 API 서비스 환경에서 PC웹을 선택하면 서비스 URL과 Callback URL을 작성하는 input박스가 나온다.
  2. 서비스 URL은 Naver 아이디로 로그인을 구현하는 사이트 주소를 입력 하면 된다.
  3. 현재는 local에서 기능을 구현하기 때문에 localhost를 입력하고 Vue를 실행하는 port가 8080이기 때문에 port번호는 8080으로 한다. 만약, Vue 실행 port를 8003으로 변경 했다면 http://localhost:8003으로 입력 하면 된다.
  4. 여기서 중요한점은 위 프로세스 이미지를 보면 실제 Client는 http://localhost:8080/login에서 Naver로 요청을 해도 서비스 URL에 등록 시 http://localhost:8080까지만 등록 한다.

 

👉 Callback URL

  1. Callback URL은 사용자가 Naver로그인을 정상적으로 완료 한 경우 Naver에서 access token을 내려줄 URL주소를 작성한다.
  2. 위 프로세스 이미지를 보면 로그인 성공 시 Naver는 http://localhost:8080/login/naver로 성공 token을 내려 준다.
  3. callback URL은 개발시 사용해야 하니 기억해둔다.

 

Client ID 정보

👉 Client ID

  1. 현재 화면을 보게 된다면 모든 등록이 끝났다는 의미다.
  2. callback URL과 같이 Client ID는 개발에 사용해야하니 기억해둔다.

 

naver implicit 코드 넣기

<!DOCTYPE html>
<html lang="">
  <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>

    <!-- naver -->
    <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>
		<!-- // naver -->

  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

👉 <script type="text/javascript" src="https://static.nid.naver.com/js/naverLogin_implicit-1.0.3.js" charset="utf-8"></script>

  1. Vue index.html에 Naver implicit script코드를 넣는다.
  2. 해당 script를 등록해야 Naver객체를 생성 할 수 있다.

 

👉 <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

  1. ajax통신을 위해 jquery를 넣는다.
  2. ajax통신은 access token을 받고 회원 정보를 요청 할 때 사용하는 것 같다. 현재 예제에는 Client에서 회원정보 요청을 하지 않아 딱히 입력 하지 않아도 되는 코드 다.

 

router경로 설정

// router
const router = new VueRouter({
  mode: "history",
  routes: [
    {
      path: "/login",
      name: "Login",
      component: () => import("@/views/Login.vue"),
    },
    {
      path: "/login/naver",
      name: "naver",
      component: () => import("@/views/LoginAccess.vue"),
    },
  ],
});

Naver 로그인을 위해 2개의 페이지를 사용한다.

path: '/login'은 사용자가 Naver 로그인 버튼이 나타나는 페이지, path:'/login/naver'는 정상적 로그인 후 access token을 받기 위한 callback 페이지로 사용 된다.

사실 2개 페이지로 나누지 않아도 된다.

페이지 한개로 로그인을 하고 access token을 받으면 된다. 페이지 한개로 하면 Naver 객체를 한개만 만들고 if문 처리 하면 된다.

쉽게 이해하고자 2개 페이지로 나눴다.

 

Naver 객체 및 Button 생성

Login Page

<template>
  <div>
    <div id="naver_id_login"></div>
  </div>
</template>

<script>

export default {
  mounted(){
    const naver_id_login = new window.naver_id_login("Client Id", "callback URL");
    const state = naver_id_login.getUniqState();
    naver_id_login.setButton("white", 2,40); // 버튼 설정
    naver_id_login.setState(state);
    // naver_id_login.setPopup(); // popup 설정을 위한 코드
    naver_id_login.init_naver_id_login();
  }
}
</script>

<style>
</style>

화면에 출력된 로그인 버튼

👉 <div id="naver_id_login"></div>

  1. 반드시 id="naver_id_login"으로 입력 해야한다. 만약, 없거나 다른것으로 입력할 경우 alert창으로 에러를 알린다.

 

👉 var naver_id_login = new window.naver_id_login("Client Id", "callback URL")

  1. 이제 Naver객체를 만들어 셋팅을 해주면 된다.
  2. 애플리케이션 등록에서 입력한 callback URL과 애플리케이션 등록 완료 후 받은 Client Id를 naver_id_login 객체에 각각 주입한다.

 

👉 naver_id_login.setButton("white", 2,40)

  1. 화면에 출력될 버튼의 디자인을 설정한다.
  2. 사용 가능한 옵션 : 버튼 색상 : white, green 크기 : 1(버튼형), 2(작은 배너), 3(큰 배너) 배너 및 버튼 높이 : 사용자 지정값
  3. 해당 코드를 설정하지 않아도 Naver에서 자동으로 default버튼을 만들어 준다.
  4. 만약, Naver에서 제공하는 버튼 디자인을 사용하고 싶지 않은 경우에는 CSS로 작업하면 된다.

 

👉 naver_id_login.setPopup()

  1. Naver로그인을 popup모드로 사용하기 위한 설정이다.
  2. popup설정이 없으면 페이지 전환을 해서 로그인을 할 수 있다.

 

👉 naver_id_login.init_naver_id_login()

  1. init_naver_id_login()을 통해 객체를 초기화 시켜준다.
  2. 위 메소드가 없으면 에러가 발생하니 반드시 코드를 작성 해야 한다.

 

위 모든 설정이 끝나면 화면에 Naver버튼을 볼 수 있다.

버튼을 클릭 하면 Naver 로그인 페이지로 이동 하고 로그인을 하게 되면 callback URL로 응답(access token)을 해준다.

Naver 로그인 화면 호출

 

로그인 응답 받기(access token)

Callback Page

<template>
  <div>
    <p>Naver Login Access Pages</p>
  </div>
</template>

<script>
export default {
  mounted() {
    new window.naver_id_login("Client Id", "callback URL");
    console.log("access token", naver_id_login.getAccessToken()); // 정상적 로그인이 된 경우 access token값 출력
  },
};
</script>

👉 <p>Naver Login Access Pages</p>

  1. 사용자가 정상적으로 로그인을 완료하면 callback page로 이동 한다.
  2. 해당 페이지에서 asscess token을 받을 수 있다.
  3. asscess token을 개발서버(naver서버 아님)로 전송하여 개발서버는 access token으로 Naver에 사용자 정보를 요청 하면 이름, 나이, 성별 등의 데이터를 조회 할 수 있다.

 

👉 new window.naver_id_login("Client Id", "callback URL")

  1. callback page에서 새로운 Naver객체를 생성한다.
  2. Login Page에서 생성한 Naver객체와 callback Page에서 생성한 Naver객체는 서로 다른 객체인데 access token을 callback page에서 생성한 Naver객체에서 받을 수 있다는게 신기 하다.

 

Reference

  1. https://developers.naver.com/docs/login/web/web.md
저작자표시

'Dev.FrontEnd > Vue' 카테고리의 다른 글

[Vue] 조건부 렌더링(v-if, v-show)  (1) 2021.08.04
[Vue] input에 숫자만 입력 가능하게 하기  (1) 2021.08.02
[Vue] Watch  (0) 2021.07.21
[Vue] Lifecycle Hooks  (0) 2021.07.18
[Vue] class 동적 바인딩  (0) 2020.11.04

관련글

댓글

티스토리툴바