Memproses login pengguna dari ekstensi Chrome

Dokumen ini menunjukkan cara menggunakan Identity Platform untuk memproses login pengguna ke ekstensi Chrome yang menggunakan Manifest V3.

Identity Platform menyediakan beberapa metode autentikasi untuk memproses login pengguna dari ekstensi Chrome, beberapa metode pengembangan memerlukan lebih banyak upaya pengembangan daripada yang lain.

Untuk menggunakan metode berikut dalam ekstensi Chrome Manifes V3, Anda hanya perlu mengimpornya dari firebase/auth/web-extension:

  • Login dengan email dan sandi (createUserWithEmailAndPassword dan signInWithEmailAndPassword)
  • Login dengan link email (sendSignInLinkToEmail, isSignInWithEmailLink, dan signInWithEmailLink)
  • Login secara anonim (signInAnonymously)
  • Login dengan sistem autentikasi kustom (signInWithCustomToken)
  • Tangani login penyedia secara independen, lalu gunakan signInWithCredential

Metode login berikut juga didukung, tetapi memerlukan beberapa upaya tambahan:

  • Login dengan jendela pop-up (signInWithPopup, linkWithPopup, dan reauthenticateWithPopup)
  • Login dengan beralih ke halaman login (signInWithRedirect, linkWithRedirect, dan reauthenticateWithRedirect)
  • Login dengan Nomor Telepon menggunakan reCAPTCHA
  • Autentikasi multi-faktor SMS dengan reCAPTCHA
  • Perlindungan reCAPTCHA Enterprise

Untuk menggunakan metode ini dalam ekstensi Chrome Manifes V3, Anda harus menggunakan Dokumen Offscreen.

Gunakan titik entri firebase/auth/web-extension

Mengimpor dari firebase/auth/web-extension akan membuat pengguna yang login dari ekstensi Chrome mirip dengan login melalui aplikasi web.

firebase/auth/web-extension hanya didukung di Web SDK versi v10.8.0 dan yang lebih baru.

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

Gunakan Dokumen Di Balik Layar

Beberapa metode autentikasi, seperti signInWithPopup, linkWithPopup, dan reauthenticateWithPopup, tidak kompatibel langsung dengan ekstensi Chrome, karena memerlukan kode untuk dimuat dari luar paket ekstensi. Mulai Manifes V3, tindakan ini tidak diizinkan dan akan diblokir oleh platform ekstensi. Untuk mengatasi hal ini, Anda dapat memuat kode tersebut dalam iframe menggunakan dokumen offscreen. Dalam dokumen offscreen, implementasikan alur autentikasi normal dan proxy hasil dari dokumen di balik layar ke ekstensi.

Panduan ini menggunakan signInWithPopup sebagai contoh, tetapi konsep yang sama berlaku untuk metode autentikasi lainnya.

Sebelum memulai

Teknik ini mengharuskan Anda menyiapkan halaman web yang tersedia di web, yang akan dimuat dalam iframe. Host apa pun dapat melakukannya, termasuk Firebase Hosting. Buat situs dengan konten berikut:

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

Login gabungan

Jika menggunakan login gabungan, seperti login dengan Google, Apple, SAML, atau OIDC, Anda harus menambahkan ID ekstensi Chrome ke daftar domain yang diberi otorisasi:

  1. Buka halaman Settings Identity Platform di Konsol Google Cloud.

    Buka halaman Setelan

  2. Pilih tab Keamanan.

  3. Di bagian Domain yang Diotorisasi, klik Tambahkan Domain.

  4. Masukkan URI ekstensi Anda. Tampilan tersebut akan terlihat seperti chrome-extension://CHROME_EXTENSION_ID.

  5. Klik Tambahkan.

Di file manifes ekstensi Chrome, pastikan Anda menambahkan URL berikut ke daftar yang diizinkan content_security_policy:

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

Terapkan autentikasi

Dalam dokumen HTML, signInWithPopup.js adalah kode JavaScript yang menangani autentikasi. Ada dua cara untuk mengimplementasikan metode yang didukung langsung dalam ekstensi:

  • Gunakan firebase/auth, bukan firebase/auth/web-extension. Titik entri web-extension adalah untuk kode yang berjalan dalam ekstensi. Meskipun kode ini pada akhirnya berjalan di ekstensi (dalam iframe, dalam dokumen offscreen Anda), konteks tempat kode dijalankan adalah web standar.
  • Menggabungkan logika autentikasi di pemroses postMessage untuk melakukan proxy permintaan dan respons autentikasi.
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)
  }
});

Bangun Ekstensi Chrome Anda

Setelah situs aktif, Anda dapat menggunakannya di Ekstensi Chrome.

  1. Tambahkan izin offscreen ke file manifest.json:
    2.     {
      "name": "signInWithPopup Demo",
      "manifest_version" 3,
      "background": {
        "service_worker": "background.js"
      },
      "permissions": [
        "offscreen"
      ]
    }
  2. Membuat dokumen di balik layar. Ini adalah file HTML minimal di dalam paket ekstensi Anda yang memuat logika JavaScript dokumen di balik layar:
    3.     <!DOCTYPE html>
    <script src="./offscreen.js"></script>
  3. Sertakan offscreen.js dalam paket ekstensi Anda. Tag Assistant berfungsi sebagai proxy antara situs publik yang disiapkan di langkah 1 dan ekstensi Anda.
    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. Siapkan dokumen di balik layar dari pekerja layanan background.js.
    5.     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;
    }

    Sekarang, saat Anda memanggil firebaseAuth() dalam pekerja layanan, tindakan tersebut akan membuat dokumen di balik layar dan memuat situs dalam iframe. iframe tersebut akan diproses di latar belakang, dan Firebase akan melalui alur autentikasi standar. Setelah diselesaikan atau ditolak, objek autentikasi akan di-proxy-kan dari iframe ke service worker menggunakan dokumen di balik layar.