f11labz. iOS

10 steps to Integrate Twitter with Cordova/PhoneGap

Step 1. Create a Twitter Appliation at https://dev.twitter.com/apps with the Read and write access permissions and Organization or personal website for callback url in Application.

Step 2. Integrate ChildBrowser in your Project . Check this blog

Step 3. Create a folder named js inside the www directory in your project.

Step 4. Download jquery from their website and add to your project’s www folder.

Step 5. Download OAuth.js file from this link and add to your project’s www folder.

Step 6. Replace the content of index.html file in the www folder of your project with the written below:-

 

<!DOCTYPE html>

<html>

<head>

<title></title>

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />

<meta charset="utf-8">

<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>

<script type="text/javascript" charset="utf-8" src="ChildBrowser.js"></script>

<script type="text/javascript" charset="utf-8" src="jquery-1.8.2.js"></script>

<script type="text/javascript" charset="utf-8" src="jsOAuth-1.3.6.js"></script>

<script type="text/javascript">

function onBodyLoad(){

document.addEventListener("deviceready", onDeviceReady, false);

}

function onDeviceReady() {

var root = this;

cb = window.plugins.childBrowser;

if(!localStorage.getItem(twitterKey)){

$("#loginBtn").show();

$("#logoutBtn").hide();

}

else {

$("#loginBtn").hide();

$("#logoutBtn").show();

}

if (cb != null) {

cb.onLocationChange = function(loc){ root.locChanged(loc); };

cb.onClose = function(){root.onCloseBrowser()};

cb.onOpenExternal = function(){root.onOpenExternal();};

}

}

function onCloseBrowser() {

console.log("onCloseBrowser!");

}

function locChanged(loc) {

console.log("locChanged!");

}

function onOpenExternal() {

console.log("onOpenExternal!");

}

</script>

<!--Below is the code for twitter-->

<script>

// GLOBAL VARS

var oauth; // It Holds the oAuth data request

var requestParams; // Specific param related to request

