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.
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>
<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>
<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
@narayanprusty
