I have the following Code in AngularJs, but , how can I ensure that I am sending the authenticated app to communicate to back end?
resp.get
Update = function () {
//return $http.get(urlBase);
return $http({
method: 'GET',
url: urlBase + eventList,
});
};
e.g.:
I have a RESTFUL API in Drupal for showing a list of events. To get that list of events in my hybrid app (Angular+cordova), I will make a $hhtp call. During that call, I need to send a auth code. How to do it? And how can I be sure, its from iOS or Android or Desktop?
I am thinking of using - MD5 (angular md5) for this. But, what are the encode and decode method for it which will be supported by both AJS and Drupal at the backend.
I think, you need json web token authentication
https://github.com/easystreet3/angular-drupal
https://www.drupal.org/project/jwt
Related
I'm developing an angular web application that will replace the current website that we have. The current website uses session based authentication. At the moment, I can't access the hosted API with get or post requests.
I'm developing the angular application on my local computer using a python simple server, whereas the api is hosted online.
I would prefer to find a fix that's completely in angular since I can't change the API without help (it was written by my boss a while ago, and is now used in the production version). I don't have a login page so I'm just trying to provide the authentication information in my headers and requests.
My angular application was written independent of django. I just want to access the django backend
So far I'm trying the following to set the headers:
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
$httpProvider.defaults.headers.common = {'username': btoa('myUsername'), 'password': btoa('myPassword')
};
}]);
And in my service:
app.factory('Test', ['$resource', function($resource) {
return $resource('https://www.phonywebsite.org/en/api/test/')
};
I consistently get 301, 400 and 403 errors. Lately it's been mostly 301 errors and I get no response from the api. I'm using the Allow CORS chrome extension as a temporary fix to try to get to the api without getting a CORS policy error.
My questions
How can I fix the CORS errors without using the chrome extension?
How do I provide my authentication to my django backend that uses session based authentication making sure the csrf cookie its looking for is in the header?
To answer your first question, using the cors extension is a temporary solution and should mostly never be used cause your clients might not use it. To handle CORS, you need to understand how cross site API calls work. In short CORS is a mechanism that allows AJAX requests to circumvent their same origin limits. To handle such situations you need to update your backend and add
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
. Once you add this your settings.py should stop getting CORS issues.
To answer your second question, angular already provides you with support for CSRF so half of your battle is already won. What you need to do is add a patch on your module to start accepting csrf tokens (The name is a bit different in angular). You have already done this and done a good job of it as well:
var app = angular.module('app', ['...']);
app.config(['$httpProvider', function($httpProvider) {
$httpProvider.defaults.xsrfCookieName = 'csrftoken';
$httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken';
}]);
What this would do is make sure that whenever you make a $http call your csrf token is set as well.
As a learning oppurtunity, you could also try using ng-cookies as well. To go further to explain this, whenever you make a call in angular , your request in bundled with cookies as well so you can easily access them in request.COOKIES.
You need to change how you are calling your API as well, something like:
app.factory('APIService', function ($http) {
return $http({url: 'https://www.phonywebsite.org/en/api/test/',
method: 'GET'})
}
You can obviously make modifications to this but I think this shows the $http usage to make you understand the general gist.
You can try to add some more authentication around your application here as well (or replace django auth with your own custom auth), but that is on your use case.
Hope this helps.
I have made web application GUI using AngularJS, Bootstrap, HTML, CSS.
Backend team are developing APIs in C Programing.
So how my routes in $http request (sending from factory) will communicate to C Programing API (Controller) to get data or to perform related operations.
Thanks!
You would just need the URI and the Async request would look like this:
$http.get('URI goes here').then(
function (response) {
//success
vm.data = response;
},
function (response) {
//fail
console.log("error");
}
);
I think you need to learn the concepts of Web API's. Basically the server (C written in your case?) responds to various HTTP requests (GET, POST, PUT, etc..). By defining a Web API you simply state that for some http request for a specific path - there's gonna be a meaningful response.
For example here's a Web API:
GET /api/users - list users
GET /api/users/{id} - get a specific user
POST /api/users/{id} - update specific user
To consume this endpoint (/api/users) you can use $resource or $http like so:
var UserFactory = $resource('/api/users/:id');
var userlist = UserFactory.query();
var user = UserFactory.get({id: 123});
user.$promise.then(function(){
user.balance = 100000000;
user.$save();
});
Basically in the background angular translates $resource calls to HTTP requests.
I am using a 3rd party API as a booking portal. I am using Angular $http to post to a php curl script on my site that will make the actual call cross site to the API.
factory.bookingRequest = function(reservationData){
return $http({
method: "post",
url: "api-book.php",
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
data: reservationData
}).then(function(response){
return response.data;
});
};
1)
Does the Angular page that is posting to the php page need to be via https also? Or just the script that is responsible for sending the data outside of the site?
2) Also when I get the response back, it has a confirmation number and other details that they have said also need to be via HTTPS.
How would this best be handled? Could I have this as a session cookie and return it to a /booking/confirmation route or return this back to the same page but using ng-show or ng-hide to show confirmation details?
3)
Also when I am sending form data from my Angular route to my Php page in the network tab in chrome dev tools I can see all the information that is getting sent to my php page (Request payload in the headers tab). Just wanted to make sure this was ok also?
I have this angularjs code below to access an API in json format with OAuth2's token. But I noticed writing in this way the access token can be seen and captured by everyone. I wonder how to hide or secure this so that no one can get the token easily by just checking the source.
<script>
var app = angular.module('myApp', []);
app.controller('articleCtrl', function($scope, $http) {
$http({
url: "http://example.com/api/article",
method: "GET",
headers: {
"Authorization": "Bearer bVM1HTeZ5R0HETGSTdjeg",
},
}).success(function(response) {
$scope.items = response;
});
});
</script>
You should use a HTTPS/SSL protocol to stablish communication with your REST API
You'll need to communicate with the API on the serverside and send the results to the client. There is no other way. People will be able to view your sourcecode, it's sent to the client so it can be executed. At that point it's in the hands of your client and they have your key. You could obfuscate your sourcecode but if somebody wants to, it's easy to undo. Just do API calls on your serverside through PHP/Node or whatever you are running and send the results to your client. The client isn't able to read your serverside code so your key will be safe. So instead of: API <> Client you'll need to do API <> server <> client
I use Angulars $http service to call for data on the backend. Let's say JSON data. An example URL to do so would be something like:
/get/data
Doing this from within Angular nicely returns the requested data. No problem.
But even though I catch all other Angular routes using Angular UI Router with $urlRouterProvider.otherwise('/');, I can still go to my browser and type in the mydomain.com/get/data URL, which provides me with a page of JSON code.
How to I restrict back-end server calls to come just from Angular, NOT from my browser URL without user authentication?
N.B.
Using Express 4.X on Node, I also provided my app with a 'catch-all' route to default back to my front-end index.html page, like so:
router.get('*', function(req, res) {
res.sendFile(path.join(__dirname, '/index.html'));
});
Thanks!
My God! Spent whole frikin day fighting this problem, finally fixed it!
The dog is burried in headers - you have to specify one on Angular http request, then read it in node.
First of - routing setup is the same as in this guide: https://scotch.io/tutorials/setting-up-a-mean-stack-single-page-application
On frontend in Angular http request I specify one of the accepted header types to be json:
$http.get('/blog/article', {
headers: {
'Accept': 'application/json;'
}
}).success(function(data) {
console.log(data);
})
.error(function(data) {
console.log('Error: ' + data);
});
On backend in Node I check if header includes json type. If it does, I serve back json data, so angular can receive the content. If it doesn't, I force node to load index.html, from which the controller runs the before mentioned http request with the header, ensuring you get your data then.
app.get('/blog/article', function(req, res) {
if(/application\/json;/.test(req.get('accept'))) {
//respond json
//console.log("serving json data...");
blogItemModel.find({ "_id" : req.query.id }, 'title full_text publish_date', function(err, blog_item){
// if there is an error retrieving, send the error. nothing after res.send(err) will execute
if (err) res.send(err);
res.json(blog_item);
});
} else {
//respond in html
//console.log('Request made from browser adress bar, not through Angular, serving index page...');
res.sendfile('./public/views/index.html');
}
});
Agree with #HankScorpio
Angular UI routing for Angular application paths and server application accessing URL paths are two different things.
Angular UI router allows you to navigate within a single page application as if you have a multi page application. This is in no way similar to accessing the actual server application endpoint.
All restrictions should be done on the web server and server web application end. Hence you will have to implement some authentication/authorisation strategy.
This isn't really an angular issue. When a user enters mydomain.com/get/data they never actually load up the angular app, so your solution must be done elsewhere.
For example, you could add this to your website's .htaccess file. It will redirect all traffic to the root of your domain.
Check out this answer here:
.htaccess Redirect based on HTTP_REFERER
You can't.
Your angular code is running on their machine, in their browser.
As such, one can spoof the environment, capture the data as the browser requests it, edit the JS of your app while it is in their browser, or various other methods.
Why do you want such a restriction anyway?