ব্যবহারকারীদের সাইন ইন করুন

ইজি কিতামুরা
মেগিন কার্নি
Meggin Kearney

ব্যবহারকারীদের সাইন ইন করতে, ব্রাউজারের পাসওয়ার্ড ম্যানেজার থেকে শংসাপত্রগুলি পুনরুদ্ধার করুন এবং ব্যবহারকারীদের স্বয়ংক্রিয়ভাবে লগ ইন করতে সেগুলি ব্যবহার করুন৷ একাধিক অ্যাকাউন্টের ব্যবহারকারীদের জন্য, তাদের অ্যাকাউন্ট চয়নকারী ব্যবহার করে শুধুমাত্র একটি ট্যাপ দিয়ে অ্যাকাউন্ট নির্বাচন করতে দিন।

স্বয়ংক্রিয় সাইন ইন

স্বয়ংক্রিয় সাইন-ইন আপনার ওয়েবসাইটে যে কোনো জায়গায় ঘটতে পারে; শুধু উপরের পাতাই নয় অন্যান্য পাতার পাতাও। ব্যবহারকারীরা যখন সার্চ ইঞ্জিনের মাধ্যমে আপনার ওয়েবসাইটের বিভিন্ন পৃষ্ঠায় পৌঁছায় তখন এটি কার্যকর হয়।

স্বয়ংক্রিয় সাইন-ইন সক্ষম করতে:

  1. শংসাপত্রের তথ্য পান।
  2. ব্যবহারকারীকে প্রমাণীকরণ করুন।
  3. UI আপডেট করুন বা ব্যক্তিগতকৃত পৃষ্ঠায় যান।

শংসাপত্রের তথ্য পান

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

  • 51
  • 18
  • 60
  • 13

উৎস

শংসাপত্রের তথ্য পেতে, navigator.credentials.get() কল করুন। একটি password বা federated দিয়ে অনুরোধ করার জন্য শংসাপত্রের ধরন নির্দিষ্ট করুন।

সর্বদা mediation: 'silent' , যাতে আপনি সহজেই প্রক্রিয়াটিকে খারিজ করতে পারেন যদি ব্যবহারকারী:

  • কোন শংসাপত্র সংরক্ষিত আছে.
  • একাধিক শংসাপত্র সংরক্ষিত আছে.
  • সাইন আউট করা হয়েছে।

একটি শংসাপত্র পাওয়ার আগে, ব্যবহারকারী ইতিমধ্যে সাইন ইন করেছেন কিনা তা পরীক্ষা করতে ভুলবেন না:

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials.get({
      password: true,
      federated: {
        providers: ['https://accounts.google.com'],
      },
      mediation: 'silent',
    });
    // ...
  }
}

navigator.credentials.get() দ্বারা প্রত্যাবর্তিত প্রতিশ্রুতি একটি শংসাপত্র বস্তু বা null দিয়ে সমাধান করে। এটি একটি PasswordCredential নাকি FederatedCredential তা নির্ধারণ করতে, কেবলমাত্র বস্তুর .type বৈশিষ্ট্যটি দেখুন, যা হয় password বা federated হবে।

যদি .type federated হয়, তাহলে .provider সম্পত্তি হল একটি স্ট্রিং যা পরিচয় প্রদানকারীকে প্রতিনিধিত্ব করে।

ব্যবহারকারীকে প্রমাণীকরণ করুন

