이아임의 블로그

일단
 https://developers.naver.com/apps/#/register

로 이동하여 API를 신청해준다.

그러면 아이디와 시크릿값을 받을 것이다.

PHP로 설명을 하겠다.
<?php
// 한글깨짐 방지
header("Content-Type: text/html; charset=UTF-8");
// 발급받은 클라이언트 아이디
client_id = "Client_ID";
// 발급받은 클라이언트 시크릿 값
$client_secret = "Client_Secret";
// 검색어 url 형식에 맞게 엔코딩
$encText = urlencode("검색어");
// JSON을 이용해서 검색
$url = "https://openapi.naver.com/v1/search/local.json?query=".$encText;
// XML을 이용해서 검색
$url = "https://openapi.naver.com/v1/search/local.xml?query=".$encText;

/*
블로그 검색 = "https://openapi.naver.com/v1/search/blog.json=".$encText;
뉴스 검색 = "https://openapi.naver.com/v1/search/news.json=".$encText;
책 검색 = "https://openapi.naver.com/v1/search/book.json=".$encText;
성인 검색어 판별 = "https://openapi.naver.com/v1/search/adult.json=".$encText;
백과사전 검색 = "https://openapi.naver.com/v1/search/encyc.json=".$encText;
영화 검색 = "https://openapi.naver.com/v1/search/movie.json=".$encText;
카페 검색 = "https://openapi.naver.com/v1/search/cafeatricle.json=".$encText;
지식인 검색 = "https://openapi.naver.com/v1/search/kin.json=".$encText;
지역 검색 = "https://openapi.naver.com/v1/search/local.json=".$encText;
오타변환 검색 = "https://openapi.naver.com/v1/search/errata.json=".$encText;
웹문서 검색 = "https://openapi.naver.com/v1/search/webkr.json=".$encText;
이미지 검색 = "https://openapi.naver.com/v1/search/image.json=".$encText;
쇼핑 검색 = "https://openapi.naver.com/v1/search/shop.json=".$encText;
전문자료 검색 = "https://openapi.naver.com/v1/search/doc.json=".$encText;

json 기반으로 작성됐으며 뒤에 .json을 .xml로 변경해주면 코드 그대로 변경사항 없이 사용가능하다.
*/

$is_post = false; 
$ch = curl_init(); 
curl_setopt($ch, CURLOPT_URL, $url); 
curl_setopt($ch, CURLOPT_POST, $is_post); 
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); 
$headers = array(); 
$headers[] = "X-Naver-Client-Id: ".$client_id; 
$headers[] = "X-Naver-Client-Secret: ".$client_secret; 
curl_setopt($ch, CURLOPT_HTTPHEADER, $headers); 
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, 0); 
$response = curl_exec ($ch); 
$status_code = curl_getinfo($ch, CURLINFO_HTTP_CODE); 
echo "status_code:".$status_code."<br>"; 
curl_close ($ch);

if($status_code == 200) { 
    echo $response; 
} else { 
    echo "Error 내용:".$response; 
}

네이버 지도 API 이번에 V2지원을 종료하기에 V3로 작성하였다.

<div id="map" style="width:100%;height:400px;"></div>


<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?clientId=YOUR_CLIENT_ID&submodules=geocoder"></script>
<script> 
    //지도 타입 설정하는 곳 ( 아무것도 설정 하지 않으면 자동으로 Normal로 적용된다 ) 초기화할 때 설정할수 있다. 
    var map = new naver.maps.Map('map'); 
    // 위성지도를 사용하려면 MapTypeId 객체의 SATELLITE 상수 값을 사용합니다. 
    //var map = new naver.maps.Map('map', {mapTypeId: naver.maps.MapTypeId.SATELLITE}); 
    // 위성지도에 지명을 적용하려면 MapTypeId 객체의 HYBRID 상수 값을 사용합니다. 
    //var map = new naver.maps.Map('map', {mapTypeId: naver.maps.MapTypeId.HYBRID}); 
    // 기본지도에 높낮이만 적용하려면 MapTypeId 객체의 TERRAIN 상수 값을 사용합니다. 
    //var map = new naver.maps.Map('map', {mapTypeId: naver.maps.MapTypeId.TERRAIN});
    var myaddress = '';// 도로명 주소나 지번 주소만 가능 (건물명 불가!!!!) 
    // 주소가 있는지 체크
    naver.maps.Service.geocode({address: myaddress}, function(status, response) { 
        if (status !== naver.maps.Service.Status.OK) { 
            return alert(myaddress + '의 검색 결과가 없거나 기타 네트워크 에러'); 
        }
        var result = response.result; 
        // 검색 결과 갯수: result.total 
        // 첫번째 결과 결과 주소: result.items[0].address 
        // 첫번째 검색 결과 좌표: result.items[0].point.y, result.items[0].point.x 
        var myaddr = new naver.maps.Point(result.items[0].point.x, result.items[0].point.y); 
        map.setCenter(myaddr); // 검색된 좌표로 지도 이동 
        // 마커 표시 ( 검색한 주소에 마커를 찍어둠 )
        var marker = new naver.maps.Marker({ 
            position: myaddr, 
            map: map 
        }); 
        // 마커 클릭 이벤트 처리 ( 클릭할 경우 infowindow에 등록된 이미지와 이름이 뜸 )
        naver.maps.Event.addListener(marker, "click", function(e) { 
            if (infowindow.getMap()) { 
            infowindow.close(); 
        } else { 
            infowindow.open(map, marker); 
        } 
    }); 
    // 마크 클릭시 인포윈도우 오픈 
    var infowindow = new naver.maps.InfoWindow({ 
    //띄워줄 이름과 사이트 이미지, 클릭했을경우 이동할 url 주소를 입력해주면 된다.
         content: '<h4> [네이버 개발자센터]</h4><a href="https://developers.naver.com" target="_blank"><img src="https://developers.naver.com/inc/devcenter/images/nd_img.png"></a>'
    });
});

https://developers.naver.com/products/login/api/

위 링크로 접속해서 네아로 오픈 API를 신청해야한다.

https://developers.naver.com/docs/login/api/

개발 가이드에 원하는 언어로 스크립트를 따간다.

필자는 자바스크립트로 적용을 했다.

HTML 

<div id="naver_id_login"></div> //원하는 곳에 넣으면 된다.
<script type="text/javascript"> 
   var naver_id_login = new naver_id_login("오픈 API 발급 아이디", "처리페이지 URL"); 
   var state = naver_id_login.getUniqState(); 
   naver_id_login.setButton("green", 10, 40); // 버튼의 이미지 변경이다 
   naver_id_login.setDomain("도메인 주소"); 
   naver_id_login.setState(state); 
   naver_id_login.setPopup(); 
   naver_id_login.init_naver_id_login(); 
</script>

처리 페이지

필자는 로그인 적용 후에 나중에 네아로를 적용한 것이라서 아이디와 토큰을 재 전송해주는 것
처리 페이지에서 바로 처리해도 됨.

로그인 체크 페이지
function setRegisterValue(token, email, winObj){ 
     //네아로 페이지 닫기
     winObj.close();

     var form = document.register_write_form; 

     // 원하는 곳에 토큰과 메일 아이디 삽입
    $("#token").val(token); 
    $("#email").val(email); 
    
     // 삽입 후에 form 전송
     form.submit(); 
}