একটি Chrome এক্সটেনশনে Firebase দিয়ে প্রমাণীকরণ করুন

এই ডকুমেন্টটিতে দেখানো হয়েছে কিভাবে Firebase Authentication ব্যবহার করে ম্যানিফেস্ট ভি৩ (Manifest V3) চালিত একটি ক্রোম এক্সটেনশনে ব্যবহারকারীদের সাইন ইন করানো যায়।

Firebase Authentication একটি ক্রোম এক্সটেনশন থেকে ব্যবহারকারীদের সাইন ইন করার জন্য একাধিক প্রমাণীকরণ পদ্ধতি প্রদান করে, যার মধ্যে কয়েকটির জন্য অন্যগুলোর তুলনায় বেশি ডেভেলপমেন্ট প্রচেষ্টার প্রয়োজন হয়।

একটি Manifest V3 Chrome এক্সটেনশনে নিম্নলিখিত মেথডগুলি ব্যবহার করার জন্য, আপনাকে কেবল firebase/auth/web-extension থেকে সেগুলি ইম্পোর্ট করতে হবে:

  • ইমেল এবং পাসওয়ার্ড দিয়ে সাইন ইন করুন ( createUserWithEmailAndPassword এবং signInWithEmailAndPassword )
  • ইমেল লিঙ্কের মাধ্যমে সাইন ইন করুন ( sendSignInLinkToEmail , isSignInWithEmailLink , এবং signInWithEmailLink )
  • বেনামে সাইন ইন করুন ( signInAnonymously )
  • নিজস্ব প্রমাণীকরণ সিস্টেম দিয়ে সাইন ইন করুন ( signInWithCustomToken )
  • প্রোভাইডার সাইন-ইন আলাদাভাবে পরিচালনা করুন, তারপর signInWithCredential ব্যবহার করুন।

নিম্নলিখিত সাইন ইন পদ্ধতিগুলোও সমর্থিত, তবে এর জন্য কিছু অতিরিক্ত কাজ করতে হবে:

  • পপ-আপ উইন্ডো দিয়ে সাইন ইন করুন ( signInWithPopup , linkWithPopup , এবং reauthenticateWithPopup )
  • সাইন-ইন পৃষ্ঠায় পুনঃনির্দেশিত হয়ে সাইন ইন করুন ( signInWithRedirect , linkWithRedirect , এবং reauthenticateWithRedirect )
  • reCAPTCHA সহ ফোন নম্বর দিয়ে সাইন ইন করুন
  • reCAPTCHA সহ এসএমএস মাল্টি-ফ্যাক্টর অথেনটিকেশন
  • reCAPTCHA এন্টারপ্রাইজ সুরক্ষা

একটি Manifest V3 Chrome এক্সটেনশনে এই পদ্ধতিগুলো ব্যবহার করতে হলে, আপনাকে অবশ্যই Offscreen Documents ব্যবহার করতে হবে।

firebase/auth/web-extension এন্ট্রি পয়েন্ট ব্যবহার করুন

firebase/auth/web-extension থেকে ইম্পোর্ট করলে একটি ক্রোম এক্সটেনশন থেকে ব্যবহারকারীদের সাইন ইন করানো একটি ওয়েব অ্যাপের মতোই হয়ে যায়।

firebase/auth/web-extension শুধুমাত্র ওয়েব এসডিকে ভার্সন v10.8.0 এবং তার উপরের ভার্সনগুলোতে সমর্থিত।

import { getAuth, signInWithEmailAndPassword } from 'firebase/auth/web-extension';

const auth = getAuth();
signInWithEmailAndPassword(auth, email, password)
  .then((userCredential) => {
    // Signed in
    const user = userCredential.user;
    // ...
  })
  .catch((error) => {
    const errorCode = error.code;
    const errorMessage = error.message;
  });

অফস্ক্রিন ডকুমেন্ট ব্যবহার করুন