একবার আপনার কাছে শংসাপত্র হয়ে গেলে, শংসাপত্র, password বা federated ধরণের উপর নির্ভর করে একটি প্রমাণীকরণ প্রবাহ চালান:

    }).then(c => {
     if (c) {
       switch (c.type) {
         case 'password':
           return sendRequest(c);
           break;
         case 'federated':
           return gSignIn(c);
           break;
       }
     } else {
       return Promise.resolve();
     }

প্রতিশ্রুতি সমাধান হয়ে গেলে, আপনি একটি শংসাপত্র বস্তু পেয়েছেন কিনা তা পরীক্ষা করুন। যদি না হয়, এর মানে স্বয়ংক্রিয় সাইন-ইন ঘটতে পারেনি৷ নীরবে স্বয়ংক্রিয় সাইন-ইন প্রক্রিয়া খারিজ করুন।

UI আপডেট করুন

প্রমাণীকরণ সফল হলে, UI আপডেট করুন বা ব্যবহারকারীকে ব্যক্তিগতকৃত পৃষ্ঠায় ফরোয়ার্ড করুন:

    }).then(profile => {
     if (profile) {
       updateUI(profile);
     }

প্রমাণীকরণ ত্রুটি বার্তা দেখাতে ভুলবেন না

ব্যবহারকারীর বিভ্রান্তি এড়াতে, শংসাপত্রের অবজেক্ট পাওয়ার সময় ব্যবহারকারীদের একটি নীল টোস্ট দেখতে হবে যাতে বলা হয় "সাইন ইন করা হচ্ছে":

ব্লু টোস্ট দেখাচ্ছে ব্যবহারকারী সাইন ইন করছে৷

একটি গুরুত্বপূর্ণ টিপ: আপনি যদি একটি শংসাপত্র বস্তু পেতে সফল হন কিন্তু ব্যবহারকারীকে প্রমাণীকরণ করতে ব্যর্থ হন তবে আপনাকে একটি ত্রুটি বার্তা দেখাতে হবে:

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

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

if (window.PasswordCredential || window.FederatedCredential) {
  if (!user.isSignedIn()) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'silent',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        }
      })
      .catch((error) => {
        showError('Sign-in Failed');
      });
  }
}

অ্যাকাউন্ট চয়নকারীর মাধ্যমে সাইন-ইন করুন

যদি একজন ব্যবহারকারীর মধ্যস্থতার প্রয়োজন হয়, বা একাধিক অ্যাকাউন্ট থাকে, তাহলে সাধারণ সাইন-ইন ফর্ম এড়িয়ে গিয়ে ব্যবহারকারীকে সাইন-ইন করতে দিতে অ্যাকাউন্ট চয়নকারী ব্যবহার করুন, উদাহরণস্বরূপ:

Google অ্যাকাউন্ট চয়নকারী একাধিক অ্যাকাউন্ট দেখাচ্ছে।

অ্যাকাউন্ট চয়নকারীর মাধ্যমে সাইন ইন করার পদক্ষেপগুলি স্বয়ংক্রিয় সাইন-ইন-এর মতোই, শংসাপত্রের তথ্য পাওয়ার অংশ হিসাবে অ্যাকাউন্ট চয়নকারীকে দেখানোর জন্য একটি অতিরিক্ত কল সহ:

  1. শংসাপত্রের তথ্য পান এবং অ্যাকাউন্ট চয়নকারীকে দেখান।
  2. ব্যবহারকারীকে প্রমাণীকরণ করুন ।
  3. UI আপডেট করুন বা একটি ব্যক্তিগত পৃষ্ঠায় যান ।

শংসাপত্রের তথ্য পান এবং অ্যাকাউন্ট চয়নকারীকে দেখান

একটি সংজ্ঞায়িত ব্যবহারকারী কর্মের প্রতিক্রিয়া হিসাবে একটি অ্যাকাউন্ট চয়নকারী দেখান, উদাহরণস্বরূপ, যখন ব্যবহারকারী "সাইন-ইন" বোতামটি আলতো চাপেন৷ navigator.credentials.get() কল করুন, এবং mediation: 'optional' বা mediation: 'required' ৷

যখন mediation required হয়, ব্যবহারকারীকে সর্বদা সাইন ইন করার জন্য একটি অ্যাকাউন্ট চয়নকারী দেখানো হয়৷ এই বিকল্পটি একাধিক অ্যাকাউন্টের ব্যবহারকারীদের সহজেই তাদের মধ্যে স্যুইচ করতে দেয়৷ যখন mediation optional হয়, ব্যবহারকারীকে স্পষ্টভাবে একটি navigator.credentials.preventSilentAccess() কলের পরে সাইন ইন করার জন্য একটি অ্যাকাউন্ট চয়নকারী দেখানো হয়৷ ব্যবহারকারী সাইন-আউট বা নিবন্ধন বাতিল করার পরে স্বয়ংক্রিয় সাইন-ইন ঘটবে না তা নিশ্চিত করার জন্য এটি সাধারণত।

