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

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

Eiji Kitamura

Meggin Kearney

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

স্বয়ংক্রিয় সাইন-ইন

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

অটোমেটিক সাইন-ইন চালু করতে:

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

ক্রেডেনশিয়াল সংক্রান্ত তথ্য পান

Browser Support

Source

ক্রেডেনশিয়াল সংক্রান্ত তথ্য পেতে, 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 অ্যাকাউন্ট বাছাইকারী একাধিক অ্যাকাউন্ট দেখাচ্ছে।

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

ক্রেডেনশিয়াল সংক্রান্ত তথ্য পান এবং অ্যাকাউন্ট বাছাইকারী দেখুন।
ব্যবহারকারীকে যাচাই করুন।
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';
      });
  }
});

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

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

ফেডারেটেড লগ-ইন প্রয়োগ করতে:

থার্ড-পার্টি আইডেন্টিটির মাধ্যমে ব্যবহারকারীকে যাচাই করুন।
পরিচয় সংক্রান্ত তথ্য স্টোর করা।
UI আপডেট করুন অথবা পছন্দমতো পৃষ্ঠায় যান (অটোমেটিক সাইন-ইনের মতোই)।

থার্ড-পার্টি পরিচয়ের মাধ্যমে ব্যবহারকারীকে যাচাই করুন

ব্যবহারকারী ফেডারেটেড লগ-ইন বোতামে ট্যাপ করলে, FederatedCredential-এর সাথে নির্দিষ্ট আইডেন্টিটি প্রোভাইডার যাচাইকরণ ফ্লো রান করুন।

Browser Support

Source

যেমন, Google যদি পরিষেবা প্রদানকারী হয়, তাহলে Google Sign-In জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করুন:

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 Sign-In-এর ফলে যাচাইকরণের প্রমাণ হিসেবে একটি আইডি টোকেন পাওয়া যায়।

সাধারণত, ফেডারেটেড লগ-ইন স্ট্যান্ডার্ড প্রোটোকলের উপর ভিত্তি করে তৈরি করা হয়, যেমন 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();
}

এর ফলে, ব্যবহারকারী পরের বার অটোমেটিক সাইন-ইন চালু না করা পর্যন্ত অটোমেটিক সাইন-ইন হবে না। অটোমেটিক সাইন-ইন আবার চালু করতে, ব্যবহারকারী অ্যাকাউন্ট বাছাইকারী থেকে যে অ্যাকাউন্ট দিয়ে সাইন-ইন করতে চান সেটি বেছে নিয়ে ইচ্ছাকৃতভাবে সাইন-ইন করার বিকল্প বেছে নিতে পারেন। তারপর, ব্যবহারকারী স্পষ্টভাবে সাইন-আউট না করা পর্যন্ত তাকে সবসময় সাইন-ইন করে রাখা হয়।

স্বয়ংক্রিয় সাইন-ইন

ক্রেডেনশিয়াল সংক্রান্ত তথ্য পান

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

UI আপডেট করুন

যাচাইকরণ সংক্রান্ত ত্রুটি মেসেজ দেখাতে ভুলবেন না

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

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

ক্রেডেনশিয়াল সংক্রান্ত তথ্য পান এবং অ্যাকাউন্ট বাছাইকারী দেখুন

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

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

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

থার্ড-পার্টি পরিচয়ের মাধ্যমে ব্যবহারকারীকে যাচাই করুন

পরিচয় সংক্রান্ত তথ্য স্টোর করা

সাইন-আউট করুন

ভবিষ্যতে ভিজিট করার জন্য অটোমেটিক সাইন-ইন বন্ধ করুন

মতামত