My AngularJS project is working with an API. This API provides authentication tokens (Oauth): an access_token and a refresh_token.
Everytime an AngularJS request to the API returns a 401 error, it means that the access_token has expired and it needs to be refreshed by sending the refresh_token to a specific URL. To do that, I followed this tutorial.
But this is not working and I don't know why. I would like to debug the function placed into .config(...) but I don't know how to do that. console.log() and $rootScope = ... doesn't work here.
Thanks for your help !
Use your browser's built-in debugger.
Chrome: https://developer.chrome.com/devtools/docs/javascript-debugging
Firefox: https://developer.mozilla.org/en-US/docs/Tools/Debugger
Firebug: http://getfirebug.com/javascript
IE: https://msdn.microsoft.com/en-us/library/gg699336%28v=vs.85%29.aspx
Related
I am using SLIM Framework (PHP) for Backend and Angular 1 for Frontend.
All APIs work fine until I set Authorization header when user logged in app.
$http.defaults.headers.common.Authorization = token; // Token isvalid
// or
Restangular.setDefaultHeaders({'Authorization': token });
I got the error 405 Method Not Allowed (OPTIONS method). This error from my local, when I deploy Frontend to server, it works fine.
Should I fix on Frontend or Backend? And please help me how to fix it?
Thanks for your help :)
OPTIONS is CORS preflight request. You need to enable CORS support. One way to do it is to use CORS middleware.
i do not know if any body still interested in this topic
but i am going to tell you my approach
i added CORS Options to web config file in my api project and then add
[HttpOptions] attribute to my api method and then it started working
i do not know if it is the right answer or not but until i find the better solution i am going to user this approach
So for the past few months I have been developing the 'login functionality' of my Angular apps like this. The user logs in and if the credentials are correct, the REST API returns a token. I take that token and store it as a cookie:
$cookies.put('authorisation', data['token']);
Whenever I call the $http service, I submit the authorisation cookie as a header and it authorises the http request. Then on the controller of each view I add:
if (!$cookies.get('authorisation')) {
$location.path('/login');
}
So if the cookie doesn't exist, the user is automatically kicked to the login screen.
This has worked for me just fine up until now but I can't help but feel that it is not the 'correct' way of doing things. Could anyone shed a little light on what the best practice method for this could be? And perhaps why what I'm doing is 'wrong'?
Are you familiar with Angular $http Interceptors:
https://docs.angularjs.org/api/ng/service/$http#interceptors
You could use the request interceptor to have your authorization checked before each $http request.
If you do this you also have to integrate a custom Flag on each $http config object (e.g. skipAuthorization) in order to allow the user to perform Requests without being logged in (useful for actually logging in ;-))
#AzzyDude to your comment:
I'm using ui-router to do the navigation inside of my Angular 1.6.X Application.
You can either integrate own config-properties on the states (isGuestState) or if its a closed application such as mine, hard-coded in a $stateChange event, like this:
I have an angularjs web application that uses Azure Active Directory for authentication.
The Web Api that the application uses, authenicates without any errors.
For client-side authentication I am using adal.js and adal-angular.js.
When i try to visit any page in my app, authentication fails and prints the following messages in the console
The returned id_token is not parseable.
Route change event for:/
Start login at:https://localhost:44308/#
Navigate url:https://login.windows.net/myapp.onmicrosoft.com/oauth2/authorize
Navigate to:https://login.windows.net/myapp.onmicrosoft.com/oauth2/authorize
TypeError: Cannot read property 'data' of undefined
I have followed this tutorial.
Does anyone know what is going on or how can I debug this?
The error was in the adal.js library when the token which didn't decode correctly utf-8 characters.
An updated version of the library with the bug fix will be available soon.
It's tough to answer without seeing a code sample. If you're using promises, you need to handle the case if the promise is rejected. You probably have something like this:
myAuthService.authenticate(...).then(function(data){
//this handles the successful call.
});
What you need to see the error is something like this:
myAuthService.authenticate(...).then(function(data){
//this handles the successful call.
}, function(e){
//this handles the error case
alert('errror. inspect this.arguments');
});
You should post the code that is throwing the error.
I have the problem that even though I set the $http.defaults.headers.common.Authorization to null I am still capable of accessing the [Authorize] part of my Web API 2.0 application.
This problem doesn't arise when I start the application from scratch and try to retrieve the data via an initial GET request. This is when I get an error from the $http callback function.
Any guesses why this is happening? I am quite confident that the bearer token is stored somewhere in the browser and doesn't get deleted properly ...
Chrome (With bearer token):
Chrome (Without bearer token):
Internet Explorer (no bearer Token attribute):
First of all, the authentication property in IE is completely missing. Second, in Chrome everything works perfectly. In IE I have the issue that I can't erase the token for the logout request. The login part with the summary of the regions [Authorize] part works perfectly.
Make sure you haven't also configured jQuery to do this, via something like $.ajaxSetup
Try to check the request that have been set, if any Authentification header is there. Also try to verify that you are using the [Authorize] attribute from System.Web.Http and not System.Web.Mvc
I am currently implementing login functionality in my app. I use AngularJS and $cookieStore. I get a cookie from the server when I make an ajax request to authenticate the user. I want to use this cookie in success() to set up the user in my Auth services. I use chrome developer tools to pause right after I ask for the cookie like this:
var cookieUser = $cookieStore.get('user');
but it turns out to be undefined, but a chrome watch on unescape(document.cookie) shows a cookie "user" is set.
If I run the request twice: $cookieStore.get('user') returns the previous cookie.
Why is $cookieStore not updated with the cookie I just received?
AngularJS' uses an asynchronous $watch callback to write cookies. So you either need to wrap your cookie reading inside a $timeout, or access the data without $cookieStore.get.
I had a similar problem.
After the login was successful in my appplication I had ,of course, to transition to a state 'main.index' and in its resolve object I wasn't able to get the authentication cookie with $cookies object(angular), but I was able to see it in document.cookie.
I think $cookies are refreshed a tiny bit latter than the $.cookie that #swenedo mentioned.
Using $.cookie from jquery worked for me.