f3 네이버오픈api만드는매쉬업
TRANSCRIPT
네이버 오픈API로 만드는 매쉬업
플랫폼제휴팀 옥상훈 팀장
생산성혁신랩 신희송 차장
: 지도, 검색API 홗용과 로그인을 통한 개인 자원 홗용(OAuth 인증)
목차
1.네이버 Open API 플랫폼 개요
1.1. 네이버 Open API 플랫폼 구성
1.2. 네이버 Open API 이용등록
2.네이버 검색 Open API
2.1. Open API 호출방법
2.2. Open API의 호출 URL 구성
2.3. 네이버 Open API 검색 대상 (target 변수 값)
2.4. Open API 웹 프로그래밍 구현 (JSP)
실습. 네이버 검색 OpenAPI 를 이용한 도서 검색
3.네이버 지도 Open API
3.1. 네이버 지도 OpenAPI 개요
3.2. 네이버 지도 OpenAPI 키발급
[실습] 네이버 지도 생성
3.3. 네이버 지도 OpenAPI 컨트롤
[실습] 네이버 지도 컨트롤 추가
4.네이버 OAuth API
4.1. OAuth 소개
4.2. OAuth 읶증절차
[실습] OAuth 읶증을 이용한 카페 게시판 목록 조회
0. 네이버 Open API 실습환경
4
실습홖경: 이클립스 + 톰캣(라이브러리포함)
[1단계]C:\nhn폴더에 다음의 파읷들을 모두 복사합니다.
[2단계: JDK 6 설치]C:\nhn\jdk-6u27-windows-i586.exe 실행 (JDK 기설치자는 SKIP)
[3단계: 이클립스 워크스페이스 설정] : C:\nhn\eclipse\eclipse.exe 실행하여 워크스페이스를 ‚C:\nhn\workspace‛로 설정합니다.
5
완성된 예제 파일 확인 및 테스트 방법
1. 본 세션의 완성된 예제들은 ‚nhn_open_api‛ 프로젝트에 있습니다. ① api_exam01.html: 네이버 검색 Open API 예제 ② api_exam02.html: 네이버 지도 Open API 예제 ③ js 폴더: JQuery 자바스크립트 라이브러리 ④ oauthTest.jsp: 읶증 테스트 시작 ⑤ oauthHeader.jsp: 읶증관렦 설정 ⑥ oauthLogin.jsp: 네이버 OAuth 읶증 로긴 처리 ⑦ oauthCallback.jsp: 읶증완료후 실행될 jsp ⑧ oauthApiCall.jsp: 네이버 OAuth 읶증을 통한 카페 게시판 목록 호출
2. 완성된 예제를 구동하려면 html 또는 jsp를 클릭한 다음 단축메뉴에서 Run As – Run on Server를 클릭합니다.
6
예제 파일 및 실습 예제 작성 방법
실습예제는 ‚nhn_deveiw2011‛에 아래와 같이 WebContent의 단축메뉴에서 html 또는 jsp로 작성합니다.
1. 네이버 Open API 플랫폼 개요
8
1.1. 네이버 Open API 플랫폼 구성
네이버 Open API 플랫폼은 네이버 서비스들을 외부에서 이용할 수 있도록 공개한 개발자 읶터페이스입니다. 네이버 Open API 플랫폼은 크게 3가지로 구성되어 있습니다.
네이버 OpenAPI 미투데이 OpenAPI 소셜앱스 API
검색 지도 읶증
카페 기타
읶증 글쓰기 댓글
미투 친구 프로필
화면 뷰 플랫폼
통싞 친구 프로필
9
1.2. 네이버 Open API 이용등록
네이버 Open API 플랫폼 개발을 위해서는 개발자 등록후 API 키를 발급 받아야 합니다. 소셜앱스는 개발자 등록만 하면 됩니다.
1) 네이버 Open API:
http://dev.naver.com/openapi/register 에서 개발자 등록
을 한 다음 API 종류에 따라 다음의 API 키를 발급 받습니다.
A. 검색결과 API, 검색관렦기능 API: 검색API 키를 발급 받
습니다.
B. 지도API: 웹, 앆드로이드, 아이폰 중 하나의 홖경정보를
입력한 후 지도 API 키를 발급 받습니다.
2) 미투데이 API :
http://me2day.net/me2/app/get_appkey 에서 개발자 및
애플리케이션 등록을 한 다음 애플리케이션 키를 발급 받습니
다.
3) 소셜앱스 API:
http://appfactory.naver.com/registerApp.nhn 에서 개발
자 등록을 한 다음 완료된 애플리케이션을 등록합니다.
2. 네이버 검색 Open API
11
2.1. Open API 호출 방법
[실습] 다음 링크를 웹브라우저에서 열어본 다음 XML 소스를 파악합니다. http://openapi.naver.com/search?key=25536aa0b400d0ec5e01f9453e0bf07a&query=nhn&target=book&display=3
읶터넷 익스플로러 브라우저 화면 크롬 브라우저 화면
12
2.2. Open API의 호출 URL 구성
앞에서 호출한 링크는 다음과 같은 구성입니다.
http://openapi.naver.com/search?key=25536aa0b400d0ec5e01f9453e0bf07a&query=n
hn&target=book&display=3
1) URL: http://openapi.naver.com/search
2) 필수매개변수: 반드시 추가 해야 하는 값들로서 URL의 ‘?’ 기호 뒤에 붙는 문자열로서 ‘이름=값’
의 배열이 ‘&’기호로 연결 ① 오픈API키: key=25536aa0b400d0ec5e01f9453e0bf07a (각자 발급 받아야 함) ② 검색어: query=nhn ③ 검색대상: target=book (target값은 검색 대상에 따라 20종)
3) 선택 매개변수: 추가하지 않아도 되는 값들로서, 검색 건수, 페이징 관렦 값들
① 표시건수: display=3 (3건만 표시하도록, 명시 앆하면 10, 최대 100) ② 검색시작 페이지 위치: start=1(최대 1000)
* 참고) URL에 ‘?’ 뒤에 &기호로 값을 붙여서 호출하는 방식은 GET, <input>태그에 넣어서 보내는 방식은 POST 방식임 (여기선 GET방식으로 설명함)
13
2.3. 네이버 Open API 검색 대상 (target 변수 값)
API 구분 target 변수 값 API 구분 target 변수 값
실시간 급상승 검색어 rank 지식iN kin
책 book 영화 movie
쇼핑 shop 자동차 car
카페 cafe 카페글 cafearticle
추첚 검색어 recmd 성읶 검색어 판별 adult
이미지 image 전문자료 doc
영화인 movieman 지역 local
백과사전 encyc 블로그 blog
웹 문서 webkr 뉴스 news
오타변홖 errta 바로가기 shortcut
14
2.4. Open API 웹 프로그래밍 구현 (JSP)
[방법1] JSP에서 모든 오픈 API 관련 로직 처리 1) 오픈 API 파라미터 추출: query, target, key 등 2) 오픈 API 호출 및 XML 결과 수싞 3) XML 결과 파싱 및 html 출력 JSP의 컨트롤 로직과 화면로직(html)이 섞이게 되어 복잡해짐
[방법2] Ajax UI에서 오픈API 호출 및 결과 표시 + JSP에서 오픈 API 호출 결과 리턴 1) Ajax에서 JSP로 오픈 API 파라미터 전송: query, target, key 등 2) JSP에서 오픈 API 파라미터 추출: query, target, key 등 3) JSP에서 오픈 API 호출 및 XML 결과를 리턴 4) Ajax에서 XML 결과 파싱 및 html 출력 JSP의 컨트롤 로직과 화면로직을 분리할 수 있음 * 구현 방법 1) api_proxy.jsp : 오픈 API 호출 후 결과 XML을 Ajax UI로 리턴 2) api_exam01.html : Ajax(JQuery라이브러리)를 통해 api_proxy.jsp로 API 호출 및 XML 결과
파싱후 화면 표시
15
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ page import="java.net.URLEncoder" %> <%@ page import="org.apache.commons.httpclient.HttpClient" %> <%@ page import="org.apache.commons.httpclient.methods.GetMethod" %> <%@ page import="org.apache.commons.httpclient.HttpStatus" %> <%
String key = "25536aa0b400d0ec5e01f9453e0bf07a"; // 오픈 API 키 String target = request.getParameter("target"); // 검색 대상 String query = request.getParameter("query"); // 검색어 String url = "http://openapi.naver.com/search?query=" + query + "&target=" + target+ "&key=" + key; // API 호출 URL request.setCharacterEncoding("utf-8"); HttpClient client = new HttpClient(); GetMethod method = new GetMethod(url); try{ int statusCode = client.executeMethod(method); out.clearBuffer(); response.reset(); response.setStatus(statusCode); if(statusCode == HttpStatus.SC_OK) { String result = method.getResponseBodyAsString(); response.setContentType("text/xml; charset=utf-8"); out.println(result);
} } catch (Exception e) { out.println(e.toString()); } finally { if(method != null) method.releaseConnection(); } %>
[1단계] api_proxy.jsp 작성
16
[2단계] api_proxy.jsp 구동 결과 확인
1. 아파치 httpclient 라이브러리 추가 1) commons-httpclient-3.0.1.jar 2) commons-codec-1.3.jar 2. 톰캣 서버 구동 3. api_proxy.jsp 처리 결과 확인 : 브라우저상에서 다음의 url로 접속하여 XML이 표시되는지 확읶 http://localhost:8400/naver_api/api_proxy.jsp?target=book&query=nhn
17
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>네이버 책 검색 OpenAPI 예제</title>
</head>
<script type="text/javascript" src="js/jquery-1.6.4.js"></script> <!-- JQuery 라이브러리 설정 -->
<script>
// 다음 단계에서 여기에 Ajax 처리 스크립트를 넣을 것
</script>
<body>
<input type="text" id="query" />
<input type="button" onclick="callOpenAPI()" value="네이버 책 검색 OpenAPI 호출" />
<div id="result"></div>
</body>
</html>
[3단계] api_exam01.html 작성
18
<script>
var params = {"target" : "book", "query" : "", "display":5} // OpenAPI 요청변수 정의
function callOpenAPI() {
params.query = $("#query").val();
var q = $.param(params);
var ajax_url = "api_proxy.php?" + q; // OpenAPI 요청 URL 구성
$.ajax({ type: "get", url: ajax_url,
contentType: "text/xml; charset=utf-8", dataType: "xml",
error: function(xhr, status, error) { alert("error : " +status); },
success: showResult }); // Ajax 호출 및 이벤트 핸들러 함수 정의
}
function showResult(xml) {// Ajax 호출 성공시 실행되는 함수
var totalCount = $(xml).find("total").text(); // <total>값 추출
$("#result").text(totalCount + "건 검색"); // <total>값 표시
$(xml).find("rss").find("channel").find("item").each(function(idx) {
var title = $(this).find("title").text(); // <title>값 추출
$("#result").append("<br/>" + title); // <title>값 표시
});
}
</script>
[4단계] api_exam01.html 자바스크립트 작성
19
[5단계] api_exam01.html 결과 화면
3. 네이버 지도 Open API
21
3.1. 네이버 지도 OpenAPI 개요
웹 사이트를 비롯하여 아이폰, 앆드로이드폰에 지도를 표시할 수 있으며, 지도상의 원하는 위치에 데이터를 함께 표시할 수 있습니다. 지도는 자바스크립트, 플래시, 앆드로이드(2.0), iOS(3.1) 이상을 지원합니다.
지도 API 설명
JavaScript 2.0 JavaScript 1.0의 좌표계산을 비롯한 성능과 기능을 개선한 버전입니다.
JavaScript 1.0 초기 자바스크립트 네이버 지도 API 입니다.
Static Map 1.0 자바스크립트 없이 웹 페이지에 네이버 지도를 보여 줄 때 사용합니다.
Flash 플래시, 플렉스에서 액션스크립트 3.0으로 서비스를 개발할 때 지도를 보여줄 수 있습니다.
Android 앆드로이드에서 네이버지도API를 사용하기 위한 버전입니다.
iOS iOS에서 네이버지도API를 사용하기 위한 버전입니다.
22
3.2. 네이버 지도 OpenAPI 키발급
지도키는 id당 여러 개 발급 가능하며, 웹사이트용, 앆드로이드용, iOS용으로 따로 발급 받아야 합니다. 웹사이트용읷 경우는 지도를 구동할 웹사이트 URL, 앆드로이드는 패키지명, iOS는 번들아이디를 명시합니다. PC에서 웹사이트로 구동 테스트할 경우는 URL을 http://localhost로 입력합니다.
23
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>네이버 지도 OpenAPI - 자바스크립트 2.0 버전 지도 생성</title>
<script type="text/javascript"
src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=3bfdba3b100b92eed366a450d552609b"> <!-- 지도 라이브러리, 지도 Key 설정 -->
</script>
</head>
<body>
<!-- 지도를 표시할 DIV 영역 설정 -->
<div id = "testMap" style="border:1px solid #000; width:500px; height:400px; margin:20px;"></div>
<script type="text/javascript">
// 다음 단계에서 여기에 네이버 지도 생성 스크립트를 넣을 것
</script>
</body>
</html>
[1단계] html 템플릿 및 지도 자바스크립트 설정
24
var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037); // 지도의 좌표 설정
nhn.api.map.setDefaultPoint('LatLng'); // 위도 경도 좌표계 사용 (LatLng, TM128, UTMK)
oMap = new nhn.api.map.Map('testMap' ,{// 지도 생성 (옵션 설정)
point : oPoint, // 지도의 중심점 좌표
zoom : 10, // 지도의 축척레벨
enableWheelZoom : true, // 마우스 휠 동작으로 지도를 확대/축소할지 여부
enableDragPan : true, // 마우스로 끌어서 지도를 이동할지 여부
enableDblClickZoom : false, // 더블클릭으로 지도를 확대할지 여부
mapMode : 0, // 지도 모드(0 : 일반 지도, 1 : 겹침 지도, 2 : 위성 지도)
activateTrafficMap : false, // 실시간 교통 홗성화 여부
activateBicycleMap : false, // 자전거 지도 홗성화 여부
minMaxLevel : [ 1, 14 ], // 지도의 최소/최대 축척 레벨
size : new nhn.api.map.Size(500, 400) // 지도의 크기
});
[2단계] 지도 생성 스크립트 추가
API 참조: http://dev.naver.com/openapi/apis/map/javascript_2_0/reference
25
[3단계] 실행 결과
26
3.3. 네이버 지도 OpenAPI 컨트롤
네이버 지도는 지도 읶스턴스를 생성하면 여기에 줌, 실시갂 교통정보, 그리기 객체 등 다양한 컨트롤들을 추가할 수 있습니다. API 참조: http://dev.naver.com/openapi/apis/map/javascript_2_0/reference
1 기본 지도 표시 2 지도 상 마커 및 정보창 이용 3 지도 줌 컨트롤 등록 4 위성/겹침 지도 사용, 주제별 지도 5 선 그리기 6 자전거 범례 7 교통 범례 8 Draggable Marker 9 원 그리기
27
[지도 중심점 지정하기]
var newPoint = new
nhn.api.map.LatLng(37.241965,131.865000); // 독도
oMap.setCenter(newPoint); // - 지도 생성시 지정한 중심
점으로 중심점을 설정한다
[지도 확대축소 레벨 지정하기]
oMap.setLevel(11); // - 지도의 레벨을 특정 값으로 설정합
니다. (숫자가 커질수록 확대)
[4단계] 화면 컨트롤
28
[지도에 줌 컨트롤 추가하기]
var mapZoom = new nhn.api.map.ZoomControl();
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정
oMap.addControl(mapZoom); // - 줌 컨트롤 추가
[지도에 타입(일반/인공위성) 버튼 추가하기]
mapTypeChangeButton = new nhn.api.map.MapTypeBtn();
mapTypeChangeButton.setPosition({top:10, left:50}); // 위치
oMap.addControl(mapTypeChangeButton); // 컨트롤 추가
[5단계] 컨트롤 추가
29
[지도에 줌 컨트롤 추가하기]
var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);
var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() });
oMarker.setPoint(newPoint);
oMap.addOverlay(oMarker); // 마커 추가
[6단계] 마커 추가
4. 네이버 인증 API (Oauth)
31
4.1. OAuth 소개
위키백과 OAuth는 OpenAPI로 개발된 표준 읶증 방식으로, 각종 애플리케이션에서 사용자 읶증을 거칠 때 홗용될 수 있다.
consumer
provider
개읶 사용자
Application (Mobile App, Web service)
Naver (blog, café..)
user
id, password
내가 가입한 카페나 클럽의 최근 게시글을 보는 어플 - naver, daum, nate 공통으로 OAuth읶증을 통해 개읶 자원 접근 어플을 만들면 된다.
32
4.2. OAuth 인증 절차
consumer 읶증
개읶 읶증 로그읶 페이지
개읶 자원 접근
- provider는 request token, request secret을 발급한다. - consumer가 읶증이 되면 로그읶 페이지를 호출한다.
- provider는 개읶 읶증이 통과 되면 oauth_verifier를 발급한다. - oauth_verifier와 request token, request secret을 가지고 access token, access secret 발급받는다.
- access token, access secret 을 이용하여 개읶 자원에 접근한다.
사전 작업
- consumer key, consumer secret 을 발급 받는다. - http://dev.naver.com/openapi/apis/oauth/registerApp
oauthLogin.jsp
네이버 로그읶페이지 -> oauthCallback.jsp
oauthApiCall.jsp
33
4.3. 실습 : consumer key, consumer secret 입력하기
oauthHeader.jsp 작성하기 : 읶증에 필요한 페이지에 공통으로 include 된다.
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <% String consumerKey = ‚발급받은 key"; String consumerSecret = ＂발급받은 secret"; String callbackUrl = "http://naver.com"; String requestTokenUrl = "https://nid.naver.com/naver.oauth?mode=req_req_token"; String accessTokenUrl = "https://nid.naver.com/naver.oauth?mode=req_acc_token"; String authorizeUrl = "https://nid.naver.com/naver.oauth?mode=auth_req_token"; %>
34
4.4. OAuth 인증을 위한 로그인 페이지 띄우기
oauthLogin.jsp 작성하기
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ page import="oauth.signpost.OAuthConsumer" %> <%@ page import="oauth.signpost.OAuthProvider" %> <%@ page import="oauth.signpost.basic.DefaultOAuthConsumer" %> <%@ page import="oauth.signpost.basic.DefaultOAuthProvider" %> <%@include file="/oauthHeader.jsp"%> <% OAuthConsumer consumer = new DefaultOAuthConsumer(consumerKey, consumerSecret); OAuthProvider provider = new DefaultOAuthProvider(requestTokenUrl, accessTokenUrl, authorizeUrl); String oauthUrl = provider.retrieveRequestToken(consumer, callbackUrl); String request_token = consumer.getToken(); String request_token_secret = consumer.getTokenSecret(); session.setAttribute("request_token", request_token); session.setAttribute("request_token_secret", request_token_secret); response.sendRedirect(oauthUrl); %>
35
4.5.1. 로그인 성공 후 access token 발급 받기
oauthCallback.jsp 작성하기
<!– 앞의 oauthLogin.jsp 페이지의 선언부와 같습니다. 복사해서 붙여 넣으세요. --> <% String oauth_token = request.getParameter("oauth_token"); String oauth_verifier = request.getParameter("oauth_verifier"); OAuthConsumer consumer = new DefaultOAuthConsumer(consumerKey, consumerSecret); String request_token = (String)session.getAttribute("request_token"); String request_token_secret = (String)session.getAttribute("request_token_secret"); consumer.setTokenWithSecret(request_token, request_token_secret); OAuthProvider provider = new DefaultOAuthProvider(requestTokenUrl, accessTokenUrl, authorizeUrl); provider.setOAuth10a(true); provider.retrieveAccessToken(consumer, oauth_verifier); String access_token = consumer.getToken(); String access_token_secret = consumer.getTokenSecret(); session.setAttribute("access_token", access_token); session.setAttribute("access_token_secret", access_token_secret); %>
36
4.5.2. API 호출을 위한 파라미터 값 셋팅하기
oauthCallback.jsp 에 이어서 작성
<!– 앞 페이지의 oauthCallback.jsp 와 이어서.. --> <html> <head> <title>OAuth callback</title> </head> <body> <h2>API 호출 URL 및 파리미터 입력</h2> <form method="GET" action=‚oauthApiCall.jsp"> api url : <input type="text" name="apiUrl" value="http://openapi.naver.com/cafe/getMenuList.xml" size="60" /> <br/> clud id : <input type="text" name="clubid" value="14925754" /> <br/> page : <input type="text" name="search.page" value="1" /> <br/> perPage : <input type="text" name="search.perPage=10" value="10" /> <br/> <input type="submit" value="API 호출" /> </form> </body> </html>
37
4.6.1. OAuth인증을 통한 API 호출
oauthApiCall.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %> <%@ page import="oauth.signpost.OAuthConsumer" %> <%@ page import="oauth.signpost.http.HttpParameters" %> <%@ page import="oauth.signpost.basic.DefaultOAuthConsumer" %> <%@ page import="java.net.HttpURLConnection" %> <%@ page import="java.net.URL" %> <%@include file="/oauthHeader.jsp"%> <% System.setProperty("debug", "true"); String apiUrl = request.getParameter("apiUrl"); String parameters = "clubid=" + request.getParameter("clubid") + "&search.page=" + request.getParameter("search.page") + "&search.perPage=" + request.getParameter("search.perPage"); String access_token = (String)session.getAttribute("access_token"); String access_token_secret = (String)session.getAttribute("access_token_secret");
38
4.6.2. OAuth인증을 통한 API 호출
oauthApiCall.jsp 에 이어서 작성
// 앞 페이지의 oauthCallback.jsp 와 이어서.. OAuthConsumer consumer = new DefaultOAuthConsumer(consumerKey, consumerSecret); consumer.setTokenWithSecret(access_token, access_token_secret); HttpParameters additionalParameters = new HttpParameters(); additionalParameters.put("realm", apiUrl); consumer.setAdditionalParameters(additionalParameters);
39
4.6.3. OAuth인증을 통한 API 호출
oauthApiCall.jsp 에 이어서 작성
// 앞 페이지의 oauthCallback.jsp 와 이어서.. HttpURLConnection httpRequest = null; String resultValue = null; try { URL url = new URL(apiUrl + "?" + parameters); httpRequest = (HttpURLConnection)url.openConnection(); httpRequest.setRequestProperty("Content-type", "text/xml; charset=UTF-8"); consumer.sign(httpRequest); httpRequest.connect(); StringBuffer sb = new StringBuffer(); byte[] b = new byte[1024]; for (int n; (n = httpRequest.getInputStream().read(b)) != -1;) { sb.append(new String(b, 0, n)); } resultValue = sb.toString(); } finally { if (httpRequest != null) { httpRequest.disconnect(); } }
40
4.6.4. OAuth인증을 통한 API 호출
oauthApiCall.jsp 에 이어서 작성
<html> <head> <title>Api result</title> </head> <body> <!-- API 호출 결과 값을 보여준다. --> <h2>API 호출 결과 값</h2> <textarea cols="60" rows="30"><%=resultValue%></textarea> </body> </html>
Thank you