레이블이 Api인 게시물을 표시합니다. 모든 게시물 표시
레이블이 Api인 게시물을 표시합니다. 모든 게시물 표시

2015년 12월 18일 금요일

API : Google reCaptcha 사용하기

스팸 같은 자동 글 등록기를 이용한 글 등록을 방지하기 위해 가장 흔히 쓰는게 Captcha 체크다.
보통은 직접 구현을 하지만, Captcha 서버를 따로 두거나 기능을 구현하기도 쉬운일이 아니므로, 간단히 Google 이 제공하는 Api 를 이용해 쉽게 구현 할 수 있다.

일단은 사용할 사이트를 Google 에 등록하고 키를 받아야 한다.



사용 키를 받는 다른 API 에 비해 정말 등록법이 간단한데, 그냥 사용할 도메인 리스트만 기록하고 등록하면 된다.


등록하면 2개의 키 (Site Key, Secret Key) 를 주는데, 사용법은 아래에 있는 코드를 그냥 사용할 위치에 삽입하기만 하면 된다.

참고로 Site Key 는 Html (클라이언트) 에서 캡챠를 생성할 때 쓰이는 것이고,
Secret Key 는 서버로 데이터를 전송했을 때 서버에서 캡챠값을 체크 할때 쓰이는 것이다.


이렇게 하면... (여기서 SiteKey 가 쓰임)


이렇게 캡차 체크가 나타난다.
이곳의 체크 박스를 클릭하면 자동 입력 프로그램인지, 실제 사람인지를 체크한다.
(클릭해보면 일반적으로는 그냥 체크만 되고 끝날 것이다. 다른 캡챠에 비해 허술해 보이지만 그렇지 않다. 보통은 그냥 바로 체크만 되고 끝나기 때문에 별것 아닌것 같아 보이지만, 실제로는 사용자 아이피 대역을 가지고 Google 스팸 블랙리스트를 체크하기 때문에 스팸사용자로 등록된 아이피 대역대의 사용자는 별도의 인증창을 띄워 좀더 까다롭게 체크한다. 내가 알기로는 전세계의 어떤 사이트에든 단 한번이라도 스패머로 인식될 경우 Google 캡챠를 쓰는 전세계 모든 사이트에서 스패머로 인식이 된다. 즉, 전문적인 스팸 등록자의 경우 구글 캡챠를 통과하기 어렵다.)

그러면 캡챠 체크여부는 이렇게...

function chkCaptcha() {
    if (typeof(grecaptcha) != 'undefined') {
if (grecaptcha.getResponse() == "") {
          alert("스팸방지코드를 확인해 주세요.");
          return false;
}
    }
    else {
return false;
    }
}

이렇게 자바 스크립트로 체크를 한다. (grecaptcha 는 html 에 기록한 캡챠의 id 임)
이때는 단지 캡챠에 체크가 되어 있는지 만을 체크한다.
자동 등록 프로그램으로는 Google 캡차에 체크를 할 수 없기 때문에, 보통은 이렇게 체크 여부만  체크해줘도 어지간한 자동 등록 프로그램을 막을 수 있다.

하지만, 단순히 클릭질만 하는 매크로 정도라면 막을 수 있지만, 좀더 전문적인 자동 매크로는 이정도는 통과 하는데... (체크되지 않았는데 체크되었다고 속일 수가 있다) 이 경우까지 막으려면 서버단에서 한번더 체크 해주면 된다.

즉, "등록하기" 버튼을 클릭해 "Submit" 이 발생했을 때, 데이터가 전송된 서버에서 캡챠값을 정확한 값인지 체크해보면 된다. (체크 했다고는 속일 수는 있지만, 체크되었을 때 생성되는 체크값 까지 조작하기는 어렵다) 

그러니까. 요렇게...


클릭했을때 생성되는 캡챠값이 Google 인증 서버에 보내서 정확한 값인지를 체크하면 된다.
뭔가 대단해 보이지만, 단순히 구글 인증 서버에 POST 를 보내 결과 값을 jSon 으로 받는 것이다. (꼭 위의 방식으로 하지 않아도 된다.)
주의 할 것은 "127.0.0.1" 이나 "localhost" 에서 테스트 하는 경우에는 그냥 결과 값을 보내 주지만, 일반적인 도메인 이라면 최초에 등록한 도메인에서 정확한 키값을 보내지 않으면 실패하지 주의 해야 한다.