var options = {

consumerKey: 'xxxxxxxxxxxxxxx', // YOUR Twitter CONSUMER_KEY

consumerSecret: 'xxxxxxxxxxxxx', // YOUR Twitter CONSUMER_SECRET

callbackUrl: "<a href="http://your-callback-url/">http://Your-callback-URL/</a>" }; // YOU have to replace it on one more Place

var twitterKey = "twtrKey"; // This key is used for storing Information related

var Twitter = {

init:function(){

// Apps storedAccessData , Apps Data in Raw format

var storedAccessData, rawData = localStorage.getItem(twitterKey);

// here we are going to check whether the data about user is already with us.

if(localStorage.getItem(twitterKey) !== null){

// when App already knows data

storedAccessData = JSON.parse(rawData); //JSON parsing

//options.accessTokenKey = storedAccessData.accessTokenKey; // data will be saved when user first time signin

options.accessTokenSecret = storedAccessData.accessTokenSecret; // data will be saved when user first first signin

// javascript OAuth take care of everything for app we need to provide just the options

oauth = OAuth(options);

oauth.get('<a href="https://api.twitter.com/1/account/verify_credentials.json?skip_status=true">https://api.twitter.com/1/account/verify_credentials.json?skip_status=true</a>',

function(data) {

var entry = JSON.parse(data.text);

console.log("USERNAME: " + entry.screen_name);

}

);

}

else {

// we have no data for save user

oauth = OAuth(options);

oauth.get('<a href="https://api.twitter.com/oauth/request_token">https://api.twitter.com/oauth/request_token</a>',

function(data) {

requestParams = data.text;

cb.showWebPage('<a href="https://api.twitter.com/oauth/authorize?">https://api.twitter.com/oauth/authorize?</a>'+data.text); // This opens the Twitter authorization / sign in page

cb.onLocationChange = function(loc){ Twitter.success(loc); }; // Here will will track the change in URL of ChildBrowser

},

function(data) {

console.log("ERROR: "+data);

}

);

}

},

/*

When ChildBrowser's URL changes we will track it here.

We will also be acknowledged was the request is a successful or unsuccessful

*/

success:function(loc){

// Here the URL of supplied callback will Load

/*

Here Plugin will check whether the callback Url matches with the given Url

*/

if (loc.indexOf("<a href="http://your-callback-url/?">http://Your-callback-URL/?</a>") >= 0) {

// Parse the returned URL

var index, verifier = '';

var params = loc.substr(loc.indexOf('?') + 1);

params = params.split('&');

for (var i = 0; i < params.length; i++) {

var y = params[i].split('=');

if(y[0] === 'oauth_verifier') {

verifier = y[1];

}

}

// Here we are going to change token for request with token for access

/*

Once user has authorised us then we have to change the token for request with token of access

here we will give data to localStorage.

*/

oauth.get('<a href="https://api.twitter.com/oauth/access_token?">https://api.twitter.com/oauth/access_token?</a>oauth_verifier='+verifier+'&'+requestParams,

function(data) {

var accessParams = {};

var qvars_tmp = data.text.split('&');

for (var i = 0; i < qvars_tmp.length; i++) {

var y = qvars_tmp[i].split('=');

accessParams[y[0]] = decodeURIComponent(y[1]);

}

$('#oauthStatus').html('<span style="color:green;">Success!</span>');

$('#stage-auth').hide();

$('#stage-data').show();

oauth.setAccessToken([accessParams.oauth_token, accessParams.oauth_token_secret]);

// Saving token of access in Local_Storage

var accessData = {};

accessData.accessTokenKey = accessParams.oauth_token;

accessData.accessTokenSecret = accessParams.oauth_token_secret;

// Configuring Apps LOCAL_STORAGE

console.log("TWITTER: Storing token key/secret in localStorage");

localStorage.setItem(twitterKey, JSON.stringify(accessData));

oauth.get('<a href="https://api.twitter.com/1/account/verify_credentials.json?skip_status=true">https://api.twitter.com/1/account/verify_credentials.json?skip_status=true</a>',

function(data) {

var entry = JSON.parse(data.text);

console.log("TWITTER USER: "+entry.screen_name);

$("#welcome").show();

document.getElementById("welcome").innerHTML="welcome " + entry.screen_name;

successfulLogin();

// Just for eg.

app.init();

},

function(data) {

console.log("ERROR: " + data);

}

);

// Now we have to close the child browser because everthing goes on track.

window.plugins.childBrowser.close();

},

function(data) {

console.log(data);

}

);

}

else {

// Just Empty

}

},

tweet:function(){

var storedAccessData, rawData = localStorage.getItem(twitterKey);

storedAccessData = JSON.parse(rawData); // Paring Json

options.accessTokenKey = storedAccessData.accessTokenKey; // it will be saved on first signin

options.accessTokenSecret = storedAccessData.accessTokenSecret; // it will be save on first login

// javascript OAuth will care of else for app we need to send only the options

oauth = OAuth(options);

oauth.get('<a href="https://api.twitter.com/1/account/verify_credentials.json?skip_status=true">https://api.twitter.com/1/account/verify_credentials.json?skip_status=true</a>',

function(data) {

var entry = JSON.parse(data.text);

Twitter.post();

}

);

},

/*

We now have the data to tweet

*/

post:function(){

var theTweet = $("#tweet").val(); // You can change it with what else you likes.

oauth.post('<a href="https://api.twitter.com/1/statuses/update.json">https://api.twitter.com/1/statuses/update.json</a>',

{ 'status' : theTweet,  // javascript OAuth encodes this

'trim_user' : 'true' },

function(data) {

var entry = JSON.parse(data.text);

console.log(entry);

// just for eg.

done();

},

function(data) {

console.log(data);

}

);

}

&nbsp;

}

function done(){

$("#tweet").val('');

}

function successfulLogin(){

$("#loginBtn").hide();

$("#logoutBtn,#tweet,#tweeter,#tweetBtn,#tweetText").show();

}

function logOut(){

//localStorage.clear();

window.localStorage.removeItem(twitterKey);

document.getElementById("welcome").innerHTML="Please Login to use this app";

$("#loginBtn").show();

$("#logoutBtn,#tweet,#tweeter,#tweetText,#tweetBtn").hide();

}

</script>

<!--Code for Twitter ends here-->

</head>

<body onload="onBodyLoad()">

&nbsp;

<h4>Oodles Twitter App</h4>

<table border="1">

<tr>

<th>Login using Twitter</th>

<th>

<button id="loginBtn" onclick="Twitter.init()">Login</button>

<button id="logoutBtn" onclick="logOut();">Logout</button>

</th>

</tr>

<tr id="tweetText" style="display:none;">

<td colspan="2"><textarea id="tweet" style="display:none;"></textarea></td>

</tr>

<tr id="tweetBtn" style="display:none;">

<td colspan="2" align="right">

<button id="tweeter" onclick="Twitter.tweet();" style="display:none">Tweet</button>

</td>

</tr>

<tr><td colspan="2"><div id="welcome">Please Login to use this app</div></td></tr>

</table>

&nbsp;

</body>

</html>

 

Step 7. Replace the Consumer Key, Consumer Secret and Callback URL in the index.html file with your’s which as mentioned in your Twitter Application.

Step 9. Run the App.

Step 10 : Well there is no step 10, 9 steps to twitter didn’t seem right 😛

Aniruddha Mukherjee

Aniruddha Mukherjee

Android and iOs consultant.

More Posts

Follow Me:
TwitterFacebookLinkedInGoogle Plus

4 Comments

    • Siyanatullah Khan

Add a Comment

HTML Snippets Powered By : XYZScripts.com