Google-Authentifizierung in einer Chrome-Erweiterung mit Firebase-js-Tutorial-php.cn

Google Authentication in a Chrome Extension with Firebase

Wir schreiben diesen Leitfaden, weil im offiziellen Leitfaden von Google ein paar wichtige Schritte fehlen, die wir unten verlinkt haben:

Authentifizierung mit Firebase in einer Chrome-Erweiterung

Dies funktioniert auf jedem Betriebssystem. Für die Zwecke dieser Anleitung verwenden wir Mac OS

Voraussetzungen

Google Chrome-Browser
Ein Google-Konto
Ein Chrome-Webshop-Entwicklerkonto (5 $ einmalige Gebühr)
Node.js und npm installiert

Schritt 1: Erstellen Sie die Projektstruktur

a) Erstellen Sie ein neues Verzeichnis für Ihr Projekt:

mkdir firebase-chrome-auth
cd firebase-chrome-auth

Nach dem Login kopieren

b) Erstellen Sie zwei Unterverzeichnisse:

mkdir chrome-extension
mkdir firebase-project

Nach dem Login kopieren

Schritt 2: Richten Sie das Firebase-Projekt ein

a)Gehen Sie zur Firebase-Konsole.
b) Klicken Sie auf „Projekt hinzufügen“ und befolgen Sie die Schritte zum Erstellen eines neuen Projekts.
c) Klicken Sie nach der Erstellung auf „Web“, um Ihrem Projekt eine Web-App hinzuzufügen.
d) Registrieren Sie Ihre App mit einem Spitznamen (z. B. „Chrome Extension Auth“).
e) Kopieren Sie das Firebase-Konfigurationsobjekt. Du wirst das später brauchen.

const firebaseConfig = {
  apiKey: "example",
  authDomain: "example.firebaseapp.com",
  projectId: "example",
  storageBucket: "example",
  messagingSenderId: "example",
  appId: "example"
};

Nach dem Login kopieren

f) Navigieren Sie zum Firebase-Projektverzeichnis
cd firebase-project
g)Neues NPM-Projekt initialisieren
npm init -y
h)Firebase installieren:
npm install firebase
i) Erstellen Sie eine index.html-Datei in firebase-project/index.html

<!DOCTYPE html>
<html>
 <head>
  <title>Firebase Auth for Chrome Extension</title>
 </head>
 <body>
  <h1>Firebase Auth for Chrome Extension</h1>
  <script type="module" src="signInWithPopup.js"></script>
 </body>
</html>

Nach dem Login kopieren

j) Erstellen Sie eine signInWithPopup.js-Datei in firebase-project/signInWithPopup.js

import { initializeApp } from 'firebase/app';
import { getAuth, signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const firebaseConfig = {
  // Your web app's Firebase configuration
  // Replace with the config you copied from Firebase Console
};

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

// This gives you a reference to the parent frame, i.e. the offscreen document.
const PARENT_FRAME = document.location.ancestorOrigins[0];

const PROVIDER = new GoogleAuthProvider();

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

window.addEventListener('message', function({data}) {
  if (data.initAuth) {
    signInWithPopup(auth, PROVIDER)
      .then(sendResponse)
      .catch(sendResponse);
  }
});

Nach dem Login kopieren

k) Stellen Sie das Firebase-Projekt bereit

npm install -g firebase-tools
firebase login
firebase init hosting
firebase deploy

Nach dem Login kopieren

Notieren Sie sich die Hosting-URL, die nach der Bereitstellung bereitgestellt wird. Sie benötigen dies für die Chrome-Erweiterung.

Schritt 3: Richten Sie die Chrome-Erweiterung ein

a) Navigieren Sie zum Chrome-Extension-Verzeichnis
cd ../chrome-extension

b) Erstellen Sie eine manifest.json-Datei in chrome-extension/manifest.json

