QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Twitter Login in Intel XDK APP using ngCordovaOauth

Twitter Login in Intel XDK APP using ngCordovaOauth

twitter-login-intel-xdk

This post is a part 51 of Intel XDK Complete Tutorial post series.

Twitter Login is a form of single sign-on using existing login information from Twitter by creating a new login account if doesn’t already exist specifically for that website. It is designed to simplify logins for end users.

In this tutorial I will show you how to implement Twitter Login in an Intel XDK app using ngCordovaOauth library.

ngCordovaOauth is an AngularJS Apache Cordova Oauth library. The purpose of this library is to quickly and easily obtain an access token from various web services to use their APIs.

Creating a Twitter APP

Before implementing Twitter login in your mobile app you need to create a Twitter app which is used by Twitter to keep track of your mobile application and also a way to know what user’s information your app wants to access.

While creating a Twitter app you need to enter callback URL as http://localhost/callback. But Twitter doesn’t allow you to enter localhost URLs as callback URLs therefore you need to redirect it via a public domain. You can use tiny URL to create a shortend URL which redirects to http://localhost/callback.

twitter-app-dashboard

Retrieving Access Token

Here is a example Intel XDK app code which shows how retrieve the access token once the user allowed Twitter API access to your app for their account

<!DOCTYPE html>
<html>
<head>
    <title>Intel XDK and Ionic Framework - Twitter OAuth Demo</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   
    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   
    <span id="result">
       
    </span>
   
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
        </div>  
    </div>
   
    <script src="https://cdn.rawgit.com/Caligatio/jsSHA/master/src/sha1.js"></script>

    <script src="intelxdk.js"></script>        
    <script src="cordova.js"></script>          
    <script src="xhr.js"></script>              

   
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="https://cdn.rawgit.com/driftyco/ng-cordova/master/dist/ng-cordova.min.js"></script>
    <script src="https://cdn.rawgit.com/nraboy/ng-cordova-oauth/master/ng-cordova-oauth.js"></script>
   
   
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
   
    <script>
        var oauth_token = null;
        var oauth_token_secret = null;
        var user_id = null;
        var screen_name = null;
       
        angular.module('myApp', ['ionic', 'ngCordova']).controller('myCtrl', function($scope, $cordovaOauth) {
                $cordovaOauth.twitter("Consumer Key (API Key)", "Consumer Secret (API Secret)").then(function(result) {
                    oauth_token = result.oauth_token;
                    oauth_token_secret = result.oauth_token_secret;
                    user_id = result.user_id;
                    screen_name = result.screen_name;
                   
                    alert(screen_name);
                    alert(user_id);
                    alert(oauth_token);
                    alert(oauth_token_secret);
                }, function(error) {
                    alert("Error: " + error);
                });
        });
    </script>
</body>
</html>

Here we are loading external libraries such as AngularJS, SHA1, ngCordova and ngCordovaoauth.

We are calling the twitter function of $cordovaOauth object using API key and API secret. Don’t forget to replace them with actual API key and secret key while testing.

Access token is a unique string which is used as a proof, that the user has allowed the app to access it Twitters information. Its used while making REST API calls for various purposes.

Making API Calls

Here is a example app code which shows how to authenticate user and then make REST API calls.

<!DOCTYPE html>
<html>
<head>
    <title>Intel XDK and Ionic Framework - Twitter OAuth Demo</title>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
   
    <style>
        @-ms-viewport { width: 100vw ; zoom: 100% ; }                          
        @viewport { width: 100vw ; zoom: 100% ; }
        @-ms-viewport { user-zoom: fixed ; }                                    
        @viewport { user-zoom: fixed ; }
    </style>

    <link rel="stylesheet" href="css/app.css">
</head>
<body>
   
    <span id="result">
       
    </span>
   
    <div ng-app="myApp">
        <div ng-controller="myCtrl">
        </div>  
    </div>
   
    <script src="https://cdn.rawgit.com/Caligatio/jsSHA/master/src/sha1.js"></script>

    <script src="intelxdk.js"></script>        
    <script src="cordova.js"></script>          
    <script src="xhr.js"></script>              

   
    <script src="http://code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
    <script src="https://cdn.rawgit.com/driftyco/ng-cordova/master/dist/ng-cordova.min.js"></script>
    <script src="https://cdn.rawgit.com/nraboy/ng-cordova-oauth/master/ng-cordova-oauth.js"></script>
   
   
    <script src="js/app.js"></script>
    <script src="js/init-app.js"></script>
    <script src="js/init-dev.js"></script>
   
    <script>
        var api_key = "Consumer Key (API Key)";
        var api_secret = "Consumer Secret (API Secret)";
       
        var oauth_token = null;
        var oauth_token_secret = null;
        var user_id = null;
        var screen_name = null;
       
        var url = "https://api.twitter.com/1.1/friends/ids.json";
        var method = "GET";
       
        angular.module('myApp', ['ionic', 'ngCordova']).controller('myCtrl', ["$scope", "$cordovaOauth", "$cordovaOauthUtility", "$http", function($scope, $cordovaOauth, $cordovaOauthUtility, $http) {
               
                $cordovaOauth.twitter(api_key, api_secret).then(function(result) {
                   
                    oauth_token = result.oauth_token;
                    oauth_token_secret = result.oauth_token_secret;
                    user_id = result.user_id;
                    screen_name = result.screen_name;
                   
                    var oauthObject = {
                        oauth_consumer_key: api_key,
                        oauth_nonce: $cordovaOauthUtility.createNonce(32),
                        oauth_signature_method: "HMAC-SHA1",
                        oauth_token: oauth_token,
                        oauth_timestamp: Math.round((new Date()).getTime() / 1000.0),
                        oauth_version: "1.0",
                    };
               
                    var signatureObj = $cordovaOauthUtility.createSignature(method, url, oauthObject,{count:2}, api_secret, oauth_token_secret);
                   
                    var config = {headers:  {
                            'Authorization': signatureObj.authorization_header
                        }
                    };
                   
                    $http.get(url + "?count=2", config).success(function(response) {
                        alert("Success: " + response);
                    }).error(function(error){
                        alert("Error: " + error);
                    });
                   
                }, function(error) {
                    alert("Error: " + error);
                });
        }]);
    </script>
</body>
</html>

Don’t forget to replace the api_key and api_secret variables with actual API key and secret key while testing.

When signing requests, you need to include all parameters used in your GET and POST requests in the signature. The https://api.twitter.com/1.1/friends/ids.json endpoint has one parameter, count so it must be included in the $cordovaOauthUtility.createSignature method.

Screenshots

Here is an screenshot of how it looks

IMG_0871

IMG_0872

IMG_0873

Apr 27, 2015Narayan Prusty
WordPress Visual Editor Generated ClassesWordPress Default Widgets CSS Classes
Comments: 1
  1. Alpesh
    7 years ago

    How to set callback url in $cordovaOauth.twitter(api_key, api_secret). I am constantly getting page not found http://localhost/callback?oauth_token=—–……
    ERR_CONNECTION_REFUSED.

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image7 years ago Cordova
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • Creating a Twitter APP
  • Retrieving Access Token
  • Making API Calls
  • Screenshots
Related Articles
  • Create a Mobile app using Intel XDK and Ionic Framework
  • Create a Chat App using Intel XDK and XMPP
  • Working with File System using Intel XDK
  • Push Notification in Intel XDK using Push Plugin
  • HTML5 Mobile App Development Using Intel XDK
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license