Heim > Artikel > Web-Frontend > Google-Authentifizierung in einer Chrome-Erweiterung mit Firebase

Google-Authentifizierung in einer Chrome-Erweiterung mit Firebase

WBOYOriginal: 2024-09-06 06:41:31984Durchsuche

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

b) Erstellen Sie zwei Unterverzeichnisse:

mkdir chrome-extension
mkdir firebase-project

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

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>

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

k) Stellen Sie das Firebase-Projekt bereit

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

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-----"
}

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>

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

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

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>

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

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!

json chrome html npm Object if for select format Directory Error register using copy JS console this background web app

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Tag/Tage des Codes: JavaScript-Rückrufe verstehenNächster Artikel：Tag/Tage des Codes: JavaScript-Rückrufe verstehen

In Verbindung stehende Artikel

Mehr sehen