'API' 카테고리의 글 목록

'API'에 해당되는 글 10건

[Kakao] Kakao 계정으로 Login 하기[Kakao] Kakao 계정으로 Login 하기

Posted at 2020. 1. 31. 11:16 | Posted in API/Kakao

■ 카카오 계정으로 로그인 하기

# 소스코드

<html>

<head>

<title>:: Custom Login Demo - Kakao JavaScript SDK ::</title>

document.addEventListener("DOMContentLoaded", function() {

// @details 카카오톡 Developer API 사이트에서 발급받은 JavaScript Key

Kakao.init( "발급받은 JavaScript Key" );

// @breif 카카오 로그인 버튼을 생성합니다.

Kakao.Auth.createLoginButton({

container : "#kakao-login-btn"

, success : function( authObj ) {

// console.log( authObj );

Kakao.API.request({

url : "/v1/user/me"

, success : function( res ) {

// console.log( res );

// @breif 아이디

document.getElementById( "kakaoIdentity" ).innerHTML = res.id;

// @breif 닉네임

document.getElementById( "kakaoNickName" ).innerHTML = res.properties.nickname;

// @breif 프로필 이미지

document.getElementById( "kakaoProfileImg" ).src = res.properties.profile_image;

// @breif 썸네일 이미지

document.getElementById( "kakaoThumbnailImg" ).src = res.properties.thumbnail_image;

}, fail : function( error ) {

alert( JSON.stringify( error ) );

}

});

}

, fail : function( error ) {

alert( JSON.stringify( error ));

}

});

</script>

</head>

<body>

<br/>

</body>

</html>

# 출력결과

저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] KakaoTalk으로 링크 공유하기 API (5)	2018.08.31

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP

Posted at 2019. 12. 23. 19:34 | Posted in API/Bitly

참고 : https://stackoverflow.com/questions/55681871/how-to-shorten-url-using-php-bitly-v4?answertab=active#tab-top

■ Bittly API v4 토큰 발급받기

① 먼저 Bittly 계정이 필요하다.

가지고 있는 Bittly계정이 존재하지 않다면 https://bitly.com/a/sign_up 페이지에 접속하여 계정을 생성한다.

② 가입된 계정이 준비되었다면 https://app.bitly.com/ 페이지에 접근한다.(로그인 되어 있지 않은 상태로 접근 불가)

자신의 계정정보가 노출되는 페이지에 접속 했다면 상단 우측의 메뉴 항목을 클릭한다.

③ 자신의 계정을 클릭한다.

④ Generic Access Token 카테고리를 클릭한다.

⑤ 패스워드를 입력하고 클릭하면 화면 하단에 GENERATE TOKEN 버튼이 나타난다.

GENERATE TOKEN 버튼을 클릭한다.

⑥ 토큰이 발급된 것을 확인 할 수 있다.

■ Bittly API v4 연동하여 짧은 URL 생성하기

PHP에서 Bittly API와 연동하여 짧은 URL을 생성해 보도록 하겠다.

PHP의 cURL을 사용하였다.

# 소스코드

<?php

/// @brief URI 값 생성

$getUri = "num=1&lang=ko";

/// @brief 접근할 URL 주소 생성

$longUrl = "http://도메인주소?".$getUri;

/// @brief 생성한 URL을 $data['long_url']에 담고 JSON 형태로 변환한다.

$data['long_url'] = $longUrl;

$payload = json_encode($data);

/// @brief BITLY API 접근 URL

$bitApi = "https://api-ssl.bitly.com/v4/bitlinks";

/// @brief 발급받은 BITLY API 토큰

$bitToken = "발급받은 API 토큰 값";

/// @brief CURL 사용

$cURL = curl_init();

curl_setopt($cURL, CURLOPT_URL, $bitApi);

curl_setopt($cURL, CURLOPT_CUSTOMREQUEST, "POST");

curl_setopt($cURL, CURLOPT_POSTFIELDS, $payload);

curl_setopt($cURL, CURLOPT_RETURNTRANSFER, TRUE);

curl_setopt($cURL, CURLOPT_HTTPHEADER, array(

"Authorization:Bearer ".$bitToken // Bearer { $token } (공백필수)

, "Content-Type:application/json"

, "Content-Length:".strlen($payload)

)

);

/// @brief 결과값 조회

$result = json_decode(curl_exec($cURL), TRUE);

echo "<pre>";

print_r($result);

echo "</pre>";

/// @brief 출력결과

if(isset($result['link']) == 1) {

echo $result['link'];

}

# 출력결과

저작자표시

[API] 주소 검색 - 행정안전부 API 사용하기[API] 주소 검색 - 행정안전부 API 사용하기

Posted at 2019. 11. 20. 10:34 | Posted in API/우편번호

참고 : https://www.juso.go.kr/addrlink/devAddrLinkRequestGuide.do?menu=roadApi

■ 주소 검색 API(한국지역정보개발원) 발급받기

API를 발급받기 위해서는 https://www.juso.go.kr/addrlink/devAddrLinkRequestWrite.do?returnFn=write&cntcMenu=URL 페이지에 접속한다.

오픈 API 신청 페이지에 접속하면

위와같이 사용할 항목을 선택하고.

신청하기 버튼을 클릭한다.

API를 사용하기 위해서는 본인인증 과정이 필요하다.

(개발용 7일 - 본인 미인증도 가능)

본인 인증 절차가 마무리 되면 위와 같이 API 키가 생성된 것을 확인 할 수 있다.

■ 주소 검색 API(JavaScript, jQuery) - 샘플코드

한국지역정보개발원에서 제공하는 도로명주소 API는 JSON 형태로 데이터를 제공해 준다.

제공하는 예제소스에서는 PHP, JSP, ASP등의 샘플과 팝업창에 띄워서 사용할 수 있는 방법을 제공하지만.

필요한 JSON으로 데이터를 받을 수 있도록,

JavaScript와, jQuery Ajax를 통해 구현 할 수 있게끔 변경을 해 보았다.

# 소스코드

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

table { width:100%;border:1px solid #444444;border-collapse:collapse; }

th, td { border: 1px solid #444444; }

tr > td:first-child { text-align:center; }

div#wrap { display:none;border:1px solid #DDDDDD;width:500px;margin-top:5px;padding:5px; }

div#wrap > div { margin-top:10px;margin-left::5px;margin-right:5px;margin-bottom::5px; }

div#wrap a:link { color:#000000;text-decoration:none; }

div#wrap a:hover { color:#0000FF;text-decoration:underline; }

div#totoalOutcome { display:none; }

#closeBtn { float:right;margin-top:-5px;margin-right:-5px; }

#searchAddr { width:380px; }

#zipCode { text-align:center; }

#address, #detail { width:500px; }

</style>

/// @brief 주소검색창 - 키보드 Enter키 입력

function enterSearch() {

var evt_code = (window.netscape) ? event.which : event.keyCode;

if (evt_code == 13) {

event.keyCode = 0;

getAddr();

}

/// @brief 주소검색창 - 데이터 조회

function getAddr() {

// 적용예 (api 호출 전에 검색어 체크)

let keyword = document.getElementById("searchAddr");

if(!checkSearchedWord(keyword)) {

return;

}

jQuery.ajax({

url : "http://www.juso.go.kr/addrlink/addrLinkApiJsonp.do"

, type : "POST"

, data : {

confmKey : "발급받은 도로명 주소 API KEY"

, currentPage : document.getElementById("currentPage").value

, countPerPage : document.getElementById("countPerPage").value

, keyword : keyword.value

, resultType : "json"

}

, dataType : "jsonp"

, crossDomain : true

, success : function(jsonStr) {

jQuery("#list").html("");

let errCode = jsonStr.results.common.errorCode;

let errDesc = jsonStr.results.common.errorMessage;

if(errCode == "0") {

if(jsonStr != null) {

makeListJson(jsonStr);

}

} else {

alert(errDesc);

}

, error : function(xhr, status, error) {

alert("에러발생");

}

});

}

/// @brief 주소검색창 - 주소지 선택

function makeListJson(jsonStr) {

let htmlStr = "<thead><tr><th style='width:70px;'>우편번호</th><th>주소</th></tr></thead><tbody>";

if(jsonStr.results.common.totalCount > 0) {

jQuery("#totoalOutcome").css("display", "block");

jQuery("#totalCnt").html(jsonStr.results.common.totalCount);

jQuery(jsonStr.results.juso).each(function() {

let zipNo = this.zipNo; // 우편번호

let roadAddr = this.roadAddr; // 도로명 주소

let jibunAddr = this.jibunAddr; // 지번 주소

htmlStr += "<tr>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += zipNo;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "<td>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+roadAddr+"\");'>";

htmlStr += "도로명 : " + roadAddr;

htmlStr += "</a>";

htmlStr += "<br/>";

htmlStr += "<a href='javascript:;' onClick='inputTextAddress(\""+zipNo+"\", \""+jibunAddr+"\");'>";

htmlStr += "지번 : " + jibunAddr;

htmlStr += "</a>";

htmlStr += "</td>";

htmlStr += "</tr>";

});

pageMake(jsonStr);

} else {

htmlStr += "<tr><td colspan='2'>조회된 데이터가 않습니다.<br/>다시 검색하여 주시기 바랍니다.</td></tr>";

}

htmlStr += "</tbody>";

jQuery("#list").html(htmlStr);

}

/// @brief 주소검색창 - 주소지 삽입

function inputTextAddress(zipcode, address) {

document.getElementById("zipCode").value = zipCode;

document.getElementById("address").value = address;

}

/// @brief 주소검색창 - 열기

function addressWindowOpen() {

jQuery("#wrap").slideDown();

jQuery("#searchAddr").focus();

}

/// @brief 주소검색창 - 닫기

function addressWindowClose() {

jQuery("#wrap").slideUp();

jQuery("#searchAddr").val("");

jQuery("#totoalOutcome").css("display", "none");

jQuery("#list").empty();

jQuery("#pagingList").empty();

jQuery("#currentPage").val("1");

}

/// @brief 주소검색창 - 특수문자 제거

function checkSearchedWord(obj) {

if(obj.value.length > 0) {

// 특수문자 제거

var expText = /[%=><]/;

if(expText.test(obj.value) == true) {

alert("특수문자를 입력 할수 없습니다.") ;

obj.value = obj.value.split(expText).join("");

return false;

}

// 특정문자열(sql예약어의 앞뒤공백포함) 제거

var sqlArray = new Array(

"OR", "SELECT", "INSERT", "DELETE", "UPDATE", "CREATE"

, "DROP", "EXEC", "UNION", "FETCH", "DECLARE", "TRUNCATE"

);

// sql 예약어

var regex = "";

for(var num = 0; num < sqlArray.length; num++) {

regex = new RegExp(sqlArray[num], "gi") ;

if(regex.test(obj.value)) {

alert("\"" + sqlArray[num]+"\"와(과) 같은 특정문자로 검색할 수 없습니다.");

obj.value = obj.value.replace(regex, "");

return false;

}

return true ;

}

/// @brief 주소검색창 - 페이징 생성

function pageMake(jsonStr) {

var total = jsonStr.results.common.totalCount; // 총건수

var pageNum = document.getElementById("currentPage").value; // 현재페이지

var pageBlock = Number(document.getElementById("countPerPage").value); // 페이지당 출력 개수

var paggingStr = "";

// 검색 갯수가 페이지당 출력갯수보다 작으면 페이징을 나타내지 않는다.

if(total > pageBlock) {

var totalPages = Math.floor((total - 1) / pageNum) + 1;

var firstPage = Math.floor((pageNum - 1) / pageBlock) * pageBlock + 1;

if(firstPage <= 0) { firstPage = 1; };

var lastPage = (firstPage - 1) + pageBlock;

if(lastPage > totalPages) { lastPage = totalPages; };

var nextPage = lastPage + 1;

var prePage = firstPage - pageBlock;

if(firstPage > pageBlock) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + prePage + ");'>◀</a>";

paggingStr += " ";

}

for(let num = firstPage; lastPage >= num; num++) {

if(pageNum == num) {

paggingStr += "<a style='font-weight:bold;color:#0000FF;' href='javascript:;'>" + num + "</a>";

paggingStr += " ";

} else {

paggingStr += "<a href='javascript:;' onClick='goPage(" + num + ");'>" + num + "</a>";

paggingStr += " ";

}

if(lastPage < totalPages) {

paggingStr += "<a href='javascript:;' onClick='goPage(" + nextPage + ");'>▶</a>";

}

jQuery("#pagingList").html(paggingStr);

}

/// @brief 페이징 이동

function goPage(pageNum) {

document.getElementById("currentPage").value = pageNum;

getAddr();

}

</script>

</head>

<body>

<h1>■ 행정안정부 - 주소 검색 API</h1>

<hr/>

현재 페이지 : <input type="number" id="currentPage" value="1" style="text-align:center;"/>

페이지당 출력 개수 : <input type="number" id="countPerPage" value="5" style="text-align:center;"/>

<div>

</div>

<div>

검색결과 : <span id="totalCnt">0</span>

</div>

</div>

</div>

</body>

</html>

# 출력결과

저작자표시

'API > 우편번호' 카테고리의 다른 글

[API] 다음 - 우편번호 API 모바일에서 사용하기 (4)	2018.04.04
[API] 다음 - 우편번호 API 사용하기 (0)	2018.03.13

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

Posted at 2018. 8. 31. 01:17 | Posted in API/Kakao

■ 카카오 디벨로퍼 애플리케이션 생성

01. 카카오 디벨로퍼(https://developers.kakao.com/) 사이트에 접속한다.

카카오 디벨로퍼에 가입하지 않은 사람이라면 우선 여기서 가입을 하고 다음 작업을 진행한다.

02. 이제 내 애플리케이션(https://developers.kakao.com/apps) 페이지로 이동해서 앱 만들기 버튼을 클릭해 주자.

03. 제작할 앱의 아이콘과 이름을 작성하고, 앱 만들기 버튼을 클릭하면 앱이 생성된다.

04. 앱이 다 만들어지면 자바스크립트 키를 발급받게 되는데 이 키를 잘 기억해 두자.

05. 마지막으로 생성한 애플리케이션에 사이트 도메인을 입력한다.

① 위에서 생성한 애플리케이션을 선택한다.

② 좌측 카테고리의 설정 → 일반을 선택한다.

③ 사이트 도메인부분에 사용할 사이트 도메인을 입력한다.

(해당 포스팅은 http://localhost 를 사용하였다.)

④ 저장 버튼을 눌러 설정을 저장하면 사용할 준비가 완료되었다.

■ 카카오 톡 공유 템플릿 제작하기

#01. 카카오톡 피드 템플릿 제작

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
       Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
       Kakao.Link.sendDefault({
              objectType:"feed"
           , content : {
                  title:"WARCRAFT3 THE REIGN OF CHAOS"   // 콘텐츠의 타이틀
               , description:"너흰아직 준비가 안되었다!"   // 콘텐츠 상세설명
               , imageUrl:"illidan_stormrage.jpg"   // 썸네일 이미지
               , link : {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                   , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
               }
           }
           , social : {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
           }
           , buttons : [
               {
                      title:"게시글 확인"    // 버튼 제목
                   , link : {
                        mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                      , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                   }
               }
           ]
       });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>

# 출력결과

#02. 카카오톡 위치 템플릿 제작

# 소스코드

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>:: 카카오톡 공유하기 ::</title>
<script type="text/JavaScript" src="https://developers.kakao.com/sdk/js/kakao.min.js"></script>
<script type="text/javascript">
    function shareKakaotalk() {
        Kakao.init("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX");      // 사용할 앱의 JavaScript 키를 설정
        Kakao.Link.sendDefault({
              objectType:"location"
            , address:"노스렌드"    // 공유할 위치의 주소
            , addressTitle:"얼음왕관의 성채"   // 카카오톡 내의 지도 뷰에서 사용되는 타이틀
            , content: {
                  title:"WARCRAFT3 THE FROZEN THRONE"   // 콘텐츠의 타이틀
                , description:"왕위를 계승하는 중입니다. 아버지" // 콘텐츠 상세설명
                , imageUrl:"arthas_menethil.jpg"    // 썸네일 이미지
                , link: {
                      mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                    , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                }
            }
            , social: {
                  likeCount:0       // LIKE 개수
                , commentCount:0    // 댓글 개수
                , sharedCount:0     // 공유 회수
            }
            , buttons: [
                {
                      title:"버튼 제목" // 버튼 제목
                    , link: {
                          mobileWebUrl:"http://magic.wickedmiso.com/"   // 모바일 카카오톡에서 사용하는 웹 링크 URL
                        , webUrl:"http://magic.wickedmiso.com/" // PC버전 카카오톡에서 사용하는 웹 링크 URL
                    }
                }
            ]
        });
    }
</script>
</head>
<body>
    <h1>카카오톡 공유하기</h1>
    <input type="button" onClick="shareKakaotalk();" value="KAKOA Talk으로 공유하기"/>
</body>
</html>

# 출력결과

저작자표시

'API > Kakao' 카테고리의 다른 글

[Kakao] Kakao 계정으로 Login 하기 (0)	2020.01.31

Prev Next

1 2 3

'API'에 해당되는 글 10건

[Kakao] Kakao 계정으로 Login 하기[Kakao] Kakao 계정으로 Login 하기

'API > Kakao' 카테고리의 다른 글

[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP[API] Bittly API v4 연동, 단축 URL 생성하기 - PHP

[API] 주소 검색 - 행정안전부 API 사용하기[API] 주소 검색 - 행정안전부 API 사용하기

'API > 우편번호' 카테고리의 다른 글

[Kakao] KakaoTalk으로 링크 공유하기 API[Kakao] KakaoTalk으로 링크 공유하기 API

'API > Kakao' 카테고리의 다른 글

CategoryCategory

Recent PostRecent Post

Recent CommentRecent Comment

Recent TrackbackRecent Trackback

Tag CloudTag Cloud

ArchiveArchive

LinkLink

티스토리툴바