With Twitters Basic Authentications deprecation starting today and the latest release of the Tweetr Library, it is time to give you a heads up on how to integrate OAuth without having to use the PIN Method.
First of all, make sure to download the AIR Example used in this Tutorial. The zip contains a Flash Builder 4 Project Folder as well as a Flex Project FXP File so you can import the code easily if wanted. If you don’t have Flash Builder 4 you can always just look at the code in the src folder within the zip. As you will notice, the example uses the awesome doomsdayconsole. The code for it is not included in the example but can be retrieved from its googlecode site. You will also need the AS3Crypto Library which also is not included in the example.
Without any further ado, here are the steps neccessary to get pinless OAuth working.
Let’s take a look at the important parts of tweetrAIR.as:
1 2 3 4 5 6 7 8 9 10 11 12 13 | oauth = new OAuth(); oauth.consumerKey = "YOUR_CONSUMER_KEY"; oauth.consumerSecret = "YOUR_CONSUMER_SECRET"; oauth.callbackURL = "http://your.callback.url"; oauth.pinlessAuth = true; oauth.addEventListener(OAuthEvent.COMPLETE, handleOAuthEvent); oauth.addEventListener(OAuthEvent.ERROR, handleOAuthEvent); var rect:Rectangle = new Rectangle(50,50, 780, 500); htmlLoader = HTMLLoader.createRootWindow(true, null, true, rect); oauth.htmlLoader = htmlLoader; oauth.getAuthorizationRequest(); |
As you see there’s not much to do configuration wise. First of all, we create a new OAuth instance and then assign our consumer key and consumer secret which we get from twitter (line 1-3).
The important parts here are the callbackURL and pinlessAuth at line 4 & 5. You need to set the pinlessAuth Boolean to true in order to enable (obviously) pinless authentication and you need to define a callback url for which your AIR app will be listening for. The callback url can be anything on the internet that does not redirect any further, for example “http://google.ch” or “http://yourdomain.com/static.html”. Twitter will append some GET parameters to this url for which your OAuth instance will be listening for.
Pinless Authentication for AIR Desktop Applications requires you to pass a HTMLLoader instance to your OAuth instance (see line 11 & 12). Once you have done that, you can call getAuthorizationRequest to start the entire process.
The OAuthEvent Handler Method will assign the oauth instance to twitter once an OAuthEvent.COMPLETE event is received, meaning that authentication was successful:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | private function handleOAuthEvent(event:OAuthEvent):void { if (event.type == OAuthEvent.COMPLETE) { // removes the authentication window htmlLoader.stage.nativeWindow.close(); tweetr.oAuth = oauth; // prints username, user id and the final tokens trace(oauth.toString()); } else { trace("ERROR: "+event.text); } } |
And that’s it. From here on out you can call any tweetr method you want. Here’s a short video of the example code running:
Hi Sandro ;)
Thank you for this tutorial, but you don’t explain what is “callbackURL”, what url should we insert here, what page ok script do we have to execute at this url ?
thank’s a lot ;)
hi sandro,
after OAuthEvent.COMPLETE, it’s not possible
to update the status – any ideas?
tweetr.updateStatus(“abc…”);
thank’s a lot :)
An perhaps it’s related to this “callback url” but, when i’m launching my app, a Windows connexion window is appearing…
http://img231.imageshack.us/img231/5082/43133352.jpg
any idea ?
thank’s again ;)
@exoa i’ve updated the post to explain what the callback url is, i hope that will solve your problem.
@rola make sure that you pass your fully authorized oauth instance to your tweetr instance, for example like this:
ah okay, so i can let the one you have in your example “http://netsyndicate.net/”
But I still have the Windows connexion, and nothing else :(
http://img231.imageshack.us/img231/5082/43133352.jpg
perhaps there’s a relation with my network proxy I use ?!
Could you post to the google groups site and give me some more details, as in, the code you use, the network proxy you use, everything that comes to your mind.
Thanks,
Sandro
okay, my post on it is still not accepted^^
The thing is that it’s not related to my firewall, because I totally disabled it. My code is as yours and I think i will have to downgrade if the problem continue =(
I encountered the same problem with exoa’s.
I am unable to extract your zip file please check again, it seem broken file.
Hi Sandro:
I got the same problem like this:
http://img231.imageshack.us/img231/5082/43133352.jpg
the browser is white blank and the window autorization is showed up. I have tested your zip sample codes, it works in Flex 4 but it seems not working in flex 3, is there any additional configuration you made in application config ?
Many thanks for any help
Reinhart
I got the solution for it:
1. The error is not from its library script
2. You should edit your API application to browser type
3. If you use desktop type, you not need to use browser popUp,
it is enough you use origin window authorization from your OS.
I hope it will be useful for you guys.
Thank you,
reinhart
[...] Tweetr Tutorials: Pinless OAuth in AIR [...]
Hello. I’m just starting using actionscript 3 with various api – just finished working with Flickr authentication. What I was wondering is if it is still possible to get authorization by passing your Twitter username and password values from the app I’m building; that is, without having to open the Twitter html authentication window. I’m looking to build something like the app shown in the Tweetr examples page under Flex 3 Examples, “Sending a Tweet”. Is type of functionality still possible?
Great example! I was able to make it run fine from FDT using the AIR2 FDT4 ant template from beautifycode.com (Flex SDK 4.1).
It might be wise to have this example replace the current AIR example for tweetr. It would make the library appear less broken at first glance, post 2010AUG16 =)
Thanks!
Hi,
First off thanks for the sample. Great bit of code.
I have a problem though but i don’t think it has anything to do with your code. I am submitting it here because twitter is not being very helpful. If i use your sample with my consumer key and secret it doesn’t work. I get a popup window asking for credentials to access the twitter api area and I never get to the login page. Any ideas on why this could be?
Thanks a lot for your help.
Bounce.
Me again, sorry of course i had to post my problem before understanding Yacobus’ issue (which was the same as mine) and solution. Thank you Yacobus and sorry to all for the redundant post !
[...] an app in actionscript. I have followed a sample code written by the guys from swfjunkie ( [link] ) which works great. It does pinless authentication. The way the sample code works is very [...]
Sandro, could you please check your getReceivedDirectMessages and getSentDirectMessages, because they are not working any more.
Thanks.
How would you enable “remember me”? to avoid the user need to login every time he uses the app?
If i get this right, to avoid getting the login popup for every time the user run my app, i should:
1. go through the OAuth process
2. save the oauth_token, oauth_token, user_id,_username in shared object or a database
3. next time the app starts(if the user didn’t ask to switch user), set – oauthToken,oauthTokenSecret,_userId,_username in OAuth class.
Any other idea? cause i don’t see support for this kind of flow, i would gladly (or if i don’t have any choice) add it, but i just want to know if i’m missing something?
Yep, it worked.
I just secretly hoped that after the user has allowed the app, twitter won’t ask for the login each time and simply return the OAuth request data.
I’m getting the following error from the doomsday console. Any ideas?
Error: Error #2071: The Stage class does not implement this property or method.
at Error$/throwError()
at flash.display::Stage/set tabEnabled()
at no.doomsday.console.core::AbstractConsole/onAddedToStage()[D:\dev\Flash\doomsday\doomsdayconsole 1\fp10\src\no\doomsday\console\core\AbstractConsole.as:38]
I was able to get past the error I posted earlier by downloading the doomsday source. But now I’m running into this error when I try and authenticate:
/oauth/request_token?oauth_callback=http%3A%2F%2Fgoogle.ch%2F&oauth_consumer_key=qUGhOf08cd6KzvhD8HtGg&oauth_nonce=91863&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1296153122&oauth_version=1.0&oauth_signature=wm5uc1dwKk%2BF0xd91fhlyDLts%2FQ%3D
Desktop applications only support the oauth_callback value ‘oob’
As you can see, it is expecting the callback to be oop for desktop apps. Why did this work for Sandro when he is clearly running a desktop app?
@Bryce:
I believe you signed up API for desktop applicaiton, you should sign up API for web version, because desktop hasn’t callback. This is common problem for new developer, please read some comment above.
@Sandro:
Thanks bro for your open source opportunity, i have modified your OAuth Script fro Google Oauth Pinless, you can watch here screenr.com/YGY
Keep us updated with your great work ;)
Yacobus.
Do you plan to update the tutorial to use the WebStageView?
Every time i put my call back i receive an stream error.
Stream Error. URL: http://twitter.com/oauth/request_token?oauth_callback=http%3A%2F%2Ftweetr.swfjunkie.com%2Fdev%2Fverified.html&oauth_consumer_key=7lI1VSngMkRllPsrZ5XQ&oauth_nonce=1996&oauth_signature_method=HMAC-SHA1&oauth_timestamp=1305747640&oauth_version=1.0&oauth_signature=ZOGZfNQ0YVw5opjPoN0TCoFbN0U%3D
[Unload SWF] Main.swf
Can you help me ?
Cheers
It’s great that you’ve come up with your own implementation using HTMLLoader, but what about AIR on mobile devices (iOS in particular) using StageWebView…
http://help.adobe.com/en_US/as3/iphone/WS789ea67d3e73a8b24b55b57a124b32b5b57-7fff.html
for iOS and android packagers for AIR, you can’t rely on tweetr implementation, you can however use StageWebView and skip the built in HTMLLoader completely…
I’m making a tutorial, but because you might be waiting here is a quick run through my amalgamated method… so just set up tweeter and it’s oauth as normal, add the callback URL along with the other vars like so:
oauth = new OAuth();
oauth.consumerKey = “your_key”;
oauth.consumerSecret = “your_secret”;
oauth.callbackURL = “http://anything_you_want.com/”;
oauth.serviceHost = serviceHost;
// make sure the built in pinlessAuth is NOT set to true (defaults to false)
// Then you have to swap the built in pinless add your stageWebView for iOS/android:
private var stageWebView = new StageWebView();
// add your listeners like so:
stageWebView.addEventListener(LocationChangeEvent.LOCATION_CHANGING, onLocationChange);
stageWebView.addEventListener(LocationChangeEvent.LOCATION_CHANGE, onLocationChange);
stageWebView.addEventListener(Event.COMPLETE, onLocationChange);
stageWebView.stage = stage;
stageWebView.viewPort = new Rectangle(stage.stageWidth, 0, stage.stageWidth, stage.stageHeight);
// in your OAuth event handler, swap the navigateToURL with the following
stageWebView.viewPort = new Rectangle(0, 0, stage.stageWidth, 440); // shows the stageWebView (be careful to do it this way, it likes to crash iOS)
stageWebView.loadURL(e.url);
// and finally, the listener from above (every time the location changes)
private function onLocationChange(event:Event):void {
var location:String;
if(event is LocationChangeEvent) {
location = LocationChangeEvent(event).location;
} else {
location = stageWebView.location;
}
var search:String = “oauth_verifier=”;
var ver:String = location;
var startIndex:int = ver.lastIndexOf(search);
if(startIndex != -1) {
// we’ve got our pin so hide stageWebView again
stageWebView.viewPort = new Rectangle(stage.stageWidth, 0, stage.stageWidth, stage.stageHeight);
var ourPin = ver.substr(startIndex + search.length, location.length);
oauth.requestAccessToken(ourPin);
// remove listeners and dispatch success here
}
}