For example this is my VM WARE WEBGATE login page.
After entering Valid Credentials it will Valid Under OAM (oracle access manager) and it will return headers in response.
Now, If the user is valid it will redirect to another page.
But, I can't see the header parameters in response what the WebGate returning
This is my Code:
app.factory('mainHttpInterceptor' ,
function($rootScope, $q, $location) {`enter code here`
console.log("in the authInterceptor------000000");
return{
request:function(config) {
console.log(config.headers);
return config;
},
response: function(response){
/* if (typeof response.headers != null) {
console.log(response.headers);
return response;
} */
console.log('in the hhtp interceptor');
$httpProvider.defaults.headers.common['Access-Control-Allow-Headers']= true;
console.log(response.headers());
console.log(response);
return response;
},
responseError: function(rejection){
console.log('Failed with', rejection.status, 'status');
if( rejection.status ==403){
$location.url('/login');
}
else if( rejection.status ==404){
console.log("nothing is there----------->");
/*$state.go('login');*/
}
return $q.reject(rejection);
}
};
})
app.config(['$httpProvider',function($httpProvider) {
$httpProvider.defaults.withCredentials = true;
/*Access-Control-Allow-Credentials == true;*/
$httpProvider.defaults.headers.common['Access-Control-Allow-Headers'] = true;
$httpProvider.interceptors.push('mainHttpInterceptor');
}]);
What, Should i do to to get those header parameters into my code.
Related
I want to intercepts only remote server calls.
I tried implementing Angular http interceptor but even it is intercepting local template call.
I got every request on console and check request made in Network Tab. It is differ in numbers.
I want reset session timeout on server call
$httpProvider.interceptors.push(function($rootScope) {
return {
'request': function(config) {
return config;
},
'response': function(response) {
return response;
},
'responseError': function(rejection) {
if (rejection.status === 401) {
location.reload();
}
return $q.reject(rejection);
}
};
});
Able to resolve it using $templateCache
Ref - Angular HTTP interceptor executed for embedded ng-templates
Below is the code if someone needed
$httpProvider.interceptors.push(function ($q, $rootScope,$templateCache) {
return {
'request': function(config) {
if( $templateCache.get(config.url) === undefined ){
console.log("Interceptor --> "+ config.url + " -" + $templateCache);
$rootScope.Idle.watch();
console.log(new Date());
}
return config;
},
'response': function (response) {
//Will only be called for HTTP up to 300
console.log(response);
return response;
},
'responseError': function (rejection) {
if(rejection.status === 401) {
location.reload();
}
return $q.reject(rejection);
}
};
});
Here is the code :
(function () {
angular.module('PillApp').factory('AuthFactory',
['$q', '$timeout', '$http', 'Flash', '$state',
function ($q, $timeout, $http, Flash, $state) {
// create user variable
var user = null;
// return available functions for use in the controllers
return ({
isLoggedIn: isLoggedIn,
getUserStatus: getUserStatus,
login: login,
logout: logout,
register: register
});
function isLoggedIn() {
if(user) {
return true;
} else {
return false;
}
}
function getUserStatus(callback) {
$http.get('/status/user')
// handle success
.then(function (data) {
//console.log(JSON.stringify(data));
if(data.data !== ''){
user = true;
callback(user);
} else {
user = false;
callback(user);
}
});
}
function login(userProfile) {
// create a new instance of deferred
var deferred = $q.defer();
console.log("Authentication Service - to send login to server");
// send a post request to the server
$http.post('/login',
userProfile)
// handle success
.success(function (data, status) {
console.log("Authentication response received");
if(status == 200){
getUserStatus(function(result){
if(result){
deferred.resolve();
$state.go('A');
}else{
deferred.reject();
Flash.create('danger', "Ooops having issue logging in!", 0, {class: 'custom-class', id: 'custom-id'}, true);
$state.go('A');
}
});
} else {
user = false;
Flash.clear();
Flash.create('danger', "Ooops having issue logging in!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
}
})
// handle error
.error(function (data) {
console.log("Authentication error - any flash messsage?");
user = false;
Flash.clear();
Flash.create('danger', "Ooops having issue logging in!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
});
// return promise object
return deferred.promise;
}
function logout() {
// create a new instance of deferred
var deferred = $q.defer();
// send a get request to the server
$http.get('/logout')
// handle success
.success(function (data) {
user = false;
deferred.resolve();
})
// handle error
.error(function (data) {
user = false;
deferred.reject();
});
// return promise object
return deferred.promise;
}
function register(username, password) {
// create a new instance of deferred
var deferred = $q.defer();
console.log("Sending registration to server");
// send a post request to the server
$http.post('/register',
{username: username, password: password})
// handle success
.success(function (data, status) {
if(status){
console.log('Registration successful', data, status);
deferred.resolve();
} else {
console.log('Registration unsuccessful', data);
Flash.closeFlash();
Flash.create('danger', "Can't register with us!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
}
})
// handle error
.error(function (data) {
console.log('Registration error', data);
Flash.clear();
Flash.create('danger', "Ooops something went wrong!", 0, {class: 'custom-class', id: 'custom-id'}, true);
deferred.reject();
});
// return promise object
return deferred.promise;
}
}]);
})();
ERROR :
angular.js:14324 TypeError: $http.post(...).then is not a function
at Object.login (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/services/auth.factory.js:55:22)
at AppCtrl.vm.login (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/app.controller.js:35:25)
at fn (eval at compile (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/bower_components/angular/angular.min.js:236:285), <anonymous>:4:167)
at e (http://ec2-52-77-252-229.ap-southeast-1.compute.amazonaws.com:3001/bower_components/angular/angular.min.js:281:195)
I tried $http.post().success also and it gives error like success is not defined
Than i tried $http.post().then also and it gives error like then is not defined
I have injected $http in a right way.it worked on localhost but during production it gives this kind of errors.
You need to define functions containing http post directive in this manner :
$scope.getUserCallback = function (callback) {
$http.get('/status/user')
// handle success
.then(function (data) {
//console.log(JSON.stringify(data));
if(data.data !== ''){
user = true;
callback(user);
} else {
user = false;
callback(user);
}
});
};
then you can call it from inside the script wherever required as
$scope.getUserCallback();
and from an html element like this
<my element ng-click="getUserCallback()"></my element>
I think the $http.post call is failing due to CORS. You may need to enable CORS or send the appropriate HTTP headers in your request. The error you are getting because the $http.post is not returning the expected object which can execute the next success or then methods.
It would work correctly on your localhost as there is no CORS restriction in local development environment.
I implemented jwt stateless in backend , so except login and signup all other method has to intercept in angularjs and sending auth token to server in request header .But token is not sending mean not seeing in reqest header in console(developer tools).
This is my interceptor.js :
/**
*
*/
/* Interceptor declaration */
rootApp.factory('authInterceptor', function ($rootScope, $q, $sessionStorage, $location,$window) {
return {
request: function (config) {
//config.headers['Content-Type'] = 'application/json';
config.headers = config.headers || {};
if ($window.sessionStorage.token) {
config.headers.Authorization = 'Bearer ' + $window.sessionStorage.token;
//config.headers['x-auth-token'] ='Bearer ' + $window.sessionStorage.token;
}
return config;
},
response: function (response) {
if(response.status === 200){
if(response.data && response.data.success === false){
if($rootScope.authFailureReasons.indexOf(response.data.reason) !== -1){
$location.path('/login');
}
}
}
if (response.status === 401) {
$location.path('/');
}
return response || $q.when(response);
},
'responseError': function (rejection) {
return $q.reject(rejection);
}
};
});
rootApp.config(['$httpProvider', function ($httpProvider) {
// $httpProvider.interceptors.push('headerInterceptor');
$httpProvider.interceptors.push('authInterceptor');
}]);
And service.js file is:
rootApp.service('adminService', function ($rootScope, $http, $q,$window) {
return {
inviteUser: function (user) {
var deferred = $q.defer();
$http({
method: 'POST',
url:$rootScope.baseUrl+'api/v1/admin/user/add',
data:user
}).success(function (response, status, headers, config) {
deferred.resolve(response);
}).error(function () {
// Something went wrong.
deferred.reject({'success': false, 'msg': 'Oops! Something went wrong. Please try again later.'});
});
return deferred.promise;
}
};
});
In server side X-AUTH-TOKEN is allowed in headers too.Where i am going wrong
Please help.
hey I have recently made my first token authentication in my Ionic app .. yeah it is an easy step but implementation may take some time if you are not a language PRO..
you can try this.
https://devdactic.com/user-auth-angularjs-ionic/
this is one of the finest and tested tutorial on the web for token based AUTH..
Maybe that may help you to find the error !
I'm trying to add a popup with retry option as follows so that the user can click on that when lose the connection during a HTTP call.
angular.module('app.services', [])
.factory('httpResponseErrorInterceptor', ['$injector', '$q', function($injector, $q) {
return {
'responseError': function(response) {
var $ionicPopup = $injector.get('$ionicPopup');
if (response.status === 0) {
var confirmPopup = $ionicPopup.confirm({
title: 'No Connectivity!',
template: 'Internet not available'
});
confirmPopup.then(function(res) {
if(res) {
var $http = $injector.get('$http');
return $http(response.config);
} else {
return $q.reject(response);
}
});
}
}
};
}])
It is receiving the response from the http call, but not returning the response to the calling point. In the same way I tried the following code,
.factory('httpResponseErrorInterceptor', ['$injector', '$q', function($injector, $q) {
return {
'responseError': function(response) {
if (response.status === 0) {
var $http = $injector.get('$http');
return $http(response.config);
}
return $q.reject(response);
}
};
}])
But this one is returning the response properly to the calling point when we get the connection back. I'm not sure where I'm going wrong in the first code.
Any help/idea would be appreciated.
You should return confirmPopup.then() call.
Do like this:
return confirmPopup.then(function(res) {
if(res) {
var $http = $injector.get('$http');
return $http(response.config);
} else {
return $q.reject(response);
}
});
Example of chaining:
var promise = confirmPopup.then(function(res) {
if(res) {
var $http = $injector.get('$http');
return $http(response.config);
} else {
return $q.reject(response);
}
});
promise.then(function(success){
//HTTP SUCCESS
}, function(error){
//HTTP ERROR OR REJECT RESPONSE
});
Based on Patrick Kelleter's answer, I framed this working solution,
.factory('httpResponseErrorInterceptor', ['$injector', '$q', function($injector, $q) {
return {
'responseError': function(response) {
var $ionicPopup = $injector.get('$ionicPopup');
var $ionicLoading = $injector.get('$ionicLoading');
$ionicLoading.hide();
if (response.status === 0) {
var userInputDefer = $q.defer();
var confirmPopup = $ionicPopup.confirm({
title: 'No Connectivity!',
template: 'Internet not available',
okText: 'Retry'
});
confirmPopup.then(function(res) {
if(res) {
var $http = $injector.get('$http');
userInputDefer.resolve($http(response.config));
} else {
userInputDefer.reject($q.reject(response));
}
});
return userInputDefer.promise;
}
}
};
}]);
Edit:
Just for future reference for someone, for using the above HTTP interceptor, you have to include the factory in config as follows,
.config(['$httpProvider',function($httpProvider) {
$httpProvider.interceptors.push('httpResponseErrorInterceptor');
}]);
confirmPopup.then(function(res) {
if(res) {
var $http = $injector.get('$http');
return $http(response.config);
} else {
return $q.reject(response);
}
});
here is the problem. you are returning stuff ($http / $q) in the asynchronous callback of the confirmPopup.
the confirmPopup is async and you define a callback via ".then".
whatever you are returning there will not reach your calling point. it is the return value of the callback. which probably will not land anywhere (depending on the implementation of confirmPopup, but i doubt that it expects you to return anything there)
you will have to use your own promise and return it synchronously at the end of your callback
I'd like to implement authentication on a single page web app with Angular.js. The official Angular documentation recommends the using of interceptors:
$provide.factory('myHttpInterceptor', function($q, dependency1, dependency2) {
return {
// ...
'responseError': function(rejection) {
// do something on error
if (canRecover(rejection)) {
return responseOrNewPromise
}
return $q.reject(rejection);
}
};
});
The problem is when the server sends 401 error, the browser immediately stops with "Unauthorized" message, or with login pop-up window (when authentication HTTP header is sent by the server), but Angular can't capture with it's interceptor the HTTP error to handle, as recommended. Am I misunderstanding something? I tried more examples found on web (this, this and this for example), but none of them worked.
For AngularJS >1.3 use $httpProvider.interceptors.push('myHttpInterceptor');
.service('authInterceptor', function($q) {
var service = this;
service.responseError = function(response) {
if (response.status == 401){
window.location = "/login";
}
return $q.reject(response);
};
})
.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push('authInterceptor');
}])
in app config block:
var interceptor = ['$rootScope', '$q', "Base64", function(scope, $q, Base64) {
function success(response) {
return response;
}
function error(response) {
var status = response.status;
if (status == 401) {
//AuthFactory.clearUser();
window.location = "/account/login?redirectUrl=" + Base64.encode(document.URL);
return;
}
// otherwise
return $q.reject(response);
}
return function(promise) {
return promise.then(success, error);
}
}];
I don't know why, but response with 401 error goes into success function.
'responseError': function(rejection)
{
// do something on error
if (rejection.status == 401)
{
$rootScope.signOut();
}
return $q.reject(rejection);
},
'response': function (response) {
// do something on error
if (response.status == 401) {
$rootScope.signOut();
};
return response || $q.when(response);
}
AngularJS interceptors only work for calls made with the $http service; if you navigate to a page that returns a 401, AngularJS never even runs.