কিছু অথেনটিকেশন পদ্ধতি, যেমন signInWithPopup , linkWithPopup , এবং reauthenticateWithPopup , ক্রোম এক্সটেনশনের সাথে সরাসরি সামঞ্জস্যপূর্ণ নয়, কারণ এগুলোর জন্য এক্সটেনশন প্যাকেজের বাইরে থেকে কোড লোড করার প্রয়োজন হয়। Manifest V3 থেকে এটি অনুমোদিত নয় এবং এক্সটেনশন প্ল্যাটফর্ম দ্বারা ব্লক করা হবে। এই সমস্যা এড়ানোর জন্য, আপনি একটি অফস্ক্রিন ডকুমেন্ট ব্যবহার করে একটি আইফ্রেমের মধ্যে সেই কোডটি লোড করতে পারেন। অফস্ক্রিন ডকুমেন্টে, সাধারণ অথেনটিকেশন ফ্লো প্রয়োগ করুন এবং অফস্ক্রিন ডকুমেন্ট থেকে ফলাফলটি প্রক্সি করে এক্সটেনশনে ফেরত পাঠান।

এই নির্দেশিকায় উদাহরণ হিসেবে signInWithPopup ব্যবহার করা হয়েছে, কিন্তু একই ধারণা অন্যান্য প্রমাণীকরণ পদ্ধতির ক্ষেত্রেও প্রযোজ্য।

শুরু করার আগে

এই কৌশলটির জন্য আপনাকে ওয়েবে উপলব্ধ একটি ওয়েব পেজ তৈরি করতে হবে, যা আপনি একটি আইফ্রেমের (iframe) মধ্যে লোড করবেন। এর জন্য যেকোনো হোস্টই কাজ করে, যার মধ্যে ফায়ারবেস হোস্টিংও (Firebase Hosting ) অন্তর্ভুক্ত। নিম্নলিখিত বিষয়বস্তু দিয়ে একটি ওয়েবসাইট তৈরি করুন:

<!DOCTYPE html>
<html>
  <head>
    <title>signInWithPopup</title>
    <script src="signInWithPopup.js"></script>
  </head>
  <body><h1>signInWithPopup</h1></body>
</html>

ফেডারেটেড সাইন ইন

আপনি যদি ফেডারেটেড সাইন-ইন, যেমন গুগল, অ্যাপল, স্যামল (SAML), বা ওআইডিসি (OIDC) ব্যবহার করেন, তাহলে আপনাকে অবশ্যই আপনার ক্রোম এক্সটেনশন আইডিটি অনুমোদিত ডোমেইনের তালিকায় যুক্ত করতে হবে:

  1. Firebase কনসোলে, Security > Authentication- এ যান।

  2. সেটিংস ট্যাবের অনুমোদিত ডোমেইন বিভাগে, 'ডোমেইন যোগ করুন'- এ ক্লিক করুন, তারপর নিম্নলিখিতের মতো একটি URI যোগ করুন:

    chrome-extension://CHROME_EXTENSION_ID

আপনার Chrome এক্সটেনশনের ম্যানিফেস্ট ফাইলে content_security_policy allowlist-এ নিম্নলিখিত URL-গুলি যোগ করা নিশ্চিত করুন:

  • https://apis.google.com
  • https://www.gstatic.com
  • https://www.googleapis.com
  • https://securetoken.googleapis.com

প্রমাণীকরণ বাস্তবায়ন করুন

