Authentifizierung mit Microsoft mit JavaScript

Sie können Ihren Benutzern die Authentifizierung bei Firebase über OAuth-Anbieter wie Microsoft Azure Active Directory ermöglichen, indem Sie eine generische OAuth-Anmeldung mithilfe des Firebase SDK in Ihre App integrieren, um den End-to-End-Anmeldevorgang durchzuführen.

Bevor Sie beginnen

Um Benutzer mit Microsoft-Konten (Azure Active Directory und persönliche Microsoft-Konten) anzumelden, müssen Sie zunächst Microsoft als Anmeldeanbieter für Ihr Firebase-Projekt aktivieren:

  1. In Firebase zu Ihrem JavaScript - Projekt .
  2. In der Firebase Konsole , öffnen Sie den Abschnitt Auth.
  3. Auf dem Anmelden Methode Registerkarte, aktivieren Sie die Microsoft - Provider.
  4. Fügen Sie die Client - ID und Client - Geheimnis von dem betreffenden Anbieter Entwickler - Konsole an den Provider - Konfiguration:
    1. Um ein Microsoft OAuth - Client zu registrieren, folgen Sie den Anweisungen in Quickstart: Register eine App mit dem Azure Active Directory v2.0 Endpunkt . Beachten Sie, dass dieser Endpunkt die Anmeldung mit persönlichen Microsoft-Konten sowie mit Azure Active Directory-Konten unterstützt. Weitere über Azure Active Directory v2.0.
    2. Bei Anwendungen mit diesen Anbietern registrieren, müssen Sie die Registrierung *.firebaseapp.com Domain für Ihr Projekt als Redirect - Domain für Ihre App.
  5. Klicken Sie auf Speichern.

Verwalten Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, können Sie Ihre Benutzer am einfachsten über ihre Microsoft-Konten bei Firebase authentifizieren, indem Sie den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK abwickeln.

Führen Sie die folgenden Schritte aus, um den Anmeldevorgang mit dem Firebase JavaScript SDK zu handhaben:

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

    Webversion 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('microsoft.com');

    Webversion 8

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
  2. Optional: Geben Sie zusätzliche benutzerdefinierte OAuth Parameter , die Sie mit dem OAuth Anfrage senden möchten.

    Webversion 9

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

    Webversion 8

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

    Für die Parameter Microsoft unterstützt, finden Sie in der Microsoft OAuth Dokumentation . Beachten Sie, dass Sie nicht Firebase-erforderliche Parameter mit übergeben können setCustomParameters() . Diese Parameter sind client_id, response_type, redirect_uri, Zustand, Umfang und response_mode.

    Damit sich nur Benutzer eines bestimmten Azure AD-Mandanten bei der Anwendung anmelden können, kann entweder der benutzerfreundliche Domänenname des Azure AD-Mandanten oder die GUID-ID des Mandanten verwendet werden. Dies kann durch Angabe des Felds "Mandant" im benutzerdefinierten Parameterobjekt erfolgen.

    Webversion 9

    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'
    });

    Webversion 8

    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 jenseits Grundprofil , dass Sie auf Anfrage vom Authentifizierungs - Provider wollen.

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

    Um mehr zu erfahren, beziehen sich auf die Microsoft - Berechtigungen und Zustimmung Dokumentation .

  4. Authentifizieren Sie sich bei Firebase mithilfe des OAuth-Anbieterobjekts. Sie können Ihre Benutzer auffordern, sich mit ihren Microsoft-Konten anzumelden, indem Sie entweder ein Popup-Fenster öffnen oder zur Anmeldeseite umleiten. Die Umleitungsmethode wird auf mobilen Geräten bevorzugt.

    • So melden Sie sich mit einem Pop-up - Fenster, Anruf signInWithPopup :

    Webversion 9

    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.
      });

    Webversion 8

    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.
      });
    • Um sich anzumelden , indem auf die Anmeldeseite umgeleitet, rufen signInWithRedirect :

    Webversion 9

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

    Webversion 8

    firebase.auth().signInWithRedirect(provider);

    Nachdem der Benutzer abgeschlossen ist Anmelde- und kehrt zur Seite, können Sie das Anmelde-Ergebnis durch den Aufruf erhalten getRedirectResult .

    Webversion 9

    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.
      });

    Webversion 8

    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 der OAuth - Zugriffstoken mit dem Anbieter verbunden sind, können von dem abgerufen werden firebase.auth.UserCredential Objekt zurückgegeben.

    Unter Verwendung der OAuth - Zugriffstoken, können Sie den Anruf Microsoft Graph API .

    Um beispielsweise die grundlegenden Profilinformationen abzurufen, kann die folgende REST-API aufgerufen werden:

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

    Im Gegensatz zu anderen Anbietern von Firebase Auth unterstützt wird , hat Microsoft kein Foto URL zur Verfügung stellen und stattdessen hat die binären Daten für ein neue Profil - Foto über angefordert werden Microsoft Graph API .

    Neben den OAuth - Zugriffstoken, der Benutzers OAuth ID - firebase.auth.UserCredential Token können auch von den abgerufen werden firebase.auth.UserCredential Objekt. Der sub in ID - Token ist app-spezifisch und nicht das föderierte Anwenderidentifizierer von Firebase Auth und zugänglich über verwendeten übereinstimmen user.providerData[0].uid . Der oid Anspruch Feld sollte stattdessen verwendet werden. Wenn eine Azure AD Mieter mit zur Anmeldung in der oid wird Anspruch eine exakte Übereinstimmung sein. Doch für den Nicht-Mieter Fall die oid ist Feld gepolstert. Für eine föderierte ID 4b2eabcdefghijkl , die oid haben eine Form haben 00000000-0000-0000-4b2e-abcdefghijkl .

  5. Während die obigen Beispiele auf Anmelde-Flows konzentrieren, haben Sie auch die Möglichkeit , einen Microsoft - Provider zu einem vorhandenen Benutzer verwenden zu verknüpfen linkWithPopup / linkWithRedirect . Sie können beispielsweise mehrere Anbieter mit demselben Benutzer verknüpfen, sodass sie sich bei beiden anmelden können.

    Webversion 9

    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.
        });

    Webversion 8

    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. Das gleiche Muster kann mit verwendet wird reauthenticateWithPopup / reauthenticateWithRedirect die verwendet werden können frische Anmeldeinformationen für sensible Vorgänge abzurufen , die letzte Anmeldung erforderlich.

    Webversion 9

    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.
        });

    Webversion 8

    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.
        });