mediation: 'optional' :

    var signin = document.querySelector('#signin');
    signin.addEventListener('click', e => {
     if (window.PasswordCredential || window.FederatedCredential) {
       navigator.credentials.get({
         password: true,
         federated: {
           providers: [
             'https://accounts.google.com'
           ]
         },
         mediation: 'optional'
       }).then(c => {

একবার ব্যবহারকারী একটি অ্যাকাউন্ট নির্বাচন করলে, প্রতিশ্রুতি শংসাপত্রের সাথে সমাধান হয়। ব্যবহারকারীরা যদি অ্যাকাউন্ট চয়নকারীকে বাতিল করে, অথবা কোনো শংসাপত্র সংরক্ষণ করা না থাকে, তাহলে প্রতিশ্রুতিটি null দিয়ে সমাধান করা হয়। সেক্ষেত্রে সাইন ইন ফর্ম অভিজ্ঞতায় ফিরে যান।

সাইন-ইন ফর্মে ফিরে যেতে ভুলবেন না

এই যেকোনও কারণে আপনার সাইন-ইন ফর্মে ফিরে আসা উচিত:

  • কোন শংসাপত্র সংরক্ষণ করা হয়.
  • ব্যবহারকারী একটি অ্যাকাউন্ট নির্বাচন না করেই অ্যাকাউন্ট চয়নকারীকে বরখাস্ত করেছেন৷
  • API উপলব্ধ নেই.
    }).then(profile => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
    }).catch(error => {
        location.href = '/signin';
    });

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

var signin = document.querySelector('#signin');
signin.addEventListener('click', (e) => {
  if (window.PasswordCredential || window.FederatedCredential) {
    navigator.credentials
      .get({
        password: true,
        federated: {
          providers: ['https://accounts.google.com'],
        },
        mediation: 'optional',
      })
      .then((c) => {
        if (c) {
          switch (c.type) {
            case 'password':
              return sendRequest(c);
              break;
            case 'federated':
              return gSignIn(c);
              break;
          }
        } else {
          return Promise.resolve();
        }
      })
      .then((profile) => {
        if (profile) {
          updateUI(profile);
        } else {
          location.href = '/signin';
        }
      })
      .catch((error) => {
        location.href = '/signin';
      });
  }
});

ফেডারেটেড লগইন

ফেডারেটেড লগইন ব্যবহারকারীদের আপনার ওয়েবসাইটের জন্য অতিরিক্ত লগইন বিশদ মনে না রেখে একটি ট্যাপ দিয়ে সাইন ইন করতে দেয়।

ফেডারেটেড লগইন বাস্তবায়ন করতে:

  1. তৃতীয় পক্ষের পরিচয় দিয়ে ব্যবহারকারীকে প্রমাণীকরণ করুন।
  2. পরিচয় তথ্য সংরক্ষণ করুন.
  3. UI আপডেট করুন বা একটি ব্যক্তিগতকৃত পৃষ্ঠায় যান (স্বয়ংক্রিয় সাইন-ইন-এর মতো)।

তৃতীয় পক্ষের পরিচয় সহ ব্যবহারকারীকে প্রমাণীকরণ করুন

যখন একজন ব্যবহারকারী একটি ফেডারেটেড লগইন বোতামে ট্যাপ করে, তখন FederatedCredential দিয়ে নির্দিষ্ট পরিচয় প্রদানকারী প্রমাণীকরণ প্রবাহ চালান।

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

  • 51
  • 79
  • এক্স
  • এক্স

উৎস

উদাহরণস্বরূপ, যদি প্রদানকারী Google হয়, তাহলে Google সাইন-ইন জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন:

navigator.credentials
  .get({
    password: true,
    mediation: 'optional',
    federated: {
      providers: ['https://account.google.com'],
    },
  })
  .then(function (cred) {
    if (cred) {
      // Instantiate an auth object
      var auth2 = gapi.auth2.getAuthInstance();

      // Is this user already signed in?
      if (auth2.isSignedIn.get()) {
        var googleUser = auth2.currentUser.get();

        // Same user as in the credential object?
        if (googleUser.getBasicProfile().getEmail() === cred.id) {
          // Continue with the signed-in user.
          return Promise.resolve(googleUser);
        }
      }

      // Otherwise, run a new authentication flow.
      return auth2.signIn({
        login_hint: id || '',
      });
    }
  });

Google সাইন-ইন প্রমাণীকরণের প্রমাণ হিসাবে একটি আইডি টোকেনের ফলাফল।

সাধারণভাবে, OpenID Connect বা OAuth- এর মতো স্ট্যান্ডার্ড প্রোটোকলের উপরে ফেডারেটেড লগইন তৈরি করা হয়। ফেডারেটেড অ্যাকাউন্টগুলির সাথে কীভাবে প্রমাণীকরণ করা যায় তা শিখতে, সংশ্লিষ্ট ফেডারেটেড পরিচয় প্রদানকারীর ডক্স দেখুন। জনপ্রিয় উদাহরণ অন্তর্ভুক্ত:

পরিচয় তথ্য সংরক্ষণ করুন

একবার প্রমাণীকরণ সম্পন্ন হলে, আপনি পরিচয় তথ্য সংরক্ষণ করতে পারেন। আপনি এখানে যে তথ্য সংরক্ষণ করবেন তা হল পরিচয় প্রদানকারীর id এবং একটি প্রদানকারী স্ট্রিং যা পরিচয় প্রদানকারীকে প্রতিনিধিত্ব করে ( name এবং iconURL ঐচ্ছিক)। শংসাপত্র ব্যবস্থাপনা স্পেসিফিকেশনে এই তথ্য সম্পর্কে আরও জানুন।

ফেডারেটেড অ্যাকাউন্টের বিবরণ সঞ্চয় করতে, ব্যবহারকারীর শনাক্তকারী এবং প্রদানকারীর শনাক্তকারীর সাথে একটি নতুন FederatedCredential অবজেক্ট ইনস্ট্যান্টিয়েট করুন। তারপরে পরিচয় তথ্য সংরক্ষণ করতে navigator.credentials.store() চালু করুন।

সফল ফেডারেশনের পরে, সিঙ্ক্রোনাস বা অ্যাসিঙ্ক্রোনাসভাবে একটি FederatedCredential ইনস্ট্যান্ট করুন:

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

// Create credential object synchronously.
var cred = new FederatedCredential({
  id: id, // id in IdP
  provider: 'https://account.google.com', // A string representing IdP
  name: name, // name in IdP
  iconURL: iconUrl, // Profile image url
});

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

// Create credential object asynchronously.
var cred = await navigator.credentials.create({
  federated: {
    id: id,
    provider: 'https://accounts.google.com',
    name: name,
    iconURL: iconUrl,
  },
});

তারপর শংসাপত্রের বস্তু সংরক্ষণ করুন:

// Store it
navigator.credentials.store(cred).then(function () {
  // continuation
});

সাইন আউট

সাইন-আউট বোতামে ট্যাপ হলে আপনার ব্যবহারকারীদের সাইন আউট করুন। প্রথমে সেশনটি বন্ধ করুন, তারপর ভবিষ্যতে ভিজিটের জন্য স্বয়ংক্রিয় সাইন-ইন বন্ধ করুন। (আপনি কীভাবে আপনার সেশনগুলি শেষ করবেন তা সম্পূর্ণ আপনার উপর নির্ভর করে।)

ভবিষ্যতে ভিজিট করার জন্য স্বয়ংক্রিয় সাইন-ইন বন্ধ করুন

navigator.credentials.preventSilentAccess() কল করুন :

signoutUser();
if (navigator.credentials && navigator.credentials.preventSilentAccess) {
  navigator.credentials.preventSilentAccess();
}

এটি নিশ্চিত করবে যে পরবর্তী সময়ে ব্যবহারকারী স্বয়ংক্রিয় সাইন-ইন সক্ষম না করা পর্যন্ত স্বয়ংক্রিয় সাইন-ইন ঘটবে না৷ স্বয়ংক্রিয় সাইন-ইন পুনঃসূচনা করার জন্য, একজন ব্যবহারকারী ইচ্ছাকৃতভাবে সাইন ইন করতে বেছে নিতে পারেন যে অ্যাকাউন্ট থেকে তারা সাইন ইন করতে চান অ্যাকাউন্ট চয়নকারী থেকে। তারপরে ব্যবহারকারী স্পষ্টভাবে সাইন আউট না হওয়া পর্যন্ত সর্বদা আবার সাইন ইন করা হয়।

প্রতিক্রিয়া