Rev. 2.73

ThinVNC.png

ThinVNC는 브라우저만으로 데스크탑을 원격으로 제어할 수 있게 하는 소프트웨어입니다. 일전에 소개한 적이 있죠. 서버에 해당하는 PC에 ThinVNC를 설치하고 뷰어에 해당하는 클라이언트는 브라우저로 접속한 페이지인 것입니다. 최근 업데이트된 0.9.0.10 버전은 도저히 웹으로 구현한 것이라 믿기지 않을 정도로 속도가 향상되었고 쓸만한 기능들이 많이 생겼습니다. 프레젠테이션 도구가 추가되어 다른 사용자를 초대하고 관리할 수 있으며(암호 설정 가능), 현재 보여지는 화면을 모니터링 하고 화면에 떠 있는 특정 애플리케이션을 숨길 수도 있습니다. 이 밖에도 SSL 데이터 전송 방식이 추가되었으며, 윈도 서비스 모드로 실행할 수 있게 되었습니다. 그리고 기업 환경에서는 하나의 IP에 프록시 게이트웨이를 설정하여 ThinVNC가 설치되어있는 PC의 IP 또는 이름을 입력하여 접근할 수도 있습니다.

ThinVNC - Gateway3.jpg

뷰어는 HTML5로 구현 되었습니다. 별도의 브라우저 플러그인이나 소프트웨어의 설치를 강요하지 않기 때문에 여러 사용자들을 손쉽게 초대하여 온라인 프레젠테이션을 하거나 교육하는 목적으로 사용하기에 적합하다고 합니다. ThinVNC는 윈도 2000/XP/2003/Vista/7/Server8에서 작동하고 HTML5를 지원하는 Firefox, Chrome, Opera, Safari 등의 브라우저를 이용하여 접속할 수 있습니다. 비영리 목적으로는 무료로 사용할 수 있으며, GPL 라이센스의 오픈소스 프로젝트입니다.

우리 회사에서도 관련 프로젝트를 진행 중이고 참여하고 있는데 살짝 위협적으로 느껴지는군요.

Comments

트위터가 가진 데이터는 왜이리 가지고 싶은걸까요? 요 며칠동안 트위터에 저장된 데이터를 가져오기 위해 그들이 제공하는 오픈 API로 많은 삽질을 해 보았지만 이렇다 할 성과를 거두지 못했습니다. 얻은 결론은 오픈 API를 통해서는 트위터 사이트로 부터 얻어낼 수 있는 만큼의 데이터를 확보하기는 어렵다는 것입니다. 그래서 다음과 같은 북마크릿을 만들었습니다. 이 북마크릿은 트위터에서 현재 머무르고 있는 곳의 모든 자료를 JSON 스트링으로 만들어 줍니다. 예를들어 @사용자ID 를 클릭하여 멘션을 조회하는 상태라면 트위터 서비스에서 허용한 데이터 출력 범위 내의 모든 멘션 데이터를 JSON으로 만들어 주는 것입니다.

HTML로 부터 얻어내는 데이터는 다음과 같습니다.

{
  "user": {
    "screen_name": "zziuni",
    "profile_image_url": "http://a0.twimg.com/profile_images/1082290724/gravatar_normal.jpg"
  },
  "id": "19455882373",
  "text": "@firejune 큰일날뻔했군요.. waterjune.com 될뻔.. ㅡ ㅡ;",
  "source": "<a href=\"http://www.tweetdeck.com\" rel=\"nofollow\">TweetDeck</a>",
  "created_at": "Sun Jul 25 00:12:55 +0000 2010",
  "in_reply_to_status_id": "19431051539"
}

일단 이곳에서 필요로하는 최소한의 데이터 속성들만 수집하였으며 필요하면 더 많은 속성을 추출할 수도 있을 것입니다. 그리고 유기적으로 연결된 글들을 표현하기 위한 데이터이므로 "in_reply_to_status_id" 값이 없는 것들은 제외하였습니다. 아래의 북마크릿을 브라우저의 북마크 바에 끌어다 놓고 트위터 페이지에서 추가된 북마크릿을 클릭하여 사용할 수 있습니다. 수집이 완료되는 즉시 결과을 페이지에 출력하며 AJAX 요청이 많이 일어나기 때문에 환경에 따라서는 수분이 소요될 수도 있습니다. 트위터가 사용하는 스크립트를 이용하기 때문에 나중에는 작동하지 않을 수도 있으니 필요한 분들은 지금 덤프하세요.

