জাভাস্ক্রিপ্ট ব্যবহার করে Yahoo-এর মাধ্যমে প্রমাণীকরণ করা

Firebase SDK ব্যবহার করে আপনার অ্যাপে সাধারণ OAuth লগ-ইন ইন্টিগ্রেট করে এন্ড-টু-এন্ড সাইন-ইন ফ্লো সম্পূর্ণ করতে, আপনি Firebase-এর মাধ্যমে আপনার ব্যবহারকারীদের Yahoo-এর মতো OAuth প্রদানকারীর মাধ্যমে যাচাই করতে দিতে পারেন।

শুরু করার আগে

Yahoo অ্যাকাউন্ট ব্যবহার করে ব্যবহারকারীদের সাইন-ইন করতে দিতে, আপনাকে প্রথমে নিজের Firebase প্রোজেক্টের জন্য Yahoo-কে সাইন-ইন প্রোভাইডার হিসেবে চালু করতে হবে:

  1. আপনার JavaScript প্রোজেক্টে Firebase যোগ করুন।
  2. Firebase কনসোলে গিয়ে নিরাপত্তা > যাচাইকরণ বিকল্পে যান।
  3. সাইন-ইন পদ্ধতি ট্যাবে, Yahoo সাইন-ইন প্রদানকারীকে চালু করুন।
  4. প্রোভাইডার কনফিগারেশনে সেই প্রোভাইডারের ডেভেলপার কনসোল থেকে ক্লায়েন্ট আইডি ও ক্লায়েন্ট সিক্রেট যোগ করুন:
    1. Yahoo OAuth ক্লায়েন্ট রেজিস্টার করতে, Yahoo ডেভেলপার ডকুমেন্টেশনে Yahoo-এর সাথে ওয়েব অ্যাপ্লিকেশন রেজিস্টার করা সংক্রান্ত তথ্য অনুসরণ করুন।

      দুটি OpenID Connect API অনুমতি বেছে নিতে ভুলবেন না: profile এবং email.

    2. এইসব পরিষেবা প্রদানকারীর সাথে অ্যাপ রেজিস্টার করার সময়, আপনার অ্যাপের জন্য রিডাইরেক্ট ডোমেন হিসেবে আপনার প্রোজেক্টের জন্য *.firebaseapp.com ডোমেন রেজিস্টার করতে ভুলবেন না।
  5. সেভ করুন বিকল্পে ক্লিক করুন।

Firebase SDK-এর মাধ্যমে সাইন-ইন ফ্লো ম্যানেজ করা

আপনি কোনও ওয়েব অ্যাপ তৈরি করলে, Yahoo অ্যাকাউন্ট ব্যবহার করে Firebase-এর মাধ্যমে আপনার ব্যবহারকারীদের সবচেয়ে সহজে যাচাই করার উপায় হল Firebase JavaScript SDK-এর মাধ্যমে সম্পূর্ণ সাইন-ইন ফ্লো ম্যানেজ করা।

