미투데이도 얼른 OAuth기반으로 바꿨으면 좋겠네요.
인증 방식은 비슷하긴 하지만, access_token요청하는 부분 같은 게 없어서 callbackurl로 사용자api키를 받게 되는군요. 보안상 안좋을 것 같은...-_-

그리고, 언제까지 스프링노트에 표시를 할 것인지가 의문입니다.
트위터가 OpenAPI를 참 잘해놔서 그런지 굉장히 많은 서비스들이 튀어나오고 있습니다. 이점은 미투데이에서도 얼른 OpenAPI에 힘을 쓰시는 게...^^

api페이지입니다.
http://codian.springnote.com/pages/86001

요청절차는 이러합니다. 물론 여기가면 더 자세히 나와있습니다ㅠㅠ(웹인증기반 기준!)
http://codian.springnote.com/pages/1645274
1) api키를 발급받습니다.
2) 해당 api키로 인증 토큰을 얻습니다.
3) 그 토큰으로 인증url로 이동시킵니다.
4)사용자가 로그인 하면 지정한 callback페이지로 사용자키를 던져줍니다.
5) 사용자키로 글을 쓰면 됩니다.


1. 일단 API키 발급

http://me2day.net/me2/app/key/list
여기서 새 애플리케이션 키 발급한다음에 등록합니다. 그리고 등록된 키에서 설정을 누르면 웹기반인지 데스크탑기반인지 선택하는데, 웹기반이면 callback주소를 입력받습니다. 이 callback주소는 인증 후에 사용자키를 받는 url이 됩니다.

2. 해당api키로 인증토큰 얻기
config.php파일
[code]<?php
define('A_KEY', '발급받은 api키');
?>[/code]
index.php
[code]<?php
    require_once("config.php");
    $result = json_decode(file_get_contents("http://me2day.net/api/get_auth_url.json?akey=" . A_KEY));
    print_r($result);
?>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>미투데이 인증 후 글쓰기</title>
      </head>
    <body>
        <br />
        <a href="<?php echo $result->url ?>">미투데이 인증하기</a>
      </body>
</html>[/code]
php에서 http://me2day.net/api/get_auth_url.json를 요청해서 token을 받습니다. 그러면 인증url이 같이 떨어집니다. 그 url로 이동하게 되면 아래와같이 로그인하는 화면이 나옵니다.
사용자 삽입 이미지
여기서 로그인하고 인증하면 1번에서 지정한 callbackurl로 이동하게 됩니다.

3. callback url에서 데이터받고 글쓰기 폼생성

callback.php
[code]<?php
    require_once("config.php");
   
    $token = $_GET["token"];
    $user_id = $_GET["user_id"];
    $user_key = $_GET["user_key"];
    $result = $_GET["result"];
   
    // 세션저장
    session_start();
    $_SESSION["user_id"] = $user_id;
    $_SESSION["user_key"] = $user_key;
   
    // 인증이 확실한지 확인
    $authKey = "12345678" . md5("12345678" . $user_key);
    $result = file_get_contents("http://me2day.net/api/noop?uid={$user_id}&ukey={$authKey}&akey=" . A_KEY);
?>
<!doctype html>
<html>
    <head>
        <meta charset="EUC-KR">
        <title>미투데이 인증 콜백</title>
        <script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#btnPost").click(function(){
                    var body = $("#inputPost").val();
                    if (body.length < 1){
                        alert("글입력해요!");
                        return;
                    }
                    $.getJSON("post.php?callback=?", {body:body}, function(data){
                        alert("글쓰기 성공 = " + data.result);
                    });
                });
            });
        </script>
      </head>
    <body>
        <?php echo $result ?><br/>
        <input type="text" id="inputPost" name="inputPost" /><br />
        <input type="button" id="btnPost" name="btnPost" value="글쓰기"/>
      </body>
</html>[/code]
보면 user_id랑 user_key를 세션에 저장합니다. 만약 자신의 사이트에서 미투데이인증과 통합을 원한다면 api키를 데이터베이스같은 영속적인 것에 저장하고 쓰는 것이 좋습니다. 그럼 따로 인증같은 것을 하지 않아도, 자신의 사이트만 인증을 해도 글을 쓸 수 있으니까요^^
나중에 api_key값이 바뀐다고 해도, noopapi를 호출해서 인증이 정확한지 확인 후 정확하지 않으면 다시 인증받으면 되니까요^^

user_id랑 user_key만 있으면 이제 글을 쓸 수 있으므로, http://me2day.net/api/noop를 호출해서 유효한지 확인을 합니다. 이제부터 인증받은 api들은 uid와 ukey와 akey를 같이 파라메터에 붙여서 호출해야합니다.
uid는 사용자 아이디, ukey는 임의8자리숫자 + md5(임의8자리숫자 + 사용자키), akey는 api키를 넣으면 됨!

