1. Einrichten
Quellcode abrufen
In diesem Codelab beginnen Sie mit einer fast vollständigen Version der Friendly Chat-Beispiel-App. Als Erstes müssen Sie also den Quellcode klonen:
$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security
Wechseln Sie dann in das Verzeichnis security-start
, in dem Sie für den Rest dieses Codelabs arbeiten werden:
$ cd codelab-friendlychat-web/security-start
Installieren Sie nun die Abhängigkeiten, damit Sie den Code ausführen können. Wenn Sie eine langsamere Internetverbindung haben, kann dies ein bis zwei Minuten dauern:
$ npm install && (cd functions && npm install)
Dieses Repository kennenlernen
Das Verzeichnis security-solution/
enthält den vollständigen Code für die Beispiel-App. Im Verzeichnis security-start
arbeiten Sie das Codelab durch. Dort fehlen einige wichtige Teile der Authentifizierungsimplementierung. Die wichtigsten Dateien und Funktionen in security-start/
und security-solution/
sind:
functions/index.js
enthält Cloud Functions-Code und ist der Ort, an dem Sie Funktionen zum Blockieren der Authentifizierung schreiben.public/
: Enthält die statischen Dateien für Ihre Chat-App.public/scripts/main.js
: Hier wird der JS-Code (src/index.js
) Ihrer Chat-App kompiliert.src/firebase-config.js
– enthält das Firebase-Konfigurationsobjekt, das zum Initialisieren Ihrer Chat-App verwendet wird.src/index.js
: Ihr JS-Code für die Chat-App
Firebase CLI herunterladen
Die Emulator Suite ist Teil der Firebase CLI (Befehlszeile), die mit dem folgenden Befehl auf Ihrem Computer installiert werden kann:
$ npm install -g firebase-tools@latest
Erstellen Sie das JavaScript mit Webpack. Dadurch wird die Datei „main.js“ im Verzeichnis „public/scripts/“ erstellt.
webpack build
Prüfen Sie als Nächstes, ob Sie die aktuelle Version der CLI haben. Dieses Codelab funktioniert mit Version 11.14 oder höher.
$ firebase --version 11.14.2
Mit Ihrem Firebase-Projekt verbinden
Neues Firebase-Projekt erstellen
- Melden Sie sich mit Ihrem Google-Konto in der Firebase Console an.
- Klicken Sie auf die Schaltfläche, um ein neues Projekt zu erstellen, und geben Sie dann einen Projektnamen ein (z. B.
Authentication MFA Codelab
).
- Klicken Sie auf Weiter.
- Lesen und akzeptieren Sie bei Aufforderung die Firebase-Nutzungsbedingungen und klicken Sie dann auf Weiter.
- (Optional) Aktivieren Sie die KI-Unterstützung in der Firebase Console (als „Gemini in Firebase“ bezeichnet).
- Für dieses Codelab benötigen Sie kein Google Analytics. Deaktivieren Sie daher die Google Analytics-Option.
- Klicken Sie auf Projekt erstellen, warten Sie, bis Ihr Projekt bereitgestellt wurde, und klicken Sie dann auf Weiter.
Code mit Ihrem Firebase-Projekt verbinden
Jetzt müssen Sie diesen Code mit Ihrem Firebase-Projekt verknüpfen. Führen Sie zuerst den folgenden Befehl aus, um sich in der Firebase CLI anzumelden:
$ firebase login
Führen Sie als Nächstes den folgenden Befehl aus, um einen Projektalias zu erstellen. Ersetzen Sie $YOUR_PROJECT_ID
durch die ID Ihres Firebase-Projekts.
$ firebase use $YOUR_PROJECT_ID
Jetzt können Sie die App ausführen.
2. Emulatoren ausführen
In diesem Abschnitt führen Sie die App lokal aus. Das bedeutet, dass es an der Zeit ist, die Emulator Suite zu starten.
Emulatoren starten
Führen Sie im Quellverzeichnis des Codelabs den folgenden Befehl aus, um die Emulatoren zu starten:
$ firebase emulators:start
Ihre App wird dann unter http://127.0.0.1:5170 bereitgestellt und der Quellcode wird bei jeder Änderung neu erstellt. Sie müssen nur Ihren Browser lokal vollständig aktualisieren (Strg+Umschalt+R), um die Änderungen zu sehen.
Die Ausgabe sollte in etwa so aussehen:
i emulators: Starting emulators: auth, functions, firestore, hosting, storage ✔ functions: Using node@16 from host. i firestore: Firestore Emulator logging to firestore-debug.log ✔ firestore: Firestore Emulator UI websocket is running on 9150. i hosting[demo-example]: Serving hosting files from: ./public ✔ hosting[demo-example]: Local server: http://127.0.0.1:5170 i ui: Emulator UI logging to ui-debug.log i functions: Watching "[...]" for Cloud Functions... ✔ functions: Loaded functions definitions from source: beforecreated. ✔ functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated). i Running script: npm start > security@1.0.0 start > webpack --watch --progress [...] webpack 5.50.0 compiled with 1 warning in 990 ms
Wenn die Meldung Alle Emulatoren bereit angezeigt wird, ist die App einsatzbereit.
3. MFA implementieren
Die MFA wurde in diesem Repository teilweise implementiert. Sie fügen den Code hinzu, um einen Nutzer zuerst für die MFA zu registrieren und dann Nutzer, die für die MFA registriert sind, nach einem zweiten Faktor zu fragen.
Öffnen Sie die Datei src/index.js
in Ihrem Editor und suchen Sie die Methode startEnrollMultiFactor()
. Fügen Sie den folgenden Code hinzu, um die reCAPTCHA-Verifizierung einzurichten, die Telefonmissbrauch verhindert. Die reCAPTCHA-Verifizierung ist unsichtbar und wird Nutzern nicht angezeigt:
async function startEnrollMultiFactor(phoneNumber) {
const recaptchaVerifier = new RecaptchaVerifier(
"recaptcha",
{ size: "invisible" },
getAuth()
);
Suchen Sie dann die Methode finishEnrollMultiFactor()
und fügen Sie Folgendes hinzu, um den zweiten Faktor zu registrieren:
// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
// Ask user for the verification code. Then:
const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
// Complete enrollment.
await multiFactor(getAuth().currentUser)
.enroll(multiFactorAssertion)
.catch(function (error) {
alert(`Error finishing second factor enrollment. ${error}`);
throw error;
});
verificationId = null;
}
Suchen Sie als Nächstes die Funktion signIn
und fügen Sie den folgenden Kontrollfluss hinzu, der Nutzer, die für die MFA registriert sind, auffordert, ihren zweiten Faktor einzugeben:
async function signIn() {
// Sign in Firebase using popup auth and Google as the identity provider.
var provider = new GoogleAuthProvider();
await signInWithPopup(getAuth(), provider)
.then(function (userCredential) {
// User successfully signed in and is not enrolled with a second factor.
})
.catch(function (error) {
if (error.code == "auth/multi-factor-auth-required") {
multiFactorResolver = getMultiFactorResolver(getAuth(), error);
displaySecondFactor(multiFactorResolver.hints);
} else {
alert(`Error signing in user. ${error}`);
}
});
}
Der Rest der Implementierung, einschließlich der hier aufgerufenen Funktionen, ist bereits abgeschlossen. Sehen Sie sich den Rest der Datei an, um zu sehen, wie sie funktionieren.
4. Anmeldung mit MFA in den Emulatoren testen
Probieren Sie jetzt die MFA-Implementierung aus. Prüfen Sie, ob Ihre Emulatoren noch ausgeführt werden, und rufen Sie die lokal gehostete App unter localhost:5170
auf. Versuchen Sie, sich anzumelden. Wenn Sie aufgefordert werden, den MFA-Code anzugeben, wird er im Terminalfenster angezeigt.
Da die Emulatoren die Multi-Faktor-Authentifizierung vollständig unterstützen, kann Ihre Entwicklungsumgebung vollständig in sich geschlossen sein.
Weitere Informationen zur Implementierung der MFA finden Sie in unserer Referenzdokumentation.
5. Blockierfunktion erstellen
Einige Anwendungen sind nur für eine bestimmte Nutzergruppe vorgesehen. In solchen Fällen möchten Sie möglicherweise benutzerdefinierte Anforderungen für die Registrierung oder Anmeldung eines Nutzers in Ihrer App erstellen.
Genau das bieten Blockierfunktionen: eine Möglichkeit, benutzerdefinierte Authentifizierungsanforderungen zu erstellen. Es handelt sich um Cloud Functions, die im Gegensatz zu den meisten Funktionen synchron ausgeführt werden, wenn ein Nutzer versucht, sich zu registrieren oder anzumelden.
Wenn Sie eine blockierende Funktion erstellen möchten, öffnen Sie functions/index.js
in Ihrem Editor und suchen Sie nach der auskommentierten Funktion beforecreated
.
Ersetzen Sie ihn durch diesen Code, der nur Nutzern mit der Domain „beispiel.de“ das Erstellen eines Kontos erlaubt:
exports.beforecreated = beforeUserCreated((event) => {
const user = event.data;
// Only users of a specific domain can sign up.
if (!user.email || !user.email.endsWith("@example.com")) {
throw new HttpsError("invalid-argument", "Unauthorized email");
}
});
6. Blockierfunktion in den Emulatoren ausprobieren
Wenn Sie die Blockierungsfunktion ausprobieren möchten, müssen Ihre Emulatoren ausgeführt werden. Melden Sie sich in der Web-App unter localhost:5170
ab.
Versuchen Sie dann, ein Konto mit einer E‑Mail-Adresse zu erstellen, die nicht auf example.com
endet. Die Blockierfunktion verhindert, dass der Vorgang erfolgreich ausgeführt wird.
Versuchen Sie es jetzt noch einmal mit einer E-Mail-Adresse, die mit example.com
endet. Das Konto wird erstellt.
Mit Blockierfunktionen können Sie beliebige Einschränkungen für die Authentifizierung erstellen. Weitere Informationen finden Sie in der Referenzdokumentation.
Zusammenfassung
Gut gemacht! Sie haben einer Web-App die Multi-Faktor-Authentifizierung hinzugefügt, um Nutzern zu helfen, ihr Konto zu schützen. Anschließend haben Sie benutzerdefinierte Anforderungen für die Registrierung von Nutzern mithilfe von blockierenden Funktionen erstellt. Du hast dir ein GIF verdient!