Usa l'autenticazione di base con jQuery e Ajax

Sto cercando di creare un'autenticazione di base tramite il browser, ma non riesco davvero ad arrivarci.

Se questo script non sarà presente, l'autenticazione del browser prenderà il sopravvento, ma voglio dire al browser che l'utente sta per effettuare l'autenticazione.

L'indirizzo dovrebbe essere qualcosa del tipo:

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

Ho un modulo:

<form name="cookieform" id="login" method="post">
      <input type="text" name="username" id="username" class="text"/>
      <input type="password" name="password" id="password" class="text"/>
      <input type="submit" name="sub" value="Submit" class="page"/>
</form>

E una sceneggiatura:

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('Thanks for your comment!');
    }
});

Utilizzare il beforeSendcallback di jQuery per aggiungere un'intestazione HTTP con le informazioni di autenticazione:

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

Come cambiano le cose in un anno. Oltre all'attributo header al posto di xhr.setRequestHeader, l'attuale jQuery (1.7.2+) include un attributo username e password con la $.ajaxchiamata.

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  username: username,
  password: password,
  data: '{ "comment" }',
  success: function (){
    alert('Thanks for your comment!'); 
  }
});

MODIFICA da commenti e altre risposte: per essere chiari, al fine di inviare preventivamente l'autenticazione senza 401 Unauthorizedrisposta, anziché setRequestHeader(prima -1.7) utilizzare 'headers':

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

Utilizzare il callback beforeSend per aggiungere un'intestazione HTTP con le informazioni di autenticazione in questo modo:

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('Thanks for your comment!'); 
    }
});

Oppure usa semplicemente la proprietà headers introdotta in 1.5:

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

Riferimento: API jQuery Ajax

Gli esempi sopra sono un po 'confusi, e questo è probabilmente il modo migliore:

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

Ho preso quanto sopra da una combinazione della risposta di Rico e Yossi.

La funzione btoa Base64 codifica una stringa.

Come altri hanno suggerito, è possibile impostare il nome utente e la password direttamente nella chiamata Ajax:

$.ajax({
  username: username,
  password: password,
  // ... other parameters.
});

O utilizza la proprietà headers se preferisci non memorizzare le tue credenziali in testo semplice:

$.ajax({
  headers: {"Authorization": "Basic xxxx"},
  // ... other parameters.
});

Qualunque sia il modo in cui lo invii, il server deve essere molto educato. Per Apache, il tuo file .htaccess dovrebbe assomigliare a questo:

<LimitExcept OPTIONS>
    AuthUserFile /path/to/.htpasswd
    AuthType Basic
    AuthName "Whatever"
    Require valid-user
</LimitExcept>

Header always set Access-Control-Allow-Headers Authorization
Header always set Access-Control-Allow-Credentials true

SetEnvIf Origin "^(.*?)$" origin_is=$0
Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is

Spiegazione:

Per alcune richieste tra domini, il browser invia una richiesta OPTIONS di verifica preliminare in cui mancano le intestazioni di autenticazione. Inserisci le direttive di autenticazione all'interno del tag LimitExcept per rispondere correttamente al preflight.

Quindi invia alcune intestazioni per dire al browser che è autorizzato ad autenticarsi e Access-Control-Allow-Origin per concedere l'autorizzazione per la richiesta tra siti.

In alcuni casi, il carattere jolly * non funziona come valore per Access-Control-Allow-Origin: è necessario restituire il dominio esatto del chiamante. Utilizzare SetEnvIf per acquisire questo valore.

Utilizzare la funzione jQuery ajaxSetup , che può impostare valori predefiniti per tutte le richieste ajax.

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

JSONP non funziona con l'autenticazione di base, quindi il callback jQuery beforeSend non funzionerà con JSONP / Script.

Sono riuscito a aggirare questa limitazione aggiungendo l'utente e la password alla richiesta (es. Utente: pw@domain.tld). Funziona praticamente con qualsiasi browser tranne Internet Explorer in cui l'autenticazione tramite URL non è supportata (la chiamata semplicemente non verrà eseguita).

Vedi http://support.microsoft.com/kb/834489 .

Ci sono 3 modi per raggiungere questo obiettivo, come mostrato di seguito

Metodo 1:

var uName="abc";
var passwrd="pqr";

$.ajax({
    type: '{GET/POST}',
    url: '{urlpath}',
    headers: {
        "Authorization": "Basic " + btoa(uName+":"+passwrd);
    },
    success : function(data) {
      //Success block  
    },
   error: function (xhr,ajaxOptions,throwError){
    //Error block 
  },
});

Metodo 2:

var uName="abc";
var passwrd="pqr";

$.ajax({
    type: '{GET/POST}',
    url: '{urlpath}',
     beforeSend: function (xhr){ 
        xhr.setRequestHeader('Authorization', "Basic " + btoa(uName+":"+passwrd)); 
    },
    success : function(data) {
      //Success block 
   },
   error: function (xhr,ajaxOptions,throwError){
    //Error block 
  },
});

Metodo 3:

var uName="abc";
var passwrd="pqr";

$.ajax({
    type: '{GET/POST}',
    url: '{urlpath}',
    username:uName,
    password:passwrd, 
    success : function(data) {
    //Success block  
   },
    error: function (xhr,ajaxOptions,throwError){
    //Error block 
  },
});

Secondo la risposta di SharkAlley funziona anche con nginx.

Stavo cercando una soluzione per ottenere dati da jQuery da un server dietro nginx e limitato da Base Auth. Questo funziona per me:

server {
    server_name example.com;

    location / {
        if ($request_method = OPTIONS ) {
            add_header Access-Control-Allow-Origin "*";
            add_header Access-Control-Allow-Methods "GET, OPTIONS";
            add_header Access-Control-Allow-Headers "Authorization";

            # Not necessary
            #            add_header Access-Control-Allow-Credentials "true";
            #            add_header Content-Length 0;
            #            add_header Content-Type text/plain;

            return 200;
        }

        auth_basic "Restricted";
        auth_basic_user_file /var/.htpasswd;

        proxy_pass http://127.0.0.1:8100;
    }
}

E il codice JavaScript è:

var auth = btoa('username:password');
$.ajax({
    type: 'GET',
    url: 'http://example.com',
    headers: {
        "Authorization": "Basic " + auth
    },
    success : function(data) {
    },
});

Articolo che trovo utile:

1. Le risposte di questo argomento
2. http://enable-cors.org/server_nginx.html
3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/