twtdump 북마크릿 - 이 링크를 브라우저의 북마크 바로 끌어다 놓으세요.
twtdump.js 스크립트 소스 - 직접 수정해서 사용하세요.

Comments

oauth_diagram.png

위 다이어그램은 트위터에서 제공하는 OAuth API의 다이어그램입니다. OAuth는 외부(서드파티 애플리케이션)에서 계정을 인증할 수 있는 방법의 하나로써 사용자의 패스워드를 필요로 하지 않고 사용자의 데이터에 접근할 수 있게하는 토큰패싱 매커니즘입니다. 여러 서비스들이 이를 사용한 오픈 API를 제공하고 있습니다. 대표적으로 트위터에서 지원하고 있으며, Gmail도 OAuth API를 제공하겠다고 발표하여 이제는 오픈 ID의 개념으로 확산되고 있는 추세입니다. 외부에서 로그인을 필요로하는 정보를 취득하는 방법으로 계정 정보를 입력하는 절차를 거치는 것이 일반적이었습니다만, 제 3자에게 아이디와 비밀번호가 고스란히 노출되어 버리는 치명적인 단점이 있어 심각한 보안 문제를 야기할 수 있기 때문에 OAuth를 대안으로 삼고 있는듯 합니다. 최근 트위터는 OAuth API를 이용하는 서드파티 애플리케이션에 더 많은 혜택을 제공하는 방식으로 사용을 권장하고 있습니다.

얼마전에 트위터에서 발표한 @Anywhere는 자신의 사이트 또는 블로그에 트위터와 손쉽게 연동할 수 있게하는 자바스크립트 위젯 라이브러리입니다. 놀랍게도 서버를 거치지 않고 자바스크립트만으로 OAuth를 통해 인증하는 모습에 감탄하여 분석해 보았습니다. @Anywhere는 OAuth 2.0 API를 사용하더군요. 크로스-도메인 POST 요청이 일어나는 것을 확인해 보았더니 <iframe> 요소를 이용한 트릭입디다. 살짝 실망하고 더 파다보니 잡다한 자바스크립트 리소스들을 다수 호출하는 것도 마음에 들지 않더군요. 그래서 가벼운 OAuth 인증 라이브러리를 만들어 보려고 했습니다. 하지만 애초 목적과는 달리 @Anywhere의 API를 사용하는 재미에 흠뻑 빠져들고 말았습니다. 트위터의 @Anywhere 개발 문서에는 초심자를 위한 위젯 사용법만 나와있고 입맛대로 가지고 놀기에는 정보가 턱없이 부족해서 소스분석으로 알아낸 다소 불친절(?)한 명세들을 공개합니다. 위젯 생성관련 메서드는 이미 공개되어 있기 때문에 설명은 생략했고 자바스크립트만으로 서드파티 웹 애플리케이션을 개발할 수 있을 만한 REST API와 사용자 메서드들을 집중 공략했습니다. 대부분의 사용자 메서드는 통신이 발생하기 때문에 비동기식으로 작동하며 'is'로 시작하는 메서드가 아니면 jQuery처럼 체인 형식으로 작성할 수 있습니다.

Anywhere methods

  • twttr.anywhere : 초기화 arg1 = version or callback(client), arg2 = callback(client)
  • twttr.anywhere.config : 환경설정 arg1 = options
  • twttr.anywhere.signOut : 로그아웃

Client methods

  • client.signIn : 로그인
  • client.isConnected : 연결상태 확인
  • client.requireConnect : 연결 여부 확인
  • client.hovercards : 호버카드 생성
  • client.linkifyUsers : 트위터 사용자 링크 생성
  • client.tweetBox : 트위터 컨텐츠 입력창 생성
  • client.connectButton : 트위터 연결 버튼 생성
  • client.followButton : 팔로우 버튼 생성
  • client.one : EventProvider
  • client.trigger : EventProvider
  • client.bind : EventProvider
  • client.unbind : EventProvider

REST API methods

  • client.Base : 트위터 Base API
  • client.CurrentUser : 트위터 CurrentUser API
    • block
    • follow
    • notifications
    • report
    • statics
    • unblock
    • unfollow
  • client.DirectMessage : 트위터 DirectMessage API
    • send: DirectMessage
  • client.List : 트위터 List API
  • client.Place : 트위터 Place API
    • find: Place
    • nearby: Collection
  • client.SavedSearch : 트위터 SavedSearch API
  • client.SearchResult : 트위터 SearchResult API
  • client.Status : 트위터 Status API
    • favorite : Status
    • find : Status
    • publicTimeline : Collection
    • reply : Status
    • retweet : Status
    • search : Collection
    • unfavorite : Status
    • update : Status
  • client.User : 트위터 User API
    • current : CurrentUser
    • find : User
    • findAll : Collection
    • search : Collection

