Blog

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

Tags: phonegap