Mit Microsoft mit JavaScript authentifizieren

Sie können Ihre Nutzer über OAuth-Anbieter wie Microsoft Azure Active Directory bei Firebase authentifizieren, indem Sie die generischen OAuth-Anmeldedaten in Ihre App einbinden und mit dem Firebase SDK den End-to-End-Anmeldevorgang ausführen.

Hinweis

Wenn Sie Nutzer mit Microsoft-Konten (Azure Active Directory- und private Microsoft-Konten) anmelden möchten, müssen Sie Microsoft zuerst als Anmeldeanbieter für Ihr Firebase-Projekt aktivieren:

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.
  2. Öffnen Sie in der Firebase Console den Bereich Auth.
  3. Aktivieren Sie auf dem Tab Anmeldemethode den Anbieter Microsoft.
  4. Fügen Sie die Client-ID und das Client-Secret aus der Entwicklerkonsole des Anbieters zur Anbieterkonfiguration hinzu:
    1. Folgen Sie der Anleitung unter Kurzanleitung: Anwendung mit dem Azure Active Directory v2.0-Endpunkt registrieren, um einen Microsoft OAuth-Client zu registrieren. Dieser Endpunkt unterstützt die Anmeldung mit privaten Microsoft-Konten sowie Azure Active Directory-Konten. Weitere Informationen zu Azure Active Directory v2.0
    2. Wenn Sie Apps bei diesen Anbietern registrieren, müssen Sie die *.firebaseapp.com-Domain für Ihr Projekt als Weiterleitungsdomain für Ihre App registrieren.
  5. Klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK abwickeln

Wenn Sie eine Webanwendung entwickeln, ist die einfachste Möglichkeit, Ihre Nutzer mit ihren Microsoft-Konten bei Firebase zu authentifizieren, den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK zu verarbeiten.

