Diese Seite wurde von der Cloud Translation API übersetzt.

Authentifizieren Sie sich mit Microsoft mit JavaScript

Sie können Ihre Benutzer mithilfe von OAuth-Anbietern wie Microsoft Azure Active Directory bei Firebase authentifizieren lassen, indem Sie die generische OAuth-Anmeldung mithilfe des Firebase SDK in Ihre App integrieren, um den End-to-End-Anmeldeablauf 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:

Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu .
Öffnen Sie in der Firebase-Konsole den Abschnitt Auth .
Aktivieren Sie auf der Registerkarte Anmeldemethode den Microsoft -Anbieter.
Fügen Sie die Client-ID und das Client-Geheimnis aus der Entwicklerkonsole dieses Anbieters zur Anbieterkonfiguration hinzu:
1. Um einen Microsoft-OAuth-Client zu registrieren, befolgen Sie die Anweisungen in Schnellstart: App beim Azure Active Directory v2.0-Endpunkt registrieren . Beachten Sie, dass dieser Endpunkt die Anmeldung mit persönlichen Microsoft-Konten sowie mit Azure Active Directory-Konten unterstützt. Erfahren Sie mehr über Azure Active Directory v2.0.
2. Achten Sie beim Registrieren von Apps bei diesen Anbietern darauf, die Domäne *.firebaseapp.com für Ihr Projekt als Umleitungsdomäne für Ihre App zu registrieren.
Klicken Sie auf Speichern .

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Wenn Sie eine Web-App erstellen, können Sie Ihre Benutzer am einfachsten mit ihren 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 verarbeiten:

Erstellen Sie eine Instanz eines OAuthProviders mit der Anbieter-ID microsoft.com .
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('microsoft.com');auth_msft_create_provider.js
```
Web version 8
```
var provider = new firebase.auth.OAuthProvider('microsoft.com');microsoft-oauth.js
```
Optional : Geben Sie zusätzliche benutzerdefinierte OAuth-Parameter an, die Sie mit der OAuth-Anforderung senden möchten.
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
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 version 8
```
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 für Firebase erforderliche Parameter nicht mit setCustomParameters() können. Diese Parameter sind client_id , response_type , redirect_uri , state , scope 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 der GUID-Bezeichner des Mandanten verwendet werden. Dies kann durch Angabe des Felds „Mandant“ im benutzerdefinierten Parameterobjekt erfolgen.
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 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'
});auth_msft_provider_params_tenant.js
```
Web version 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'
});microsoft-oauth.js
```
Optional : Geben Sie zusätzliche OAuth 2.0-Bereiche über das Basisprofil hinaus 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 Zustimmung .
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 auf die Anmeldeseite umleiten. Die Umleitungsmethode wird auf Mobilgeräten bevorzugt.
- Um sich mit einem Popup-Fenster anzumelden, rufen signInWithPopup :
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
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 version 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.
  });microsoft-oauth.js
```
- Um sich durch Umleitung zur Anmeldeseite anzumelden, rufen signInWithRedirect :
Befolgen Sie die Best Practices bei der Verwendung von signInWithRedirect , linkWithRedirect oder reauthenticateWithRedirect .
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_msft_signin_redirect.js
```
Web version 8
```
firebase.auth().signInWithRedirect(provider);microsoft-oauth.js
```
Nachdem der Benutzer die Anmeldung abgeschlossen hat und zur Seite zurückgekehrt ist, können Sie das Anmeldeergebnis abrufen, indem getRedirectResult aufrufen.
Web version 9
Erfahren Sie mehr über das modulare Web v9-SDK, das durch Baumstruktur erschüttert werden kann, und aktualisieren Sie es von Version 8.
```
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 version 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.
  });microsoft-oauth.js
```
Nach erfolgreichem Abschluss kann das dem Anbieter zugeordnete OAuth-Zugriffstoken aus dem zurückgegebenen Objekt firebase.auth.UserCredential abgerufen werden.
Mit dem OAuth-Zugriffstoken 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 Anbietern, die von Firebase Auth unterstützt werden, stellt Microsoft keine Foto-URL bereit, sondern die binären Daten für ein Profilfoto müssen über die Microsoft Graph-API angefordert werden.
Zusätzlich zum OAuth-Zugriffstoken kann auch das OAuth- ID-Token des Benutzers aus dem Objekt firebase.auth.UserCredential abgerufen werden. Der sub im ID-Token ist anwendungsspezifisch und stimmt nicht mit der föderierten Benutzer-ID überein, die von Firebase Auth verwendet wird und auf die über user.providerData[0].uid . Stattdessen sollte das Anspruchsfeld oid verwendet werden. Wenn Sie sich mit einem Azure AD-Mandanten anmelden, ist der oid -Anspruch eine exakte Übereinstimmung. Für den Nicht-Mieter-Fall wird das oid -Feld jedoch aufgefüllt. Für eine föderierte ID 4b2eabcdefghijkl hat die oid die Form 00000000-0000-0000-4b2e-abcdefghijkl .

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. Beispielsweise können Sie mehrere Anbieter mit demselben Benutzer verknüpfen, sodass er sich bei beiden anmelden kann.

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

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

