JQuery और Ajax के साथ मूल प्रमाणीकरण का उपयोग करें

Question

मैं ब्राउज़र के माध्यम से एक मूल प्रमाणीकरण बनाने की कोशिश कर रहा हूं, लेकिन मैं वास्तव में वहां नहीं पहुंच सकता।

यदि यह स्क्रिप्ट यहां नहीं होगी तो ब्राउज़र प्रमाणीकरण समाप्त हो जाएगा, लेकिन मैं ब्राउज़र को बताना चाहता हूं कि उपयोगकर्ता प्रमाणीकरण करने वाला है।

पता कुछ इस तरह होना चाहिए:

http://username:[e-mail]/

मेरे पास एक फॉर्म है:

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

Comments

आप तो नहीं है ब्राउज़र मूल प्रमाणीकरण हैंडल करना चाहते हैं? सिर्फ फॉर्म-आधारित प्रमाणीकरण का उपयोग क्यों न करें?

— no.good.at.coding

@ no.good.at.coding यदि आपको प्रमाणीकरण के पीछे किसी तीसरे पक्ष के एपीआई के साथ एकीकृत करने की आवश्यकता है (जो कि मैं करने की कोशिश कर रहा हूं - developer.zendesk.com/rest_api/docs/core/… )

— ब्रायन हेने

Answer 1

beforeSendप्रमाणीकरण जानकारी के साथ HTTP हेडर जोड़ने के लिए jQuery के कॉलबैक का उपयोग करें :

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

Comments

मैं दिए गए उदाहरण का उपयोग कर रहा हूं, लेकिन यह $ का काम नहीं करता है। $ .ajax ({url: " server.in.local / index.php ", इससे पहले कि भेजें: फ़ंक्शन (xhr) {xhr.setRequestHeader ("प्राधिकरण", "मूल "+ EncodeBase64 (" उपयोगकर्ता नाम: पासवर्ड ");}; सक्सेस: फंक्शन (वैल) {// (वैल); अलर्ट (" आपकी टिप्पणी के लिए धन्यवाद! ");}}}; `

— पैट्रीओटीकॉउन

beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password)); };मेरे लिए काम करता है

— रिको Suter

समस्या ... यदि मैं क्रेडेंशियल विफल रहता हूं, तो क्रोम में उपयोगकर्ता को फिर से उपयोगकर्ता नाम / pwd दर्ज करने के लिए एक संवाद के साथ प्रस्तुत किया जाता है। यदि क्रेडेंशियल्स विफल होते हैं तो मैं इस 2 डायल को प्रदर्शित होने से कैसे रोक सकता हूं?

— डेविड

क्या यह किसी को भी देखने के लिए खुले में उपयोगकर्ता नाम और पासवर्ड नहीं छोड़ेगा? यहां तक ​​कि अगर इसके base64 में वे सिर्फ इसे डिकोड कर सकते हैं। नीचे दिए गए उत्तर के साथ भी।

— cbron

सामान्य रूप से @calebB मूल प्रमाणीकरण सिर्फ किसी को भी देखने के लिए खुले में उपयोगकर्ता नाम और पासवर्ड छोड़ देता है। यह सिर्फ यहाँ वर्णित विधि के साथ एक समस्या नहीं है। यदि मूल प्रमाणीकरण, या वास्तव में किसी भी प्रमाणीकरण का उपयोग किया जा रहा है, तो एसएसएल को भी नियोजित किया जाना चाहिए।

— जेसन जैक्सन

Answer 2

एक साल में चीजें कैसे बदलती हैं। हेडर विशेषता के अलावा xhr.setRequestHeader, वर्तमान jQuery (1.7.2+) में $.ajaxकॉल के साथ उपयोगकर्ता नाम और पासवर्ड विशेषता शामिल है ।

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

टिप्पणियों और अन्य उत्तरों से संपादित करें: स्पष्ट होने के लिए - पूर्व- 401 Unauthorizedउत्तर के बजाय एक प्रतिक्रिया के बिना प्रमाणीकरण भेजने के लिए , setRequestHeader(पूर्व -1.77) का उपयोग करें 'headers':

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

Comments

यह नहीं होना चाहिए usernameऔर नहीं user? इसके अलावा, यह बिल्कुल वैसा ही नहीं है: ऑनलाइन डॉकस और मेरे अनुभव से ऐसा लगता है जैसे यह कुछ एपीआई के लिए आवश्यक नहीं है। दूसरे शब्दों में यह Authorizationहेडर तभी भेजता है जब कोई कोड 401 वापस आता है।

— स्टेफानो Fratini

@StefanoFratini - आप दोनों मामलों में सही हैं। उपयोगकर्ता नाम फ़ील्ड को फिक्स्ड, और यह केवल प्रीमेप्टिव ऑर्टिकल बनाम चैलेंज के बारे में जानने के लिए अच्छा है। हेडर को स्पष्ट रूप से अन्य उत्तरों के रूप में सेट करने से मूल स्थिति के इस 'निष्क्रिय' संस्करण का उपयोग करने की अनुमति मिलेगी।

— jmanning2k

मेरे लिए उपरोक्त विकल्प काम नहीं किया, यह एक आकर्षण की तरह काम किया .. धन्यवाद

— अनूप इसाक

उपरोक्त टिप्पणी देखें, कृपया {"प्राधिकरण": "मूल" + btoa ("उपयोगकर्ता: पास")} को सही हेडर के रूप में इंगित करने के लिए इस उत्तर को सही करें

— Jay

यह वह उत्तर है जिसके लिए मैं देख रहा हूं! मेरे लिए इस उत्तर में कुंजी बिट है कि कैसे 'हेडर' का उपयोग पूर्व-प्रमाणीकरण को भेजने के लिए किया जाता है। यहाँ मेरे प्रश्न का उत्तर इसके द्वारा दिया गया है। stackoverflow.com/questions/28404452/…

— स्टीवन एंडरसन

Answer 3

प्रमाणीकरण की जानकारी के साथ 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!'); 
    }
});

