BaaS/PaaS Authentication

• Update and Maintenance of database tools, systems and infrastructure is full responsibility of the PaaS Cloud Provider.
• Some PaaS providers give developing options to multiple platforms: mobile, browser, among others.
• Cloud PaaS provider can deliver better security measures than the existing software.
• There’s no need to manage the introduction of new versions of software or code. This is handle by the Cloud PaaS provider.
• There’s no need to supply servers or to manage the underlying data center.

Hands on!

Remember ... you will need:

• You need an Ionic app where you will integrate this login. You can either use a blank app, or an existing one.
• An Ionic Platform account. If you haven't created an Ionic Platform account yet, you will need to sign up.

Setup

Install Ionic

• Ionic Getting started guide
• Ionic Documentation
• Visit the Ionic Community Forum

Other Dependencies

Step 1: Hook up our App with Ionic Platform

Step 2: Ionic Templates & AngularJS Navigation

• Add www/templates/auth/tabs.html with simple tabbed navigation layout for the login and signup views
• Add www/templates/auth/login.html with basic login view layout
• Add www/templates/auth/signup.html with basic signup view layout
• Add www/templates/app/tabs.html with simple tabbed navigation layout for the user view
• Add www/templates/app/user.html with basic user details view layout
• Update www/js/app.js with app’s desired routing
• Update www/js/controllers.js with a basic controllers for each view

App Routes (js/app.js)

.config(function($stateProvider, $urlRouterProvider) {

  // Ionic uses AngularUI Router which uses the concept of states
  // Learn more here: https://github.com/angular-ui/ui-router
  // Set up the various states which the app can be in.
  // Each state's controller can be found in controllers.js
  $stateProvider

  // setup an abstract state for the tabs directive
  .state('auth', {
    url: '/auth',
    abstract: true,
    templateUrl: 'templates/auth/tabs.html'
  })

  // Each tab has its own nav history stack:
  .state('auth.login', {
    url: '/login',
    views: {
      'tab-login': {
        templateUrl: 'templates/auth/login.html',
        controller: 'LogInCtrl'
      }
    },
    data: {
      authenticate: false
    }
  })

  .state('auth.signup', {
    url: '/signup',
    views: {
      'tab-signup': {
        templateUrl: 'templates/auth/signup.html',
        controller: 'SignUpCtrl'
      }
    },
    data: {
      authenticate: false
    }
  })

  .state('app', {
    url: '/app',
    abstract: true,
    templateUrl: 'templates/app/tabs.html'
  })

  .state('app.user', {
    url: '/user',
    views: {
      'tab-user': {
        templateUrl: 'templates/app/user.html',
        controller: 'UserCtrl'
      }
    },
    data: {
      authenticate: true
    }
  })

  ;

  // if none of the above states are matched, use this as the fallback
  $urlRouterProvider.otherwise('/app/user');
})

Auth Tabbed Navigation Layout (templates/auth/tabs.html)

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- LogIn Tab -->
  <ion-tab title="Log In" icon-off="ion-person" icon-on="ion-person" ui-sref="auth.login">
    <ion-nav-view name="tab-login"></ion-nav-view>
  </ion-tab>

  <!-- SignUp Tab -->
  <ion-tab title="Sign Up" icon-off="ion-person-add" icon-on="ion-person-add" ui-sref="auth.signup">
    <ion-nav-view name="tab-signup"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Main App Tabbed Navigation Layout (templates/app/tabs.html)

<ion-tabs class="tabs-icon-top tabs-color-active-positive">
  <!-- User Tab -->
  <ion-tab title="User" icon-off="ion-ios-body" icon-on="ion-ios-body">
      <ion-nav-view name="tab-user"></ion-nav-view>
  </ion-tab>
</ion-tabs>

Step 3: Login/Signup Layout

Login View (templates/auth/login.html)

<ion-view view-title="Log In">
  <ion-content class="padding">
    <form name="login_form" class="form-container" novalidate>
      <div class="list list-inset">
        <label class="item item-input">
          <input type="email" placeholder="Email" ng-model="user.email" required>
        </label>
        <label class="item item-input">
          <input type="password" placeholder="Password" ng-model="user.password" required>
        </label>
      </div>
      <button class="button button-block button-positive" ng-click="login(user)" ng-disabled="login_form.$invalid">Login</button>
    </form>
    <div ng-show="errors">
      <p class="message error" ng-repeat="error in errors"><b>[{{error.code}}]</b> {{error.msg}}</p>
    </div>
  </ion-content>
</ion-view>

Signup View (templates/auth/signup.html)

<ion-view view-title="Sign Up">
  <ion-content class="padding">
    <form name="signup_form" class="form-container" novalidate>
      <div class="list list-inset">
        <label class="item item-input">
          <input type="email" placeholder="Email" ng-model="user.email" required>
        </label>
        <label class="item item-input">
          <input type="password" placeholder="Password" ng-model="user.password" required>
        </label>
      </div>
      <button class="button button-block button-positive" ng-click="signup(user)" ng-disabled="signup_form.$invalid">Create Account</button>
    </form>
    <div ng-show="errors">
      <p class="message error" ng-repeat="error in errors"><b>[{{error.code}}]</b> {{error.msg}}</p>
    </div>
  </ion-content>