User methods

  • user.data : 사용자 정보 arg1 = attribute, arg2 = value
  • user.block : 블락 arg1 = options
  • user.follow : 팔로 arg1 = options
  • user.unblock : 언블락 arg1 = options
  • user.unfollow : 언팔 arg1 = options
  • user.update : 트윗 arg1 = string, arg2 = params
  • user.directMessage, user.dm : DM 발송 arg1 = string, arg2 = callback(object)
  • user.notifications : 휴대폰 기기 알림 arg1 = mode, arg2 = options
  • user.report : 스팸 신고 arg1 = callback(options)
  • user.lists : 리스트 목록 호출 arg1 = callback(array)
  • user.subscriptions : 리스트 구독자 목록 호출 arg1 = options
  • user.memberships : 리스트 멤버 목록 호출 arg1 = callback(array)
  • user.timeline : 타임라인 목록 호출 arg1 = callback(array)
  • user.favorites : 즐겨찾기 목록 호출 arg1 = callback(array)
  • user.followers : 팔로어 목록 호출 arg1 = callback(array)
  • user.friends : 친구 목록 호출 arg1 = callback(array)
  • user.isBlocking : 블락 여부 확인 arg1 = screenName, arg2 = callback(boolean)
  • user.isFollowedBy : 맞팔 여부 확인 arg1 = screenName, arg2 = callback(boolean)
  • user.isFollowing : 팔로우 여부 확인 arg1 = screenName, arg2 = callback(boolean)
  • user.isFriend : 친구 여부 확인 arg1 = screenName, arg2 = callback(boolean)
  • user.isMutual : 관계 여부 확인 arg1 = screenName, arg2 = callback(boolean)

Examples

<script src="http://platform.twitter.com/anywhere.js?id=YOUR_API_KEY&v=1"></script>
<script type="text/javascript">
  twttr.anywhere(function(client) {
    var currentUser, screenName, profileImage, profileImageTag;

    if (client.isConnected()) {
      currentUser = client.currentUser;
      screenName = currentUser.data('screen_name');
      profileImage = currentUser.data('profile_image_url');
      profileImageTag = "<img src='" + profileImage + "'/>";

      $('#connect-placeholder').append("Logged in as " + profileImageTag + " " + screenName);
    } else {
      client("#connect-placeholder").connectButton();
    };
  });
</script>
var footer = $('#hovercard-footer');
client.User.find(screenName).dm('당신을 언팔하고 블록했습니다. 안녕히 계세욧!').unfollow({
    success: function() {
      footer.addClass("following");
    },
    error: function(result) {
      if (result.status == 403 && result.response.error.match(/already requested to follow/))
        footer.addClass("follow-pending");
      else if (result.status != 401)
        footer.addClass("follow-alert");
    }
  }).block({
    success: function() {
      footer.addClass("blocking")
        .removeClass("sms-setting-not-off")
        .addClass("sms-setting-off")
    },
    error: function() {
      footer.removeClass("not-following").addClass("following");
    }
  });

이곳에 트위터와 연동한 댓글들의 툴팁은 완전히 커스토마이즈 된 것입니다. 아직 몇몇 알아내지 못한 기능과 버그들이 있긴 하지만요. 변화가 느껴지지 않는 분들은 여기를 클릭하여 로컬-스토리지에 보관된 리소스 캐시를 수동으로 제거하세요.

* 댓글 및 툴팁 연동을 위한 Anywhere 클래스 생성
* 툴팁에 트위터 호버카드 타입 추가
* @Anywhere 자바스크립트 리소스를 로컬에서 호출하도록 수정
* @Anywhere OAuth 인증 후 호버카드 정보 및 액션 변경
* @Anywhere OAuth 인증 후 특정 대상 멘션 작성 기능 추가
* @Anywhere OAuth 인증 후 기본 댓글 작성을 트위터에 작성하는 기능 추가
* @Anywhere OAuth 인증 후 리트윗 작성 기능 추가
* Anywhere 클래스에 onSignIn, onSignOut, onInitialize 멀티플 콜백 추가

Comments