만약 제대로된 인증이라면....


이렇게 "success" : true 라는 값을 보내 준다.

만약 잘못되었다면...

이렇게 오류 메시지를 보내 준다.
저렇게 보내준 값을 잘 알아서 쓰면 된다.


2015년 5월 27일 수요일

안드로이드 : GCM Message 사용(3) : 웹에서 폰으로 Push 메시지 전송


일단 GCM Service 를 등록하고, 앱에서 폰의 ID 를 생성했다면, 이제 Push 서버에서 그 ID 를 이용해 메시지를 보내면 된다.

일반적으로넌 앱이 실행 될때 관리 서버로 생성한 ID 를 전달해 주지만, 여기서는 어차피 혼자서 쓰는 것이니, 이미 전달되어 있다고 생각하고...
Push 서버에서 메시지를 보내보자.

거창하게 Push 서버라고 말은 하지만, 그냥 구글 GCM Service 에 등록 ID 와 메시지를 던져 주는 역할을 할 뿐이다.

그냥 아무 웹페이지나 하나 만들고...


소스를 이렇게 기록한다.



using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Net;
using System.Text;
using System.IO;
using System.Security.Cryptography.X509Certificates;
using System.Net.Security;
using System.Collections.Specialized;

public partial class gcmtest : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        SendNotification("전달 받은 앱의 등록 키를 여기에 기록", "GCM TEST를 합니다.");
    }

    public string SendNotification(string regId, string message)
    {
        string GoogleAppID = "API Key 를 기록";
        var SENDER_ID = "프로젝트 넘버";
        var value = HttpUtility.UrlEncode(message);
        
        WebRequest tRequest;
        tRequest = WebRequest.Create("https://android.googleapis.com/gcm/send");
        tRequest.Method = "post";
        tRequest.ContentType = " application/x-www-form-urlencoded;charset=UTF-8";
        tRequest.Headers.Add(string.Format("Authorization: key={0}", GoogleAppID));

        tRequest.Headers.Add(string.Format("Sender: id={0}", SENDER_ID));

        string postData = "collapse_key=score_update&time_to_live=108&delay_while_idle=1&data.title=test&data.msg="
            + value + "&data.time=" + System.DateTime.Now.ToString() + "&registration_id=" + regId + "";
        Console.WriteLine(postData);

        Byte[] byteArray = Encoding.UTF8.GetBytes(postData);
        tRequest.ContentLength = byteArray.Length;

        Stream dataStream = tRequest.GetRequestStream();
        dataStream.Write(byteArray, 0, byteArray.Length);
        dataStream.Close();

        WebResponse tResponse = tRequest.GetResponse();

        dataStream = tResponse.GetResponseStream();

        StreamReader tReader = new StreamReader(dataStream);

        String sResponseFromServer = tReader.ReadToEnd();

        tReader.Close();
        dataStream.Close();
        tResponse.Close();
        return sResponseFromServer;
    }
}


여기서 GoogleAppID 는 구글에서 등록한 서비스 Key 이며.
SENDER_ID 는 프로젝트 넘버.
regId 는 폰에서 앱이 실행 할때 생성한 ID 이다.

이렇게 하고...


 저 버튼을 클릭하면...


이렇게 폰으로 메시지가 전달이 된다.
여기에 나온는 메시지는..


웹에서 저 파라메터로 넘겨지고...

앱에서...


저기서 처리되니... 적당히 알아서 쓰면되겠다.



2014년 12월 9일 화요일

다음(daum) 약도 API 를 반응형으로 적용


다음 약도 서비스를 홈페이지에 붙였는데...
이 홈페이지가 반응형홈페이지 였는데, 다음 약도 API 영역 자체는 줄이는게 어렵지 않았다.

하지만, 문제는 그렇게 api 영역만 줄이니, 지도에 표시되어 있는 마크가 원래 초기에 지정된 약도의 가운데 있는지라, 작은 단말기에서는 초기 화면에서 지정한 마크가 보이지 않게 된다는 단점이 있었다.

해결책을 찾다보니... 다음개발자네트워크에 'JJandck' 라는 분이 해결책을 제시해 놓은것이 있었다.

