জাভাস্ক্রিপ্ট দিয়ে মাইক্রোসফ্ট ব্যবহার করে প্রমাণীকরণ করুন, জাভাস্ক্রিপ্ট দিয়ে মাইক্রোসফ্ট ব্যবহার করে প্রমাণীকরণ করুন

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

শুরু করার আগে

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

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

Firebase SDK দিয়ে সাইন-ইন প্রক্রিয়াটি পরিচালনা করুন।

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

Firebase JavaScript SDK ব্যবহার করে সাইন-ইন প্রক্রিয়াটি পরিচালনা করতে, এই ধাপগুলো অনুসরণ করুন:

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

    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'
    });

    মাইক্রোসফ্ট যে প্যারামিটারগুলো সমর্থন করে, সেগুলোর জন্য মাইক্রোসফ্ট OAuth ডকুমেন্টেশন দেখুন। মনে রাখবেন যে আপনি setCustomParameters() এর সাথে Firebase-এর প্রয়োজনীয় প্যারামিটারগুলো পাস করতে পারবেন না। এই প্যারামিটারগুলো হলো 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');

    আরও জানতে, মাইক্রোসফ্ট পারমিশন এবং কনসেন্ট ডকুমেন্টেশন দেখুন।

  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.
      });

    সফলভাবে সম্পন্ন হলে, ফেরত আসা firebase.auth.UserCredential অবজেক্ট থেকে প্রোভাইডারের সাথে যুক্ত OAuth অ্যাক্সেস টোকেনটি সংগ্রহ করা যাবে।

    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 আইডি টোকেন firebase.auth.UserCredential অবজেক্ট থেকেও পাওয়া যেতে পারে। আইডি টোকেনের sub ' ক্লেইমটি অ্যাপ-নির্দিষ্ট এবং এটি Firebase Auth দ্বারা ব্যবহৃত এবং user.providerData[0].uid এর মাধ্যমে অ্যাক্সেসযোগ্য ফেডারেটেড ব্যবহারকারী আইডেন্টিফায়ারের সাথে মিলবে না। এর পরিবর্তে ' oid ' ক্লেইম ফিল্ড ব্যবহার করা উচিত। সাইন-ইন করার জন্য যখন একটি Azure AD টেন্যান্ট ব্যবহার করা হয়, তখন ' oid ' ক্লেইমটি হুবহু মিলবে। তবে নন-টেন্যান্ট ক্ষেত্রে, ' oid ফিল্ডটি প্যাড করা হয়। একটি ফেডারেটেড আইডি 4b2eabcdefghijkl এর জন্য, ' oid গঠন হবে 00000000-0000-0000-4b2e-abcdefghijkl

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

    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.
        });

ক্রোম এক্সটেনশনে ফায়ারবেস দিয়ে প্রমাণীকরণ করুন

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

পরবর্তী পদক্ষেপ

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

  • আপনার অ্যাপগুলিতে, ব্যবহারকারীর অথেন্টিকেশন স্ট্যাটাস জানার জন্য প্রস্তাবিত উপায় হলো Auth অবজেক্টে একটি অবজারভার সেট করা। এরপর আপনি User অবজেক্ট থেকে ব্যবহারকারীর প্রাথমিক প্রোফাইল তথ্য পেতে পারেন। ব্যবহারকারী ব্যবস্থাপনা (Manage Users) দেখুন।

  • আপনার Firebase Realtime Database and Cloud Storage Security Rules- এ, আপনি 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.
});