Authentifizieren Sie sich mithilfe von Microsoft mit JavaScript. Authentifizieren Sie sich mithilfe von Microsoft mit JavaScript

Sie können Ihren Benutzern die Authentifizierung bei Firebase mithilfe von OAuth-Anbietern wie Microsoft Azure Active Directory ermöglichen, indem Sie die 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. Fügen Sie Firebase zu Ihrem JavaScript-Projekt hinzu .
  2. Öffnen Sie in der Firebase-Konsole den Abschnitt „Auth“ .
  3. Aktivieren Sie auf der Registerkarte Anmeldemethode den Microsoft- Anbieter.
  4. Fügen Sie die Client-ID und das Client-Geheimnis von der Entwicklerkonsole dieses Anbieters zur Anbieterkonfiguration hinzu:
    1. Um einen Microsoft OAuth-Client zu registrieren, befolgen Sie die Anweisungen im Schnellstart: Registrieren einer App beim Azure Active Directory v2.0-Endpunkt . Beachten Sie, dass dieser Endpunkt die Anmeldung mit persönlichen Microsoft-Konten sowie Azure Active Directory-Konten unterstützt. Erfahren Sie mehr über Azure Active Directory v2.0.
    2. Wenn Sie Apps bei diesen Anbietern registrieren, achten Sie darauf, die Domäne *.firebaseapp.com für Ihr Projekt als Weiterleitungsdomäne für Ihre App zu registrieren.
  5. Klicken Sie auf Speichern .

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, besteht die einfachste Möglichkeit zur Authentifizierung Ihrer Benutzer bei Firebase mithilfe ihrer Microsoft-Konten darin, den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK abzuwickeln.

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

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

    Web modular API

    import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');
    auth_msft_create_provider.js

    Web namespaced API

    var provider = new firebase.auth.OAuthProvider('microsoft.com');
    microsoft-oauth.js

  2. Optional : Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anfrage senden möchten.

    Web modular API

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

    Web namespaced API

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

    Informationen zu den von Microsoft unterstützten Parametern finden Sie in der Microsoft OAuth-Dokumentation . Beachten Sie, dass Sie mit setCustomParameters() keine für Firebase erforderlichen Parameter übergeben können. Diese Parameter sind client_id , Response_type , Redirect_uri , State , Scope und Response_mode .

    Um nur Benutzern eines bestimmten Azure AD-Mandanten die Anmeldung bei der Anwendung zu ermöglichen, 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.

    Web modular API

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

    Web namespaced API

    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'
});
    microsoft-oauth.js

  3. Optional : Geben Sie über das Basisprofil hinaus zusätzliche OAuth 2.0-Bereiche an, die Sie vom Authentifizierungsanbieter anfordern möchten.

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

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

  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 weiterleiten. Auf Mobilgeräten wird die Weiterleitungsmethode bevorzugt.

    • Um sich mit einem Popup-Fenster anzumelden, rufen Sie signInWithPopup auf:

    Web modular API

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

    Web namespaced API

    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.
  });
    microsoft-oauth.js
    • Um sich durch Umleitung zur Anmeldeseite anzumelden, rufen Sie signInWithRedirect auf:

    Befolgen Sie die Best Practices bei der Verwendung signInWithRedirect , linkWithRedirect oder reauthenticateWithRedirect .

    Web modular API

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

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_msft_signin_redirect.js

    Web namespaced API

    firebase.auth().signInWithRedirect(provider);
    microsoft-oauth.js

    Nachdem der Benutzer die Anmeldung abgeschlossen hat und zur Seite zurückkehrt, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult abrufen.

    Web modular API

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

    Web namespaced API

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

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

    Mithilfe des OAuth-Zugriffstokens können Sie die Microsoft Graph-API aufrufen.

    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 von Firebase Auth unterstützten Anbietern stellt Microsoft keine Foto-URL zur Verfügung und stattdessen müssen die Binärdaten für ein Profilfoto über die Microsoft Graph API angefordert werden.

    Zusätzlich zum OAuth-Zugriffstoken kann auch das OAuth- ID-Token des Benutzers vom firebase.auth.UserCredential Objekt abgerufen werden. Der sub im ID-Token ist anwendungsspezifisch und stimmt nicht mit der föderierten Benutzerkennung überein, die von Firebase Auth verwendet wird und auf die über user.providerData[0].uid zugegriffen werden kann. Stattdessen sollte das oid Claim-Feld verwendet werden. Wenn Sie einen Azure AD-Mandanten für die Anmeldung verwenden, stimmt der oid Anspruch genau überein. Für den Fall, dass es sich nicht um einen Mandanten handelt, wird das oid Feld jedoch aufgefüllt. Für eine föderierte ID 4b2eabcdefghijkl hat das oid die Form 00000000-0000-0000-4b2e-abcdefghijkl .

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

    Web modular API

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

    Web namespaced API

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

  6. Das gleiche Muster kann mit reauthenticateWithPopup / reauthenticateWithRedirect verwendet werden, um neue Anmeldeinformationen für vertrauliche Vorgänge abzurufen, die eine kürzliche Anmeldung erfordern.

    Web modular API

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

    Web namespaced API

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

Authentifizieren Sie sich mit Firebase in einer Chrome-Erweiterung

Wenn Sie eine Chrome-Erweiterungs-App erstellen, lesen Sie die Anleitung zu Offscreen-Dokumenten .

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal angemeldet hat, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen – also dem Benutzernamen und dem Kennwort, der Telefonnummer oder den Informationen zum Authentifizierungsanbieter – verknüpft, mit denen sich der Benutzer angemeldet hat. Dieses neue Konto wird als Teil Ihres Firebase-Projekts gespeichert und kann zur Identifizierung eines Benutzers in jeder App in Ihrem Projekt verwendet werden, unabhängig davon, wie sich der Benutzer anmeldet.

  • In Ihren Apps können Sie den Authentifizierungsstatus Ihres Benutzers am besten ermitteln, indem Sie einen Beobachter für das Auth Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Benutzers aus dem User abrufen. Siehe Benutzer verwalten .

  • In Ihren Firebase-Echtzeitdatenbank- und Cloud-Speicher- Sicherheitsregeln können Sie die eindeutige Benutzer-ID des angemeldeten Benutzers aus der auth abrufen und damit steuern, auf welche Daten ein Benutzer zugreifen kann.

Sie können Benutzern die Anmeldung bei Ihrer App mit mehreren Authentifizierungsanbietern ermöglichen, indem Sie die Anmeldeinformationen des Authentifizierungsanbieters mit einem vorhandenen Benutzerkonto verknüpfen.

Um einen Benutzer abzumelden, rufen Sie signOut auf:

Web modular API

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

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

Web namespaced API

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