Bir Chrome uzantısında Firebase ile kimlik doğrulaması yapın

Bu belge, Manifest V3 kullanan bir Chrome uzantısında kullanıcıların oturumunu açmak için Firebase Authentication'ı nasıl kullanacağınızı gösterir.

Firebase Kimlik Doğrulaması, kullanıcıların bir Chrome uzantısından oturum açması için birden fazla kimlik doğrulama yöntemi sağlar; bunlardan bazıları diğerlerinden daha fazla geliştirme çabası gerektirir.

Manifest V3 Chrome uzantısında aşağıdaki yöntemleri kullanmak için bunları yalnızca firebase/auth/web-extension içe aktarmanız gerekir:

  • E-posta ve şifreyle oturum açın ( createUserWithEmailAndPassword ve signInWithEmailAndPassword )
  • E-posta bağlantısıyla oturum açın ( sendSignInLinkToEmail , isSignInWithEmailLink signInWithEmailLink )
  • Anonim olarak oturum açın ( signInAnonymously )
  • Özel bir kimlik doğrulama sistemiyle oturum açın ( signInWithCustomToken )
  • Sağlayıcı oturum açma işlemini bağımsız olarak gerçekleştirin ve ardından signInWithCredential kullanın

Aşağıdaki oturum açma yöntemleri de desteklenmektedir ancak bazı ek çalışmalar gerektirir:

  • Açılır pencereyle oturum açın ( signInWithPopup , linkWithPopup ve reauthenticateWithPopup )
  • Oturum açma sayfasına ( signInWithRedirect , linkWithRedirect ve reauthenticateWithRedirect ) yönlendirerek oturum açın.
  • reCAPTCHA ile Telefon Numarasıyla oturum açın
  • reCAPTCHA ile SMS çok faktörlü kimlik doğrulama
  • reCAPTCHA Kurumsal koruma

Bu yöntemleri Manifest V3 Chrome uzantısında kullanmak için Ekran Dışı Belgeler'i kullanmanız gerekir.

Firebase/auth/web uzantısı giriş noktasını kullanın

firebase/auth/web-extension içe aktarma, kullanıcıların bir Chrome uzantısından oturum açmasını bir web uygulamasına benzer hale getirir.

firebase/auth/web-extension yalnızca Web SDK'sının v10.8.0 ve üzeri sürümlerinde desteklenir.

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

Ekran Dışındaki Belgeleri Kullan

signInWithPopup , linkWithPopup ve reauthenticateWithPopup gibi bazı kimlik doğrulama yöntemleri, kodun uzantı paketinin dışından yüklenmesini gerektirdiğinden Chrome uzantılarıyla doğrudan uyumlu değildir. Manifest V3'ten itibaren buna izin verilmez ve uzantı platformu tarafından engellenir. Bu sorunu aşmak için ekran dışı bir belge kullanarak bu kodu bir iframe içine yükleyebilirsiniz. Ekran dışı belgede normal kimlik doğrulama akışını uygulayın ve ekran dışı belgedeki sonucu uzantıya geri proxy olarak gönderin.

Bu kılavuzda örnek olarak signInWithPopup kullanılmıştır ancak aynı kavram diğer kimlik doğrulama yöntemleri için de geçerlidir.

Sen başlamadan önce

Bu teknik, web'de bulunan ve iframe'e yükleyeceğiniz bir web sayfası oluşturmanızı gerektirir. Firebase Hosting de dahil olmak üzere herhangi bir ana makine bunun için çalışır. Aşağıdaki içeriğe sahip bir web sitesi oluşturun:

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

Federe oturum açma

Google, Apple, SAML veya OIDC ile oturum açma gibi birleştirilmiş oturum açma özelliğini kullanıyorsanız Chrome uzantı kimliğinizi yetkili alanlar listesine eklemeniz gerekir:

  1. Projenizi Firebase konsolunda açın.
  2. Kimlik Doğrulama bölümünde Ayarlar sayfasını açın.
  3. Yetkili Etki Alanları listesine aşağıdakine benzer bir URI ekleyin:
    chrome-extension://CHROME_EXTENSION_ID

Chrome uzantınızın manifest dosyasında aşağıdaki URL'leri content_security_policy izin verilenler listesine eklediğinizden emin olun:

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

Kimlik doğrulamayı uygulayın

HTML belgenizdeki SignInWithPopup.js, kimlik doğrulamayı yöneten JavaScript kodudur. Uzantıda doğrudan desteklenen bir yöntemi uygulamanın iki farklı yolu vardır:

  • Firebase firebase/auth/web-extension yerine firebase/auth kullanın. web-extension giriş noktası, uzantı içinde çalışan kod içindir. Bu kod sonuçta uzantıda (bir iframe'de, ekran dışı belgenizde) çalışsa da, içinde çalıştığı bağlam standart web'dir.
  • Kimlik doğrulama isteğini ve yanıtını proxy olarak kullanmak için kimlik doğrulama mantığını bir postMessage dinleyicisine sarın.
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)
  }
});

Chrome Uzantınızı oluşturun

Web siteniz yayına girdikten sonra Chrome Uzantınızda kullanabilirsiniz.

  1. Manifest.json dosyanıza offscreen iznini ekleyin:
    2.     {
      "name": "signInWithPopup Demo",
      "manifest_version" 3,
      "background": {
        "service_worker": "background.js"
      },
      "permissions": [
        "offscreen"
      ]
    }
  2. Ekran dışı belgenin kendisini oluşturun. Bu, uzantı paketinizin içindeki, ekran dışı belge JavaScript'inizin mantığını yükleyen minimal bir HTML dosyasıdır:
    3.     <!DOCTYPE html>
    <script src="./offscreen.js"></script>
  3. Uzantı paketinize offscreen.js ekleyin. 1. adımda kurulan genel web sitesi ile uzantınız arasında proxy görevi görür.
    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. Arka plan.js hizmet çalışanınızdan ekran dışı belgeyi ayarlayın.
    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;
    }

    Artık hizmet çalışanınızın içinden firebaseAuth() öğesini çağırdığınızda, ekran dışı belgeyi oluşturacak ve siteyi bir iframe'e yükleyecektir. Bu iframe arka planda işlenecek ve Firebase standart kimlik doğrulama akışından geçecektir. Sorun çözüldükten veya reddedildikten sonra, kimlik doğrulama nesnesi ekran dışı belge kullanılarak iframe'inizden hizmet çalışanınıza proxy olarak aktarılacaktır.