Using a custom OAuth implementation

ionic-v1
#1

Is there a way for me to use a custom OAuth implementation built into my web application with any of ionic/cordova’s plugins? I have searched on it but it is all for google/facebook social networks.

#2

Yes !
You can call your API (with Oauth implementation) build with .NET WebApi for exemple without cordova plugin but just with $http.

I have already do this.

#3

Hi Tomadj, do you have an example code for login? I have a user, password, client id and client secret that posts to the API to get the access_token, token_expiry and token_type(bearer)

#4

So !

  1. Login and get token from .NET WebApi 2 :

    var host = hostService.getHost()+"/token";
    var data = “grant_type=password&username=” + loginData.userName + “&password=” + loginData.password;

    $http.post(host,data, { headers: { ‘Content-Type’: ‘application/x-www-form-urlencoded’}}).success(function(response){
    //save the return token in the storage
    localStorageService.set(‘authorizationData’, { token: response.access_token,…});

    });

  2. Call secure ressources with token set in the header. I use an InterceptorService for set header in each request :

    ‘use strict’;
    App.factory(‘authInterceptorService’, [’$q’, ‘$injector’, ‘localStorageService’, function ($q,$injector, localStorageService) {

    var authInterceptorServiceFactory = {};

    var _request = function (config) {

     config.headers = config.headers || {};

 var authData = localStorageService.get('authorizationData');
 if (authData) {
     config.headers.Authorization = 'Bearer ' + authData.token;
 }

 return config;

    };

    var _responseError = function (rejection) {
    if (rejection.status === 401) {
    $injector.get(’$state’).transitionTo(‘tab.account’);
    }
    return $q.reject(rejection);
    };

    authInterceptorServiceFactory.request = _request;
    authInterceptorServiceFactory.responseError = _responseError;

    return authInterceptorServiceFactory;
    }]);

  3. Use InterceptorService in your app.js :

    App.config([’$httpProvider’,‘localStorageServiceProvider’, function($httpProvider){

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common[‘X-Requested-With’];

    $httpProvider.interceptors.push(‘authInterceptorService’);
    }]);

I hope can help !

2 Likes
#5

hey i implemented this in a similar way.

But instead of an interceptor i have an own reques service… there is a send function, where you can add a parameter “authorization” (true or false) if you want to add the auth header.

#6

@tomadj - What JS did you include to use localStorageProvider? Is it built-in into ionic framework?

Edit: I found out it was: https://github.com/grevory/angular-local-storage

#7

yes yes that’s right !