CODEWITHSUNDEEP
androidioscordovatwitterplugins
Ravi
Ravi

Reputation: 35569

Cordova 4.1.2 twitter integration

How to integrate twitter login for cordova 4.1.2, as now childBrowser is deprecated we can not use this demo. can any one help me in this??

Upvotes: 1

Views: 583

Answers (1)

Ravi
Ravi

Reputation: 35569

After 2 days of research finally i got this solution. 1) you need to install inappbrowser plugin. 2) following is index.html in which i am using twitter login

<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <title>Hello World</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/codebird.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="js/jsOAuth-1.3.6.js"></script>
    <script type="text/javascript" charset="utf-8">
        window.onerror = function(error, url, line) {
            alert(error + '  on line : ' + line + ' -- ' + url);
        };

        function onBodyLoad(){
            alert("bodyLoad");
                document.addEventListener("deviceready", onDeviceReady, false);
        }

        function onDeviceReady() {
            alert("device ready");
            var root = this;
            /*cb=window.open();
            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: 'consumer_key', // YOUR Twitter CONSUMER_KEY
            consumerSecret: 'customer_secret', // YOUR Twitter CONSUMER_SECRET
            callbackUrl: "http://www.example.com/" }; // YOU have to replace it on one more Place                   
        var twitterKey = "twtrKey"; // This key is used for storing Information related

        var Twitter = {
        init:function(){


                // 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=window.open('https://api.twitter.com/oauth/authorize?'+data.text,'_blank', 'location=no'); // This opens the Twitter authorization / sign in page
                          cb.addEventListener('loadstop', function(loc){//alert('stop: ' + loc.url);
                                              Twitter.success(loc);
                                              });
                          },
                          function(data) {
                          console.log("ERROR: "+data);
                          }
                          );

        },
        success:function(loc){
            if (loc.url.indexOf("http://www.example.com/?") >-1) 
            {
                // Parse the returned URL
                var index, verifier = '';
                var params = loc.url.substr(loc.url.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];
                    }
                }
                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]);
                          }
                          // alert(verifier)

                          $('#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");

                          oauth.get('https://api.twitter.com/1.1/account/verify_credentials.json?skip_status=true',
                                    function(data) {
                                    // alert('key'+twitterKey);
                                    var entry = JSON.parse(data.text);
                                    console.log("TWITTER USER: "+entry.screen_name);
                                    $("#welcome").show();
                                    document.getElementById("welcome").innerHTML="welcome " + entry.screen_name;
                                    successfulLogin();
                                    alert("login success");
                                    },
                                    function(data) {
                                        console.log("ERROR: " + data);
                                        alert("error" + data);
                                        }
                                    );

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

                          cb.close();
                          },
                          function(data) {
                         // alert('rr');
                          console.log(data);


                          }
                          );
            }
        },

    }

    function done(){
        $("#tweet").val('');
    }


    function successfulLogin(){
        $("#loginBtn").hide();
        $("#logoutBtn,#tweet,#tweeter,#tweetBtn,#tweetText").show();

    }


            </script>

</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>
        </th>
    </tr>
    <tr><td colspan="2"><div id="welcome">Please Login to use this app</div></td></tr>
</table>
</body>

Upvotes: 5

Related Questions