In diesem Dokument erfahren Sie, wie Sie mit Identity Platform Nutzer in einer Chrome-Erweiterung anmelden, die Manifest V3 verwendet.
Identity Platform bietet mehrere Authentifizierungsmethoden für die Anmeldung von Nutzern über eine Chrome-Erweiterung, von denen einige mehr Entwicklungsaufwand erfordern als andere.
Wenn Sie die folgenden Methoden in einer Manifest V3-Chrome-Erweiterung verwenden möchten, müssen Sie sie nur aus firebase/auth/web-extension importieren:
- Mit E-Mail-Adresse und Passwort anmelden (
createUserWithEmailAndPasswordundsignInWithEmailAndPassword) - Mit E-Mail-Link anmelden (
sendSignInLinkToEmail,isSignInWithEmailLinkundsignInWithEmailLink) - Anonym anmelden (
signInAnonymously) - Mit einem benutzerdefinierten Authentifizierungssystem anmelden (
signInWithCustomToken) - Anbieteranmeldung eigenständig verarbeiten und dann
signInWithCredentialverwenden
Die folgenden Anmeldemethoden werden ebenfalls unterstützt, erfordern jedoch zusätzliche Arbeit:
- Mit einem Pop-up-Fenster anmelden (
signInWithPopup,linkWithPopupundreauthenticateWithPopup) - Anmelden über eine Weiterleitung zur Anmeldeseite (
signInWithRedirect,linkWithRedirectundreauthenticateWithRedirect) - Mit Telefonnummer und reCAPTCHA anmelden
- Multi-Faktor-Authentifizierung per SMS mit reCAPTCHA
- reCAPTCHA Enterprise-Schutz
Wenn Sie diese Methoden in einer Manifest V3-Chrome-Erweiterung verwenden möchten, müssen Sie Dokumente außerhalb des Bildschirms verwenden.
Firebase/auth/web-extension-Einstiegspunkt verwenden
Durch das Importieren aus firebase/auth/web-extension wird die Anmeldung von Nutzern über eine Chrome-Erweiterung ähnlich wie eine Webanwendung.
Firebase/auth/web-extension wird erst ab Version 10.8.0 des Web SDK unterstützt.
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;
});
Nicht sichtbare Dokumente verwenden
Einige Authentifizierungsmethoden wie signInWithPopup, linkWithPopup und reauthenticateWithPopup sind nicht direkt mit Chrome-Erweiterungen kompatibel, da Code von außerhalb des Erweiterungspakets geladen werden muss.
Ab Manifest V3 ist dies nicht zulässig und wird von der Erweiterungsplattform blockiert. Sie können dieses Problem umgehen, indem Sie diesen Code in einem iFrame mit einem Offscreen-Dokument laden.
Implementieren Sie im nicht sichtbaren Dokument den normalen Authentifizierungsvorgang und leiten Sie das Ergebnis vom nicht sichtbaren Dokument an die Erweiterung zurück.
In dieser Anleitung wird signInWithPopup als Beispiel verwendet. Das gleiche Konzept gilt jedoch auch für andere Authentifizierungsmethoden.
Hinweise
Bei dieser Technik müssen Sie eine Webseite einrichten, die im Web verfügbar ist und in einem iFrame geladen wird. Dafür kann jeder Host verwendet werden, einschließlich Firebase Hosting. Erstellen Sie eine Website mit folgendem Inhalt:
<!DOCTYPE html>
<html>
<head>
<title>signInWithPopup</title>
<script src="signInWithPopup.js"></script>
</head>
<body><h1>signInWithPopup</h1></body>
</html>
Anmeldung im zusammengeschlossenen Netzwerk
Wenn Sie die föderierte Anmeldung verwenden, z. B. über Google, Apple, SAML oder OIDC, müssen Sie die ID Ihrer Chrome-Erweiterung in die Liste der autorisierten Domains aufnehmen:
Rufen Sie in der Google Cloud Console die Seite Einstellungen der Identity Platform auf.
Wählen Sie den Tab Sicherheit aus.
Klicken Sie unter Autorisierte Domains auf Domain hinzufügen.
Geben Sie den URI der Erweiterung ein. Er sollte etwa folgendermaßen aussehen:
chrome-extension://CHROME_EXTENSION_IDKlicken Sie auf Hinzufügen.
Fügen Sie in der Manifestdatei Ihrer Chrome-Erweiterung die folgenden URLs der Zulassungsliste content_security_policy hinzu:
https://apis.google.comhttps://www.gstatic.comhttps://www.googleapis.comhttps://securetoken.googleapis.com
Authentifizierung implementieren
In Ihrem HTML-Dokument ist signInWithPopup.js der JavaScript-Code für die Authentifizierung. Es gibt zwei Möglichkeiten, eine Methode zu implementieren, die direkt in der Erweiterung unterstützt wird:
- Verwenden Sie
firebase/authstattfirebase/auth/web-extension. Der Einstiegspunktweb-extensionist für Code bestimmt, der innerhalb der Erweiterung ausgeführt wird. Dieser Code wird zwar schließlich in der Erweiterung (in einem iFrame, in Ihrem nicht sichtbaren Dokument) ausgeführt, der Kontext ist jedoch im standardmäßigen Web. - Verpacken Sie die Authentifizierungslogik in einen
postMessage-Listener, um die Authentifizierungsanfrage und -antwort weiterzuleiten.
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-Erweiterung erstellen
Sobald Ihre Website online ist, können Sie sie in der Chrome-Erweiterung verwenden.
- Fügen Sie der Datei „manifest.json“ die Berechtigung
offscreenhinzu: - Erstellen Sie das nicht sichtbare Dokument selbst. Dies ist eine minimale HTML-Datei in deinem Erweiterungspaket, die die Logik des nicht sichtbaren JavaScript-Dokuments deines Dokuments lädt:
- Füge deinem Erweiterungspaket
offscreen.jshinzu. Sie fungiert als Proxy zwischen der in Schritt 1 eingerichteten öffentlichen Website und Ihrer Erweiterung. - Richten Sie das nicht sichtbare Dokument in Ihrem Hintergrund.js-Service Worker ein.
{
"name": "signInWithPopup Demo",
"manifest_version" 3,
"background": {
"service_worker": "background.js"
},
"permissions": [
"offscreen"
]
}
<!DOCTYPE html>
<script src="./offscreen.js"></script>
// 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;
}
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;
}
Wenn Sie nun firebaseAuth() in Ihrem Service Worker aufrufen, wird das nicht sichtbare Dokument erstellt und die Website in einem iFrame geladen. Dieser iFrame wird im Hintergrund verarbeitet und Firebase durchläuft den standardmäßigen Authentifizierungsvorgang. Sobald es behoben oder abgelehnt wurde, wird das Authentifizierungsobjekt mithilfe des nicht sichtbaren Dokuments von Ihrem iFrame an Ihren Service Worker weitergeleitet.