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 যদি আপনাকে প্রমাণীকরণের পিছনে কোনও তৃতীয় পক্ষের এপিআইয়ের সাথে সংহত করার প্রয়োজন হয় (যা আমি যা করার চেষ্টা করছি - ডেভেলপার.জেন্ডেস্ক. com/rest_api/docs/core/… )

— ব্রায়ান হ্যাননে

Answer 1

beforeSendপ্রমাণীকরণের তথ্য সহ HTTP শিরোনাম যুক্ত করতে jQuery এর কলব্যাক ব্যবহার করুন:

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

Comments

আপনি যে উদাহরণটি দিয়েছেন তা আমি ব্যবহার করছি তবে এটি কাজ করে না aj $ .জ্যাক্স (l url: " server.in.local / index.php ", সেন্ড: ফাংশন (xhr) {xhr.setRequestHeader ("অনুমোদন", "বেসিক) "+ এনকোডবেস 64 (" ব্যবহারকারীর নাম: পাসওয়ার্ড "));}, সাফল্য: ফাংশন (ভাল) alert // সতর্কতা (ভাল); সতর্কতা (" আপনার মন্তব্যের জন্য ধন্যবাদ! ");}}); `

— দেশপ্রেমিকো

beforeSend: function(xhr) { xhr.setRequestHeader("Authorization", "Basic " + btoa(username + ":" + password)); };আমার জন্য কাজ করে

— রিকো সুটার

সমস্যা ... যদি আমি শংসাপত্রগুলি পাস করি তবে যদি ক্রোমে ব্যবহারকারী ব্যবহারকারীর / পিডাব্লুডি আবার প্রবেশ করার জন্য একটি কথোপকথন উপস্থিত হয়। শংসাপত্রগুলি ব্যর্থ হলে কীভাবে আমি এই ২ য় সংলাপটি উপস্থিত হতে বাধা দিতে পারি?

— ডেভিড

এটি কারও দেখার জন্য খোলাখুলি ব্যবহারকারীর নাম এবং পাসওয়ার্ডটি রেখে দেবে না? এমনকি যদি এটি বেস 64 এ তারা কেবল এটি ডিকোড করতে পারে। নীচের উত্তর একই।

— cbron

@ ক্যালববি বেসিক প্রমাণীকরণ সাধারণভাবে কেবল কারও দেখতে পাওয়ার জন্য ব্যবহারকারীর নাম এবং পাসওয়ার্ড উন্মুক্ত রেখে দেয়। এখানে বর্ণিত পদ্ধতিতে এটি কেবল সমস্যা নয়। যদি মৌলিক প্রমাণীকরণ বা সত্যিই কোনও প্রমাণীকরণ ব্যবহার করা হয় তবে এসএসএলও নিয়োগ করা উচিত।

— জেসন জ্যাকসন

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.7) ব্যবহারের পরিবর্তে '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 কোড ফিরে আসে।

— স্টেফানো ফ্রেটিনি

@ স্টেফানোফ্রাটিনি - আপনি উভয়ই গুণে সঠিক are ব্যবহারকারীর নাম ক্ষেত্রটি স্থির করে দেওয়া হয়েছে, এবং কেবলমাত্র চ্যালেঞ্জের ক্ষেত্রে সাড়া জাগানো প্রাকদর্শন লেখক সম্পর্কে জেনে রাখা ভাল। অন্যান্য উত্তরের মতো স্পষ্টভাবে শিরোনাম সেট করা মৌলিক লেখার এই 'প্যাসিভ' বৈকল্পিকের ব্যবহারের অনুমতি দেবে।

— jmanning2k

আমার জন্য উপরের বিকল্পটি কাজ করে নি, এটি একটি কবজির মতো কাজ করেছে .. ধন্যবাদ

— আনুপ আইজাক

উপরের মন্তব্যটি দেখুন, দয়া করে answer "অনুমোদন": "বেসিক" + বিটিও ("ব্যবহারকারী: পাস") indicate সঠিক শিরোনাম হিসাবে ইঙ্গিত করতে এই উত্তরটি সংশোধন করুন

— জে

এই উত্তরটি যার জন্য আমি খুঁজছি! আমার জন্য এই উত্তরের মূল বিট হ'ল কীভাবে 'শিরোলেখ' প্রিফেরিয়ালি প্রমাণীকরণ প্রেরণে ব্যবহৃত হয়। এখানে আমার প্রশ্নের উত্তর এর দ্বারা দেওয়া হয়। stackoverflow.com/questions/28404452/…

— স্টিভেন অ্যান্ডারসন

Answer 3

প্রমাণীকরণের তথ্যের সাথে এইচটিটিপি শিরোনাম যুক্ত করতে আগে পাঠান কলব্যাক ব্যবহার করুন :

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 এনক্রিপশনের জন্য এখানে ব্যবহৃত "বিটিওএ" 10 বছরের কম সংস্করণে এবং কিছু মোবাইল প্ল্যাটফর্মে সমর্থিত নয়

— সেট করুন

এছাড়াও, এই বিকাশকারী অনুযায়ী। মোমজিলা.আর.ইন- ইউএস / ডকস / ডোম / উইন্ডো.বিটোআ আপনি বিটিওএ ব্যবহার করতে হবে (আনসকেপ (এনকোডিউআরকিউম্পোনেন্ট (স্ট্র)))

— সেট করুন

