javascript - attribute - jquery xml to json

Usar autenticación básica con jQuery y Ajax.

Question

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

Si esta secuencia de comandos no está aquí, la autenticación del navegador asumirá el control, pero quiero informarle que el usuario está a punto de realizar la autenticación.

La dirección debe 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!'');
    }
});

Answer 1

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'',
  username: username,
  password: password,
  data: ''{ "comment" }'',
  success: function (){
    alert(''Thanks for your comment!''); 
  }
});

EDITAR de los comentarios y otras respuestas: Para ser claro, para 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'',
  headers: {
    "Authorization": "Basic " + btoa(USERNAME + ":" + PASSWORD)
  },
  data: ''{ "comment" }'',
  success: function (){
    alert(''Thanks for your comment!''); 
  }
});

Answer 2

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 los encabezados si prefiere no almacenar sus credenciales en texto sin formato:

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

Cualquiera que sea la forma en que lo envíes, el servidor debe ser muy educado. Para Apache, su archivo .htaccess debería tener este aspecto:

<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 dominios cruzados, el navegador envía una solicitud de OPCIONES de verificación previa en la que 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 indicar al navegador que está autorizado a 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. Utilice SetEnvIf para capturar este valor.

Answer 3

De acuerdo con la respuesta de SharkAlley, también funciona con nginx.

Estaba buscando una solución para obtener datos de jQuery desde un servidor detrás de nginx y restringida 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 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. Respuestas de este tema
2. http://enable-cors.org/server_nginx.html
3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/

Answer 4

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

Answer 5

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.

Answer 6

O simplemente use la propiedad de encabezados introducida en 1.5:

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

Referencia: beforeSend

Answer 7

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

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

Answer 8

Use la devolución de llamada beforeSend de 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));
},

Answer 9

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

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

Answer 10

JSONP no funciona con la autenticación básica, por lo que jQuery beforeSend callback 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 casi cualquier navegador, excepto Internet Explorer, donde no se admite la autenticación a través de URL (la llamada simplemente no se ejecutará).

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