http://cafe.daum.net/daumdna/KErw/5882?q=%B4%D9%C0%BD%20%BE%E0%B5%B5%20API%20%B9%DD%C0%C0%C7%FC

나도 동일하게 해결....

<div id='subContent'>
<iframe id="map_iframe" src="http://dna.daum.net/include/tools/routemap/map_view.php?   width=800&height=550&latitude=37.021326505609025&longitude=127.05423592949135&contents=TEST&zoom=4"
 width="100%" height="585" scrolling="no" frameborder="0"></iframe>
</div>


<script language="javascript">
shows();
window.onresize = function checkResize() {
    shows();
}

function shows() {
    var width_ = document.getElementById('subContent').offsetWidth - 20;
    var para = document.getElementById("map_iframe").src.split("?");
    var para_1 = para[1].split("latitude");

    para_1[0] = "width=" + width_ + "&height=450&latitude";
    
    document.getElementById("map_iframe").src = para[0] + "?" + para_1[0] + para_1[1];
    document.getElementById("map_iframe").width = width_;
}
</script>




거의 같은 해결방법이지만, 나의 경우 해상도 변경을 잡아내는 것을 jQuery 가 아닌 그냥 javascript 를 썼다는것 정도 뿐.
결국 브라우져의 사이즈 변경시 iFrame 을 리로드 하는, 동일한 방법이다.


========= 2017.03.13 변경 ==============

다음 약도 API 가 바뀌었다.
이젠 기존 API 는 사용할 수 없으니, 새로운 API 를 사용해야 함.

일단 다음 맵에 가서 원하는 지점을 검색하여 찾아야 함.

http://map.daum.net/


거기서 원하는 지점을 찾았으면 거기서 "지도공유" 를 선택하고...


"지도 퍼가기" 를 선택.


여기서 "소스 생성하기" 를 선택하면...


이렇게 웹페이지에 삽입할 html 코드를 생성해 주는데, 이걸 홈페이지에 갖다 붙이면 간단히 약도를 홈페이지에 추가할 수 있음.


문제는 이 소스가 고정된 크기를 가지고 있기 때문에 반응형 홈페이지엔 문제가 있는데...


그냥 간단하게 소스 코드 상에서 크기 부분을 지워 버리고, 컨테이너 <div> 부분에 크기를 지정해 주면 그 크기에 맞춰 자동으로 약도 크기를 조정해 줌. 그러니 그 부분에 % 로 크기를 지정해 주면 반응형 홈페이지에서도 쓸 수 있음.



2014년 12월 3일 수요일

Daum Open Api - 우편번호 검색 달기


예전에는 주소 검색을 할때, 자체적으로 구현했었다.
그게 관리하기도 편하고, 한번 작업해 놓으면 그다지 바뀔일도 없어서, 기존에 쓴 소스를 계속 쓰면 되니까, 그다지 문제 될게 없었다.

근데... 요즘은 좀 문제가 되는게...

일단 도로명 주소가 문제다.
이제는 도로명 주소검색이 기본적으로 지원이 되어야 하고, 거기다 기존 주소 검색도 없으면 또 안되니까...

그 2가지 기능을 구현해 놓는것도 문제지만, 주소 데이터가 기존 주소 데이터만으로도 제법 되는데, 도로명 주소까지 해놓으면 제법 상당한 데이터가 된다.
당연히 검색하는데도 제법 시간이 걸린다.

그래서 요즘은 그냥 Open Api 를 활용해 주소 검색을 처리한다.
뭐... 외부 시스템을 쓴다는게 약간 찜찜한게 없는건 아니지만, 괜히 쓸데 없는데 공수를 투입하는것 보다 쓸수 있는게 있다면 쓰는게 났다.

하여간, 주소 검색 Open Api 는 제법 있지만, 나의 경우는 그 중에서 제일 쓰기 쉬운 Daum 의 Open Api 를 이용한다.

쓰는 법은 ....

<div id="addlayer" style="display:none;border:5px solid;position:fixed;width:400px;height:500px;left:50%;margin-left:-155px;top:50%;margin-top:-235px;overflow:hidden;-webkit-overflow-scrolling:touch;">
<img src="//i1.daumcdn.net/localimg/localimages/07/postcode/320/close.png" id="btnCloseLayer" style="cursor:pointer;position:absolute;right:-3px;top:-3px" onclick="closeDaumPostcode()" alt="닫기 버튼">
</div>