</ion-view>

Step 4: App Controllers & Authentication Implementation

App Controllers (js/controllers.js)

.controller('LogInCtrl', function($scope, $state, AuthService, $ionicLoading) {
  $scope.login = function(user) {
    $ionicLoading.show({
      template: 'Loging in ...'
    });

    AuthService.doLogin(user)
    .then(function(user){
      // success
      $state.go('app.user');
      $ionicLoading.hide();
    },function(err){
      // error
      $scope.errors = err;
      $ionicLoading.hide();
    });
  };
})

.controller('SignUpCtrl', function($scope, $state, AuthService, $ionicLoading) {
  $scope.signup = function(user){
    $ionicLoading.show({
      template: 'Signing up ...'
    });

    AuthService.doSignup(user)
    .then(function(user){
      // success
      $state.go('app.user');
      $ionicLoading.hide();
    },function(err){
      // error
      $scope.errors = err;
      $ionicLoading.hide();
    });
  };
})

.controller('UserCtrl', function($scope, $state, AuthService) {
  $scope.current_user = Ionic.User.current();

  $scope.logout = function(){
    AuthService.doLogout();

    $state.go('auth.login');
  };
})

Authentication service using Ionic Platform (js/services.js)

.service('AuthService', function($q, _) {
  this.userIsLoggedIn = function(){
    var deferred = $q.defer();

    deferred.resolve(Ionic.User.current().isAuthenticated());

    return deferred.promise;
  };

  this.doLogin = function(user) {
    var deferred = $q.defer(),
        authProvider = 'basic',
        authSettings = {
          'remember': true
        };

    Ionic.Auth.login(authProvider, authSettings, user)
    .then(function(data){
      deferred.resolve(data);
    }, function(errors){
      var errors_list = [];
      if(errors && errors.response && errors.response.responseText)
      {
        var json_response = JSON.parse(errors.response.responseText);

        if(json_response.error.details.length > 0) {
          _.each(json_response.error.details, function(err){
            var error = {
              code: json_response.meta.status,
              msg: err.errors[0]
            };
            errors_list.push(error);
          });
        }
        else {
          var error = {
            code: json_response.meta.status,
            msg: "An unexpected error has occurred"
          };
          errors_list.push(error);
        }
      }
      else if (errors && errors.length > 0){
        var error = {
          code: "unknown",
          msg: errors[0]
        };
        errors_list.push(error);
      }
      else {
        var error = {
          code: "unknown",
          msg: "An unexpected error has occurred"
        };
        errors_list.push(error);
      }

      deferred.reject(errors_list);
    });

    return deferred.promise;
  };

  this.doSignup = function(user) {
    var deferred = $q.defer(),
        authService = this;

    Ionic.Auth.signup(user)
    .then(function(data){
      // After signup we should automatically login the user
      authService.doLogin(user)
      .then(function(data){
        // success
        deferred.resolve(data);
      },function(err){
        // error
        deferred.reject(err);
      });
    }, function(errors){
      var errors_list = [];
      if(errors && errors.response && errors.response.responseText)
      {
        var json_response = JSON.parse(errors.response.responseText);

        if(json_response.error.details.length > 0) {
          _.each(json_response.error.details, function(err){
            var error = {
              code: json_response.meta.status,
              msg: err.errors[0]
            };
            errors_list.push(error);
          });
        }
        else {
          var error = {
            code: json_response.meta.status,
            msg: "An unexpected error has occurred"
          };
          errors_list.push(error);
        }
      }
      else if (errors && errors.errors && errors.errors.length > 0){
        var error = {
          code: "unknown",
          msg: errors.errors[0]
        };
        errors_list.push(error);
      }
      else {
        var error = {
          code: "unknown",
          msg: "An unexpected error has occurred"
        };
        errors_list.push(error);
      }

      deferred.reject(errors_list);
    });

    return deferred.promise;
  };

  this.doLogout = function() {
    Ionic.Auth.logout();
  };
})

Step 5: Final details

App run method (js/app.js)

.run(function($ionicPlatform, $rootScope, $state, AuthService) {
  $ionicPlatform.ready(function() {
    AuthService.userIsLoggedIn().then(function(response)
    {
      if(response === true)
      {
        $state.go('app.user');
      }
      else
      {
        $state.go('auth.login');
      }
    });

    // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
    // for form inputs)
    if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
      if (cordova.plugins.Keyboard.hideKeyboardAccessoryBar) {
        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      }
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }
  });

  // UI Router Authentication Check
  $rootScope.$on("$stateChangeStart", function(event, toState, toParams, fromState, fromParams){
    if (toState.data.authenticate)
    {
      AuthService.userIsLoggedIn().then(function(response)
      {
        if(response === false)
        {
          event.preventDefault();
          $state.go('auth.login');
        }
      });
    }
  });
})