4. 글쓰기
post.php
[code]<?php
    require_once("config.php");
   
    $body = $_GET["body"];
    $callback = $_GET["callback"];
   
    session_start();
    $user_id = $_SESSION["user_id"];
    $user_key = $_SESSION["user_key"];
   
   
    // 인증이 확실한지 확인
    $authKey = "12345678" . md5("12345678" . $user_key);
    $result = file_get_contents("http://me2day.net/api/create_post/{$user_id}.json?uid={$user_id}&ukey={$authKey}&akey=" . A_KEY . "&post[body]={$body}");
   
    header("Content-type: application/json");
    echo "{$callback}({'result':'{$result}'})";
?>[/code]
그냥 api문서대로 호출하면 됨!

테스트 url~
mudchobo.tomeii.com/test/me2daytest/

나중에 php용 라이브러리를 만들어봐야겠다...
 
Posted by 머드초보
,
 
http://mudchobo.tomeii.com/tt/303
Javascript로 만든 위젯이 여러분의 매우 관심없음의 힘입어....Flex용으로 만들어봤습니다.
우선 HTTPService가 안돼서......Javascript를 이용하여 만들어봤습니다.
조합은 아래와 같습니다.

Flex 3 + Javascript(Prototype 1.6.0.2) + swfobject2.1 + FABridge입니다.

블로그에 넣으려고 하니 FF에서만 안보이네요-_-;
IE에서도 보이는데... 뭐하고 충돌하는거지-_-;
링크입니다.
http://mudchobo.tomeii.com/swf/GoogleWeatherWidget.html

야후에서는 API를 제공해서 다른 방법으로 해보려다가 이렇게 까지 해버렸네요-_-;
완전 삽질-_-;
아래는 저의 삽질의 결정체 소스파일입니다.

이런식으로 할바에는 안쓰겠다라고 말하고 싶군요.
하지만, FABridge의 엄청난 능력에 대해서 감탄하고 말았군요.
Flex객체에 대한 addEventListener가 완벽하게 지원하는 듯합니다. Timer이벤트도 한번 걸어봤는데 잘 되더라구요.
 
Posted by 머드초보
,
 
Aptana로 javascript로 삽질중에-_-; 좀 쉴겸해서-_-;

AIR는 기존에 우리가 알던 html, ajax, javascript등을 이용해서 데스크탑 애플리케이션을 개발할 수 있습니다. 전에 다음openapi를 이용하고, prototype기반인 다음블로그검색을 만들었었습니다.

http://mudchobo.tomeii.com/tt/269

이 코드를 거의 그냥 이용해서 AIR애플리케이션으로 바꿀 수 있습니다.
우선 Aptana를 설치해야합니다.

http://mudchobo.tomeii.com/tt/241
여기에 Aptana설치 후기가 있습니다-_-;
기본으로 AIR프로젝트 만드는 건 안깔려있으니 따로 설치해야합니다. 글을 잘 읽어보시면 설치하기 쉽습니다^^

이제 프로젝트를 만들어봅시다.
File -> New - Project선택하면 Aptana Projects폴더에 -> Adobe AIR Project선택.
Project이름은 DaumBlogSearchAir라고 합시다-_-;
다음을 하면 뭔 옵션이 이래 많아-_-; XML파일을 사전에 설정할 수 있게 해놨는데 걍 디폴트로 해서 해봅시다.
마지막 다음으로 가면 javascript framework를 선택할 수 있습니다.
Prototype을 가볍게 체크해고 Finish를 누릅시다.

처음부터 뭔 쌤플로 자동으로 작성한게 많은지-_-;
DaumBlogSearchAir.html파일을 열어보면 코드가 많습니다. 가볍게 다 지워버리고-_-;
DaumBlogSearchAir.html
[code]<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>Daum Blog Search</title>
        <link href="sample.css" rel="stylesheet" type="text/css"/>
        <script type="text/javascript" src="AIRAliases.js"></script>
        <script type="text/javascript" src="lib/prototype/prototype.js"></script>
        <script type="text/javascript" src="js/DaumSearch.js"></script>
    </head>
    <body>
        <h1>Daum Blog Search!</h1>
        <form onsubmit="searchDaum(this.query.value); return false;">
            <fieldset>
                <label>Search for</label>
                <input type="text" name="query" /><input type="submit" value="검색" />
            </fieldset>
        </form>
        <div id="results"></div>
    </body>
</html>
[/code]
요렇게 작성합니다.
그럼 이제 우리가 작성할 것은 js폴더에 있는 DaumSearch.js파일 입니다.
작성해봅시다.
DaumSearch.js
[code]
function searchDaum(query){
    var searchPacket = {
        method: 'get',
        parameters: {
            q: query,
            result: '10',
            start: '1',
            output: 'json',
            apikey: '발급받은 apikey',
        },
        onSuccess: parseResponse
    }
    new Ajax.Request('http://apis.daum.net/search/blog', searchPacket);
}


