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

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

শুরু করার আগে

Microsoft অ্যাকাউন্ট (Azure Active Directory ও ব্যক্তিগত Microsoft অ্যাকাউন্ট) ব্যবহার করে ব্যবহারকারীদের সাইন-ইন করতে দিতে, আপনাকে প্রথমে Firebase প্রোজেক্টের জন্য Microsoft-কে সাইন-ইন পরিষেবা প্রদানকারী হিসেবে চালু করতে হবে:

  1. আপনার JavaScript প্রোজেক্টে Firebase যোগ করুন।
  2. Firebase কনসোলে গিয়ে নিরাপত্তা > যাচাইকরণ বিকল্পে যান।
  3. সাইন-ইন পদ্ধতি ট্যাবে, Microsoft সাইন-ইন প্রদানকারীকে চালু করুন।
  4. প্রোভাইডার কনফিগারেশনে সেই প্রোভাইডারের ডেভেলপার কনসোল থেকে ক্লায়েন্ট আইডি ও ক্লায়েন্ট সিক্রেট যোগ করুন:
    1. Microsoft OAuth ক্লায়েন্ট রেজিস্টার করতে, দ্রুত শুরু: Azure Active Directory v2.0 এন্ডপয়েন্টের সাথে অ্যাপ রেজিস্টার করুন লিঙ্কে দেওয়া নির্দেশাবলী অনুসরণ করুন। মনে রাখবেন, এই এন্ডপয়েন্ট Microsoft ব্যক্তিগত অ্যাকাউন্ট এবং Azure Active Directory অ্যাকাউন্ট ব্যবহার করে সাইন-ইন করার সুবিধা দেয়। Azure Active Directory v2.0 সম্পর্কে আরও জানুন।
    2. এইসব পরিষেবা প্রদানকারীর সাথে অ্যাপ রেজিস্টার করার সময়, আপনার অ্যাপের জন্য রিডাইরেক্ট ডোমেন হিসেবে আপনার প্রোজেক্টের জন্য *.firebaseapp.com ডোমেন রেজিস্টার করতে ভুলবেন না।
  5. সেভ করুন বিকল্পে ক্লিক করুন।

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

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

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

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

    Web

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

    Web

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

    Web

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Web

    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

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

    কোনও নির্দিষ্ট Azure AD টেন্যান্টের ব্যবহারকারীদের শুধুমাত্র অ্যাপ্লিকেশনে সাইন-ইন করার অনুমতি দিতে, Azure AD টেন্যান্টের বন্ধুত্বপূর্ণ ডোমেন নাম বা টেন্যান্টের GUID শনাক্তকারী ব্যবহার করা যেতে পারে। কাস্টম প্যারামিটার অবজেক্টে "টেন্যান্ট" ফিল্ড উল্লেখ করে এটি করা যেতে পারে।

    Web

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });

    Web

    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
  3. ঐচ্ছিক: যাচাইকরণ প্রদানকারীর কাছে আপনি অনুরোধ করতে চান এমন মৌলিক প্রোফাইলের বাইরে অতিরিক্ত OAuth 2.0 স্কোপ নির্দিষ্ট করুন।

    provider.addScope('mail.read');
    provider.addScope('calendars.read');

    আরও জানতে, Microsoft-এর অনুমতি ও সম্মতি সংক্রান্ত ডকুমেন্টেশন দেখুন।

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

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

    Web

    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
        // 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

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

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

    Web

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

    Web

    firebase.auth().signInWithRedirect(provider);

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

    Web

    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // 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

    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

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

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

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

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

    Firebase Auth-এর সাথে কাজ করে এমন অন্যান্য পরিষেবা প্রদানকারীর মতো, Microsoft কোনও ফটো URL প্রদান করে না এবং পরিবর্তে, প্রোফাইল ফটোর বাইনারি ডেটা Microsoft Graph API-এর মাধ্যমে অনুরোধ করতে হবে।

    OAuth অ্যাক্সেস টোকেন ছাড়াও, ব্যবহারকারীর OAuth ID টোকেন firebase.auth.UserCredential অবজেক্ট থেকে পাওয়া যেতে পারে। ID টোকেনে থাকা sub দাবিটি অ্যাপ-নির্দিষ্ট এবং এটি Firebase Auth-এর ব্যবহার করা ফেডারেশন করা ব্যবহারকারীর শনাক্তকারীর সাথে মিলবে না এবং এটি user.providerData[0].uid-এর মাধ্যমে অ্যাক্সেস করা যাবে। এর পরিবর্তে oid দাবি ফিল্ড ব্যবহার করা উচিত। সাইন-ইন করার জন্য Azure AD টেন্যান্ট ব্যবহার করার সময়, oid দাবিটি হুবহু মিলবে। তবে, নন-টেন্যান্টের ক্ষেত্রে, oid ফিল্ড প্যাড করা হয়। ফেডারেটেড আইডি 4b2eabcdefghijkl-এর জন্য, oid-এর একটি ফর্ম 00000000-0000-0000-4b2e-abcdefghijkl থাকবে।

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

    Web

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

    Web

    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.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('microsoft.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.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // 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.
});