আপনার HTML ডকুমেন্টে, signInWithPopup.js হলো সেই জাভাস্ক্রিপ্ট কোড যা অথেনটিকেশন পরিচালনা করে। এক্সটেনশনে সরাসরি সমর্থিত একটি মেথড প্রয়োগ করার দুটি ভিন্ন উপায় রয়েছে:

  • আপনার এক্সটেনশন কোডে, যেমন ব্যাকগ্রাউন্ড স্ক্রিপ্ট, সার্ভিস ওয়ার্কার বা পপআপ স্ক্রিপ্টে, firebase/auth/web-extension ব্যবহার করুন। firebase/auth শুধুমাত্র আপনার অফস্ক্রিন আইফ্রেমের ভিতরে ব্যবহার করুন, কারণ সেই আইফ্রেমটি একটি স্ট্যান্ডার্ড ওয়েব পেজ কনটেক্সটে চলে।
  • অথেনটিকেশন অনুরোধ এবং প্রতিক্রিয়া প্রক্সি করার জন্য, অথেনটিকেশন লজিকটিকে একটি postMessage লিসেনারের মধ্যে রাখুন। 
import { signInWithPopup, GoogleAuthProvider, getAuth } from'firebase/auth';
import { initializeApp } from 'firebase/app';
import firebaseConfig from './firebaseConfig.js'

const app = initializeApp(firebaseConfig);
const auth = getAuth();

// This code runs inside of an iframe in the extension's offscreen document.
// This gives you a reference to the parent frame, i.e. the offscreen document.
// You will need this to assign the targetOrigin for postMessage.
const PARENT_FRAME = document.location.ancestorOrigins[0];

// This demo uses the Google auth provider, but any supported provider works.
// Make sure that you enable any provider you want to use in the Firebase Console.
// https://console.firebase.google.com/project/_/authentication/providers
const PROVIDER = new GoogleAuthProvider();

function sendResponse(result) {
  globalThis.parent.self.postMessage(JSON.stringify(result), PARENT_FRAME);
}

globalThis.addEventListener('message', function({data}) {
  if (data.initAuth) {
    // Opens the Google sign-in page in a popup, inside of an iframe in the
    // extension's offscreen document.
    // To centralize logic, all respones are forwarded to the parent frame,
    // which goes on to forward them to the extension's service worker.
    signInWithPopup(auth, PROVIDER)
      .then(sendResponse)
      .catch(sendResponse)
  }
});

আপনার ক্রোম এক্সটেনশন তৈরি করুন

