Flash Platform에서 OAuth 사용하여 인증

요즘 OAuth 인증 때문에 고생좀 했습니다. 머리속에 있는 개념을 정리도 할겸 제가 사용해본 OAuth 라이브러리에 대해 소개 합니다. 

OAuth 란?

 OAuth가 사용되기 전에는 인증방식의 표준이 없었기 때문에 기존의 기본인증인 아이디과 비밀번호를 사용하였는데, 이는 보안상 취약한 구조이다.

기본인증이 아닐 경우는 각 애플리케이션들이 각자의 개발한 회사의 방법대로 사용자를 확인하였다. 예를 들면 구글의 AuthSub, AOL의 OpenAuth, 야후의 BBAuth, 아마존의 웹서비스 API 등이 있다.

OAuth는 이렇게 제각각인 인증방식을 표준화한 인증방식이다. OAuth를 이용하면 이 인증을 공유하는 애플리케이션끼리는 별도의 인증이 필요없다. 따라서 여러 애플리케이션을 통합하여 사용하는 것이 가능하게 된다.

(출처 : http://ko.wikipedia.org/wiki/OAuth )

실 서비스 외부에서 API 를 사용할 때 이 OAuth 를 이용하여 인증을 하게 됩니다. 요즘 많이 사용하는 Twitter, facebook, Dropbox에서 제공 하는 API 모두 이 OAuth 를 지원하고 있고 지원하는 버전은 대부분 1.0 입니다. API 를 제공하는 곳에 따라서 2.0 을 제공하는 곳도 있습니다.  저 자세한 내용은 아래 링크에 자세히 설명 되어 있으니 생략하고 Flash 에서 OAuth 를 사용하는 방법에 대해 다뤄 보겠습니다.

 OAuth 인증 방식 이해 하기 : http://dev.springnote.com/pages/1083036

Actionscript3.0 으로 구현 된 OAuth 라이브러리

OAuth인증을 하기 위해서는 서비스 프로바이더와 몇번의 통신을 해야 하고 결과적으로 accessToken 과 accessTokenSecret 을 발급 받게 됩니다. 일종의 로그인을 위한 허락 키를 발급 받는 거지요. 이 키와 몇가지 OAuth 에서 원하는 값들을 조합해서 리퀘스트를 날릴때 Header 나 리퀘스트 URL 에 포함 시켜서 보내게 되면 서비스 프로바이더는 해당 리퀘스트를 분석하여 제대로된 인증을 가지고 있을 경우에만 결과 값을 내려 주는 구조로 되어 있습니다. 

OAuth 인증을 거치는 과정이 accessToken 과 accessTokenSecret을 발급 받는 과정이지만, 인증이 끝나고 나서 이 값들만 포함 시켜서 리퀘스트를 날리는건 아님니다. OAuth 에서 원하는 값들이 많이 있는데요. 이 값들을 http://oauth.net/ 에 구현 된데로 개인적으로 만들어서 사용해도 되지만, 이미 많은 라이브러리가 구현 되어 사용 되고 있기 때문에 기존 라이브러리를 사용 하는 걸 추천 합니다. (OAuth 인증 절차상 인증이 잘못된 경우 어디서 무엇이 잘못된건지 디버깅 하기가 어렵습니다.)

oauth-as3

 oauth-as3 : http://code.google.com/p/oauth-as3/

oauth-as3은 actionscript3.0으로 구현된 oauth 라이브러리 입니다. 기본적인 기능들만 구현 되어 있어서 바로 사용하기 보다는 이 라이브러리를 이용하여 따로 구현해 줘야 할 것들이 많습니다. 그럼 인증을 받는 순서대로 라이브러리를 사용해 보겠습니다.

사용하기 전에 알아 두면 좋은 이론은 라이브러리에 포함 되어 있는 OAuthRequest 는 실제로 서비스프로바이더와 통신을 하기 위해 리퀘스트를 만드는 클래스 이고, 이 클래스에서 OAuth 인증을 할때 필요한 oauth_nonce, oauth_timestamp, oauth_signature 등을 생성하게 됩니다. 서비스 프로바이더와의 통신은(인증할때) URLLoader 를 사용하지만 이 URLLoader의 값을 세팅할때 참조 해야 하는 클래스가 인증에 대한 정보를 가지고 있는 OAuthRequest 클래스 입니다. 그럼 requestToken을 받는걸로 시작해서 코드를 작성해 보겠습니다. Twitter(https://dev.twitter.com/docs/api) 인증을 예를 들겠습니다.

1. 서비스 프로바이더에서 requestToken 을 받는다.

우선 인증을 시작하기에 앞서 인증을 해야 하는 대상 어플리케이션이 존재 합니다. Twitter 등의 서비스 프로바이더에서 어플리케이션을 생성하면 해당 어플리케이션이 갖게 되는 고유의 consumerKey 와 consumerSecretKey 을 알 수 있습니다. 이 값들을 이용해서 OAuthRequest를 생성 합니다. 

var twitter = {
  consumerKey : "",
  consumerSecret : "",
  requestTokenURL : "https://api.twitter.com/oauth/request_token",
  authorizeURL : "https://api.twitter.com/oauth/authorize",
  accessTokenURL : "https://api.twitter.com/oauth/access_token",
  callbackURL : ""
}


var oauthRequest:OAuthRequest = new OAuthRequest(OAuthRequest.HTTP_MEHTOD_POST, twitter.requestTokenURL, null, new OAuthConsumer(consumerKey, consumerSecret));

var loader:URLLoader = new URLLoader();
loader.addEventListener(Event.COMPLETE, oauthLoadHandler);

var request:URLRequest = new URLRequest();

request.method = URLRequestMethod.POST

request.url = oauthRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1(), OAuthRequest.RESULT_TYPE_URL_STRING);      

loader.load(request);

private function oauthLoadHandler(event:Event):void {
    
  //oauth_token=&oauth_token_secret=&oauth_callback_confirmed=
  //위의 값을 oauthRequest 에 저장
  
  var token:OAuthToken = new OAuthToken();
  token.key = oauth_token값;
  token.secret = oauth_token_secret값;
  oauthRequest.token = token;
}

 

그리고 Twitter의 경우 requestToken 을 발급 받는 api 가 post 를 사용하므로 셋팅을 해주고 oauthRequest에 인증에 필요한 모든 값들이 들어 있기 때문에 buildRequest 메소드를 이용해서 OAuth인증 값들이 포함 되어 있는 url 을 리턴 받아서 서비스프로바이더에서 리퀘스트를 날리게 됩니다.

buildRequest 에 들어가는 첫번째 파라미터는 oauth_signature_method 값이고 두번째 인자는 OAuth 인증 리퀘스트 값을 어떤 방식으로 받을 것이냐 선택 하는 것 입니다. 파라미터에 따라 URLRequestHeader값 또는 String 으로 받을수 있습니다.

2. requestToken 을 이용하여 서비스 프로바이더에게 접근 한다.

1번에 대한 response 값으로 oauth_token을 받게 되는데요. 이 값을 이용해서 또 다시 서비스 프로바이더에게 인증을 요청해야 합니다. 이번에 요청하는 인증은 URLLoader 를 이용한 인증이 아니라, 직접 URL로 이동하여 사용자가 아이디와 비번을 입력하여자신의 권한을 해당 어플리케이션에 수락 시키는 절차 입니다.

 https://api.twitter.com/oauth/authorize?oauth_token=REQUEST_TOKEN입력

위의 URL로 Desktop AIR의 경우 HTMLLoader 를, Mobile AIR의 경우 StageWebView를 이용해서 해당 사이트로 이동하면 위와 같이 인증 화면이 뜨게 됩니다. 

 

웹용 Flash Player에서는 서버를 (Proxy) 사용하지 않고 인증 할 수 없습니다. 웹상에서 클라이언트를 Flash 로 만들경우에는 (javascript 도 마찬가지 입니다) 서버에서 위의 인증 과정을 모두 대리로 수행 해야 합니다. 

사용자가 아이디와 비번을 입력하고 인증을 마무리 하게 되면 Twitter의 경우 어플리케이션을 등록할때 지정 했던 callback URL 로 이용하게 되는데요. 이동할때 URL 뒤로 추가적으로 필요한 정보들을 전달 받게 됩니다. 이 인증 절차를 통해 OAuthRequest가 가지고 있는 token 값은 이제 accessToken 을 접근 할 수 있는 인증권한을 갖게 됩니다.  

 http://www.ddongkang.com?oauth_token=&oauth_verifier=

위의 callback URL 로 전달 되는 oauth_token값은 요청할때 전달했던 값과 같습니다. oauth_verifier값은 이 예제에서는 사용되지 않습니다. 다음 링크를 참조 하세요. 

3. 서비스 프로바이더에서 accessToken 을 받는다.

이제 인증의 마지막 절차 입니다. accessToken 을 받는 방법은 requestToken 을 받을때와 같습니다. 

oauthRequest.requestURL = twitter.accessTokenURL;

oauthRequest.httpMethod = OAuthRequest.HTTP_MEHTOD_POST;
      
request.url = _oauthRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1(), OAuthRequest.RESULT_TYPE_URL_STRING);