So verwalten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz eines OAuthProvider mit der Anbieter-ID microsoft.com.

    WebWeb
    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die mit der OAuth-Anfrage gesendet werden sollen.

    WebWeb
    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });
    provider.setCustomParameters({
      // Force re-consent.
      prompt: 'consent',
      // Target specific email with login hint.
      login_hint: 'user@firstadd.onmicrosoft.com'
    });

    Eine Liste der von Microsoft unterstützten Parameter finden Sie in der Microsoft-OAuth-Dokumentation. Hinweis: Sie können keine für Firebase erforderlichen Parameter mit setCustomParameters() übergeben. Diese Parameter sind client_id, response_type, redirect_uri, state, scope und response_mode.

    Wenn sich nur Nutzer aus einem bestimmten Azure AD-Mandanten in der Anwendung anmelden dürfen, kann entweder der Anzeigename des Azure AD-Mandanten oder seine GUID-Kennung verwendet werden. Geben Sie dazu das Feld „tenant“ im Objekt „custom_parameters“ an.

    WebWeb
    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
    provider.setCustomParameters({
      // Optional "tenant" parameter in case you are using an Azure AD tenant.
      // eg. '8eaef023-2b34-4da1-9baa-8bc8c9d6a490' or 'contoso.onmicrosoft.com'
      // or "common" for tenant-independent tokens.
      // The default value is "common".
      tenant: 'TENANT_ID'
    });
  3. Optional: Geben Sie zusätzliche OAuth 2.0-Bereiche an, die über das Basisprofil hinausgehen und die Sie vom Authentifizierungsanbieter anfordern möchten.

    provider.addScope('mail.read');
    provider.addScope('calendars.read');

    Weitere Informationen finden Sie in der Dokumentation zu Berechtigungen und Einwilligungen von Microsoft.

  4. Authentifizierung mit Firebase über das OAuth-Anbieterobjekt Sie können Nutzer auffordern, sich mit ihren Microsoft-Konten anzumelden, indem Sie entweder ein Pop-up-Fenster öffnen oder zur Anmeldeseite weiterleiten. Die Weiterleitungsmethode wird auf Mobilgeräten bevorzugt.

    • Wenn Sie sich über ein Pop-up-Fenster anmelden möchten, drücken Sie signInWithPopup:
    WebWeb
    import { getAuth, signInWithPopup, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    signInWithPopup(auth, provider)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    firebase.auth().signInWithPopup(provider)
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    • Rufen Sie signInWithRedirect auf, um sich anzumelden und zur Anmeldeseite weitergeleitet zu werden:

    Beachten Sie die Best Practices, wenn Sie signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect verwenden.

    WebWeb
    import { getAuth, signInWithRedirect } from "firebase/auth";
    
    const auth = getAuth();
    signInWithRedirect(auth, provider);
    firebase.auth().signInWithRedirect(provider);

    Nachdem der Nutzer die Anmeldung abgeschlossen und zur Seite zurückgekehrt ist, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult abrufen.

    WebWeb
    import { getAuth, getRedirectResult, OAuthProvider } from "firebase/auth";
    
    const auth = getAuth();
    getRedirectResult(auth)
      .then((result) => {
        // User is signed in.
        // IdP data available in result.additionalUserInfo.profile.
    
        // Get the OAuth access token and ID Token
        const credential = OAuthProvider.credentialFromResult(result);
        const accessToken = credential.accessToken;
        const idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });
    firebase.auth().getRedirectResult()
      .then((result) => {
        // IdP data available in result.additionalUserInfo.profile.
        // ...
    
        /** @type {firebase.auth.OAuthCredential} */
        var credential = result.credential;
    
        // OAuth access and id tokens can also be retrieved:
        var accessToken = credential.accessToken;
        var idToken = credential.idToken;
      })
      .catch((error) => {
        // Handle error.
      });

    Nach erfolgreichem Abschluss kann das mit dem Anbieter verknüpfte OAuth-Zugriffstoken aus dem zurückgegebenen firebase.auth.UserCredential-Objekt abgerufen werden.

    Mit dem OAuth-Zugriffstoken können Sie die Microsoft Graph API aufrufen.

    Wenn Sie beispielsweise die grundlegenden Profilinformationen abrufen möchten, können Sie die folgende REST API aufrufen:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://graph.microsoft.com/v1.0/me

    Anders als andere von Firebase Auth unterstützte Anbieter stellt Microsoft keine Foto-URL bereit. Stattdessen müssen die Binärdaten für ein Profilbild über die Microsoft Graph API angefordert werden.

    Neben dem OAuth-Zugriffstoken kann auch das OAuth-ID-Token des Nutzers aus dem firebase.auth.UserCredential-Objekt abgerufen werden. Der Anspruch sub im ID-Token ist anwendungsspezifisch und stimmt nicht mit der föderierten Nutzer-ID überein, die von Firebase Auth verwendet und über user.providerData[0].uid zugänglich ist. Verwenden Sie stattdessen das Feld oid. Wenn Sie sich mit einem Azure AD-Mandanten anmelden, stimmt der oid-Anspruch genau überein. Bei nicht mietenden Kunden wird das Feld oid jedoch aufgefüllt. Bei einer föderierten ID 4b2eabcdefghijkl hat die oid das Format 00000000-0000-0000-4b2e-abcdefghijkl.

  5. In den obigen Beispielen liegt der Schwerpunkt auf den Anmeldeabläufen. Sie können aber auch einen Microsoft-Anbieter über linkWithPopup/linkWithRedirect mit einem vorhandenen Nutzer verknüpfen. Sie können beispielsweise mehrere Anbieter mit demselben Nutzer verknüpfen, damit er sich mit jedem anmelden kann.

    WebWeb
    import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    
    linkWithPopup(auth.currentUser, provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then((result) => {
          // Microsoft credential is linked to the current user.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });
  6. Dasselbe Muster kann mit reauthenticateWithPopup/reauthenticateWithRedirect verwendet werden, um aktuelle Anmeldedaten für sensible Vorgänge abzurufen, für die eine aktuelle Anmeldung erforderlich ist.

    WebWeb
    import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');
    const auth = getAuth();
    reauthenticateWithPopup(auth.currentUser, provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
    
          // Get the OAuth access token and ID Token
          const credential = OAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
          const idToken = credential.idToken;
        })
        .catch((error) => {
          // Handle error.
        });
    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then((result) => {
          // User is re-authenticated with fresh tokens minted and
          // should be able to perform sensitive operations like account
          // deletion and email or password update.
          // IdP data available in result.additionalUserInfo.profile.
          // OAuth access token can also be retrieved:
          // result.credential.accessToken
          // OAuth ID token can also be retrieved:
          // result.credential.idToken
        })
        .catch((error) => {
          // Handle error.
        });

Wenn Sie in der Firebase Console die Einstellung Ein Konto pro E-Mail-Adresse aktiviert haben und ein Nutzer versucht, sich bei einem Anbieter (z. B. Microsoft) mit einer E-Mail-Adresse anzumelden, die bereits für den Anbieter eines anderen Firebase-Nutzers (z. B. Google) vorhanden ist, wird der Fehler auth/account-exists-with-different-credential zusammen mit einem AuthCredential-Objekt (Microsoft-Anmeldedaten) ausgegeben. Um die Anmeldung beim gewünschten Anbieter abzuschließen, muss sich der Nutzer zuerst beim bestehenden Anbieter (Google) anmelden und dann eine Verknüpfung zum ehemaligen AuthCredential (Microsoft-Anmeldedaten) herstellen.

Wenn Sie signInWithPopup verwenden, können Sie auth/account-exists-with-different-credential-Fehler mit Code wie im folgenden Beispiel behandeln:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  OAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Microsoft.
  let result = await signInWithPopup(getAuth(), new OAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Microsoft credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Microsoft credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Weiterleitungsmodus

Dieser Fehler wird im Weiterleitungsmodus ähnlich behandelt, mit dem Unterschied, dass die ausstehenden Anmeldedaten zwischen den Seitenweiterleitungen im Cache gespeichert werden müssen (z. B. mit Sitzungsspeicher).

Anders als bei anderen von Firebase unterstützten OAuth-Anbietern wie Google, Facebook und Twitter, bei denen die Anmeldung direkt mit OAuth-Zugriffstoken-basierten Anmeldedaten erfolgen kann, unterstützt Firebase Auth diese Funktion nicht für Anbieter wie Microsoft, da der Firebase Auth-Server die Zielgruppe von Microsoft OAuth-Zugriffstokens nicht überprüfen kann. Dies ist eine wichtige Sicherheitsanforderung. Andernfalls könnten Anwendungen und Websites von Replay-Angriffen betroffen sein, bei denen ein für ein Projekt (Angreifer) abgerufenes Microsoft OAuth-Zugriffstoken verwendet wird, um sich in einem anderen Projekt (Opfer) anzumelden. Stattdessen bietet Firebase Auth die Möglichkeit, den gesamten OAuth-Ablauf und den Austausch des Autorisierungscodes mithilfe der in der Firebase Console konfigurierten OAuth-Client-ID und des OAuth-Secrets zu verarbeiten. Da der Autorisierungscode nur in Verbindung mit einer bestimmten Client-ID/einem bestimmten Secret verwendet werden kann, kann ein Autorisierungscode, der für ein Projekt abgerufen wurde, nicht für ein anderes verwendet werden.

Wenn diese Anbieter in nicht unterstützten Umgebungen verwendet werden müssen, müssen eine OAuth-Bibliothek eines Drittanbieters und die benutzerdefinierte Firebase-Authentifizierung verwendet werden. Ersteres ist erforderlich, um sich beim Anbieter zu authentifizieren, und letzteres, um die Anmeldedaten des Anbieters gegen ein benutzerdefiniertes Token einzutauschen.

In einer Chrome-Erweiterung mit Firebase authentifizieren

Wenn Sie eine Chrome-Erweiterung entwickeln, lesen Sie den Leitfaden zu Offscreen-Dokumenten.

Bei der Projekterstellung stellt Firebase eine eindeutige Subdomain für Ihr Projekt bereit: https://my-app-12345.firebaseapp.com.

Diese wird auch als Weiterleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domain muss für alle unterstützten OAuth-Anbieter zulässig sein. Das bedeutet jedoch, dass Nutzer diese Domain möglicherweise sehen, während sie sich bei Microsoft anmelden, bevor sie zur Anwendung weitergeleitet werden: Weiter zu: https://my-app-12345.firebaseapp.com.

Wenn Sie Ihre Subdomain nicht anzeigen lassen möchten, können Sie eine benutzerdefinierte Domain mit Firebase Hosting einrichten:

  1. Folgen Sie den Schritten 1 bis 3 unter Domain für Hosting einrichten. Wenn Sie die Inhaberschaft Ihrer Domain bestätigen, stellt Hosting ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.
  2. Fügen Sie Ihre benutzerdefinierte Domain in der Firebase-Konsole der Liste der autorisierten Domains hinzu: auth.custom.domain.com.
  3. Fügen Sie in der Microsoft-Entwicklerkonsole oder auf der OAuth-Einrichtungsseite die URL der Weiterleitungsseite auf die Zulassungsliste, auf die über Ihre benutzerdefinierte Domain zugegriffen werden kann: https://auth.custom.domain.com/__/auth/handler.
  4. Geben Sie beim Initialisieren der JavaScript-Bibliothek Ihre benutzerdefinierte Domain im Feld authDomain an:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

Nächste Schritte

Nachdem sich ein Nutzer zum ersten Mal angemeldet hat, wird ein neues Nutzerkonto erstellt und mit den Anmeldedaten verknüpft, d. h. mit dem Nutzernamen und Passwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter, mit denen sich der Nutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Nutzer in allen Apps in Ihrem Projekt zu identifizieren, unabhängig davon, wie er sich anmeldet.

  • In Ihren Apps sollten Sie den Authentifizierungsstatus des Nutzers am besten über einen Beobachter für das Auth-Objekt ermitteln. Die grundlegenden Profilinformationen des Nutzers können Sie dann aus dem User-Objekt abrufen. Weitere Informationen finden Sie unter Nutzer verwalten.

  • In Ihren Firebase Realtime Database- und Cloud Storage-Sicherheitsregeln können Sie die eindeutige Nutzer-ID des angemeldeten Nutzers aus der Variablen auth abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

Sie können Nutzern erlauben, sich über mehrere Authentifizierungsanbieter in Ihrer App anzumelden, indem Sie Anmeldedaten des Authentifizierungsanbieters mit einem vorhandenen Nutzerkonto verknüpfen.

Wenn Sie einen Nutzer abmelden möchten, rufen Sie signOut auf:

WebWeb
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});