Authenticating Twitter on Appcelerator with social_plus.js

Authenticating Twitter on Appcelerator with social_plus.js

If you’ve been looking for a way to use any Twitter features in your Appcelerator application, check out social_plus.js on GitHub (from Aaron Sanders – Great resource for Appcelerator, Ionic Framework and many other frameworks and just code in general).

You might notice a minor inconvenience with getting this to work on Android versions > v3.3. Actually it’s an issue with Chrome not allowing evalJS() to get the OAuth PIN silently from Twitter during the OAuth authentication procedures – You’ll notice an additional webpage is loaded with a PIN… So what are you supposed to do with this PIN? Well, I’ll show you!

This works just fine in iOS and ancient Android/Chrome builds, but for those Android users who have a phone made in the last 5 years, i.e. every Android user, this is the problem. Here is how I went about fixing it:

var called (which was declared at the top of social_plus.js, not shown here) is used to keep track of which screen you’re on during the OAuth authentication. This ensures your users don’t see the pop-up prompt for the PIN when Twitter is asking if you want to allow you application to access the users Twitter details. Now, if you’re using 2-Factor Authentication on your Twitter account, as I am, you’ll see the pop-up a screen too early, but there I haven’t worked out a better solution just yet.

This should give your users a nice pop-up prompt to enter the PIN that’s shown on the Twitter page and then the app can proceed as normal.

I hope this helps you better integrate Twitter into your Appcelerator applications. I’ve tried other solutions for Appcelerator, but social_plus.js was the easiest and most robust solution I’ve found. I plan to add multi-file upload support in the near future and also handle media uploads with the new API (the way social_plus.js handles media is depreciated, but it still works as of this post).