{
  "manifest_version": 3,
  "name": "Firebase Auth Extension",
  "version": "1.0",
  "description": "Chrome extension with Firebase Authentication",
  "permissions": [
    "identity",
    "storage",
    "offscreen"
  ],
  "host_permissions": [
    "https://*.firebaseapp.com/*"
  ],
  "background": {
    "service_worker": "background.js",
    "type": "module"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "web_accessible_resources": [
    {
      "resources": ["offscreen.html"],
      "matches": ["<all_urls>"]
    }
  ],
  "oauth2": {
    "client_id": "YOUR-ID.apps.googleusercontent.com",
    "scopes": [
      "openid", 
      "email", 
      "profile"
    ]
  },
  "key": "-----BEGIN PUBLIC KEY-----\nYOURPUBLICKEY\n-----END PUBLIC KEY-----"
}

Nach dem Login kopieren

c) Erstellen Sie eine popup.html-Datei in chrome-extension/popup.html

<!DOCTYPE html>
<html>
<head>
    <title>Firebase Auth Extension</title>
</head>
<body>
    <h1>Firebase Auth Extension</h1>
    <div id="userInfo"></div>
    <button id="signInButton">Sign In</button>
    <button id="signOutButton" style="display:none;">Sign Out</button>
    <script src="popup.js"></script>
</body>
</html>

Nach dem Login kopieren

d) Erstellen Sie eine popup.js-Datei in chrome-extension/popup.js

document.addEventListener('DOMContentLoaded', function() {
    const signInButton = document.getElementById('signInButton');
    const signOutButton = document.getElementById('signOutButton');
    const userInfo = document.getElementById('userInfo');

    function updateUI(user) {
        if (user) {
            userInfo.textContent = `Signed in as: ${user.email}`;
            signInButton.style.display = 'none';
            signOutButton.style.display = 'block';
        } else {
            userInfo.textContent = 'Not signed in';
            signInButton.style.display = 'block';
            signOutButton.style.display = 'none';
        }
    }

    chrome.storage.local.get(['user'], function(result) {
        updateUI(result.user);
    });

    signInButton.addEventListener('click', function() {
        chrome.runtime.sendMessage({action: 'signIn'}, function(response) {
            if (response.user) {
                updateUI(response.user);
            }
        });
    });

    signOutButton.addEventListener('click', function() {
        chrome.runtime.sendMessage({action: 'signOut'}, function() {
            updateUI(null);
        });
    });
});

Nach dem Login kopieren

e) Erstellen Sie eine Datei „background.js“ in chrome-extension/background.js

const OFFSCREEN_DOCUMENT_PATH = 'offscreen.html';
const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app'; // Replace with your Firebase hosting URL

let creatingOffscreenDocument;

async function hasOffscreenDocument() {
    const matchedClients = await clients.matchAll();
    return matchedClients.some((client) => client.url.endsWith(OFFSCREEN_DOCUMENT_PATH));
}

async function setupOffscreenDocument() {
    if (await hasOffscreenDocument()) return;

    if (creatingOffscreenDocument) {
        await creatingOffscreenDocument;
    } else {
        creatingOffscreenDocument = chrome.offscreen.createDocument({
            url: OFFSCREEN_DOCUMENT_PATH,
            reasons: [chrome.offscreen.Reason.DOM_SCRAPING],
            justification: 'Firebase Authentication'
        });
        await creatingOffscreenDocument;
        creatingOffscreenDocument = null;
    }
}

async function getAuthFromOffscreen() {
    await setupOffscreenDocument();
    return new Promise((resolve, reject) => {
        chrome.runtime.sendMessage({action: 'getAuth', target: 'offscreen'}, (response) => {
            if (chrome.runtime.lastError) {
                reject(chrome.runtime.lastError);
            } else {
                resolve(response);
            }
        });
    });
}

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'signIn') {
        getAuthFromOffscreen()
            .then(user => {
                chrome.storage.local.set({user: user}, () => {
                    sendResponse({user: user});
                });
            })
            .catch(error => {
                console.error('Authentication error:', error);
                sendResponse({error: error.message});
            });
        return true; // Indicates we will send a response asynchronously
    } else if (message.action === 'signOut') {
        chrome.storage.local.remove('user', () => {
            sendResponse();
        });
        return true;
    }
});

