web-dev-qa-db-ja.com

JQueryとAjaxで基本認証を使う

ブラウザを介して基本認証を作成しようとしていますが、実際にアクセスできません。

このスクリプトがここにない場合は、ブラウザ認証が引き継ぎますが、ユーザに認証を行おうとしていることをブラウザに伝えます。

アドレスは次のようになります。

http://username:[email protected]/

私はフォームを持っています：

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

そしてスクリプト：

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

認証情報を含むHTTPヘッダーを追加するには、jQueryの beforeSend callbackを使用します。

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

1年で物事はどう変わるのか。 xhr.setRequestHeaderの代わりにheader属性に加えて、現在のjQuery（1.7.2+）は$.ajax呼び出しでusernameとpassword属性を含みます。

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

コメントやその他の回答からの編集：明確にするために - setRequestHeader（-1.7以前）の代わりに401 Unauthorized応答なしで優先的に認証を送信するには'headers'を使用します。

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

beforeSendコールバック を使用して、認証情報を含むHTTPヘッダーを追加します。

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

あるいは、1.5で導入されたheadersプロパティを単に使用します。

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

リファレンス： jQuery Ajax API

40
AsemRadhwi

上記の例は少しわかりにくいので、これがおそらく最善の方法です。

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

私はRicoとYossiの答えの組み合わせから上記を取りました。

btoa function Base64 は文字列をエンコードします。

31
Paul Odeon

他の人が示唆しているように、Ajax呼び出しで直接ユーザー名とパスワードを設定できます。

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

_または_ プレーンテキストで資格情報を保存したくない場合は、headersプロパティを使用します。

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

どちらの方法で送信しても、サーバーは非常に丁寧でなければなりません。 Apacheの場合、.htaccessファイルは次のようになります。

<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

説明：

一部のクロスドメインリクエストでは、ブラウザはプリフライト _ options _ リクエストを送信しますが、これには認証ヘッダーがありません。 LimitExcept タグ内に認証ディレクティブをラップして、プリフライトに正しく応答するようにしてください。

次に、ブラウザに認証が許可されていることをブラウザに伝え、 Access-Control-Allow-Origin にクロスサイトリクエストの許可を与えます。

場合によっては、 *ワイルドカードが機能しません Access-Control-Allow-Originの値として：呼び出し先の正確なドメインを返す必要があります。この値を取得するにはSetEnvIfを使用してください。

25
SharkAlley

jQuery ajaxSetup 関数を使用して、すべてのajaxリクエストに対してデフォルト値を設定できます。

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

_ jsonp _ は基本認証では機能しないため、jQuery beforeSendコールバックはJSONP/Scriptでは機能しません。

リクエストにユーザーとパスワードを追加することで、この制限を回避することができました（例：user：[email protected]）。これは、ほとんどのブラウザで動作します URLを介した認証がサポートされていないInternet Explorer を除く（呼び出しは単に実行されません）。

http://support.Microsoft.com/kb/834489 を参照してください。

11
arnebert

SharkAlleyの回答によると、それはnginxでも動作します。

Nginxの背後にあり、Base Authによって制限されているサーバーからjQueryによってデータを取得するための解決策を探していました。これは私のために働く：

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

そしてJavaScriptコードは次のとおりです。

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

私が役に立つと思う記事：

  1. このトピックの回答
  2. http://enable-cors.org/server_nginx.html
  3. http://blog.rogeriopvl.com/archives/nginx-and-the-http-options-method/ /
8
Max

以下に示すようにこれを達成する3つの方法があります

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

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

方法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 
  },
});
5
GSB