function parseResponse(data){
    var children;
    var results = $("results");
   
    while (results.hasChildNodes()) {
        results.removeChild(results.lastChild);
    }
   
    var json = data.responseText.evalJSON();
   
    // 개수를 air에서 제공하는 trace로 찍어보자-_-;
    air.trace(json.channel.result);
   
    for (var i = 0; i < json.channel.result; i++) {
        var title = json.channel.item[i].title;
        var summary = json.channel.item[i].description;
        var url = json.channel.item[i].link;
       
        var link = new Element("a", {
            "href": url,
            "target": "_blank"
        }).update(title);
        var header = new Element("h2").insert(link);
        var para = new Element("p").update(summary);
       
        results.insert(header);
        results.insert(para);
    }
}
[/code]
간단합니다. 그냥 다음에 url요청해서 데이터를 받아서 parseResponse메소드가 파싱하죠.
그리고, airaliases.js파일을 선언하면 air객체를 사용할 수 있는데, 기존 Flex에서 제공하는 몇몇 기능을 사용할 수 있습니다. Socket도 있고, File관련된 것도 있군요. 이건 나중에 공부해야겠군요.
air.trace하면 로그를 남길 수 있습니다.
아직 Aptana에서 디버깅이 안되기 때문에-_-;(완전 최악-_-) trace를 열심히 찍어줘야할 겁니다-_-;

실행을 해봅시다.
Ctrl + F11누르면 실행됩니다.

사용자 삽입 이미지

음....근데 <b>가 나오네. 왜그러지-_-;

 
Posted by 머드초보
,
 

이제 소스를 보도록 합시다.

아....근데 다른 언어를 이용해서 업로더를 구현해보신 분 계신가요? 플렉스에서는 이상하게 제목을 한글로 입력해서 업로드를 해버리면 업로드가 안되더군요.
MD5함수를 수정하면 가능합니다. ^^
이 부분은 좀 더 삽질을 해봐야할 부분인 것 같군요.
우선 영어는 뭐 잘 되니까-_-;

[code]
<mx:Script>
  <![CDATA[
   import com.adobe.webapis.flickr.methodgroups.Upload;
   import mx.controls.Alert;
   import flash.net.navigateToURL;
   import com.adobe.webapis.flickr.AuthPerm;
   import com.adobe.webapis.flickr.events.FlickrResultEvent;
   import com.adobe.webapis.flickr.methodgroups.Auth;
   import com.adobe.webapis.flickr.FlickrService;
 
   public var apikey:String = "해당API키";
   public var secretkey:String = "해당비밀키";
   public var flickrService:FlickrService;
   public var frobResult:FlickrResultEvent;
   public var frob:String = new String();
   public var token:String = new String();
   public var fileRef:FileReference;
   
   public function Authentication():void {
    flickrService = new FlickrService(apikey);
    flickrService.secret = secretkey;
    flickrService.addEventListener(
        FlickrResultEvent.AUTH_GET_FROB, getFrobResponse);
    flickrService.auth.getFrob();
   }
   
   public function getFrobResponse(event:FlickrResultEvent):void {
    if (event.success) {
     frob = String(event.data.frob);
     var auth_url:String = flickrService.getLoginURL(frob, AuthPerm.WRITE);
     navigateToURL(new URLRequest(auth_url), "_blank");
     Alert.show( "인증하기위한 브라우저가 뜰꺼에요."
        + "로그인한다음에 OK버튼을 누르세요^^",
        "인증",
        Alert.OK | Alert.CANCEL,
        null,
        onCloseAuthWindow );
    }
   }
   
   private function onCloseAuthWindow( event:* ):void {
    if ( event.detail == Alert.OK ) {
     flickrService.addEventListener(
        FlickrResultEvent.AUTH_GET_TOKEN, getTokenResponse );
     flickrService.auth.getToken( frob );
    }
   }

   private function getTokenResponse( event:FlickrResultEvent ):void {
    if ( event.success ) {
     token = event.data.auth.token;
     flickrService.token = token;
    } else {
     Alert.show("인증에 실패했습니다.");
    }
   }
   
   public function findFile():void {
    if (token == "") {
     Alert.show("인증부터 하세요!");
     return;
    }
    fileRef = new FileReference();
   
    try {
        fileRef.addEventListener(Event.SELECT, selectHandler);
        fileRef.addEventListener(Event.COMPLETE, completeHandler);
        fileRef.addEventListener(
           DataEvent.UPLOAD_COMPLETE_DATA, onUploadCompleteData);
        var success:Boolean = fileRef.browse();
       } catch (error:Error) {
           trace("Unable to browse for files.");
       }
   }
   
   public function selectHandler(event:Event):void {
    var uploader:Upload = new Upload(flickrService);
    uploader.upload(fileRef);
   }
   
   public function checkTokenResponse(event:FlickrResultEvent):void {
    Alert.show(event.data.auth.token);
   }
   
   public function completeHandler(event:Event):void {
    trace("업로드 완료");
   }
   
   public function  onUploadCompleteData(event:DataEvent):void {
    Alert.show(event.data);
   }
  ]]>
 </mx:Script>
 
 <mx:Button label="인증" click="Authentication();"/>
 <mx:Button label="파일업로드" click="findFile();" />
