Add trunk request header

Question

My server has manual authorization. I need to specify my server username / password on my main request so that it passes. How can i do this? Any ideas? Thanks you

Answer 1

Backbone models retrieve, update, and destroy data using the fetch , save and destroy methods. These methods delegate the actual part of the request to Backbone.sync. Under the hood, all Backbone.sync does this by creating an ajax request using jQuery. To enable basic HTTP authentication, you have several options.

fetch , save and destroy all accept the optional [options] parameter. These [options] are just a dictionary of jQuery query parameters that are included in the jQuery ajax call that is being executed. This means that you can easily define a simple method that adds authentication:

 sendAuthentication = function (xhr) { var user = "myusername";// your actual username var pass = "mypassword";// your actual password var token = user.concat(":", pass); xhr.setRequestHeader('Authorization', ("Basic ".concat(btoa(token)))); } 

And include it in every call to fetch , save and destroy . For example:

  fetch({ beforeSend: sendAuthentication }); 

This can create quite a few repetitions. Another option would be to override the Backbone.sync method, copy the source code, and simply include the beforeSend parameter in every jQuery ajax request made.

Hope this helps!

Answer 2

The easiest way to add the request header to Backbone.js is to simply pass them to the fetch method as parameters, for example.

 MyCollection.fetch( { headers: {'Authorization' :'Basic USERNAME:PASSWORD'} } ); 

Answer 3

One option would be to use jQuery ajaxSetup, all Backbone queries will ultimately use the underlying jQuery ajax. The advantage of this approach is that you only need to add one place.

 $.ajaxSetup({ headers: { 'Authorization' :'Basic USERNAME:PASSWORD' } }); 

Answer 4

You can override the baseline method.

 #coffeescript _sync = Backbone.sync Backbone.sync = (method, model, options) -> options.beforeSend = (xhr) -> xhr.setRequestHeader('X-Auth-Token_or_other_header' , your_hash_key) #make sure your server accepts X-Auth-Token_or_other_header!! #calling the original sync function so we only overriding what we need _sync.call( this, method, model, options ) 

Answer 5

 Backbone.$.ajaxSetup({ headers: {'Authorization' :'Basic USERNAME:PASSWORD'} }); 

This code sets the headers in Backbone ajax, so they will be sent with every Backbone.sync. You can send headers without using xhr.setRequestHeader with every sync call.

Therefore, you do not need to do the following every time:

 MyCollection.fetch({ headers: {'Authorization' :'Basic USERNAME:PASSWORD'} } ); 

You can just do

 MyCollection.fetch(); 

It might be a hack, but it works great for my system.

Answer 6

My approach to something like this would be to overwrite the synchronization method to add a header before executing the request. In this example, you can see that I am creating a Backbone.AuthenticatedModel that extends from Backbone.Model .

This will affect all methods (GET, POST, DELETE, etc.)

 Backbone.AuthenticatedModel = Backbone.Model.extend({ sync: function(method, collection, options){ options = options || {}; options.beforeSend = function (xhr) { var user = "myusername";// your actual username var pass = "mypassword";// your actual password var token = user.concat(":", pass); xhr.setRequestHeader('Authorization', ("Basic ".concat(btoa(token)))); }; return Backbone.Model.prototype.sync.apply(this, arguments); } }); 

Then you just need to extend the model that requires authentication from the generated Backbone.AuthenticatedModel :

 var Process = Backbone.AuthenticatedModel.extend({ url: '/api/process', }); 

Answer 7

 Object.save( {'used': true} {headers: {'Access-Token': 'access_token'}} ) 

Answer 8

Create your own synchronization method that intercepts Backbone.sync calls and loads your authorization headers and passes everything else through:

  REPORTING_API_KEY = 'secretKeyHere'; CustomSync = function(method, model, options) { options.headers = { 'Authorization' : 'Bearer ' + REPORTING_API_KEY }; return Backbone.sync(method, model, options); }; 

Then rewrite the model synchronization with this:

  MyModel = Backbone.Model.extend({ urlRoot: '/api/', sync: CustomSync }); 

Answer 9

• On the client side, add this before any server communication:

   $.ajaxSetup({ xhrFields: { withCredentials: true }, async: true }); 

• On the server side, add these headers (PHP):

   header('Access-Control-Allow-Origin: http://your-client-app-domain'); header("Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS"); header("Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With"); header('Access-Control-Allow-Credentials: true');