OAuth2.0 다음블로그 자료를 리스트로 뿌리기 적용

2014년에 제 홈페이지 http://time-space.biz 에 여기 블로그글이 나타나도록 처리 하였었는데, 최근에 살펴보니 기존에 잘 나오던 다음블로그의 글이 출력되지 않는 것을 발견하였다.

원인을 찾다가, 언제인지는 정확지 않으나, OAuth2.0을 다음에서 적용하고나서, 예전 방식으론 블로그 OpenApi를 사용할 수 없다는 것을 알게 되었습니다.

그래서, OAuth2.0을 적용한 방식을 사용하게 되었고, 적용 후기를 작성하게 되었습니다.

다음오픈API가 OAuth2.0으로 변경되면서, 토큰(Token)을 사용해서 인증받은 사용자만, 해당 API를 사용하게 변경 되었습니다.

그 토큰이 기본 24시간만 유지되는 방식 입니다. 24시간이 지나면, 다음에 로그인해서 새로운 토큰을 발급 받아야 합니다. 사이트 관리하는 입장에선 불편하기 때문에, 일반 토큰이 아닌 refresh_token을 사용해서 로그인 없이 다시 access_token을 재발급 받아서, 재인증없이(로그인없이) 계속 토큰을 사용할 수 있게 되었습니다.

이 방식은 Daum에서 Authorization Code Grant라고 부르며, JSP/Servlet, PHP등과 같은 Server-side 프로그래밍으로 인증을 구현할 경우 사용하기 적합한 인증 방식으로 소개하고 있습니다.( https://developers.daum.net/services/apis/docs/oauth2_0/reference 참조 하단부분)

진행 순서

1.  Authorization code 를 발급받습니다.(다음사이트 로그인이 필요 합니다. 초기1회만 로그인해서 코드를 확인 하시면 됩니다.)

사용예) 브라우저 주소표시줄에 아래 URL을 입력하고 엔터...(*클라이언트 ID와 redirect_uri는 본인 값을 사용해야 합니다.)

https://apis.daum.net/oauth2/authorize?client_id=66473716......&redirect_uri=http://time-space.biz/metro&response_type=code

2. HTML폼으로 access_token과 refresh_token 값을 발급 받습니다.

사용예) 웹페이지에 아래 내용을 입력하고 전송버튼 클릭... *아래 value값은 여러분코드를 입력 하셔야 합니다.

<form method="POST" action="https://apis.daum.net/oauth2/token">
        <input type="hidden" name="client_id" value="66473716....."/>
        <input type="hidden" name="client_secret" value="5bcdc0d1fc4b03c065cxxxxxxxxx"/>
        <input type="hidden" name="redirect_uri" value="'http://time-space.biz/metro"/>
        <input type="hidden" name="code" value="29080"/>
        <input type="hidden" name="grant_type" value="authorization_code"/>
        <button type="submit">토튼값출력</button>
</form>

3. 위 폼의 submit (토큰값출력)버튼을 누르면, 브라우저화면에 JSON 형식의 refresh_token값을 얻게 됩니다.

4. 위 refresh_token값으로 access_token 값을 재발급받고, 이 엑세스토큰값으로 해당API를 작동시킬수 있게 됩니다.

사용예)

<div> <!-- Start 다음API -->

<?php

// 엑세스 토큰값 자동으로 재발급받기 (*아래 $parameters값은 여러분 고유값을 입력하셔야 합니다.)
function getAccessToken() {
 $url = "https://apis.daum.net/oauth2/token";
 $parameters = "client_id=66473716111.......&client_secret=5bcdc0d1fc4b03c065c6790.......&redirect_uri=time-space.biz/metro&refresh_token=a435a08b8856b0a4d237c0b434b9ca97ecced50eeb4485397d276a806d70bc13e3................&grant_type=refresh_token";
 $curl = curl_init();
 curl_setopt($curl, CURLOPT_URL, $url);
 curl_setopt($curl, CURLOPT_POST, true);
 curl_setopt($curl, CURLOPT_POSTFIELDS, $parameters);
 curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
 curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
 curl_setopt($curl, CURLOPT_CONNECTTIMEOUT, 10);
 curl_setopt($curl, CURLOPT_HTTPHEADER, array('Content-Type: application/x-www-form-urlencoded'));
 $result = curl_exec($curl);
       $NHNreturns = json_decode($result);
       echo $NHNreturns -> access_token;
       //print_r($parameters);//디버그
       //print_r($result);//디버그
       curl_close($curl);
}
?>

<!-- 콜백함수로 데이터 HTML방식으로 출력 -->
<script type="text/javascript">
  function listPosts(data) {
   var items = data.channel.item;
   var len = items.length;
   var output = '';
   for (var i=0; i<len; i++) {
    var item = items[i];
    output += '<a href="http://blog.daum.net/_blog/BlogTypeView.do?blogid=0FnMj&articleno='+item.postId+'" class="list small bg-lightBlue fg-white" target="_new">';
    output += '<div class="list-content"><div class="data" style="margin:0px">';
    output += '<span class="icon icon-link-2 border"></span>';
    output += '<span class="list-title">'+item.title+'</span>';
    output += '<span class="list-remark">'+item.date+'</span>';
    output += '</div></div>';
    output += '</a>';
   }//for
   $('#postlist').html(output);
  }//listPosts
  </script>
    <div class="listview small" id="postlist"></div>
   <!-- 다음 블로그 API 이용하기위해서 위PHP에서 access_token 재발급함수를 호출하여 토큰값 삽입 -->
   <script type="text/javascript" src="https://apis.daum.net/blog/v1/web_design/list.json?access_token=<?=getAccessToken();?>&callback=listPosts&result=5"></script>

</div> <!-- End 다음API -->

...

위 과정이 없이 access_token값을 상수로 삽입하면, 24시간 후에 접속시 블로그 API를 사용할 수 없게 됩니다.

결과화면(아래 빨간색 부분이 적용된 부분 입니다.)