<script src="http://dmaps.daum.net/map_js_init/postcode.js"></script>
<script>
    // 우편번호 찾기 iframe을 넣을 element
    var element = document.getElementById('addlayer');

    function closeDaumPostcode() {
        // iframe을 넣은 element를 안보이게 한다.
        element.style.display = 'none';
    }

    function showDaumPostcode() {
        // iframe을 넣은 element를 보이게 한다.
        element.style.display = 'block';

        new daum.Postcode({
            oncomplete: function (data) {
                // 검색결과 항목을 클릭했을때 실행할 코드를 작성하는 부분.
                // 우편번호와 주소 및 영문주소 정보를 해당 필드에 넣는다.
                document.getElementById('<%= strHomePost1.ClientID %>').value = data.postcode1;
                document.getElementById('<%= strHomePost2.ClientID %>').value = data.postcode2;
                document.getElementById('<%= strHomeAddr1.ClientID %>').value = data.address;
                // iframe을 넣은 element를 안보이게 한다.
                element.style.display = 'none';
                return;
            },
            width: '100%',
            height: '100%'
        }).embed(element);

    }
</script>


를 소스에 추가하고....


       <span>
                                <a href="javascript:showDaumPostcode();"><img src="../images/member/btn_zip.gif" border="0"alt="우편번호"></a>
       </span>


로 버튼 클릭을 만들어 놓으면 된다.


그러면....


저기 우편번호 찾기를 클릭시... 



팝업창이 뜨고... 그냥 저기다 지번이든, 도로명이든 넣고 검색하면....


지번으로 검색도 되고...


도로명으로도 검색이 된다.







2014년 5월 23일 금요일

Evernote API 사용하기 (C#)

요즘 모바일 기기들이 많아지면서 메모 기능의 요구사항이 많아진다.
그중에서도 클라우드 기능이 적용된다면 더 좋고...

많은 서비스들이 있지만, 역시 가장 흔하게 쓰이는 것은 Evernote 다.
구글 Doc 라던지, 솜노트 라던지... 여러가지 모바일 노트기능을 지원하는 것이 나름 장/단점은 있지만,
역시 지원되는 기능이라던지 편의성 면에서 아직 Evernote 를 대체할 만한 것은 없는듯 하다.

일단 본론으로 들어가서.

API 등록 및 다운 받는 곳은

https://dev.evernote.com/

에서 하면 된다.



가운데 "Get Started with the API" 를 클릭


여기서 "GET AN API KEY" 를 클릭해서 키를 요청한다.


흔한 정보 요청 창이니 그냥 넣어주면 되고, 모든 정보를 입력후 키를 요청하면 메일로 키를 보내 준다.


여기서 보내준 키를 사용하면 되지만,
하지만, 그 전에 "development server" 를 클릭해서 계정을 만들어야 한다.



"development server" 를 클릭하면 로그인 창으로 이동하는데....


일반적인 Evernote 로그인 창처럼 보이지만, 아니다.
위으 주소를 보면 알수 있겠지만, 여기는 "sandbox.evernote.com" 이며, 계정을 새로 만들어 사용해야 한다. 물론 원래 자신이 쓰던 계정과 같은걸로 만들면 된다.

"sandbox" 이므로 데이터 안정성 및 보안을 보증할수 없으니, 중요한 정보 같은것은 넣으면 안된다.

등록까지 다 되었으면 API 를 다운 받는다. (여기서는 C# 으로 테스트)


다운 받은 소스를 압축을 풀고 샘플 소스를 열어 보면


authToken 을 기록 해 줘야 한다.
authToken 을 구할려면 소스에 나와 있는 대로

https://sandbox.evernote.com/api/DeveloperToken.action

으로 가서 로그인 하면 구할 수 있다.


여기서 구할 수 있는것은 개발용으로 기간 제약이 있는듯 하다.
하여간 여기서 구한 토큰을 소스 상의 authToken 에 넣고 샘플 소스를 실행 하면...


이렇게 새로운 노트가 추가 되어 있는 것을 볼 수 있다.