Nach dem Login kopieren

f) Erstellen Sie eine offscreen.html-Datei in chrome-extension/offscreen.html

<!DOCTYPE html>
<html>
<head>
    <title>Offscreen Document</title>
</head>
<body>
    <script src="offscreen.js"></script>
</body>
</html>

Nach dem Login kopieren

g) Erstellen Sie eine offscreen.js-Datei in _chrome-extension/offscreen.js
_

const FIREBASE_HOSTING_URL = 'https://your-project-id.web.app'; // Replace with your Firebase hosting URL

const iframe = document.createElement('iframe');
iframe.src = FIREBASE_HOSTING_URL;
document.body.appendChild(iframe);

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === 'getAuth' && message.target === 'offscreen') {
        function handleIframeMessage({data}) {
            try {
                const parsedData = JSON.parse(data);
                window.removeEventListener('message', handleIframeMessage);
                sendResponse(parsedData.user);
            } catch (e) {
                console.error('Error parsing iframe message:', e);
            }
        }

        window.addEventListener('message', handleIframeMessage);
        iframe.contentWindow.postMessage({initAuth: true}, FIREBASE_HOSTING_URL);
        return true; // Indicates we will send a response asynchronously
    }
});

Nach dem Login kopieren

Schritt 4: Konfigurieren Sie die Firebase-Authentifizierung

a) Gehen Sie in der Firebase-Konsole zu Authentifizierung > Anmeldemethode.
b)Aktivieren Sie Google als Anmeldeanbieter.
c) Fügen Sie die ID Ihrer Chrome-Erweiterung zur Liste der autorisierten Domänen hinzu:
Das Format ist: chrome-extension://YOUR_EXTENSION_ID
Sie finden Ihre Erweiterungs-ID auf der Erweiterungsverwaltungsseite von Chrome, nachdem Sie sie als entpackte Erweiterung geladen haben.

Schritt 5: Laden und testen Sie die Erweiterung

a)Öffnen Sie Google Chrome und gehen Sie zu chrome://extensions/.
b)Aktivieren Sie „Entwicklermodus“ in der oberen rechten Ecke.
c) Klicken Sie auf „Entpackt laden“ und wählen Sie Ihr Chrome-Erweiterungsverzeichnis aus.
d) Klicken Sie auf das Erweiterungssymbol in der Chrome-Symbolleiste, um das Popup zu öffnen.
e) Klicken Sie auf die Schaltfläche „Anmelden“ und testen Sie den Authentifizierungsablauf.

Fehlerbehebung

Wenn Sie auf CORS-Probleme stoßen, stellen Sie sicher, dass Ihre Firebase-Hosting-URL sowohl in „background.js“ als auch „offscreen.js“ korrekt eingestellt ist.

Stellen Sie sicher, dass die ID Ihrer Chrome-Erweiterung korrekt zu den autorisierten Firebase-Domänen hinzugefügt wurde.

Überprüfen Sie die Konsolenprotokolle im Popup, im Hintergrundskript und im Offscreen-Dokument auf Fehlermeldungen.

Abschluss

Sie verfügen jetzt über eine Chrome-Erweiterung, die die Firebase-Authentifizierung mit einem Offscreen-Dokument verwendet, um den Anmeldevorgang abzuwickeln. Dieses Setup ermöglicht eine sichere Authentifizierung, ohne dass vertrauliche Firebase-Konfigurationsdetails direkt im Erweiterungscode offengelegt werden.

Denken Sie daran, Platzhalterwerte (wie YOUR_EXTENSION_ID, YOUR-CLIENT-ID, YOUR_PUBLIC_KEY und your-project-id) durch Ihre tatsächlichen Werte zu ersetzen, bevor Sie Ihre Erweiterung veröffentlichen.

Das obige ist der detaillierte Inhalt vonGoogle-Authentifizierung in einer Chrome-Erweiterung mit Firebase. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!