Mit Firebase in einer Chrome-Erweiterung authentifizieren

Wenn Sie eine Chrome-Erweiterungs-App erstellen, müssen Sie Ihre Chrome-Erweiterungs-ID hinzufügen:

  1. Öffnen Sie das Projekt in der Firebase Konsole .
  2. Im Abschnitt Authentifizierung, öffnen Sie das Anmelde-Verfahren Seite.
  3. Fügen Sie einen URI wie folgt aus der Liste der autorisierten Domains:
    chrome-extension://CHROME_EXTENSION_ID

Nur Popup - Operationen ( signInWithPopup , linkWithPopup und reauthenticateWithPopup ) sind auf Chrome - Erweiterungen zur Verfügung, da Chrome - Erweiterungen nicht HTTP - Redirects verwenden können. Sie sollten diese Methoden über ein Hintergrundseitenskript statt über ein Browseraktions-Popup aufrufen, da das Authentifizierungs-Popup das Browseraktions-Popup abbricht. Die Popup - Methoden können nur in Erweiterungen verwendet werden Manifest V2 . Das neuere Manifest V3 erlaubt nur Hintergrund - Skripte in Form von Service - Mitarbeitern, die nicht die Pop - up - Operationen überhaupt durchführen können.

In Ihrer Manifest - Datei macht die Chrome - Erweiterung sicher , dass Sie das Add https://apis.google.com URL zum content_security_policy AllowList.

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal anmeldet, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – d. h. Benutzername und Kennwort, Telefonnummer oder Authentifizierungsanbieterinformationen – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann verwendet werden, um einen Benutzer in jeder App in Ihrem Projekt zu identifizieren, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Anwendungen, ist der empfohlene Weg , den Auth - Status Ihres Benutzers zu kennen , einen Beobachter auf dem einzustellen Auth Objekt. Sie können dann bekommen den grundlegenden Profilinformationen des Benutzers aus dem User Siehe Benutzer verwalten .

  • In Ihrer Datenbank und Firebase Realtime Cloud Storage Sicherheitsregeln , können Sie die angemeldeten Nutzer die eindeutige Benutzer - ID aus der bekommen auth Variable, und es verwenden , um steuern kann ein Benutzer Zugriff , welche Daten.

Sie können Benutzer erlauben , durch mehrere Authentifizierungsanbieter anmelden, um Ihre App Verknüpfung Auth - Provider - Anmeldeinformationen zu einem vorhandenen Benutzerkonto.

Um einen Benutzer abzumelden, rufen signOut :

Webversion 9

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

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

Webversion 8

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