CODEWITHSUNDEEP
angularjsapiionic-framework
freethrow
freethrow

Reputation: 1108

Ionic, Angular authentication

Coming from the python/flask/django world, a couple of weeks ago I started playing with angular and Ionic (and Firebase). I am trying to implement a register/login functionality for a generic REST API - you send a user/pass combo, you receive a token etc.

Is it very wrong if I adhere to the python (and other server side languages) patterns - to make a factory service to store the auth token in the localstorage and than do a check for every state/route if the token is present and valid, if it is not I am thinking of doing the redirect to the login page? At this stage I would much rather prefer a solution I am able to undestand completely, rather than an efficient and elegant one.

Upvotes: 0

Views: 117

Answers (1)

vivid
vivid

Reputation: 1145

I was using this implementation is easy but you could use interceptor as well its require module so u need to adopt it to your code but hope it will help you figure this out :)

oauth.js

    define('oAuth',['app'],function(app){
      return app.module('appName').factory("oAuth",["$q", "$http", "$localStorage", function ($q, $http, $localStorage) {
        var oAuthModule = {};
        var _authorize = function(username,password){
          var deferred = $q.defer();
          var data = "grant_type=password&client_id=CLIENT&username="+username+"&password="+password;
          var host = $localStorage.host  + "/token";
          $http.post(host,data, { headers: { "Content-Type": "application/x-www-form-urlencoded"}}).then(function(s){
            $localStorage.authorizationData = s.data;
            $localStorage.tokenAwardTime = Date.now();
            deferred.resolve("success");
          },function(error){
            deferred.reject(error)
          });
          return deferred.promise;
        };
        var _refreshToken = function(){
          var deferred = $q.defer();
          var data = "grant_type=refresh_token&client_id=CLIENT&refresh_token="+$localStorage.authorizationData.refresh_token;
          var host = $localStorage.host + "/token";
          $http.post(host,data, { headers: { "Content-Type": "application/x-www-form-urlencoded"}}).then(function(s){
            $localStorage.authorizationData = s.data;
            $localStorage.tokenAwardTime = Date.now();
            deferred.resolve("success");
          },function(error){
            deferred.reject(error)
          });
          return deferred.promise;
        };
        var _updateHeader = function(){
          var deferred = $q.defer();
          try {
            if($localStorage.authorizationData.token_type && $localStorage.authorizationData.access_token){
              $http.defaults.headers.common.Authorization = $localStorage.authorizationData.token_type + " " + $localStorage.authorizationData.access_token;
            }else{
              deferred.reject('Code Undefined');
            }
          }
          catch(err) {
            deferred.reject(err);
          }
          finally {
            deferred.resolve("Code done");
          }

          return deferred.promise;
        };
        oAuthModule.updateHeader = _updateHeader;
        oAuthModule.auth = _authorize;
        oAuthModule.refresh = _refreshToken;
        return oAuthModule;
      }])
    });

in every request i add setupHeader(); that checks if token is near out of time.

var setupHeader = function(){
var diffrence = (new Date(Date.now()).getTime() - new Date($localStorage.tokenAwardTime).getTime())/1000;
if(diffrence >= 3500){
  socialveoOAuth.refresh().then(function(s){
      $http.defaults.headers.common.Authorization = $localStorage.authorizationData.token_type + " " + $localStorage.authorizationData.access_token;
  },function(e){
    $state.go('app.login');
  });
}
else{
  $http.defaults.headers.common.Authorization = $localStorage.authorizationData.token_type + " " + $localStorage.authorizationData.access_token;
}
};

and use it like:

 _requests.LogOut = function(){
var deferred = $q.defer();
setupHeader();
$http.get($localStorage.host+"/logout/").then(
  function(suc){
    deferred.resolve(suc.data.data);
  },function(err){
    deferred.reject(err);

  }
);
return deferred.promise;
};

and when token refresh is outoftime or rejected i just use 

    $state.go('app.login');

hope this will help you out ;P

Upvotes: 2

Related Questions