ionic social login – ionic facebook login using ngCordovaOauth

Authentication is the most important part in ionic app development. We have two types of authentications in ionic app development which are simple authentication and second is social authentication. Ionic social login is more popular now days because there are thousand applications which are developed based on social networks.  So today we will create ionic login authentication using social networks which can be used in any ionic social app this will include ionic Facebook login, ionic Twitter login and ionic Google+ login.

We have ion login page design which we are going to use you can download here: IONIC LOGIN PAGE DESIGN WITH COOL IMAGE EFFECTS

ionic social login, ionic facebook login

Once you download the code you need to follow these steps:

  1. Open command propmt or terminal and navigate to loginApp folder
  2. Run following two commads  to install dependencies:
     npm install;
    bower install;
    

Installing ngCordova and ngCordovaOauth Into Your Project

we are going to use ngCordovaOauth so lets run following command to install it:

$ bower install ngCordova -S
$ bower install ng-cordova-oauth -S 

The JavaScript librares must then be added to your index.html file found in your projects www directory:

 <script src="lib/ngCordova/dist/ng-cordova.min.js"></script>

<script src="lib/ng-cordova-oauth/dist/ng-cordova-oauth.min.js"></script>

Inject as an Angular dependency

Then, include ngCordova and ngCordovaOauth as a dependency in your angular module :

angular.module('starter', ['ionic', 'ngCordova', 'ngCordovaOauth']);

Install inappbrowser  plugin for ionic

We have to install inappbrowser cordova plugin, so lets run following commad:

cordova plugin add cordova-plugin-inappbrowser

 

Inside www/js/controllers/login.controller.js we will add funcitons for twitter,facebook and gogole+ :

Ionic Facebook login

we will add following code in login.controller.js for Facebook Login

vm.facebookLogin = function () {
$cordovaOauth.facebook("yourAppID", ["email", "public_profile"], { redirect_uri: "http://codingscripts.com/callback" }).then(function (result) {
alert(result.access_token);
}, function (error) {
alert("Error: " + error);
});
}

Ionic Twitter login

we will add following code in login.controller.js for Twitter Login

vm.twitterLogin = function () {
var api_key = "myyQyjg27eREc9vlj5xxxxxxxx"; //Enter your Consumer Key (API Key)
var api_secret = "mrNFr0MTwJ8Gj3LDh00KaeuplaS5Izvxxxxxxxx"; // Enter your Consumer Secret (API Secret)
$cordovaOauth.twitter(api_key, api_secret, { redirect_uri: 'http://codingscripts.com' }).then(function (result) {

}, function (error) {

});
}

Ionic google plus login

we will add following code in login.controller.js for Google+ Login

vm.googleLogin = function () {
$cordovaOauth.google("app-id", ["email", "profile"]).then(function (result) {
}, function (error) {
});
}

Download Ionic login example Here

Cheer (y)

 

Total Views (522)

Add a Comment

Your email address will not be published. Required fields are marked *