[Node.js 9강] 외부서비스 API(네이버밴드) 적용하기

외부서비스API를 node.js에서 활용하는 방법을 알아보겠습니다. 

여러 API 중 네이버밴드에서 제공하는 로그인 Open API를 적용하는 방법을 예제로 설명드릴게요

네이버 API 에 비교했을 때 네이버밴드 API 개발자 가이드는 설명이 군더더기 없이 너무 깔끔합니다. 

각 개발언어별 샘플 가이드가 없더군요.

 

네이버밴드 API가 설명된 밴드 개발자 센터 홈페이지

https://developers.band.us/develop/guide/api

밴드 개발자 센터

 

밴드 개발자 센터에 가셔서 사용할 API에 대한 정보를 생성 및 확인했다 생각하고 진행하겠습니다. 

(로그인 후 서비스 등록하고 CLIENT ID 와 CLIENT SECRET 키를 발급합니다)

 

 

API 사용을 위한 기본정보를 정의한 파일을 별도로 만들어줍니다. 

login_api.js

var os = require('os');

var loginApi = {
  CLIENT_ID : '---------',
  CLIENT_SECRET : '----------------------------',
  AUTHORIZE_URL : 'https://auth.band.us/oauth2/authorize?response_type=code',
  ACCESSTOKEN_URL : 'https://auth.band.us/oauth2/token?grant_type=authorization_code',
  PROFILE_URL : 'https://openapi.band.us/v2/profile',
  BAND_LIST_URL : 'https://openapi.band.us/v2.1/bands',
  POST_CREATE_URL : 'https://openapi.band.us/v2.2/band/post/create',
  getLoginUrl : function(clubSn){
    var hostname = os.hostname();
    var redirectURI;
    if(hostname === 'S1621N14'){
      redirectURI = encodeURI('http://localdevurl:8001/login/' + clubSn);//개발
    }else{
      redirectURI = encodeURI('http://cafe24app.com/login/' + clubSn);//운영
    }

    return this.AUTHORIZE_URL + '&client_id=' + this.CLIENT_ID + '&redirect_uri=' + redirectURI;			
  },
  getBase64Encoded : function(){
    return Base64.encode(this.CLIENT_ID + ':' + this.CLIENT_SECRET);
  }
}

var Base64 = {
	..인코딩 함수...
}

module.exports = loginApi;

 

 

밴드 로그인 버튼 추가

먼저 밴드 개발자 센터에 명시된 로그인 가이드를 확인해보겠습니다.

개발가이드를 참고해서 index.js와 index.ejs를 작성합니다.

index.js (라우터)

var loginApi = require('../conf/login_api');	//로그인API 사용자 정의 함수 사용

router.get('/', function(req, res, next) {

  var bandLoginUrl = loginApi.getLoginUrl();
  res.render('index', {bandLoginUrl : bandLoginUrl});
  
});

 

index.ejs

<h3 class="text-c">네이버밴드에 지금 로그인해보세요</h3>
<div style="text-align:center;">
  <a href="<%=bandLoginUrl%>" data-ajax="false">
    <img src='/css/images/btnBandLogin.png' alt="네이버밴드 로그인버튼" style="height:40px;"/>
  </a>
</div>

 

실제 화면 모습

밴드 로그인 버튼 URL : 

https://auth.band.us/oauth2/authorize?response_type=code&client_id=----------&redirect_uri=http://tenniscore.cafe24app.com/login/bandCallBack/ 

 

 

밴드 로그인 콜백 정의

밴드 로그인 버튼을 클릭하면 밴드 로그인 화면으로 이동하게 되고, 로그인이 완료되면 밴드 로그인 URL에 파라미터로 넘긴 redirect_uri의 주소로 콜백하게 되며, code 값을 파라미터로 넘깁니다. 

login.js(라우터) 의 콜백

var request = require('request');
var loginApi = require('../../conf/login_api');

router.get('/bandCallBack/club', function (req, res) {
  var code = req.query.code;
  ...
});
  

 

발급받은 code를 사용해서 로그인한 사용자의 인증토큰 가져오기

네이버 밴드 개발가이드를 참고해서 아래와 같이 login.js의 콜백함수를 작성합니다.

var request = require('request');
var loginApi = require('../../conf/login_api');

router.get('/bandCallBack/club', function (req, res) {
  var code = req.query.code;
  
  var bandAccessTokenUrl = loginApi.ACCESSTOKEN_URL + '&code=' + code;
  var base64Encoded = loginApi.getBase64Encoded();
  var options = {
    url: bandAccessTokenUrl,
    headers: {Authorization: 'Basic ' + base64Encoded}
  };
  
  request.get(options, function (error, response, body) {

    if (error || response.statusCode !== 200) {
      console.log('naver band access token get response error : ' + response.statusCode);
      console.error(error);
      res.redirect('/?resultCd=L');
      return;
    }
    
    body = JSON.parse(body);

    var token = body.access_token;
    ...
  });
});

 

로그인한 사용자 인증토큰을 이용해서 사용자정보 가져오기

 

사용자정보 조회 request

 

사용자 정보 결과 json 형태

 

밴드 개발자 가이드를 참고해서 아래와 같이  login.js의 콜백함수를 작성합니다. 

var request = require('request');
var loginApi = require('../../conf/login_api');

router.get('/bandCallBack/club', function (req, res) {
  var code = req.query.code;
  
  var bandAccessTokenUrl = loginApi.ACCESSTOKEN_URL + '&code=' + code;
  var base64Encoded = loginApi.getBase64Encoded();
  var options = {
    url: bandAccessTokenUrl,
    headers: {Authorization: 'Basic ' + base64Encoded}
  };
  
  //사용자정보를 위한 인증토큰 가져오는 부분
  request.get(options, function (error, response, body) {

    if (error || response.statusCode !== 200) {
      console.log('naver band access token get response error : ' + response.statusCode);
      console.error(error);
      res.redirect('/?resultCd=L');
      return;
    }
    
    body = JSON.parse(body);

    var token = body.access_token;
    
    //여기부터 사용자정보 조회하는 부분
    var bandProfileUrl = loginApi.PROFILE_URL + '?access_token=' + token;
    request.get(bandProfileUrl, function (error, response, body) {
    
      if (error || response.statusCode !== 200) {
        console.log('naver band profile get response error : ' + response.statusCode);
        console.error(error);
        res.redirect('/?resultCd=L');
        return;
      }

      body = JSON.parse(body);	//사용자 정보가 담긴 json
      
      if(body.result_code !== 1){
        console.log('naver band profile get error');
        res.redirect("/?resultCd=L");
        return;
      }

      var loginObj = {
        mberNm : body.result_data.name,
        mberSn : body.result_data.user_key,
        profileImage : profileImage,
        isTest : 'N'
      };
    
      ..사용자정보 활용...     
      
    }); //사용자정보조회 끝
    
  }); //인증토큰 조회 끝
  
});

 

이상으로 네이버밴드 API를 이용해서 로그인 및 사용자정보 조회하는 방법을 알아봤습니다. 다음강좌에서는 쿠키를 이용해서 로그인/로그아웃 처리하는 방법을 알아보겠습니다. 

 

 

다음강좌

2019/04/02 - [Node.js] - [Node.js 10강] cookie를 이용한 로그인/로그아웃 처리