I'm trying to implement authentication with ExpressJS' cookie sessions and AngularJS. The problem is that even I can get ExpressJS to send session cookies, Angular won't send them with subsequent requests.
I'm running backend server at 192.168.1.2:3000 and yeoman server at 192.168.1.2:3501 so is there a cross-domain issue here? I already did the normal CORS stuff with ExpressJS in order to get $http working correctly but I'm not sure how to get the cookies working.
Have you checked that your request is sent with the withCredentialsflag set to true?
In angular, this can be done by in the HTTP request configuration object, e.g
//...
$http.get(myUrl, {withCredentials: true})
//...
Or if you don't want to reconfigure it all the time, using $httpProvider:
myApp.config(['$httpProvider', function ($httpProvider) {
$httpProvider.defaults.withCredentials = true;
}]);
to get cookies working in angularJS you could follow this link
I maintain session variable in the backend (expressJS) and return it to the $cookies object in the frontend(angularJS).
So When i logout, it would delete the cookie in angularJS and the session variable in the backend.
Related
Is there a way to set a cookie with an initial http request?
Meaning, I would like to call a url and set cookies at the same time. Not sure how to go about this? Thank-you
Update: I am not doing cross domain, but sub domain in new tab.
Cookies fly with the HTTP request at the moment those requests depart. So cookies must be already set prior the HTTP request, so the browser can package them.
If you just want to set a cookie prior your request, you can do so by using the $cookies service:
angular.module('cookiesExample', ['ngCookies'])
.controller('ExampleController', ['$cookies', function($cookies) {
// Setting a cookie
$cookies.put('myFavorite', 'oatmeal');
// Make your HTTP Request here //
// $http.get('/someUrl').then(...);
}]);
Now, if you want those cookies being set transparently without the need to scatter $cookies everywhere, you should write a HTTP Interceptor and set those cookies there. You can read how to do it here: https://docs.angularjs.org/api/ng/service/$http (Look for Interceptors).
Once you create your interceptor, which is essentially a Factory, you can hook it up in your .Config stage, like this: $httpProvider.interceptors.push('myHttpInterceptor');. Then, even calls made by the AngularJS Framework will receive this cookie.
If this is not what you want, comment here and I will try to update it.
I am using angular and java building a small website.
I try to write a auth system, but i meet some problems with cookie.
My web app is run on localhost:8081 while my java servlet is on localhost:8888.
In my java code:
response.addHeader("Access-Control-Allow-Origin", "http://localhost:8081");
response.addHeader("Access-Control-Allow-Headers", "X-Requested-With");
response.addHeader("Access-Control-Allow-Credentials", "true");
In my angular code:
$httpProvider.defaults.withCredentials = true;
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];
actually I've tried reading
Set-Cookie in HTTP header is ignored with AngularJS
Angularjs $http does not seem to understand “Set-Cookie” in the response
$http response Set-Cookie not accessible
but I still meet strange problems.
My first login: you can find that the server reponse a JSESSIONID and a mobile cookie in set-cookies header.
but I check the chrome developer tool and find the resource>cookies empty.
after login, I send another request to the server to get some list:
but the strange thing is chrome send the JSEESIONID which is send from sever to client on the first login but can't find in the chrome developer tool. while chrome don't send the 'mobile' cookie which is created by my self.
I set my cookie in server with:
CookieUtils.setCookie(response, "mobile",String.valueOf(customer.getPhone()), 3600*24*7, "/","localhost");
request.getSession().setAttribute("user", customer);
request.getSession().setMaxInactiveInterval(3600*24);
what can i do if i want to get the cookie in $http response and set it, and when request other thing with this cookie like my 'mobile' cookie, because i want to do authentication this way.
while, the same code working with firefox is just ok, but not work in chrome 43.0.2357.65 m ,wtf..
Adding
$httpProvider.defaults.withCredentials = true;
with your requests, otherwise the cookie would be set.
I authenticate my user only through laravel, so angular does not know about it. But I need to do a $http.post on a "before auth" route with angular in order to get some profil info:
laravel route.php
Route::post('profile', array('before' => 'auth', function()
{
// Only authenticated users may enter...
}));
angular app.js
$http.post("/profile").success(function (data) {
$scope.profile = data;
});
For now I get an internal server error (500) with a "Illuminate\Session\TokenMismatchException" because laravel think I'm not logged in.
Could someone help me out with this?
Thanks in advance :)
My mistake, it was a csrf filter that was causing this error, not the auth filter...
For reference to my question:
AJAX Requests are identical with regular requests in regards to session data. Anything that depends on Session or Auth will work with an AJAX call.
link to thread
I'm trying to set my
$httpProvider.defaults.headers.common['X-CSRF-Token'] = $cookie.auth_token;
in my .config section of my app, but it doesn't seem like I can access the document/cookies just yet? Is there a better place to set this?
I'm doing this because I'm storing my users auth_token in a cookie so they don't need to login every time they use my mobile app.
Thanks!
As described in $http docs:
... Angular provides a mechanism to counter XSRF. When performing XHR
requests, the $http service reads a token from a cookie called
XSRF-TOKEN and sets it as the HTTP header X-XSRF-TOKEN.
... To take advantage of this, your server needs to set a token in a
JavaScript readable session cookie called XSRF-TOKEN on the first HTTP
GET request
So if you set your CSRF token in cookie name XSRF-TOKEN then no adjustments are needed on Angular side. and your code should work as is.
I'm making a call to the WebApi service, which sets the cookie in the response object.
The call is made from angularjs via $resource
So this is the server code:
CookieHeaderValue cookie = new CookieHeaderValue("Token", "blah") { HttpOnly = true, Expires = DateTime.Now.AddYears(10), Path="/" };
response.Headers.AddCookies(new CookieHeaderValue[] { cookie });
This works, I can see the Set-Cookie header in a response, however the cookie is not being set.
A friend of mine had to set xhrFields' withCredentials to true when he was using jQuery, so I wonder if there's something that needs to be configured in angular as well ?
There could be a number of things going on.
First, since you are on separate domains, you may need to implement CORs (cross origin resource sharing), but it seems that the request is being made successfully. I'm not sure why that works, I would think that browsers would prevent it. In any case here's a jsfiddle that illustrates using CORs with angularjs to make both $http & $resource requests. The trick seems to be to configure the $http service:
$http.defaults.useXDomain = true;
Another thought is that cookies from one domain, can't be accessed by another domain. Here is another question on cookies with angularjs, but the request and server seem to be on the same domain. Here is a discussion on cookie domains, and how they are applied.
If it's possible I would try to get the cookie request/response working on the same domain, and then move the client to another domain.