loader.load(request);

private function oauthLoadHandler(event:Event):void {
  
 // request token 리퀘스트일때
 //oauth_token=&oauth_token_secret=&oauth_callback_confirmed=true
 // access token 리퀘스트일때
 //oauth_token=&oauth_token_secret=&user_id=&screen_name=
 //위의 값을 oauthRequest 에 저장
 

  var token:OAuthToken = new OAuthToken();
 token.key = oauth_token값;
 token.secret = oauth_token_secret값;
 oauthRequest.token = token;

}

4. 인증 끝. 

위의 과정을 통해 accessToken 과 accessTokenSecret을 갖게 되어 인증이 끝났습니다. 이제 oauthRequest값에 인증 값들이 모두 포함 되어 있기 때문에 이를 이용해서 api 호출을 하면 됩니다.

oauthRequest.requestURL = Resource URL
oauthRequest.httpMethod = Request Method
    
var api_loader:URLoader = new URLLoader();

var api_request:URLRequest = new URLRequest();    
api_request.url = oauthRequest.buildRequest(new OAuthSignatureMethod_HMAC_SHA1(), OAuthRequest.RESULT_TYPE_URL_STRING);

api_loader.load(api_request);

 

OAuth를 이용한 인증은 개념을 파악하면 간단하지만 처음 개념 없이 무작정 사용하기엔 어렵습니다. 서비스 프로바이더에 따라 OAuth 인증 실패 이유를 제대로 반환해 주는 곳도 있지만 한번 꼬이기 시작하면 어디서 잘못된건지 찾기도 힘든게 OAuth 인증 같습니다. 

웹상에서 Flash 로 Twitter 나 Dropbox 같이 OAuth를 제공하는 서비스를 사용하고 싶으면 서버에 Proxy를 만들어서 서버를 통해서 인증을 받아야 합니다. 클라이언트 단에서 인증이 가능한 서비스 제공 업체도 있겠지만, 대부분은 서버를 통해서 인증을 받아야 보안 제약을 받지 않습니다. 그래서 FLash 를 이용한 방법은 주로 AIR(Desktop, Mobile)에서 사용 가능 합니다. 

많이 사용 되는 Twitter API 는 tweetr (http://wiki.swfjunkie.com/tweetr)는 있지만, 인증에 문제가 있는지 잘못 쓴건지 제대로 동작을 하지 않아 따로 만들어 사용하고 있습니다. 검색을 해 보니 github에 Twitter API를 구현한 소스가 올라와 있는데요. 아직 구현중인걸로 보이네요; 

조만간 사용하고 있는 라이브러리도 정리 해서 공유해 보겠습니다. 

잘못된 점이나 궁금한 점이 있으면 댓글로 문의 주세요~