Use autenticación básica con jQuery y Ajax

Intento crear una autenticación básica a través del navegador, pero realmente no puedo llegar allí.

Si este script no está aquí, la autenticación del navegador tomará el control, pero quiero decirle al navegador que el usuario está a punto de realizar la autenticación.

La dirección debe ser algo así como:

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

Tengo un formulario:

 

Y un guion:

 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!'); } }); 

Use la callback beforeSend de jQuery para agregar un encabezado HTTP con la información de autenticación:

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

Cómo cambian las cosas en un año. Además del atributo de encabezado en lugar de xhr.setRequestHeader , jQuery actual (1.7.2+) incluye un atributo de nombre de usuario y contraseña con la llamada $.ajax .

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

EDITAR a partir de comentarios y otras respuestas: Para ser claros, para poder enviar de manera preventiva la autenticación sin una respuesta 401 Unauthorized , en lugar de setRequestHeader (pre -1.7) use 'headers' :

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

Use la callback de beforeSend para agregar un encabezado HTTP con la información de autenticación como esta:

 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!'); } }); 

O bien, simplemente use la propiedad de encabezados presentada en 1.5:

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

Referencia: jQuery Ajax API

Los ejemplos anteriores son un poco confusos, y esta es probablemente la mejor manera:

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

Tomé lo anterior de una combinación de la respuesta de Rico y Yossi.

La función btoa Base64 codifica una cadena.

Como otros han sugerido, puede establecer el nombre de usuario y la contraseña directamente en la llamada Ajax:

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

O utilice la propiedad de encabezados si prefiere no almacenar sus credenciales en texto sin formato:

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

Cualquiera sea la forma en que lo envíe, el servidor debe ser muy cortés. Para Apache, su archivo .htaccess debería verse más o menos así:

  AuthUserFile /path/to/.htpasswd AuthType Basic AuthName "Whatever" Require valid-user  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 

Explicación:

Para algunas solicitudes de dominios cruzados, el navegador envía una solicitud de OPCIONES de verificación previa que le falta a sus encabezados de autenticación. Ajuste sus directivas de autenticación dentro de la etiqueta LimitExcept para responder adecuadamente a la verificación previa.

A continuación, envíe algunos encabezados para indicarle al navegador que tiene autorización para autenticarse, y que Access-Control-Allow-Origin otorgue permiso para la solicitud entre sitios.

En algunos casos, el * comodín no funciona como un valor para Access-Control-Allow-Origin: debe devolver el dominio exacto del destinatario. Use SetEnvIf para capturar este valor.

Use la función jQuery ajaxSetup , que puede configurar valores predeterminados para todas las solicitudes ajax.

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

JSONP no funciona con autenticación básica, por lo que la callback jQuery beforeSend no funcionará con JSONP / Script.

Me las arreglé para evitar esta limitación al agregar el usuario y la contraseña a la solicitud (por ejemplo, usuario: pw@domain.tld). Esto funciona con prácticamente cualquier navegador, excepto Internet Explorer, donde la autenticación a través de URL no es compatible (la llamada simplemente no se ejecutará).

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

Según la respuesta de SharkAlley, también funciona con nginx.

Estaba buscando una solución para obtener datos de jQuery de un servidor detrás de nginx y restringido por Base Auth. Esto funciona para mí:

 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; } } 

Y el código de JavaScript es:

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

Artículo que encuentro útil:

  1. Las respuestas de este tema
  2. http://enable-cors.org/server_nginx.html
  3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/

Hay 3 formas de lograr esto como se muestra a continuación

Método 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 }, }); 

Método 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 }, }); 

Método 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 }, });