{"id":263,"date":"2014-11-07T02:00:00","date_gmt":"2014-11-07T02:00:00","guid":{"rendered":"http:\/\/localhost\/?p=263"},"modified":"2016-11-13T20:45:01","modified_gmt":"2016-11-13T20:45:01","slug":"oauth-ionic-ngcordova","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/oauth-ionic-ngcordova","title":{"rendered":"OAuth with Ionic and ngCordova"},"content":{"rendered":"

This is a guest post by Nic Raboy, an application developer with a strong background in Android, AngularJS, Ionic, Java, SQL, and Unity3D. Nic writes often about Ionic and how to build great hybrid apps.<\/em><\/p>\n

I get a lot of inquiries regarding OAuth 2.0 with Apache Cordova and Ionic Framework applications. Although I do have another post<\/a> elaborating on how to accomplish this, I decided to take it a step further and make a simplistic library for AngularJS.<\/p>\n

I created ngCordovaOauth<\/a>, which can be found on GitHub. It was designed to make it as simple as possible to obtain access tokens for some of the popular web APIs, such as Google.<\/p>\n

<\/p>\n

I took my ngCordovaOauth library a step further, and included it<\/a> in the official ngCordova<\/a> project. For the sake of this tutorial, I’m going to explain things around the official ngCordova library which is now the official implementation.<\/p>\n

When I was designing the OAuth functionality, my strategy was to expect a promise based on the login flow. If the flow is successful, we will receive an object containing whatever the server responds with. Otherwise, we’ll get some kind of error.<\/p>\n

Although I designed this with Ionic Framework in mind, it will also work for any Apache Cordova or Phonegap application that makes use of AngularJS. With this in mind, let’s set up the library for use.<\/p>\n

ionic start IonicProject blank\ncd IonicProject\nionic platform add android\nionic platform add ios\n<\/code><\/pre>\n
Note that if you are not using a Mac, you cannot build for iOS.<\/p>\n
OAuth with ngCordova relies heavily on the Apache Cordova InAppBrowser<\/a> plugin. If you’d like to know more about how this plugin works, you can view my previous post<\/a> on the topic, otherwise just continue by running the following:<\/p>\n
cordova plugin add https:\/\/git-wip-us.apache.org\/repos\/asf\/cordova-plugin-inappbrowser.git\n<\/code><\/pre>\n
Your Ionic project is now ready for the ngCordova library.  Download<\/a> it and include ng-cordova.min.js<\/strong> into your www\/js<\/strong> directory.<\/p>\n
Open the www\/index.html<\/strong> file and include the following:<\/p>\n
<script src="js\/ng-cordova.min.js"><\/script>\n<\/code><\/pre>\n
One more item must be added in order to fully make use of this plugin. You must inject ngCordova into your AngularJS module found in the www\/js\/app.js<\/strong> file:<\/p>\n
angular.module('starter', ['ionic', 'ngCordova'])\n<\/code><\/pre>\n
Here is an example of how you might use the OAuth with the ngCordova library:<\/p>\n
var ionicExample = angular.module('starter', ['ionic', 'ngCordova']);\n\nionicExample.controller("OauthExample", function($scope, $cordovaOauth) {\n\n    $scope.googleLogin = function() {\n        $cordovaOauth.google("CLIENT_ID_HERE", ["https:\/\/www.googleapis.com\/auth\/urlshortener", "https:\/\/www.googleapis.com\/auth\/userinfo.email"]).then(function(result) {\n            console.log(JSON.stringify(result));\n        }, function(error) {\n            console.log(error);\n        });\n    }\n\n});\n<\/code><\/pre>\n
As of right now, the following methods are available:<\/p>\n
$cordovaOauth.dropbox(string appKey);\n$cordovaOauth.digitalOcean(string clientId, string clientSecret);\n$cordovaOauth.google(string clientId, array appScope);\n$cordovaOauth.github(string clientId, string clientSecret, array appScope);\n$cordovaOauth.facebook(string clientId, array appScope);\n$cordovaOauth.linkedin(string clientId, string clientSecret, array appScope, string state);\n$cordovaOauth.instagram(string clientId, array appScope);\n$cordovaOauth.box(string clientId, string clientSecret, string state);\n<\/code><\/pre>\n
There are some things to note about OAuth with ngCordova:<\/p>\n