Comments

आपको ध्यान देना चाहिए कि बेस 64 एन्क्रिप्शन के लिए यहाँ इस्तेमाल किया जाने वाला "btoa" IE संस्करणों में कम 10 और कुछ मोबाइल प्लेटफ़ॉर्म में समर्थित नहीं है

— सेट करें

इसके अलावा, इस developer.mozilla.org/en-US/docs/DOM/window.btoa के अनुसार आपको btoa (unescape (encodeURIComponent (str))) का उपयोग करना चाहिए

— सेट करें

@ सेट, मुझे लगता है कि इसे बीटीओए (एनकोडरिकम्पोनेंट (एस्केप)) होने की जरूरत है

— सौरभ कुमार

मैं प्रतिक्रिया प्राप्त करना चाहता था, इसलिए async झूठी से छुटकारा पा लिया, और सफलता समारोह में परिणाम पैरामीटर जोड़ा। मेरे पास पहले से तैयार किए गए प्राधिकरण हेडर भी थे, इसलिए उन्होंने इसके बजाय इसका उपयोग किया।

— राडटेक

@ सेट को ध्यान दिया जाना चाहिए कि बेस 64 एन्क्रिप्शन नहीं है, यह एन्कोडिंग है। यदि यह एन्क्रिप्शन था, तो इसे एक ही फंक्शन कॉल के साथ डीकोड करना सरल नहीं होगा

— क्रिस

Answer 4

या, केवल 1.5 में प्रस्तुत हेडर संपत्ति का उपयोग करें:

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

संदर्भ: jQuery अजाक्स एपीआई

Comments

क्या आप मुझे बताएंगे, प्रत्येक उपयोगकर्ता के लिए यह कैसे करना है? मेरा मतलब है कि डेटाबेस से प्रत्येक उपयोगकर्ता के लिए एपीआई टोकन प्राप्त करें और इसे अजाक्स हेडर के साथ भेजें।

— हनीये शादमान

Answer 5

ऊपर दिए गए उदाहरण थोड़ा भ्रमित करने वाले हैं, और यह संभवतः सबसे अच्छा तरीका है:

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