Firebase JavaScript SDK-এর মাধ্যমে সাইন-ইন ফ্লো ম্যানেজ করতে, এইসব ধাপ অনুসরণ করুন:

  1. প্রোভাইডার আইডি yahoo.com ব্যবহার করে OAuthProvider-এর একটি ইনস্ট্যান্স তৈরি করুন।

    Web

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. ঐচ্ছিক: OAuth অনুরোধের সাথে আপনি পাঠাতে চান এমন অতিরিক্ত কাস্টম OAuth প্যারামিটার নির্দিষ্ট করুন।

    Web

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Web

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Yahoo-এর ক্ষেত্রে কাজ করে এমন প্যারামিটার সম্পর্কে জানতে, Yahoo OAuth ডকুমেন্টেশন দেখুন। মনে রাখবেন, আপনি Firebase-এর প্রয়োজনীয় প্যারামিটার setCustomParameters()-এর সাথে পাস করতে পারবেন না। এইসব প্যারামিটার হল client_id, redirect_uri, response_type, scope ও state.

  3. ঐচ্ছিক: যাচাইকরণ প্রদানকারীর কাছে অনুরোধ করতে চান এমন profile এবং email-এর বাইরে অতিরিক্ত OAuth 2.0 স্কোপ নির্দিষ্ট করুন। আপনার অ্যাপ্লিকেশনের Yahoo API থেকে ব্যক্তিগত ব্যবহারকারীর ডেটা অ্যাক্সেস করার প্রয়োজন হলে, আপনাকে Yahoo ডেভেলপার কনসোলে API অনুমতির অধীনে Yahoo API-কে অনুমতি দেওয়ার অনুরোধ জানাতে হবে। অ্যাপের API অনুমতিতে আগে থেকে কনফিগার করা OAuth স্কোপের সাথে অনুরোধ করা স্কোপ হুবহু মিলতে হবে। যেমন, ব্যবহারকারীর পরিচিতি অ্যাক্সেস করার জন্য read/write অনুমতি চাওয়া হলে এবং অ্যাপের API অনুমতিতে আগে থেকে কনফিগার করা থাকলে, readonly OAuth স্কোপের sdct-r পরিবর্তে sdct-w পাস করতে হবে। অন্যথায়, ফ্লোটি সম্পূর্ণ হবে না এবং গ্রাহককে সমস্যা সংক্রান্ত মেসেজ দেখানো হবে।

    Web

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    Web

    // Request access to Yahoo Mail API.
    provider.addScope('mail-r');
    // Request read/write access to user contacts.
    // This must be preconfigured in the app's API permissions.
    provider.addScope('sdct-w');

    আরও জানতে, Yahoo স্কোপ ডকুমেন্টেশন দেখুন।

  4. OAuth প্রদানকারী অবজেক্ট ব্যবহার করে Firebase-এর মাধ্যমে যাচাই করিয়ে নিন। আপনি পপ-আপ উইন্ডো খুলে অথবা সাইন-ইন পৃষ্ঠায় রিডাইরেক্ট করে আপনার ব্যবহারকারীদের Yahoo অ্যাকাউন্ট দিয়ে সাইন-ইন করার জন্য প্রম্পট দেখাতে পারেন। মোবাইল ডিভাইসে রিডাইরেক্ট করার পদ্ধতি ব্যবহার করা ভাল।

    • পপ-আপ উইন্ডোর মাধ্যমে সাইন-ইন করতে, signInWithPopup-এ কল করুন:

      Web

      import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

      Web

      firebase.auth().signInWithPopup(provider)
        .then((result) => {
          // IdP data available in result.additionalUserInfo.profile
          // ...
      
          /** @type {firebase.auth.OAuthCredential} */
          const credential = result.credential;
      
          // Yahoo OAuth access token and ID token can be retrieved by calling:
          var accessToken = credential.accessToken;
          var idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    • সাইন-ইন পৃষ্ঠায় রিডাইরেক্ট করার মাধ্যমে সাইন-ইন করতে, signInWithRedirect-এ কল করুন:

    signInWithRedirect, linkWithRedirect বা reauthenticateWithRedirect ব্যবহার করার সময় পেশাদার পদ্ধতি অনুসরণ করুন।

      firebase.auth().signInWithRedirect(provider);
      

    ব্যবহারকারী সাইন-ইন করার প্রসেস সম্পূর্ণ করে পৃষ্ঠায় ফিরে আসার পরে, আপনি getRedirectResult কল করে সাইন-ইন করার ফলাফল পেতে পারেন।

    Web

    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);

    Web

    firebase.auth().signInWithRedirect(provider);

    সফলভাবে সম্পূর্ণ হলে, প্রদানকারীর সাথে যুক্ত OAuth ID টোকেন এবং অ্যাক্সেস টোকেন রিটার্ন করা firebase.auth.UserCredential অবজেক্ট থেকে পাওয়া যেতে পারে।

    OAuth অ্যাক্সেস টোকেন ব্যবহার করে, আপনি Yahoo API কল করতে পারবেন।

    যেমন, প্রাথমিক প্রোফাইল সংক্রান্ত তথ্য পেতে, নিম্নলিখিত REST API কল করা যেতে পারে:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json

    যেখানে YAHOO_USER_UID হল Yahoo ব্যবহারকারীর আইডি যা firebase.auth().currentUser.providerData[0].uid ফিল্ড থেকে বা result.additionalUserInfo.profile থেকে পাওয়া যেতে পারে।

  5. উপরের উদাহরণগুলি সাইন-ইন ফ্লোয়ের উপর ফোকাস করলেও, আপনার কাছে linkWithPopup/linkWithRedirect ব্যবহার করে কোনও বিদ্যমান ব্যবহারকারীর সাথে Yahoo প্রদানকারীকে লিঙ্ক করার ক্ষমতাও আছে। যেমন, আপনি একই ব্যবহারকারীর সাথে একাধিক প্রদানকারীকে লিঙ্ক করতে পারেন, যাতে তিনি যেকোনও একটির মাধ্যমে সাইন-ইন করতে পারেন।

    Web

    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Yahoo credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. একই প্যাটার্ন reauthenticateWithPopup/reauthenticateWithRedirect-এর সাথে ব্যবহার করা যেতে পারে, যা সংবেদনশীল অপারেশনের জন্য নতুন ক্রেডেনশিয়াল পেতে ব্যবহার করা যেতে পারে যার জন্য সাম্প্রতিক লগ-ইন প্রয়োজন।

    Web

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });

    Web

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // Yahoo OAuth access token can be retrieved by calling:
          // result.credential.accessToken
          // Yahoo OAuth ID token can be retrieved by calling:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Chrome এক্সটেনশনে Firebase-এর মাধ্যমে যাচাইকরণ

