আপনার পছন্দের ভাষায় কন্টেন্ট অনুবাদ করতে Google তার AI প্রযুক্তি ব্যবহার করে। AI-এর মাধ্যমে করা অনুবাদে ভুল থাকতে পারে।

ফর্ম থেকে ক্রেডেনশিয়াল সেভ করুন

Eiji Kitamura

Meggin Kearney

সাইন-ইন ফর্ম থেকে ক্রেডেনশিয়াল সেভ করুন

আপনার রেজিস্ট্রেশন ও সাইন-ইন ফর্ম যতটা সম্ভব সহজ রাখুন।

সাইন-ইন ফর্ম থেকে ক্রেডেনশিয়াল সেভ করুন যাতে ব্যবহারকারীরা ফিরে এলে তাদের আবার সাইন-ইন করতে না হয়।

ফর্ম থেকে ব্যবহারকারীর ক্রেডেনশিয়াল স্টোর করতে:

ফর্মে autocomplete অন্তর্ভুক্ত করুন।
ফর্ম জমা দেওয়া আটকান।
অনুরোধ পাঠিয়ে যাচাইকরণ করুন।
ক্রেডেনশিয়াল স্টোর করুন।
UI আপডেট করুন অথবা পছন্দমতো পৃষ্ঠায় যান।

ফর্মে `autocomplete` অন্তর্ভুক্ত করুন

এগিয়ে যাওয়ার আগে, আপনার ফর্মে autocomplete অ্যাট্রিবিউট আছে কিনা তা চেক করুন। এটি ক্রেডেনশিয়াল ম্যানেজমেন্ট API-কে ফর্ম থেকে id ও password খুঁজে পেতে এবং ক্রেডেনশিয়াল অবজেক্ট তৈরি করতে সাহায্য করে।

এছাড়াও, এটি ক্রেডেনশিয়াল ম্যানেজমেন্ট API-কে সমর্থন না করা ব্রাউজারকে এর শব্দার্থ বুঝতে সাহায্য করে। Jason Grigsby-এর লেখা এই নিবন্ধ থেকে অটোফিল সম্পর্কে আরও জানুন।

<form id="signup" method="post">
  <input name="email" type="text" autocomplete="username email" />
  <input name="display-name" type="text" autocomplete="name" />
  <input name="password" type="password" autocomplete="new-password" />
  <input type="submit" value="Sign Up!" />
</form>

ফর্ম জমা দেওয়া আটকান

ব্যবহারকারী জমা দেওয়ার বোতামে প্রেস করলে, ফর্ম জমা দেওয়া আটকান, অন্যথায় পৃষ্ঠা পরিবর্তন হবে:

    var f = document.querySelector('#signup');
    f.addEventListener('submit', e => {
      e.preventDefault();

পৃষ্ঠা ট্রানজিশন প্রতিরোধ করার মাধ্যমে, আপনি ক্রেডেনশিয়ালের সত্যতা যাচাই করার সময় ক্রেডেনশিয়াল সংক্রান্ত তথ্য রেখে দিতে পারবেন।

অনুরোধ পাঠিয়ে যাচাইকরণ করুন

ব্যবহারকারীকে যাচাই করতে, AJAX ব্যবহার করে আপনার সার্ভারে ক্রেডেনশিয়াল সংক্রান্ত তথ্য পাঠান।

সার্ভার সাইডে, একটি এন্ডপয়েন্ট তৈরি করুন (অথবা আগে থেকে থাকা এন্ডপয়েন্ট পরিবর্তন করুন) যা HTTP কোড 200 বা 401-এর মাধ্যমে উত্তর দেয়, যাতে ব্রাউজার বুঝতে পারে যে সাইন-আপ/সাইন-ইন/পাসওয়ার্ড পরিবর্তন করার প্রসেস সম্পূর্ণ হয়েছে কিনা।

যেমন:

// Try sign-in with AJAX
fetch('/signin', {
  method: 'POST',
  body: new FormData(e.target),
  credentials: 'include',
});

ক্রেডেনশিয়াল স্টোর করা

ক্রেডেনশিয়াল স্টোর করতে, প্রথমে API উপলভ্য আছে কিনা তা চেক করুন, তারপর সিঙ্ক্রোনাস বা অ্যাসিঙ্ক্রোনাসভাবে আর্গুমেন্ট হিসেবে ফর্ম এলিমেন্ট সহ PasswordCredential ইনস্ট্যান্টিয়েট করুন। navigator.credentials.store()-এ কল করুন। API উপলভ্য না থাকলে, আপনি প্রোফাইল তথ্য পরবর্তী ধাপে ফরওয়ার্ড করতে পারেন।

সিঙ্ক্রোনাস উদাহরণ:

if (window.PasswordCredential) {
  var c = new PasswordCredential(e.target);
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

অ্যাসিঙ্ক্রোনাস উদাহরণ:

if (window.PasswordCredential) {
  var c = await navigator.credentials.create({password: e.target});
  return navigator.credentials.store(c);
} else {
  return Promise.resolve(profile);
}

অনুরোধটি সফল হলে, ক্রেডেনশিয়াল তথ্য স্টোর করুন। (অনুরোধ ব্যর্থ হলে ক্রেডেনশিয়াল সংক্রান্ত তথ্য স্টোর করবেন না কারণ এটি করলে ফিরে আসা ব্যবহারকারীরা বিভ্রান্ত হন।)

Chrome ব্রাউজার ক্রেডেনশিয়াল সংক্রান্ত তথ্য পেলে, ক্রেডেনশিয়াল (বা ফেডারেশন প্রোভাইডার) সেভ করার জন্য একটি পপ-আপ বিজ্ঞপ্তি দেখানো হয়।

ক্রেডেনশিয়াল স্টোর করুন — অটোমেটিক সাইন-ইন করা ব্যবহারকারীর জন্য বিজ্ঞপ্তি

UI আপডেট করা

সবকিছু ঠিকঠাক থাকলে, প্রোফাইল তথ্য ব্যবহার করে UI আপডেট করুন, অথবা পছন্দমতো পৃষ্ঠায় যান।

     }).then(profile => {
       if (profile) {
         updateUI(profile);
       }
     }).catch(error => {
       showError('Sign-in Failed');
     });
    });

সম্পূর্ণ কোডের উদাহরণ

// Get form's DOM object
var f = document.querySelector('#signup');
f.addEventListener('submit', (e) => {
  // Stop submitting form by itself
  e.preventDefault();

  // Try sign-in with AJAX
  fetch('/signin', {
    method: 'POST',
    body: new FormData(e.target),
    credentials: 'include',
  })
    .then((res) => {
      if (res.status == 200) {
        return Promise.resolve();
      } else {
        return Promise.reject('Sign-in failed');
      }
    })
    .then((profile) => {
      // Instantiate PasswordCredential with the form
      if (window.PasswordCredential) {
        var c = new PasswordCredential(e.target);
        return navigator.credentials.store(c);
      } else {
        return Promise.resolve(profile);
      }
    })
    .then((profile) => {
      // Successful sign-in
      if (profile) {
        updateUI(profile);
      }
    })
    .catch((error) => {
      // Sign-in failed
      showError('Sign-in Failed');
    });
});

মানানসই ব্রাউজার

`PasswordCredential`

Browser Support

Source

`navigator.credentials.store()`