আপনার ওয়েবসাইটটি লাইভ হয়ে গেলে, আপনি এটি আপনার ক্রোম এক্সটেনশনে ব্যবহার করতে পারবেন।

  1. আপনার manifest.json ফাইলে offscreen পারমিশন যোগ করুন: 
    2.     {
      "name": "signInWithPopup Demo",
      "manifest_version" 3,
      "background": {
        "service_worker": "background.js"
      },
      "permissions": [
        "offscreen"
      ]
    }
  2. অফস্ক্রিন ডকুমেন্টটি তৈরি করুন। এটি আপনার এক্সটেনশন প্যাকেজের ভিতরে থাকা একটি ন্যূনতম HTML ফাইল যা আপনার অফস্ক্রিন ডকুমেন্টের জাভাস্ক্রিপ্টের লজিক লোড করে: 
    3.     <!DOCTYPE html>
    <script src="./offscreen.js"></script>
  3. আপনার এক্সটেনশন প্যাকেজে offscreen.js অন্তর্ভুক্ত করুন। এটি ধাপ ১-এ তৈরি করা পাবলিক ওয়েবসাইট এবং আপনার এক্সটেনশনের মধ্যে প্রক্সি হিসেবে কাজ করে। 
    4.     // This URL must point to the public site
    const _URL = 'https://example.com/signInWithPopupExample';
    const iframe = document.createElement('iframe');
    iframe.src = _URL;
    document.documentElement.appendChild(iframe);
    chrome.runtime.onMessage.addListener(handleChromeMessages);

    function handleChromeMessages(message, sender, sendResponse) {
      // Extensions may have an number of other reasons to send messages, so you
      // should filter out any that are not meant for the offscreen document.
      if (message.target !== 'offscreen') {
        return false;
      }

      function handleIframeMessage({data}) {
        try {
          if (data.startsWith('!_{')) {
            // Other parts of the Firebase library send messages using postMessage.
            // You don't care about them in this context, so return early.
            return;
          }
          data = JSON.parse(data);
          self.removeEventListener('message', handleIframeMessage);

          sendResponse(data);
        } catch (e) {
          console.log(`json parse failed - ${e.message}`);
        }
      }

      globalThis.addEventListener('message', handleIframeMessage, false);

      // Initialize the authentication flow in the iframed document. You must set the
      // second argument (targetOrigin) of the message in order for it to be successfully
      // delivered.
      iframe.contentWindow.postMessage({"initAuth": true}, new URL(_URL).origin);
      return true;
    }
  4. আপনার background.js সার্ভিস ওয়ার্কার থেকে অফস্ক্রিন ডকুমেন্টটি সেট আপ করুন। 
    5.     import { getAuth } from 'firebase/auth/web-extension';

    const OFFSCREEN_DOCUMENT_PATH = '/offscreen.html';

    // A global promise to avoid concurrency issues
    let creatingOffscreenDocument;

    // Chrome only allows for a single offscreenDocument. This is a helper function
    // that returns a boolean indicating if a document is already active.
    async function hasDocument() {
      // Check all windows controlled by the service worker to see if one
      // of them is the offscreen document with the given path
      const matchedClients = await clients.matchAll();
      return matchedClients.some(
        (c) => c.url === chrome.runtime.getURL(OFFSCREEN_DOCUMENT_PATH)
      );
    }

    async function setupOffscreenDocument(path) {
      // If we do not have a document, we are already setup and can skip
      if (!(await hasDocument())) {
        // create offscreen document
        if (creating) {
          await creating;
        } else {
          creating = chrome.offscreen.createDocument({
            url: path,
            reasons: [
                chrome.offscreen.Reason.DOM_SCRAPING
            ],
            justification: 'authentication'
          });
          await creating;
          creating = null;
        }
      }
    }

    async function closeOffscreenDocument() {
      if (!(await hasDocument())) {
        return;
      }
      await chrome.offscreen.closeDocument();
    }

    function getAuth() {
      return new Promise(async (resolve, reject) => {
        const auth = await chrome.runtime.sendMessage({
          type: 'firebase-auth',
          target: 'offscreen'
        });
        auth?.name !== 'FirebaseError' ? resolve(auth) : reject(auth);
      })
    }

    async function firebaseAuth() {
      await setupOffscreenDocument(OFFSCREEN_DOCUMENT_PATH);

      const auth = await getAuth()
        .then((auth) => {
          console.log('User Authenticated', auth);
          return auth;
        })
        .catch(err => {
          if (err.code === 'auth/operation-not-allowed') {
            console.error('You must enable an OAuth provider in the Firebase' +
                          ' console in order to use signInWithPopup. This sample' +
                          ' uses Google by default.');
          } else {
            console.error(err);
            return err;
          }
        })
        .finally(closeOffscreenDocument)

      return auth;
    }

    এখন, যখন আপনি আপনার সার্ভিস ওয়ার্কারের মধ্যে firebaseAuth() কল করবেন, তখন এটি অফস্ক্রিন ডকুমেন্ট তৈরি করবে এবং একটি আইফ্রেমে সাইটটি লোড করবে। সেই আইফ্রেমটি ব্যাকগ্রাউন্ডে প্রসেস হতে থাকবে এবং ফায়ারবেস স্ট্যান্ডার্ড অথেন্টিকেশন ফ্লো অনুসরণ করবে। একবার এটি রিজলভ বা রিজেক্ট হয়ে গেলে, অফস্ক্রিন ডকুমেন্ট ব্যবহার করে অথেন্টিকেশন অবজেক্টটি আপনার আইফ্রেম থেকে সার্ভিস ওয়ার্কারে প্রক্সি করা হবে।