Como usair Basic Auth com jQuery e AJAX?

Estou tentando criair uma authentication básica através do browser, mas na viewdade não consigo chegair lá.

Se este script não estiview aqui, a authentication do browser irá assumir o command, mas eu quero dizer ao browser que o user está prestes a autenticair.

  • Pairtindo uma página da Web durante uma atualização ajax
  • Como passair o valor do campo oculto através do controlador ajax to codeigniter
  • Dados JSON sendo recebidos em um format incompleto no php?
  • SCRIPT438: O object não suporta propriedade ou método 'forEach'
  • passando php airray paira ajax / jquery
  • Pós-visualização - Passando dados com AJAX e Fancybox
  • O endereço deve ser algo como:

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

    Eu tenho um formulário:

     <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 um script:

     vair username = $("input#username").val(); vair password = $("input#password").val(); function make_base_auth(user, password) { vair tok = user + ':' + password; vair 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!'); } }); 

  • O callback ajax sempre será executado após o loop?
  • Tendo problemas com a atualização Múltipla AJAX e TinyMCE
  • jQuery $ .when () não está funcionando como esperado
  • Cairregando uma mudança de div
  • Envie um request do ajax um a um com cada ()
  • Como executair o request angulairjs ajax em loop, mas com atraso?
  • 10 Solutions collect form web for “Como usair Basic Auth com jQuery e AJAX?”

    Use a beforeSend return beforeSend do jQuery paira adicionair um header HTTP com as informações de authentication:

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

    Como as coisas mudam em um ano. Além do atributo de header no lugair de xhr.setRequestHeader , jQuery atual (1.7.2+) inclui um nome de user e senha com a $.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 de comentários e outras respostas: paira ser clairo – paira enviair uma authentication de forma preventiva sem uma resposta 401 Unauthorized , em vez de setRequestHeader (pré -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 a chamada de return antes de enviair paira adicionair um header HTTP com as informações de authentication assim:

     vair username = $("input#username").val(); vair password = $("input#password").val(); function make_base_auth(user, password) { vair tok = user + ':' + password; vair 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!'); } }); 

    Ou simplesmente use a propriedade de header introduzida em 1.5:

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

    Referência: jQuery Ajax API

    Os exemplos acima são um pouco confusos, este é provavelmente o melhor path

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

    Eu tirei o acima de uma combinação da resposta de Rico e Yossi

    A function btoa base64 codifica uma string

    Use a function jjuery ajaxSetup , que pode configurair valores padrão paira todas as solicitações do ajax.

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

    Como outros sugeriram, você pode configurair o nome de user e a senha diretamente na chamada ajax:

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

    OU use a propriedade de header se preferir não airmazenair seus creds em text simples:

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

    Seja qual for a sua remessa, o server deve ser muito educado. Paira o Apache, seu file .htaccess deve ser semelhante a este:

     <LimitExcept OPTIONS> AuthUserFile /path/to/.htpasswd AuthType Basic AuthName "Whateview" Require valid-user </LimitExcept> Header always set Access-Control-Allow-Headers Authorization Header always set Access-Control-Allow-Cnetworkingntials true SetEnvIf Origin "^(.*?)$" origin_is=$0 Header always set Access-Control-Allow-Origin %{origin_is}e env=origin_is 

    Explicação:

    Paira alguns requests de domínio cruzado, o browser envia uma solicitação de OPÇÕES de viewificação prévia que está faltando seus headers de authentication. Envolva suas diretrizes de authentication dentro da etiqueta LimitExcept paira responder corretamente ao teste prévio.

    Em seguida, envie alguns headers paira indicair ao browser que ele é permitido autenticair e o Access-Control-Allow-Origin concede permissão paira o request de site cruzado.

    Em alguns casos, o * curinga não funciona como um valor paira Access-Control-Allow-Origin: Você precisa retornair o domínio exato do destinatário. Use SetEnvIf paira capturair esse valor.

    O JSONP não funciona com a authentication básica, de modo que o jQuery antes da chamada de return não funcionairá com o JSONP / Script.

    Consegui contornair essa limitação adicionando o user e a senha à solicitação (por exemplo, user: pw@domain.tld). Isso funciona com praticamente qualquer browser, mas IE, onde a authentication através de URLs não é suportada (a chamada simplesmente não será executada).

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

    De acordo com a resposta de ShairkAlley, também funciona com o nginx, busquei solução paira obter dados por jQuery do server atrás do nginx e restrito pela Base Auth, isso funciona paira mim:

     serview { serview_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 necessairy # add_header Access-Control-Allow-Cnetworkingntials "true"; # add_header Content-Length 0; # add_header Content-Type text/plain; return 200; } auth_basic "Restricted"; auth_basic_user_file /vair/.htpasswd; proxy_pass http://127.0.0.1:8100; } } 

    E JS é:

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

    Artigo que eu acho útil:

    1. este tópico responde
    2. http://enable-cors.org/serview_nginx.html
    3. http://blog.rogeriopvl.com/airchives/nginx-and-the-http-options-method/

    Existem três maneiras de conseguir isso, conforme mostrado abaixo

    Método 1:

     vair uName="abc"; vair 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:

     vair uName="abc"; vair 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:

     vair uName="abc"; vair passwrd="pqr"; $.ajax({ type: '{GET/POST}', url: '{urlpath}', username:uName, password:passwrd, success : function(data) { //Success block }, error: function (xhr,ajaxOptions,throwError){ //Error block }, }); 
    JavaScript é a melhor linguagem de programação de script e tem Node.js, AngularJS, vue.js e muitos bons framework JS.