Use autenticación básica con jQuery y Ajax

Estoy tratando de 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 se hará cargo, pero quiero decirle al navegador que el usuario está a punto de realizar la autenticación.

La dirección debería ser algo como:

http://username:[email protected]/

Tengo un formulario:

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

Y un guión:

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 beforeSenddevolución de llamada 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 $.ajaxllamada.

$.ajax
({
  type: "GET",
  url: "index1.php",
  dataType: 'json',
  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 enviar autenticación de forma preventiva sin una 401 Unauthorizedrespuesta, en lugar de setRequestHeader(pre -1.7) use 'headers':

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

Use la devolución de llamada beforeSend para agregar un encabezado HTTP con la información de autenticación de esta manera:

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 simplemente use la propiedad de encabezados introducida 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 configurar el nombre de usuario y la contraseña directamente en la llamada Ajax:

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

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

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

De cualquier forma que lo envíe, el servidor debe ser muy cortés. Para Apache, su archivo .htaccess debería verse así:

<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

Explicación:

Para algunas solicitudes de dominio cruzado, el navegador envía una solicitud de OPCIONES de verificación previa a la que le faltan los encabezados de autenticación. Envuelva sus directivas de autenticación dentro de la etiqueta LimitExcept para responder correctamente a la verificación previa.

Luego, envíe algunos encabezados para indicarle al navegador que tiene permiso 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 de la persona que llama. Use SetEnvIf para capturar este valor.

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

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

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

Logré evitar esta limitación agregando el usuario y la contraseña a la solicitud (por ejemplo, usuario: [email protected]). 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á).

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

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

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

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

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 JavaScript es:

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

Artículo que me parece ú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/