위 다이어그램은 트위터에서 제공하는 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
- 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 멀티플 콜백 추가
트위터의 @Anywhere API 사용하기 - Firejune
