Erweiterte Authentifizierungsfunktionen

1. Einrichten

Holen Sie sich den Quellcode

In diesem Codelab beginnen Sie mit einer Version der Friendly Chat-Beispiel-App, die fast vollständig ist. Sie müssen also zunächst den Quellcode klonen:

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

Wechseln Sie dann in das Verzeichnis security-start , wo 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 oder zwei Minuten dauern:

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

Lernen Sie dieses Repo kennen

Das Verzeichnis security-solution/ enthält den vollständigen Code für die Beispiel-App. Im Verzeichnis security-start arbeiten Sie durch das Codelab und es 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 Authentifizierungsblockierungsfunktionen.
• public/ – enthält die statischen Dateien für Ihre Chat-App
• public/scripts/main.js – wohin der JS-Code Ihrer Chat-App ( src/index.js ) kompiliert wird
• src/firebase-config.js – enthält das Firebase-Konfigurationsobjekt, das zum Initialisieren Ihrer Chat-App verwendet wird
• src/index.js – Ihr Chat-App-JS-Code

Holen Sie sich die Firebase-CLI

Die Emulator Suite ist Teil der Firebase CLI (Befehlszeilenschnittstelle), die mit dem folgenden Befehl auf Ihrem Computer installiert werden kann:

$ npm install -g firebase-tools@latest

Erstellen Sie das Javascript mit Webpack, wodurch main.js im Verzeichnis public/scripts/ erstellt wird.

webpack build

Bestätigen Sie als Nächstes, dass Sie über die neueste Version der CLI verfügen. Dieses Codelab funktioniert mit Version 11.14 oder höher.

$ firebase --version
11.14.2

Stellen Sie eine Verbindung zu Ihrem Firebase-Projekt her

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

Jetzt müssen Sie diesen Code mit Ihrem Firebase-Projekt verbinden. Führen Sie zunächst den folgenden Befehl aus, um sich bei 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. Führen Sie die Emulatoren aus

In diesem Abschnitt führen Sie die App lokal aus. Dies bedeutet, dass es Zeit ist, die Emulator Suite zu starten.

Starten Sie die Emulatoren

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 Ihr Quellcode wird kontinuierlich neu erstellt, wenn Sie Änderungen vornehmen. Sie müssen nur eine harte Aktualisierung (Strg-Umschalt-R) lokal in Ihrem Browser durchführen, um Ihre Änderungen zu sehen.

Sie sollten eine Ausgabe wie diese sehen:

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 die Meldung „Alle Emulatoren bereit“ angezeigt wird, ist die App einsatzbereit.

3. MFA implementieren

MFA wurde in diesem Repo teilweise implementiert. Sie fügen den Code hinzu, um zunächst einen Benutzer bei MFA zu registrieren und dann bei MFA registrierte Benutzer zur Eingabe eines zweiten Faktors aufzufordern.

HINWEIS: Dies sind die primären Methoden, die Sie zum Implementieren von MFA verwenden:

• getMultiFactorResolver() : Ruft ein MultiFactorResolver-Objekt ab, das verwendet wird, um die Benutzeranmeldung zu erleichtern, wenn sie einen zweiten Faktor bereitstellen müssen
• verifyPhoneNumber() : Sendet eine Bestätigungsnachricht an das Telefon des Benutzers sowohl für die MFA-Registrierung als auch für die Anmeldung
• resolveSignIn() : Wird verwendet, um die Anmeldung abzuschließen, nachdem der Benutzer den an ihn gesendeten Bestätigungscode eingegeben hat
• enroll() : Wird verwendet, um die MFA-Registrierung abzuschließen, nachdem der Benutzer den ihm zugesandten Bestätigungscode bereitgestellt hat

Öffnen Sie in Ihrem Editor die Datei src/index.js und suchen Sie die Methode startEnrollMultiFactor() . Fügen Sie den folgenden Code hinzu, um den reCAPTCHA-Verifizierer einzurichten, der Telefonmissbrauch verhindert (der reCAPTCHA-Verifizierer ist unsichtbar eingestellt und für Benutzer nicht sichtbar):

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 bei MFA registrierte Benutzer 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. Um zu sehen, wie sie funktionieren, durchsuchen Sie den Rest der Datei.

4. Probieren Sie die Anmeldung mit MFA in den Emulatoren aus

Probieren Sie jetzt die MFA-Implementierung aus! Stellen Sie sicher, dass Ihre Emulatoren noch ausgeführt werden, und besuchen Sie die lokal gehostete App unter localhost:5170 . Versuchen Sie, sich anzumelden. Wenn Sie zur Eingabe des MFA-Codes aufgefordert werden, wird der MFA-Code in Ihrem Terminalfenster angezeigt.

Da die Emulatoren Multi-Factor Auth vollständig unterstützen, kann Ihre Entwicklungsumgebung völlig eigenständig sein.

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

5. Erstellen Sie eine Sperrfunktion

Einige Anwendungen sind nur für die Verwendung durch eine bestimmte Benutzergruppe gedacht. In diesen Fällen möchten Sie in der Lage sein, benutzerdefinierte Anforderungen für die Registrierung oder Anmeldung eines Benutzers bei Ihrer App zu erstellen.

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

HINWEIS: Eine Blockierungsfunktion kann einen Benutzer ohne Änderungen akzeptieren, einen Benutzer akzeptieren und ändern – was für die Anwendung benutzerdefinierter Ansprüche nützlich ist – oder den Benutzer ablehnen.

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

• beforeUserCreated Ereignisse: werden ausgelöst, bevor ein Benutzerkonto erstellt wird – können verwendet werden, um Anforderungen an Benutzer zum Erstellen eines Kontos anzugeben
• beforeUserSignedIn Ereignisse: werden ausgelöst, bevor sich ein Benutzer anmeldet – können verwendet werden, um Anforderungen für die Benutzeranmeldung anzugeben

Um eine Blockierungsfunktion zu erstellen, öffnen Sie functions/index.js in Ihrem Editor und suchen Sie nach der auskommentierten Funktion „ beforecreated “.

Ersetzen Sie ihn durch diesen Code, der es nur Benutzern mit der Domain example.com ermöglicht, ein Konto zu erstellen:

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. Probieren Sie die Blockierungsfunktion in den Emulatoren aus

Um die Blockierungsfunktion auszuprobieren, stellen Sie sicher, dass Ihre Emulatoren ausgeführt werden, und 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 Blockierungsfunktion verhindert, dass der Vorgang erfolgreich ist.

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

Mit Sperrfunktionen können Sie beliebige Einschränkungen rund um die Authentifizierung erstellen. Weitere Informationen finden Sie in den Referenzdokumenten .

Rekapitulieren

Gut gemacht! Sie haben einer Web-App die Multi-Faktor-Authentifizierung hinzugefügt, um Benutzern zu helfen, ihr Konto zu schützen, und dann haben Sie benutzerdefinierte Anforderungen für Benutzer erstellt, damit diese sich mithilfe von Blockierungsfunktionen anmelden können. Du hast dir definitiv ein GIF verdient!