Funktionen der erweiterten Authentifizierung

1. Einrichten

Quellcode abrufen

In diesem Codelab beginnen Sie mit einer fast fertigen Version der Beispiel-App „Friendly Chat“. Als Erstes müssen Sie also den Quellcode klonen:

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Wechseln Sie dann zum Verzeichnis security-start, in dem Sie für den Rest dieses Codelabs arbeiten werden:

$ cd codelab-friendlychat-web/security-start

Installieren Sie jetzt die Abhängigkeiten, damit Sie den Code ausführen können. Bei einer langsameren Internetverbindung kann dies ein bis zwei Minuten dauern:

$ npm install && (cd functions && npm install)

Repository kennenlernen

Das Verzeichnis security-solution/ enthält den vollständigen Code für die Beispiel-App. Im Verzeichnis security-start, in dem Sie das Codelab durcharbeiten, 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 dort schreiben Sie Funktionen zum Blockieren der Authentifizierung.
• public/ – enthält die statischen Dateien für Ihre Chat-App
• public/scripts/main.js – der Ort, an dem der JS-Code Ihrer Chat-App (src/index.js) kompiliert wird
• src/firebase-config.js – enthält das Firebase-Konfigurationsobjekt, mit dem Ihre Chat-App initialisiert wird
• src/index.js – JS-Code Ihrer Chat-App

Firebase CLI herunterladen

Die Emulator Suite ist Teil der Firebase CLI (Befehlszeilen-Oberfläche), 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 im Verzeichnis „public/scripts/“ die Datei „main.js“ erstellt.

webpack build

Prüfen Sie als Nächstes, ob Sie die neueste Version der Befehlszeile haben. Dieses Codelab funktioniert mit Version 11.14 oder höher.

$ firebase --version
11.14.2

Verbindung mit Ihrem Firebase-Projekt herstellen

Wenn Sie noch kein Firebase-Projekt haben, erstellen Sie in der Firebase Console ein neues Firebase-Projekt. Notieren Sie sich die von Ihnen gewählte Projekt-ID, da Sie sie später benötigen.

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. Jetzt ist es an der Zeit, die Emulator Suite zu starten.

Emulatoren starten

Führen Sie im Codelab-Quellverzeichnis den folgenden Befehl aus, um die Emulatoren zu starten:

$ firebase emulators:start

Dadurch wird Ihre App unter http://127.0.0.1:5170 bereitgestellt und der Quellcode wird bei Änderungen kontinuierlich neu erstellt. Sie müssen nur lokal in Ihrem Browser die Tastenkombination „Strg-Umschalt-R“ drücken, 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

Sobald Sie die Meldung Alle Emulatoren bereit sehen, können Sie die App verwenden.

3. MFA implementieren

Die MFA wurde in diesem Repository teilweise implementiert. Sie fügen den Code hinzu, um zuerst einen Nutzer für die Multi-Faktor-Authentifizierung zu registrieren und dann Nutzer, die für die Multi-Faktor-Authentifizierung registriert sind, um einen zweiten Faktor aufzufordern.

HINWEIS: Dies sind die wichtigsten Methoden, die Sie zur Implementierung der MFA verwenden:

• getMultiFactorResolver(): Ermittelt ein MultiFactorResolver-Objekt, das die Anmeldung von Nutzern vereinfacht, wenn sie einen zweiten Faktor angeben müssen.
• verifyPhoneNumber(): Es wird sowohl bei der Registrierung für die MFA als auch bei der Anmeldung eine Bestätigungsnachricht an das Mobiltelefon des Nutzers gesendet.
• resolveSignIn(): Wird verwendet, um die Anmeldung abzuschließen, nachdem der Nutzer den an ihn gesendeten Bestätigungscode angegeben hat.
• enroll(): Wird verwendet, um die MFA-Registrierung abzuschließen, nachdem der Nutzer den an ihn gesendeten Bestätigungscode angegeben hat.

Ö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 Missbrauch von Smartphones verhindert. Die reCAPTCHA-Verifizierung ist auf „unsichtbar“ gesetzt und für Nutzer nicht sichtbar:

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Suchen Sie dann die finishEnrollMultiFactor()-Methode 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, bei dem Nutzer, die die MFA aktiviert haben, aufgefordert werden, 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. Im Rest der Datei sehen Sie, wie sie funktionieren.

4. Anmeldung mit MFA in den Emulatoren testen

Testen Sie jetzt die MFA-Implementierung. Prüfen Sie, ob Ihre Emulatoren noch laufen, 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 in Ihrem Terminalfenster angezeigt.

Da die Emulatoren die Multi-Faktor-Authentifizierung vollständig unterstützen, kann Ihre Entwicklungsumgebung vollständig autark sein.

Weitere Informationen zur Implementierung der MFA finden Sie in unseren Referenzdokumenten.

5. Blockierfunktion erstellen

Einige Anwendungen sind nur für eine bestimmte Nutzergruppe gedacht. In diesen Fällen sollten Sie benutzerdefinierte Anforderungen für die Registrierung oder Anmeldung von Nutzern in Ihrer App festlegen können.

Genau das bieten Blockierfunktionen: eine Möglichkeit, benutzerdefinierte Authentifizierungsanforderungen zu erstellen. Es handelt sich um Cloud Functions, die jedoch im Gegensatz zu den meisten Funktionen synchron ausgeführt werden, wenn ein Nutzer versucht, sich zu registrieren oder anzumelden.

HINWEIS: Mit einer Blockierfunktion können Sie einen Nutzer akzeptieren, ohne ihn zu ändern, oder ihn akzeptieren und ändern. Das ist nützlich, um benutzerdefinierte Berechtigungen anzuwenden oder den Nutzer abzulehnen.

Es gibt zwei Ereignisse, die eine Blockierfunktion auslösen können:

• beforeUserCreated-Ereignisse: werden ausgelöst, bevor ein Nutzerkonto erstellt wird. Damit können Anforderungen für Nutzer zum Erstellen eines Kontos angegeben werden.
• beforeUserSignedIn-Ereignisse: werden ausgelöst, bevor sich ein Nutzer anmeldet. Damit können Anforderungen für die Anmeldung von Nutzern festgelegt werden.

Wenn Sie eine Blockierungsfunktion erstellen möchten, öffnen Sie functions/index.js in Ihrem Editor und suchen Sie die kommentierte Funktion beforecreated.

Ersetzen Sie ihn durch diesen Code, mit dem nur Nutzer mit einer Domain von beispiel.de ein Konto erstellen können:

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 testen

Wenn Sie die Blockierungsfunktion ausprobieren möchten, prüfen Sie, ob Ihre Emulatoren ausgeführt werden, und melden Sie sich in der Webanwendung 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 abgeschlossen wird.

Versuchen Sie es noch einmal mit einer E-Mail-Adresse, die auf example.com endet. Das Konto wird erstellt.

Mit Blockierfunktionen können Sie beliebige Einschränkungen für die Authentifizierung festlegen. Weitere Informationen finden Sie in den Referenzdokumenten.

Zusammenfassung

Gut gemacht! Sie haben einer Webanwendung die Multi-Faktor-Authentifizierung hinzugefügt, damit Nutzer ihr Konto schützen können. Anschließend haben Sie mithilfe von Blockierungsfunktionen benutzerdefinierte Anforderungen für die Registrierung von Nutzern erstellt. Du hast dir ein GIF verdient!