Utilisez l'authentification de base avec jQuery et Ajax

Question

Je tente de créer une authentification de base à travers le navigateur, mais je n'y arrive pas vraiment.

Si ce script n'est pas là, l'authentification du navigateur prendra le relais, mais je veux dire au navigateur que l'utilisateur s'apprête à faire l'authentification.

L'adresse devrait ressembler à :

http://username:password@server.in.local/

J'ai un formulaire :

Et un script :

var username = $("input#username").val();
var password = $("input#password").val();

function make_base_auth(user, password) {
  var tok = user + ':' + password;
  var hash = Base64.encode(tok);
  return "Basic " + hash;
}
$.ajax
  ({
    type: "GET",
    url: "index1.php",
    dataType: 'json',
    async: false,
    data: '{"username": "' + username + '", "password" : "' + password + '"}',
    success: function (){
    alert('Merci pour votre commentaire !');
    }
});

Answer 1

Utilisez le rappel beforeSend de jQuery pour ajouter un en-tête HTTP avec les informations d'authentification :

beforeSend: function(xhr) {
    xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password));
},

Answer 2

Comment les choses changent en un an. En plus de l'attribut d'en-tête à la place de xhr.setRequestHeader, la version actuelle de jQuery (1.7.2+) inclut un attribut de nom d'utilisateur et de mot de passe avec l'appel $.ajax.

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  username: username,
  password: password,
  data: '{ "comment" }',
  success: function (){
    alert('Merci pour votre commentaire!'); 
  }
});

MODIFICATION à partir de commentaires et d'autres réponses : Pour être clair - pour envoyer préventivement une authentification sans une réponse 401 Unauthorized, au lieu de setRequestHeader (pré-1.7) utilisez 'headers':

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
  data: '{ "comment" }',
  success: function (){
    alert('Merci pour votre commentaire!'); 
  }
});

Answer 3

Utilisez le callback beforeSend pour ajouter un en-tête HTTP avec l'information d'authentification comme suit :

var username = $("input#username").val();
var password = $("input#password").val();  

function make_base_auth(user, password) {
  var tok = user + ':' + password;
  var hash = btoa(tok);
  return "Basic " + hash;
}
$.ajax
  ({
    type: "GET",
    url: "index1.php",
    dataType: 'json',
    async: false,
    data: '{}',
    beforeSend: function (xhr){ 
        xhr.setRequestHeader('Authorization', make_base_auth(username, password)); 
    },
    success: function (){
        alert('Merci pour votre commentaire!'); 
    }
});

Answer 4

Ou, il suffit d'utiliser la propriété des en-têtes introduite dans la version 1.5 :

headers: {"Authorization": "Basic xxxx"}

Référence : jQuery Ajax API

Answer 5

Utilisez la fonction jQuery ajaxSetup, qui permet de définir des valeurs par défaut pour toutes les requêtes ajax.

$.ajaxSetup({
  headers: {
    'Authorization': "Basic XXXXX"
  }
});