Dasselbe Muster kann mit reauthenticateWithPopup / reauthenticateWithRedirect verwendet werden, mit dem neue Anmeldeinformationen für vertrauliche Vorgänge abgerufen werden können, die eine kürzlich erfolgte Anmeldung erfordern.

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

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

Behandeln von Konto-existiert-mit-anderen-Anmeldeinformationen-Fehlern

Wenn Sie die Einstellung Ein Konto pro E-Mail-Adresse in der Firebase-Konsole aktiviert haben und ein Benutzer versucht, sich bei einem Anbieter (z. B. Microsoft) mit einer E-Mail-Adresse anzumelden, die bereits für den Anbieter eines anderen Firebase-Benutzers (z. B. Google) existiert, wird der Fehler auth/account-exists-with-different-credential credential wird zusammen mit einem AuthCredential -Objekt (Microsoft-Credential) ausgelöst. Um die Anmeldung beim vorgesehenen Anbieter abzuschließen, muss sich der Benutzer zuerst beim bestehenden Anbieter (Google) anmelden und dann mit dem früheren AuthCredential (Microsoft-Anmeldeinformationen) verknüpfen.

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


// Step 1.
// User tries to sign in to Microsoft.
auth.signInWithPopup(new firebase.auth.OAuthProvider('microsoft.com')).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Microsoft credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Microsoft credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Microsoft account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Umleitungsmodus

Dieser Fehler wird im Umleitungsmodus ähnlich behandelt, mit dem Unterschied, dass die ausstehenden Anmeldeinformationen zwischen Seitenumleitungen zwischengespeichert werden müssen (z. B. mithilfe des Sitzungsspeichers).

Im Gegensatz zu anderen von Firebase unterstützten OAuth-Anbietern wie Google, Facebook und Twitter, bei denen die Anmeldung direkt mit OAuth-Zugriffstoken-basierten Anmeldeinformationen erfolgen kann, unterstützt Firebase Auth nicht die gleiche Funktion für Anbieter wie Microsoft aufgrund der Unfähigkeit der Firebase-Authentifizierungsserver zum Überprüfen der Zielgruppe von Microsoft OAuth-Zugriffstoken. Dies ist eine kritische Sicherheitsanforderung und könnte Anwendungen und Websites Replay-Angriffen aussetzen, bei denen ein Microsoft OAuth-Zugriffstoken, das für ein Projekt (Angreifer) erhalten wurde, verwendet werden kann, um sich bei einem anderen Projekt (Opfer) anzumelden. Stattdessen bietet Firebase Auth die Möglichkeit, den gesamten OAuth-Fluss und den Autorisierungscode-Austausch mithilfe der in der Firebase-Konsole konfigurierten OAuth-Client-ID und dem geheimen Schlüssel abzuwickeln. Da der Autorisierungscode nur in Verbindung mit einer bestimmten Client-ID/geheimem Schlüssel verwendet werden kann, kann ein für ein Projekt erworbener Autorisierungscode 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 eine benutzerdefinierte Firebase-Authentifizierung verwendet werden. Ersteres wird benötigt, um sich beim Anbieter zu authentifizieren, und letzteres, um die Anmeldeinformationen des Anbieters gegen ein benutzerdefiniertes Token auszutauschen.

Authentifizieren Sie sich mit Firebase in einer Chrome-Erweiterung

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