मैंने रीको और योसी के उत्तर के संयोजन से उपरोक्त लिया।

Btoa समारोह Base64 एक स्ट्रिंग encodes।

Comments

यह एक बुरा विचार है, क्योंकि आप URL की परवाह किए बिना सभी AJAX अनुरोधों के साथ लॉगिन जानकारी भेजेंगे । इसके अलावा, दस्तावेज़ $.ajaxSetup()कहता है "भविष्य के अजाक्स अनुरोधों के लिए डिफ़ॉल्ट मान सेट करें। इसका उपयोग अनुशंसित नहीं है। "

— शून्य 3

Answer 6

जैसा कि दूसरों ने सुझाव दिया है, आप सीधे यूज़र और पासवर्ड को अजाक्स कॉल में सेट कर सकते हैं:

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

या हेडर प्रॉपर्टी का उपयोग करें यदि आप सादे पाठ में अपने क्रेडेंशियल्स को स्टोर नहीं करेंगे:

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

जिस भी तरह से आप इसे भेजते हैं, सर्वर को बहुत विनम्र होना पड़ता है। अपाचे के लिए, आपकी .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

स्पष्टीकरण:

कुछ क्रॉस डोमेन अनुरोधों के लिए, ब्राउज़र एक प्रीफ़लाइट विकल्प अनुरोध भेजता है जो आपके प्रमाणीकरण हेडर को याद कर रहा है। LimitExcept के अंदर अपने प्रमाणीकरण निर्देशों को लपेटें लिए ठीक से जवाब देने के टैग के ।

फिर कुछ हेडरों को ब्राउज़र को यह बताने के लिए भेजें कि इसे प्रमाणित करने की अनुमति है, और एक्सेस-कंट्रोल-कंट्रोल-अनुमति-उत्पत्ति को क्रॉस-साइट अनुरोध के लिए अनुमति देने के लिए।

कुछ मामलों में, * वाइल्डकार्ड एक्सेस-कंट्रोल-अनुमति-उत्पत्ति के लिए एक मूल्य के रूप में काम नहीं करता है : आपको कैली के सटीक डोमेन को वापस करने की आवश्यकता है। इस मान को कैप्चर करने के लिए SetEnvIf का उपयोग करें।

Comments

इस जानकारी के लिए धन्यवाद कि ब्राउज़र बिना हेडर के एक CORS प्रीफ़लाइट अनुरोध भेजते हैं! इस तरह के विवरण डिबगिंग के घंटे पैदा कर सकते हैं!

— jbandi

Answer 7

JQuery के ajaxSetup फ़ंक्शन का उपयोग करें , जो सभी ajax अनुरोधों के लिए डिफ़ॉल्ट मान सेट कर सकता है।

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

Answer 8

JSONP मूल प्रमाणीकरण के साथ काम नहीं करता है इसलिए jQuery से पहले कॉलबैक JSONP / स्क्रिप्ट के साथ काम नहीं करेगा।

मैं अनुरोध और उपयोगकर्ता के पासवर्ड को जोड़कर इस सीमा के आसपास काम करने में कामयाब रहा (उदाहरण के लिए उपयोगकर्ता: [e-mail])। यह इंटरनेट एक्सप्लोरर को छोड़कर किसी भी ब्राउज़र के साथ काम करता है जहां URL के माध्यम से प्रमाणीकरण समर्थित नहीं है (कॉल बस निष्पादित नहीं की जाएगी)।

Http://support.microsoft.com/kb/834489 देखें ।

Comments

अनुमान है कि सुरक्षा के लिहाज से यह अनुमति देने के लिए एक समझदार विकल्प है

— जॉर्ज बिरबिलिस

लिंक टूट गया है (404)।

— पीटर मोर्टेंसन

Answer 9

इसे प्राप्त करने के 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 
  },
});

Answer 10

शार्कले के जवाब के अनुसार यह नगनेक्स के साथ भी काम करता है।

मैं nginx के पीछे सर्वर से 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;
    }
}

और जावास्क्रिप्ट कोड है:

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/