I am working on an angular application, where a request is being sent to the express backend. With the request, I am attaching a JWT token in the header using an auth-interceptor. The API request URL is as follows:
http://localhost:3000/api/:userID/askQuestion
I am sending the userId in the URL and the JWT token in the header from Frontend.
But when I am sending any request the backend is not authorizing the route. NOTE: I am authorizing routes in the backend with the JWT token in the header. So when I am sending the request the auth-interceptor is not setting the auth-token in the header for the routes which contains an URL parameter.
It is working perfectly fine The routes which don't contain any URL parameter
You can try add custom header using the config method to every requests.
angular.module('myApp', [])
.config(function($httpProvider) {
$httpProvider.defaults.headers
.common['X-Requested-Url-Header'] = 'http://localhost:3000/api/:userID/askQuestion';
});
Related
I have backend (localhost:5000) and frontend (localhost:3000)
I have a passport strategy google-oauth20 and it works well.
My auth url on backend is localhost:5000/auth/google and callback url is localhost:5000/auth/google/callback.
I call auth url from React app(simply window.href) and then when all goes ok I get to callback url, where my backend create/login user and result of this is jwt token that returns in response.
So my question is - how to send to frontend this data to finally authenticate user?
I tried to modify backend route localhost:5000/auth/google/callback to not return response but redirect to frontend page with req.header.Authorization + token token but this doesn't work.
I currently have an ExpressJS application with PassportJS up and running. I use Passport to authenticate with GitHub. These are the existing endpoints.
This creates the authorization url and redirect to that url:
app.get('/auth/login', passport.authenticate('github'))
This does all the magic to get the access token, a user object and a json web token:
app.get('/auth/github/callback', passport.authenticate('github'),
function(req, res) {
res.send(createJWT(req.user));
})
As you can see, I only have/need 2 end points. The authentication/api is located at http://localhost:8080/ and the frontend is located at http://localhost:3000/
So my question is: What are the settings for Satellizer to work with these existing endpoints? Should I be using the $authProvider.github() or a custom $authProvider.oauth() provider object?
Satellizer and Passport don't play well with each other. For instance Satellizer uses POST requests throughout, while Passport mostly relies on GET requests.
There is no way to reconfigure Satellizer to use GET requests.
We use token authentication and send the token in Authorization header for each request.
But we store the token in cookie because it is used for multiple subdomains.
Angular $http will send cookie in request automatically. So I have duplicated string in Authorization and Cookie in the request header.
Is there a way to remove cookie for all $http request?
(We use Restangular. So perhaps this is possible by configuring restuangular?)
var cookies = $cookies.getAll();
angular.forEach($cookies, function (v, k) {
cookies.remove(k);
});
try like this.
I have a project split up in backend and frontend, the backend (API rest) is built in Laravel 5 and frontend in AngularJS. Both project are independent and they are supposed to be hosted on different servers.
In the first request I obtain the CSRF token from Laravel with this code:
var xhReq = new XMLHttpRequest();
xhReq.open("GET", "http://laravel.local/api/token", false);
xhReq.send(null);
angular.module('mytodoApp').constant('CSRF_TOKEN',xhReq.responseText);
So the CSRF_TOKEN is sent each time that I make a request to API, like this:
$scope.deleteTodo = function(index) {
$scope.loading = true;
var todo = $scope.tours[index];
$http.defaults.headers.common['XSRF-TOKEN'] = CSRF_TOKEN;
console.log($http.defaults.headers.common['XSRF-TOKEN']);
$http.delete('http://laravel.local/api/deleteTodo/' + todo.id, {headers : {'XSRF-TOKEN': CSRF_TOKEN}})
.success(function() {
$scope.todos.splice(index, 1);
$scope.loading = false;
});
The API always return:
TokenMismatchException in compiled.php line 2440:
Is it right that Laravel changes the CSRF Token with every request from Angular? On every request, Laravel creates a new file on storage/framework/sessions. Do you recommend any other solution to validate that requests to API come from a safe origin?
In token-based authentication, cookies and sessions will not be used. A token will be used for authenticating a user for each request to the server.
It will use the following flow of control:
The user provides a username and password in the login form and clicks Log In.
After a request is made, validate the user on the backend by querying in the database. If the request is valid, create a token by using the user information fetched from the database, and then return that information in the response header so that we can store the token browser in local storage.
Provide token information in every request header for accessing restricted endpoints in the applications.
4.request header information is valid, let the user access the specified end point, and respond with JSON or XML.
This Can be Achieved by Jwt (Json web Token).got this information from This link.
So, what is this JWT?
JWT
JWT stands for JSON Web Token and is a token format used in authorization headers. This token helps you to design communication between two systems in a secure way. Let's rephrase JWT as the "bearer token" for the purposes of this tutorial. A bearer token consists of three parts: header, payload, and signature.
The header is the part of the token that keeps the token type and encryption method, which is also encrypted with base-64
The payload includes the information. You can put any kind of data like user info, product info and so on, all of which is stored with base-64 encryption.
The signature consists of combinations of the header, payload, and secret key. The secret key must be kept securely on the server-side.
The tutorial with example can be Found here Token-Based Authentication With AngularJS & NodeJS.
Hope that this will solve your problem,All the Best!!
I have a angular app that I needed to redirect outside to a non angular html page, so I thought I could just use the $window.location.hrefto redirect the angular app to my external site. This actually works fine, however, I have a nodejs/express backend that checks for auth token before serving up any content(even static content).
This requires a auth token to be sent in the header of the http request. Now the question:
Can/How do you add an auth token to the request that is made by changing the $window.location.href before it is sent off?
When you use $window.location.href the browser is making the HTTP request and not your JavaScript code. Therefore, you cannot add a custom header like Authorization with your token value.
You could add a cookie via JavaScript and put your auth token there. The cookies will automatically be sent from the browser. However, you will want to review the security implications of using a cookie vs. a header. Since both are accessible via JavaScript, there is no additional attack vector there. Unless you remove the cookie after the new page loads, there may be a CSRF exploit available.
This answer is NOT a safe way, as the token is exposed in the URL, which is logged in browser history, access logs, etc. Use a domain cookie instead. I'll leave the answer as it can be an easy way to debug in your local setup.
I am using JWT as authentication on a Laravel PHP backend, and it works by putting ?token=... in the URL. For example, when using AngularJS with satellizer plug-in, I add ?token=' + $auth.getToken() to the URL.