Öffnen Sie Ihr Projekt in der Firebase-Konsole .
Öffnen Sie im Abschnitt Authentifizierung die Seite Anmeldemethode .
Fügen Sie der Liste der autorisierten Domänen einen URI wie den folgenden hinzu:
```
chrome-extension://CHROME_EXTENSION_ID
```

Für Chrome-Erweiterungen sind nur Popup-Vorgänge ( signInWithPopup , linkWithPopup und reauthenticateWithPopup ) verfügbar, da Chrome-Erweiterungen keine HTTP-Weiterleitungen verwenden können. Sie sollten diese Methoden von einem Hintergrundseitenskript und nicht von einem Browseraktions-Popup aufrufen, da das Authentifizierungs-Popup das Browseraktions-Popup abbricht. Die Popup-Methoden dürfen nur in Erweiterungen mit Manifest V2 verwendet werden. Das neuere Manifest V3 erlaubt nur Hintergrundskripte in Form von Service Workern, die die Popup-Operationen gar nicht durchführen können.

Stellen Sie in der Manifestdatei Ihrer Chrome-Erweiterung sicher, dass Sie die URL https://apis.google.com zur Zulassungsliste content_security_policy hinzufügen.

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

Dies wird auch als Umleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domäne müsste für alle unterstützten OAuth-Anbieter zugelassen werden. Dies bedeutet jedoch, dass Benutzer diese Domäne möglicherweise sehen, während sie sich bei Microsoft anmelden, bevor sie zurück zur Anwendung umgeleitet werden: Weiter zu: https://my-app-12345.firebaseapp.com .

Um die Anzeige Ihrer Subdomain zu vermeiden, können Sie eine benutzerdefinierte Domain mit Firebase Hosting einrichten:

Befolgen Sie die Schritte 1 bis 3 unter Einrichten Ihrer Domain für das Hosting . Wenn Sie Ihre Domain-Inhaberschaft bestätigen, stellt Hosting ein SSL-Zertifikat für Ihre benutzerdefinierte Domain bereit.
Fügen Sie Ihre benutzerdefinierte Domäne zur Liste der autorisierten Domänen in der Firebase-Konsole hinzu: auth.custom.domain.com .
Setzen Sie in der Microsoft-Entwicklerkonsole oder auf der OAuth-Einrichtungsseite die URL der Umleitungsseite auf die Whitelist, auf die Sie über Ihre benutzerdefinierte Domäne zugreifen können: https://auth.custom.domain.com/__/auth/handler .

Geben Sie beim Initialisieren der JavaScript-Bibliothek Ihre benutzerdefinierte Domäne mit dem Feld authDomain an:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Nächste Schritte

Nachdem sich ein Benutzer zum ersten Mal angemeldet hat, wird ein neues Benutzerkonto erstellt und mit den Anmeldeinformationen verknüpft – d. h. dem Benutzernamen und Kennwort, der Telefonnummer oder den Authentifizierungsanbieterinformationen –, 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 Apps besteht die empfohlene Möglichkeit, den Authentifizierungsstatus Ihres Benutzers zu erfahren, darin, einen Beobachter für das Auth festzulegen. Sie können dann die grundlegenden Profilinformationen des Benutzers aus dem User abrufen. Siehe Benutzer verwalten .
In Ihren Sicherheitsregeln für die Firebase-Echtzeitdatenbank und den Cloud-Speicher können Sie die eindeutige Benutzer-ID des angemeldeten Benutzers aus der Variablen auth und damit steuern, auf welche Daten ein Benutzer zugreifen kann.

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

Um einen Benutzer abzumelden, rufen signOut :

Web version 9

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 version 8

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

Authentifizieren Sie sich mit Microsoft mit JavaScript

Bevor Sie beginnen

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Web version 9

Web version 8

Behandeln von Konto-existiert-mit-anderen-Anmeldeinformationen-Fehlern

Popup-Modus

Umleitungsmodus

Erweitert: Behandeln Sie den Anmeldefluss manuell

Authentifizieren Sie sich mit Firebase in einer Chrome-Erweiterung

Anpassen der Umleitungsdomäne für die Microsoft-Anmeldung

Nächste Schritte

Web version 9

Web version 8