Rev. 2.73

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

attachment
소개 화면

iRoute는 아이폰/아이팟 터치에서 회원가입 없이 누구나 무료로 사용할 수 있는 웹기반 카 네비게이션 시스템입니다. 이 서비스는 약 2주간 밤잠을 설쳐가며 구축한 개인 프로젝트로써 오픈 API를 적극 활용하고 HTML5와 CSS3의 막강함을 체험/학습하기 위한 목적으로 만들어 졌습니다.

iRoute는 모바일 환경에 최적화 되었습니다. 3G망을 이용한 유료 데이터 수신 요금 부담을 줄이기 위해 대부분의 레이아웃 및 UI를 CSS3로 디자인하여 리소스 호출을 최소화 했으며, 그 어떠한 사용자 정보도 서버에 기록하지 않도록 하여 불필요한 서버간 송/수신을 줄였습니다. 보존해야 하는 사용자 정보는 브라우저의 자체 저장 공간인 localStorage를 사용하고 있습니다. 환경 설정 정보, 책갈피 지점, 복원용 주행 상황 등을 보관합니다.

지도 및 지형 데이터는 한국 뿐만아니라 전 세계를 대상으로 서비스할 수 있는 구글맵 API를 기본으로 사용하고 있습니다. 아쉽게도 구글맵 API는 한국 지역의 주행 경로 검색 서비스가 지원되고 있지 않기 때문에 D모사의 주행 경로 검색 결과를 반영하였습니다. GPS가 장착된 아이폰의 geolocation으로 위치를 분석하고 이를 기반으로 현재위치, 주행속도, 가속도, 남은거리 및 시간 등을 산출합니다.

아직 미구현 된 기능도 많습니다. 그럼에도 이 프로젝트를 공개하는 이유는 혼자서 개발하기에 어려운 점이 많기 때문입니다. 최근에는 주행 경로에서 벗어난 경우 재탐색하는 기능을 추가했습니다. 이 것으로 최소한의 카 네비게이션 시스템은 마련된 샘이라고 생각했습니다. 이 핵심 기능을 테스트하려면 실제로 차량을 운행해야 하는데 출/퇴근 시간만을 할애할 수 밖에 없다 보니 개발이 너무 더디게 진행되고 있습니다. 여러분의 도움이 절실히 필요한 상황입니다. 이 프로젝트를 완성할 수 있도록 도와주세요. 피드백할 수 있는 공간으로 @iRouter 트위터 계정을 개설하였습니다. 참여 의사가 있으신 분은 이 계정을 팔로하시고 의견을 멘션해 주세요. 어떠한 내용이든 수렴하도록 노력하겠습니다.

Comments

visitoers-pageviews.png

위 그래프는 지난 6개월간의 방분수/페이지뷰 그래프입니다. 지난해 11월 중순부터 트위터(Twitter), 미투데이(me2DAY)와 같은 소셜 미디어 서비스의 오픈API를 이용하여 블로그 포스트를 동기화하고 추이를 살펴보았습니다. 이것은 양질의 트래픽을 조금 더 발생시겨 보려는 얄팍한 수작으로 시작한 작은 실험이었습니다. 놀랍게도 좀처럼 변동이 없던 방문수/페이지뷰 그래프에 변화가 일어나고 있습니다. 약 1.5배로 상승곡선을 그리고 있으며, 같은 관심사를 가진 다른 사람들과 관계를 많이 맺을 수록 트래픽은 더욱 증가한다는 사실도 알 수 있었습니다. 소셜 네트워크가 가진 신속한 파급효과 때문일 것입니다.

이정도면 투자한 시간에 비해 만족할만한 성과를 거두었다는 생각이 듭니다. 그러나 양질의 트래픽 보다도 더욱 가치있는 것을 얻을 수 있었습니다. 그것은 바로 새로운 소통의 도구로써의 역할입니다. 이곳에 작성되는 대부분의 글은 자바스크립트를 중심으로한 웹 프론트-엔드 엔지니어링에 관한 전문성을 띤 글들로 대부분 비주류에 해당합니다. 누구나 한마디 작성할만한 주제는 아니라는 것이죠. 같은 관심사를 가진 사람들과 심도있는 의사소통을 하거나 새로운 정보를 입수하는 것은 무엇보다도 가치있는 일입니다. 그래서 블로그와 소셜 미디어 서비스가 조금 더 유기적인 관계를 맺을 수 있도록 관련 댓글들을 연동하였고 더욱 풍성한 소통을 즐기고 있습니다.

개인 블로그를 운영중이라면 한번즘 고려해 볼만한 매시업이라고 생각합니다. 각종 소셜 미디어 서비스와 연동할 수 있는 다양한 플러그인이 이미 제작되어있는 것으로 알고있습니다. 두마리 토끼를 한번에 잡는 효과를 누려보세요!

Comments