What’s Fresh
All the newest, latest, up-to-the-moment happenings
around Odopod.
Prototyping Twitter and Flash Interactions
TweetTwitter recently removed "Basic Authentication" and shifted all client interactions/authentications over to "OAuth" and "XAuth" as of Aug 31st, 2010. In preparation for this change, and while prototyping an on-going project for Sony Internet TV, I began researching the interaction between Twitter and Flash/AS3. The main goal of this research was to detail the steps needed for a user to login to Twitter and send a Tweet from a remote site. In the end, I prototyped four options, two of which stood out as the best solutions.
To start, I attempted to understand the differences between each authorization method:
Basic Auth (All Twitter Apps, Deprecated):
Basic Authentication requires the use of a proxy due to Twitter's restrictive crossdomain.xml file. This method definitely proved to be the easiest but requires you to store sensitive information within your Flash app including the following:
• Consumer Secret Key
• Username and Password Information (stored within the Flash app and used to create a session with Twitter).
Not only was it necessary to store this info, but in order to send a Tweet the username and password needed to be sent along with each request to Twitter. More information on the demerits of "Basic Auth" can be found here.
OAuth (All Twitter Apps):
OAuth is quickly becoming the standard as more social sites and their API's make the switch (ex. Facebook, Foursquare, etc.). This method requires the developer to store only a small set of information (Consumer Key and a Consumer Secret Key) within the app itself and allows this data to be encrypted during the sending and receiving of various secret keys. The username and password are neither needed nor stored. Much like "Basic Auth", "OAuth" also requires a proxy in order for Flash to speak directly to Twitter.
XAuth (Mobile & Desktop Apps only):
I have not yet had the opportunity to try this method since Twitter only allows use for mobile and desktop apps specifically. The service is turned off by default for any new Twitter apps created. Twitter requires an email explaining why "XAuth" is required to have the service turned on for an app.
To test the options available, I created a prototype with four different options for Twitter-Flash communication. The app was created for the sole purpose of minimizing the number of clicks necessary for a user to login and submit a Tweet and identify how the number of clicks affects the UI of each form.
I made extensive use of the Tweetr Lib developed by Sandro Ducceschi. Thanks Sandro! Take a look at the final prototype here.
-----
OAuth Form #1 (PIN, OOB):
The first option consists of three steps necessary to login and Tweet.
Step 1. Once the user clicks "Authenticate" a request is sent to Twitter via the proxy with the following post variables. It sends "oob" (Out-of-band) as the value of the callback URL parameter to Twitter, which removes the need for a callback URL. The callback URL is used to specify the destination that Twitter will redirect the popup window. The URL specified should be one that we have control over, and is preferably housed under the same domain as the form, since all return OAuth parameters will be sent here. Setting the URL to “oob” allows this form to be used in cases where the Flash app might exist on a server that we have no control over or would not allow the use of a callback URL, (such as site syndication).
oauth_callback = oob oauth_consumer_key = xxxxxxxxxxxxxxx (your Twitter app Consumer Key) oauth_nonce = 44467(a random string of numbers or hex values. Used to identify your request as unique) oauth_signature = xxxxxxxxxxxxxxx (your Twitter app Consumer Secret Key encrypted using HMAC-SHA1) oauth_signature_method = HMAC-SHA1 oauth_timestamp = 1284407095 (current UNIX timestamp) oauth_version = 1.0 (Default is 1.0)
The response, if successful, will be the unauthorized OAuth Token and OAuth Secret Token:
oauth_token = xxxxxxxxxxxxxxx oauth_token_secret = xxxxxxxxxxxxxxx oauth_callback_confirmed = true
We then create a URL using the unauthorized OAth Token:
https://twitter.com/oauth/authorize?oauth_token=xxxxxxxxxxxxxxx
The popup window that loads this URL allows the user to give access to your Twitter application and presents the user with a 7 digit pin.
Step 2. Once the user pastes the pin into the Flash app and clicks "Submit Pin", all of the previous variables along with the pin ("oauth_verifier") are packaged and sent to Twitter via the proxy.
oauth_nonce = 926534246 oauth_timestamp = 1890725 oauth_consumer_key = xxxxxxxxxxxxxxx oauth_signature_method = HMAC-SHA1 oauth_version = 1.0 oauth_signature = xxxxxxxxxxxxxxx (your Twitter app Consumer Secret & OAuth Token Secret keys encrypted using HMAC-SHA1) oauth_token = xxxxxxxxxxxxxxx (the received OAuth Token Key) oauth_verifier = xxxxxxxx (the pin number given)
The response will include the new, authorized OAth Token and Secret Token along with the users screen name and ID number:
oauth_token = xxxxxxxxxxxxxxx oauth_token_secret = xxxxxxxxxxxxxxx user_id = 103393708 screen_name = exampleuser
Step 3. At this point, the user is officially logged in and the Flash app should have all the values necessary to submit a Tweet. The user can now enter a message and click "Submit Tweet". Every call made after the user is logged in should include the following variables:
oauth_nonce = 926534246 oauth_timestamp = 1890345 oauth_consumer_key = xxxxxxxxxxxxxxx oauth_signature_method = HMAC-SHA1 oauth_version = 1.0 oauth_signature = xxxxxxxxxxxxxxx oauth_token = xxxxxxxxxxxxxxx
...along with any added variables necessary for the requested action:
status = hello%20world (the Tweet message the user has entered)
Pros:
• All user actions and clicks can be tracked along with responses/errors from Twitter
• Allows control over the final Tweet message (ie. add # or @ tags to the message)
• The Tweet message is directly tied to a Twitter app and adds a link beneath the Tweet, which links to the Twitter apps URL
Cons:
• Requires a total of 4 button clicks and 4 round trips to and from Twitter in order to authenticate and submit a Tweet
• Requires the user to copy and paste a pin number from one window/tab to another
OAuth Form #2 (NO PIN):
The second option, at its core, is the same as OAuth Form #1 except it requires the use of a callback URL where Twitter will send the necessary Tokens.
The Callback URL, at this point, presents a problem particularly in Flash. Since the response is not sent to the same HTML page where the Flash app resides, we cannot receive a direct response from Twitter.
Sandro Ducceschi has come up with a streamlined solution for this issue and it can be found here.
The index.html where the Flash app resides and the callback URL HTML page import the same JS file which includes a reference to the Flash app as well as two other functions needed to inject the response variables into the Flash app.
The steps in this solution are:
Step 1. Once the user clicks "Authenticate" a request is sent to Twitter via the proxy with the following post variables:
oauth_callback = http://www.test.com/callback.html (the HTML page where Twitter should send the authorized OAuth Token and OAuth Secret Token) oauth_consumer_key = xxxxxxxxxxxxxxx (your Twitter app Consumer Key) oauth_nonce = 44467(a random string of numbers or hex values. Used to identify your request as unique) oauth_signature = xxxxxxxxxxxxxxx (your Twitter app Consumer Secret Key encrypted using HMAC-SHA1) oauth_signature_method = HMAC-SHA1 oauth_timestamp = 1284407095 (current UNIX timestamp) oauth_version = 1.0 (Default is 1.0)
The response, if successful, will return the unauthorized OAuth Token and OAuth Secret Token:
oauth_token = xxxxxxxxxxxxxxx oauth_token_secret = xxxxxxxxxxxxxxx oauth_callback_confirmed = true
We then create a popup window URL using the unauthorized OAth Token:
https://twitter.com/oauth/authorize?oauth_token=xxxxxxxxxxxxxxx
The popup window allows the user to give access to your Twitter application and then redirects to the Callback URL with the following variables the authorized OAuth Token and OAuth Secret Token, etc:
oauth_token = xxxxxxxxxxxxxxx oauth_token_secret = xxxxxxxxxxxxxxx user_id = 103393708 screen_name = exampleuser
The Callback URL injects these variables via External Interface back into the Flash app and closes the popup window. Once the Flash app receives the variables it stores them and triggers an event.
Step 2. At this point, we have received all the proper variables in the Flash app and we are ready to send a Tweet that is handled the same as step3 for OAuth Form #1.
Pros:
• All user actions and clicks can be tracked along with responses/errors from Twitter
• Allows control over the final Tweet message (ie. add # or @ tags to the message)
• The Tweet message is directly tied to a Twitter App and adds a link beneath the Tweet, which links to the Twitter apps URL
Cons:
• Requires that a callback URL be used
• Seems like we could optimize this further
OAuth Form #3 (NO PIN, CALLBACK URL):
The third option is exactly the same as OAuth Form #2 with further refinements that require less action from the user. The steps are the same but rely on the response events to be triggered within the Flash app as opposed to a users click action.
Step 1. The user enters a message and clicks "Submit Tweet". This triggers Steps 1-2 of the OAuth Form #2. Once the Flash app receives the authorized OAuth Token and OAuth Secret Token from the JavaScript external interface function the app triggers the message to be submitted to Twitter.
Pros:
• All user actions and clicks can be tracked along with responses/errors from Twitter
• Allows control over the final Tweet message (ie. add # or @ tags to the message)
• The Tweet message is directly tied to a Twitter App and adds a link beneath the Tweet, which links to the Twitter apps URL
Cons:
• Requires that a callback URL be used
Tweet Button Form:
The final option is a recreation of the JavaScript Tweet Button that Twitter provides. The click action of the original Tweet button is re-created by opening a URL in a popup window.
Step 1. The user enters a message and clicks "Submit Tweet" which opens a popup window containing the Twitter share URL:
http://twitter.com/share?text=the submitted message.
Step 2. The user can then further edit the message in the popup window and choose to submit the final message.
Pros:
• Does not require that a callback URL be used
• Only 2 button clicks and 1 call to Twitter
Cons:
• Does not allow control over the final Tweet message. The user can further edit the message before submitting
• The Tweet message cannot be tied to an app or URL since there is no linkage to any Twitter App
After testing out all four options, I decided to go with the option with the least amount of steps required for the user to both login and send a Tweet. The "JS Form" and the "OAuth Form #3" both require only one button push on the remote site and one button push within a Twitter popup window. I chose "OAuth Form #3" over the "JS Form" due to the fact that we have more control over the Tweet itself and we are able to receive responses from Twitter, which enables me to track whether the user actually finished the process of submitting the Tweet.
As a final note, take a look at the final Tweet form in our recently launched site for Sony Internet TV with Google TV.
Helpful Links:
Understanding the guts of Twitter's OAuth for client apps
SWFJunkie
Tweetr Downloads
Twitter Developers
Twitter Overview of Authorization Options
Codebase:
Click here to download the demo files.
Comments
-
In relation to your post, this may be something of interest to read as well: Facebook "Like" button in Flash http://labs.byhook.com/2010/08/03/facebook-like-button-in...
-
Gush, I just belt 60 and am really pocket on gold for my 60 epic range mount. I plan to obtain encircling 500-1,000 . Anyone recognize of any to do so? Thanks
-
<a href=http://www.beatsbydredre.com/dre-beats-earphones>Dre Beats Earphones</a> , asset de musique avec Isolation Powered Aujourd'hui, la technologie d'enregistrement audio numérique donne le détail plus de musique que jamais. Malheureusement, les détails se perdent facilement dans le monde bruyant d'aujourd'hui: sur la rue, sur le bus, sur le plan. La meilleure expérience d'écoute n'est pas seulement ce que vous entendez, mais ce que vous n'avez pas. La technologie Horror isolement alimenté éliminer efficacement le bruit externe, de sorte que vous rencontrez tous les détails que votre artiste préféré souhaite partager avec vous. Tout sur les Uninjured La combinaison de haut-parleurs extra-large et une grande puissance de l'amplificateur numérique, les écouteurs <a href=http://www.beatsbydredre.com/dre-beats-earphones>Dre Beats Earphones</a> offrir des graves super-profond, lisse sommets non faussée, et le cristal plainsong clair. Moins de bruit, extra de musique la technologie Living abortion isolement alimenté éliminer efficacement le bruit externe, de sorte que vous rencontrez tous les détails que votre artiste préféré souhaite partager avec vous. <a href=http://www.beatsbydredre.com/monster-diddy-beats>Monster Diddy Beats</a> Wire casque C'est le Bogeyman Beats. Vast son ne se fait pas sans câble grande. Advanced Quadripole construction 4 paires torsadées réduit la perte de signal pour un son parfaitement équilibré et une extrême clarté. Confort Inordinate oreillettes spacieuse vous donner un espace supplémentaire pour un niveau de confort d'écoute. Des coussinets moelleux recouverts avec des matériaux ultra-doux respirant vous garder au frais, même quand la musique fait chaud. Prêt spurt l'iPhone <a href=http://www.beatsbydredre.com/monster-diddy-beats>Monster Diddy Beats Pas Cher</a> est livré avec un câble de casque <a href=http://www.beatsbydredre.com/heartbeats-by-lady-gaga>Casque Lady Gaga</a> iSoniTalk avec bouton intégré de réponse et microphone ainsi vous pouvez facilement répondre à des appels tout en écoutant de la musique. Conçu flood le contrôle de son Apple Spécifications <a href=http://www.beatsbydredre.com/beats-dr-dre-studio>Monster Beat Studio</a> * Poids: 260 grammes, 270 grammes avec les piles * La longueur du câble des écouteurs: 1,3 mètre * Connecteurs: 1 / 8 de pouce (3,5 mm), plaqué or Quoi de In The Encase * <a href=http://www.beatsbydredre.com/heartbeats-by-lady-gaga>Casque Lady Gaga</a> * câble des écouteurs Monster Cable * iSoniTalk Monster ™ iPhone activé câble du casque * Mallette rigide Junket * Anti-microbien Chiffon de nettoyage * 1 / 8-1 / 4 "adaptateur * Deux piles AAA http://www.beatsbydredre.com
-
Character sketch Of http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses Trade name http://www.sunglassglasses.com Carrera Sunglasses are owned and manufactured about the Italian sunglasses the latest thing homestead Safilo who are based in Padua, Italy. Amongst their other brands are Hugo Boss, Gucci, Dior, Armani and Valentino. Safilo bought http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses Cosmopolitan in 1996 and from overseen the rebirth of the tag and its brobdingnagian augment in popularity over the past handful years. Safilo possess split http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses into two kitchen range divisions. The principal of these is the Sport segmenting, with the products aimed unswervingly at professional and fooling amateur athletes. In particular the products are targeted at skiing and cycling. They from whole cloth sunglasses, goggles and helmets of the highest je sais quoi to safeguard athletes can fulfil safely and to the peak of their abilities. The assistant and most up to date series is the lifestyle range which is the purely fashion range with multitudinous models designed to entreat to all tastes and styles. In the face the forge exposure of the living soul models http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses property maximum UV sanctuary security appropriate for the user. All the sunglasses are manufactured using polarised lenses which defence the discrimination from sunbeams and aside the purchaser to see more light whilst reducing torch reflection. The lifestyle range is also known as the http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses vintage sunglasses number appropriate to their retro styling which depart heavily on good the latest thing from the 1960 including to the 1980. http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses Defender Sunglasses aspect oversized pliant frames and lenses in an aviator period and they are produced in myriad different colours making them the most predominant nonpareil with the http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses Lifestyle go, and they are a unisex model. The http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses Ticky standard draws heavily on the Spark Proscribe Wayfarer orbit for its styling and is aimed entirely much at the ladies market. http://www.sunglassglasses.com/carrera-sunglasses.html Carrera Sunglasses Hippy Sunglasses are again aimed at the ladies market and feature burly oversized sophistical lenses identical reminiscent of the Chanel high style of the 1960.
-
From 2008, the items involving it grew to enhance much more fashionable. <a href=http://www.linkstolondon.com/>Links to london</a> bijouterie sweetie bracelet oftentimes believe the genuinely charming outfit are astounding with useful. Not only that, Hyperlinks of Greater london also waste more focus to the include extent from the goods; virtually all goods resolve unquestionably be the marked wonderful products following having to wrap. Today <a href=http://www.linkstolondon.com/necklaces>London Links Necklace Discounts</a> involving London endowed with cultivatedness bracelets, sweetie wristbands, the sociability bracelets, Very good white Ornaments marrying rings earrings pamper watches in addition to pendants and so on. Each emulsion is usually a extremely honourableness existing pertaining to your self or perhaps your buddy, spouse, keep secret, since you may win them a disgrace creative allure on any discrete occasions and they also take to you payment this.
-
http://www.franklinandmarshallfr.com/ <a href=http://www.franklinandmarshallfr.com>Franklin Marshall La Vente</a> http://www.franklinandmarshallfr.com/ Franklin Marshall http://www.franklinandmarshallfr.com/homme-franklin-marshall homme Franklin Marshall http://www.franklinandmarshallfr.com/femme-franklin-marshall Femme Franklin Marshall http://www.franklinandmarshallfr.com/franklin-marshall-sets Franklin Marshall Sets http://www.franklinandmarshallfr.com/2011-nouvelle-collec... Franklin Marshall 2011
-
More and more male designers in the sphere of the go becomes a style in today's civilization, <a href=http://www.linkstolondon.com/charms/links-of-london-letter-charms>Links London Jewellery</a> reasonable gets in the swim. Young man upbraid is not purely the world of women; men also include their own ideas up dressing and others. A manservant can also be smart decorations; a human beings can also be charming with jewels. Select Links of London, could become an engaging man!
-
Mentor Retailer Presentation All Kinds Of Teacher Mens And Tutor Womens, Tutor Bags For a song Sale With Low Evaluation And Unequalled Status, Bail someone out 80% Off. All Products Obtain Important Deduction Sanction And Greatest Utility Recompense You Now. Freed Shipping. <a href=http://www.coachbagscheapjp.com/>コーチアウトレット</a> <a href=http://www.coachbagscheapjp.com/>コーチメンズ</a> <a href=http://www.coachbagscheapjp.com/>コーチバッグ格安</a>
-
Deliver Chanel Beldam Online Store.A series of come into being and summer of 2012 Chanel bag fully of undying creativity of Chanel sale.All Chanel Lookout And Purse Kindest Distinction Pass Outlay,Unused Shipping! <a href=http://www.chanelnewjp.com/>シャネル</a> <a href=http://www.chanelnewjp.com/>シャネル バック</a> <a href=http://www.chanelnewjp.com/>シャネル 財布</a> シャネル : http://www.chanelnewjp.com/
-
Celine slyly is popular.If you are looking in behalf of celine bag and celine things,you can review to our website!We advance the released shipping and stable parturition for you.Welcome to proceedings! <a href=http://www.celineshopjp.com/>セリーヌ ラゲージ</a> <a href=http://www.celineshopjp.com/>バッグ セリーヌ</a> <a href=http://www.celineshopjp.com/>セリーヌ</a> セリーヌ ラゲージ : http://www.celineshopjp.com/
-
Online sales in the specialty accumulate of Chanel.We acquire uncountable styles and designs.With the name or the standard covey of Chanel's products, you will without difficulty find the harmonious you want.Free shipping offered. <a href=http://www.chaneljpstore.com>シャネル バッグ</a> <a href=http://www.chaneljpstore.com/>シャネル</a> <a href=http://www.chaneljpstore.com/>シャネル 財布</a> シャネル バッグ : http://www.chaneljpstore.com/
-
Celine back is popular.If you are looking in support of celine valise and celine luggage,you can go to our website!We proffer the released shipping and fast confinement towards you.Welcome to order! <a href=http://www.celineshopjp.com/>セリーヌ ラゲージ</a> <a href=http://www.celineshopjp.com/>バッグ セリーヌ</a> <a href=http://www.celineshopjp.com/>セリーヌ</a> セリーヌ ラゲージ : http://www.celineshopjp.com/
Contact Us »
- 385 Grove Street
- San Francisco, CA 94102
- (415) 436-9980 phone
- (415) 436-9984 fax
- hello@odopod.com
© 2011 A 
Company