আপনি Chrome এক্সটেনশন অ্যাপ তৈরি করলে, অফস্ক্রিন ডকুমেন্ট গাইড দেখুন।

পরবর্তী ধাপ

কোনও ব্যবহারকারী প্রথমবার সাইন-ইন করার পরে, একটি নতুন ব্যবহারকারীর অ্যাকাউন্ট তৈরি করা হয় এবং ক্রেডেনশিয়ালের সাথে লিঙ্ক করা হয়—অর্থাৎ, ব্যবহারকারীর নাম এবং পাসওয়ার্ড, ফোন নম্বর বা ব্যবহারকারী যে তথ্য দিয়ে সাইন-ইন করেছেন তা প্রদানকারীর তথ্য। এই নতুন অ্যাকাউন্ট আপনার Firebase প্রোজেক্টের অংশ হিসেবে স্টোর করা হয় এবং ব্যবহারকারী কীভাবে সাইন-ইন করেছেন তা নির্বিশেষে, আপনার প্রোজেক্টের প্রতিটি অ্যাপ জুড়ে কোনও ব্যবহারকারীকে শনাক্ত করতে ব্যবহার করা যেতে পারে।

  • আপনার অ্যাপে, ব্যবহারকারীর অনুমোদনের স্ট্যাটাস জানার জন্য সাজেস্ট করা পদ্ধতি হল, Auth অবজেক্টে একটি অবজ়ার্ভার সেট করা। আপনি তারপরে User অবজেক্ট থেকে ব্যবহারকারীর প্রাথমিক প্রোফাইল সংক্রান্ত তথ্য পেতে পারেন। ব্যবহারকারীদের ম্যানেজ করা দেখুন।

  • আপনার Firebase Realtime Database এবং Cloud Storage নিরাপত্তা বিধিতে, আপনি auth ভেরিয়েবল থেকে সাইন-ইন করা ব্যবহারকারীর অনন্য ব্যবহারকারী আইডি পেতে এবং ব্যবহারকারী কোন ডেটা অ্যাক্সেস করতে পারবেন তা নিয়ন্ত্রণ করতে এটি ব্যবহার করতে পারবেন।

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

কোনও ব্যবহারকারীকে সাইন-আউট করতে, signOut-এ কল করুন:

Web

import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});