[/code]

오.....간단합니다.
아... apikey secretkey 에는 각각 발급받은 키를 넣어주세요 ^^
인증이라는 버튼이 있는데 누르게 되면 Authentication이라는 메소드를 호출합니다.
FlickrService라는 클래스가 있는데 apikey를 인자로 받아서 생성합니다.
그러면 이놈으로 인증이 필요없는 API를 다 호출할 수 있습니다 ^^
flickrService.auth.getFrob(); 이런식으로 Frob을 얻어오고!
navigateToURL로 브라우저를 띄워서 인증url로 이동을 시킨 후 로그인을 하게 되면
flickrService.auth.getToken( frob ); 으로 인해 토큰을 가져오게 됩니다.
토큰만 가져오면 다 끝납니다-_-; 이걸로 권한에 관한 건 다할 수 있어요 ^^

이거뭐 플렉스로 해도 될 것 같아요. 안해봤는데 될 것 같아요-_-;

파일업로드 버튼을 클릭하면 파일선택창이 뜨는데 이미지사진 아무거나 선택해서 업로드하면 돼요 ^^
(참고로 이미지파일도 한글이면 안돼요. 영어로 바꿔서 선택하세요 ^^)
FileReference 요놈도 설명해야하는 나중에-_-;
되는 거 증명동영샷~-_-; (실은....좀 심심해서-_-)


 
Posted by 머드초보
,
 

오....삽질 끝에 해냈습니다--;
라이브러리 다 제공하는데 삽질했습니다-_-;
제목, 내용, 태그, 등등 입력하는 것 따윈 없습니다--;
오로지 이미만 선택해서 업로드해줍니다 ^^
테스트환경은 Flex Builder 3 Beta 3에서 했습니다.

우선 Flickr Open API를 사용하기 위해서는 KEY를 발급받아야 돼요 ^^
http://www.flickr.com/services/api/keys/apply/
여기를 들어가서 로그인 하시고 키를 신청하면 됩니다.
키 하고 비밀 2개를 발급받게 됩니다. 잘 기억해두세요 ^^


http://code.google.com/p/as3flickrlib/
여기가면 as3용 플리커라이브러리가 있습니다.
근데 이거 쓰면 업로드메소드가 주석처리 되어있더군요.
저 라이브러리가 릴리즈되었을 때에는 FlashPlayer가 8.5였던 것 같은데 그때는 업로드가 안되었던 것 같습니다.
9.0되면서 업로드가 되는 것 같습니다.
업로드부분을 조금 수정했습니다.

invalid-file

한글파일명도 돼요 ^^



이거하고 어도비에서 만든거 하나 더 필요합니다.
http://code.google.com/p/as3corelib/
저기가면 여러가지 유용한 함수를 모아둔 lib인 것 같아요. 저게 필요해요!

그럼 프로젝트를 만들어봅시다.
File -> New -> Flex Project 선택 후 Desktop application에 체크하시고,
ProjectName을 FlickrUploader라고 합시다. Finish를 클릭하면 프로젝트가 만들어 집니다.
라이브러리를 추가해야하는데요. lib폴더가 있습니다.
거기다가 2개의 SWC파일을 복사해주세요. flickr.swc, corelib.swc

프로그램에서 인증을 받는 코드가 들어가는데요.
인증권한은 read, write, delete 3가지 권한이 있는 것 같아요.
미친 플리커가 API문서를 번역기 돌렸는지 이상하게 번역해놨어요-_-;
http://www.flickr.com/services/api/auth.howto.desktop.html
AIR는 데스크탑 애플리케이션이니까 데스크탑용 인증방법을 보도록합시다 ^^

인증절차를 아주 간략하게 설명하자면 이렇습니다.
Frob요청 -> Frob과요청권한을 이용해 로그인페이지로 이동 -> 사용자는 로그인 후 애플리케이션으로 돌아옴.
-> 해당애플리케이션은 로그인으로 인해 token을 얻음. -> 이토큰으로 인증이 필요한 OPEN API를 호출할 수 있음 ^^ 끝!

간단합니다. 소스는 다음 시간에!-_-;


 
Posted by 머드초보
,