@ এসইটি, আমার ধারণা এটি বিটিও (এনকোডিউআরআইকিউম্পোনেন্ট (পলায়ন (স্ট্র)) হওয়া দরকার

— সৌরভ কুমার

আমি প্রতিক্রিয়া পেতে চেয়েছিলাম তাই অসম্পূর্ণ মিথ্যা থেকে মুক্তি পেয়েছি এবং সাফল্যের ফাংশনে ফলাফলের পরামিতি যুক্ত করেছি। আমি প্রি-জেনারেশন অথারাইজেশন শিরোনামটি ঠিক তখন ব্যবহার করেছি।

— র‌্যাডটেক

@ এসইটি নোট করা উচিত বেস 64 এনক্রিপশন নয়, এটি এনকোডিং রয়েছে। এটি যদি এনক্রিপশন হয় তবে এটি একটি একক ফাংশন কল দিয়ে ডিকোড করা খুব সহজ হবে না

— ক্রিস

Answer 4

অথবা, কেবল 1.5 তে প্রবর্তিত শিরোনাম সম্পত্তিটি ব্যবহার করুন:

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

তথ্যসূত্র: jQuery Ajax এপিআই

Comments

আপনি কি দয়া করে আমাকে বলবেন, প্রতিটি ব্যবহারকারীর জন্য এটি কীভাবে করবেন? মানে ডেটাবেস থেকে প্রতিটি ব্যবহারকারীর জন্য এপি টোকেন পান এবং এজ্যাক্স শিরোনাম সহ এটি প্রেরণ করুন।

— হানিয়ে শাদমান

Answer 5

উপরের উদাহরণগুলি কিছুটা বিভ্রান্তিকর, এবং এটি সম্ভবত সেরা উপায়:

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

রিকো এবং ইউসির উত্তরগুলির সংমিশ্রণ থেকে আমি উপরেরটি নিয়েছি।

Btoa ফাংশন করুন Base64- একটি স্ট্রিং এনকোড করে।

Comments

এটি একটি খারাপ ধারণা, কারণ আপনি ইউআরএল নির্বিশেষে সমস্ত এজেএক্স অনুরোধের মাধ্যমে লগইন তথ্য প্রেরণ করবেন । এছাড়াও, নথির জন্য $.ajaxSetup()"ভবিষ্যতের এজাক্স অনুরোধগুলির জন্য ডিফল্ট মান সেট করুন Its এটির ব্যবহারের প্রস্তাব দেওয়া হয় না " "

— জিরো 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

ব্যাখ্যা:

কিছু ক্রস ডোমেন অনুরোধের জন্য, ব্রাউজারটি একটি প্রিফলাইট অপশন অনুরোধ পাঠায় যা আপনার প্রমাণীকরণ শিরোনাম অনুপস্থিত। প্রিফলাইটে সঠিকভাবে প্রতিক্রিয়া জানাতে আপনার অনুমোদনের নির্দেশগুলি সীমাবদ্ধতা ট্যাগের অভ্যন্তরে আবদ্ধ করুন ।

তারপরে ব্রাউজারটিকে এটি প্রমাণীকরণের অনুমতি দেওয়া হয়েছে এবং অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্সকে ক্রস-সাইট অনুরোধের অনুমতি দেওয়ার জন্য কয়েক শিরোনাম প্রেরণ করুন ।

কিছু ক্ষেত্রে, * ওয়াইল্ডকার্ড অ্যাক্সেস-কন্ট্রোল-মঞ্জুরি-উত্সের মান হিসাবে কাজ করে না : আপনাকে কলির সঠিক ডোমেনটি ফিরিয়ে দিতে হবে। এই মানটি ক্যাপচার করতে SetEnvIf ব্যবহার করুন।

Comments

ব্রাউজারগুলি অথথির শিরোনাম ছাড়াই একটি CORS প্রিফলাইট অনুরোধ প্রেরণ করে এমন তথ্যের জন্য ধন্যবাদ! এই জাতীয় বিশদ বিবরণের ফলে কয়েক ঘন্টা ডিবাগ হতে পারে!

— jbandi

Answer 7

JQuery আজাক্সেটআপ ফাংশনটি ব্যবহার করুন , যা সমস্ত এজ্যাক্স অনুরোধের জন্য ডিফল্ট মান সেট আপ করতে পারে।

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

Answer 8

JSONP বেসিক প্রমাণীকরণের সাথে কাজ করে না তাই jQuery এর পূর্বে পাঠানো কলব্যাক JSONP / স্ক্রিপ্টের সাথে কাজ করবে না।

আমি অনুরোধে (যেমন ব্যবহারকারী: [e-mail]) ​​ব্যবহারকারী এবং পাসওয়ার্ড যুক্ত করে এই সীমাবদ্ধতার আশপাশে কাজ করতে সক্ষম হয়েছি। এটি ইন্টারনেট এক্সপ্লোরার ব্যতীত অন্য যে কোনও ব্রাউজারের সাথে কাজ করে যেখানে ইউআরএলগুলির মাধ্যমে প্রমাণীকরণ সমর্থন করে না (কলটি কার্যকরভাবে কার্যকর করা হবে না)।

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

শার্ক অ্যালির উত্তর অনুসারে এটি এনজিনেক্সের সাথেও কাজ করে।

আমি এনজিএনএক্স এর পিছনে একটি সার্ভার থেকে 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/