Use basic authentication with jQuery and Ajax

Question

I am trying to create a basic authentication through the browser  but I can t really get there   If this script won t be here the browser authentication will take over  but I want to tell the browser that the user is about to make the authentication   The address should be something like   http   username password server in local    I have a form    lt form name  cookieform  id  login  method  post  gt         lt input type  text  name  username  id  username  class  text   gt         lt input type  password  name  password  id  password  class  text   gt         lt input type  submit  name  sub  value  Submit  class  page   gt   lt  form gt    And a script   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

User · Answer

Let me show you and Apache alternative- IIS which is need it before start real JQuery Ajax authentication

If we have /secure/* path for example. We need to create web.config and to prohibited access. Only after before send applayed must be able to access it pages in /secure paths

<?xml version="1.0"?>
<configuration>
  <system.web>
    <!-- Anonymous users are denied access to this folder (and its subfolders) -->
    <authorization>
      <deny users="?" />
    </authorization>
  </system.web>
</configuration>



<security>
   <authentication>
      <anonymousAuthentication enabled="false" />
      <basicAuthentication enabled="true" />
   </authentication>
</security>

User · Answer

Use the jQuery ajaxSetup function  that can set up default values for all ajax requests     ajaxSetup     headers         Authorization    Basic XXXXX

User · Answer

Use jQuery s beforeSend callback to add an HTTP header with the authentication information   beforeSend  function  xhr        xhr setRequestHeader   Authorization    Basic     btoa username         password

User · Answer

How things change in a year  In addition to the header attribute in place of xhr setRequestHeader  current jQuery  1 7 2   includes a username and password attribute with the   ajax call     ajax      type   GET     url   index1 php     dataType   json     username  username    password  password    data      comment        success  function         alert  Thanks for your comment                EDIT from comments and other answers  To be clear - in order to preemptively send authentication without a 401 Unauthorized response  instead of 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

User · Answer

Use the beforeSend callback to add a HTTP header with the authentication information like so   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

User · Answer

Or  simply use the headers property introduced in 1 5   headers    Authorization    Basic xxxx     Reference  jQuery Ajax API

User · Answer

JSONP does not work with basic authentication so the jQuery beforeSend callback won t work with JSONP Script   I managed to work around this limitation by adding the user and password to the request  e g  user pw domain tld   This works with pretty much any browser except Internet nbsp Explorer where authentication through URLs is not supported  the call will simply not be executed     See http   support microsoft com kb 834489

User · Answer

As others have suggested  you can set the username and password directly in the Ajax call     ajax     username  username    password  password           other parameters        OR use the headers property if you would rather not store your credentials in plain text     ajax     headers    Authorization    Basic xxxx             other parameters        Whichever way you send it  the server has to be very polite  For Apache  your  htaccess file should look something like this    lt LimitExcept OPTIONS gt      AuthUserFile  path to  htpasswd     AuthType Basic     AuthName  Whatever      Require valid-user  lt  LimitExcept gt   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   Explanation   For some cross domain requests  the browser sends a preflight OPTIONS request that is missing your authentication headers  Wrap your authentication directives inside the LimitExcept tag to respond properly to the preflight   Then send a few headers to tell the browser that it is allowed to authenticate  and the  Access-Control-Allow-Origin to grant permission for the cross-site request   In some cases  the   wildcard doesn t work as a value for Access-Control-Allow-Origin  You need to return the exact domain of the callee  Use SetEnvIf to capture this value

User · Answer

According to SharkAlley answer it works with nginx too   I was search for a solution to get data by jQuery from a server behind nginx and restricted by Base Auth  This works for 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            And the JavaScript code is   var auth   btoa  username password      ajax       type   GET       url   http   example com       headers             Authorization    Basic     auth            success   function data                 Article that I find useful    This topic s answers http   enable-cors org server nginx html http   blog rogeriopvl com archives nginx-and-the-http-options-method

User · Answer

There are 3 ways to achieve this as shown below  Method 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             Method 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             Method 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

User · Answer

The examples above are a bit confusing  and this is probably the best way     ajaxSetup     headers         Authorization    Basic     btoa USERNAME         PASSWORD            I took the above from a combination of Rico and Yossi s answer   The btoa function Base64 encodes a string

[javascript] Use basic authentication with jQuery and Ajax

Examples related to javascript

Examples related to jquery

Examples related to ajax

Examples related to authentication