Twitter integration on PhoneGap using ChildBrowser and OAuth for iOS and Android Platforms

Posted By Pawanpreet Singh | 22-Oct-2012

Twitter integration on PhoneGap using ChildBrowzer

I recently had a requirement to integrate one of my phonegap mobile application project with twitter . I am describing below the procedure I follow to integrate twitter with my phonegap project.

Getting Started:-

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 use my recent blog for further assistance.

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>
                
        <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: "http://Your-callback-URL/" }; // 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('https://api.twitter.com/1/account/verify_credentials.json?skip_status=true',
                    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('https://api.twitter.com/oauth/request_token',
                        function(data) {
                        requestParams = data.text;
                        cb.showWebPage('https://api.twitter.com/oauth/authorize?'+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("http://Your-callback-URL/?") >= 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('https://api.twitter.com/oauth/access_token?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('https://api.twitter.com/1/account/verify_credentials.json?skip_status=true',
                                                    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('https://api.twitter.com/1/account/verify_credentials.json?skip_status=true',
                                      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('https://api.twitter.com/1/statuses/update.json',
                                       { '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);
                                       }
                                       );		
                        }

                    }
                    
                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()">
        
        
        

        
        <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>

      
    </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.

Request for Proposal

Recaptcha is required.

Sending message..