Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Mit Microsoft mit JavaScript authentifizieren

Sie können Nutzern die Authentifizierung mit Firebase über OAuth-Anbieter wie Microsoft Azure Active Directory ermöglichen, indem Sie die generische OAuth-Anmeldung in Ihre App einbinden und das Firebase SDK verwenden, um den gesamten Anmeldevorgang durchzuführen.

Hinweis

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

Firebase zu Ihrem JavaScript-Projekt hinzufügen
Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.
Aktivieren Sie auf dem Tab Anmeldemethode den Anmeldeanbieter Microsoft.
Fügen Sie der Anbieterkonfiguration die Client-ID und den Clientschlüssel aus der Entwicklerkonsole des Anbieters hinzu:
1. Folgen Sie der Anleitung unter Schnellstart: Registrieren einer App mit dem Azure Active Directory v2.0-Endpunkt, um einen Microsoft OAuth-Client zu registrieren. Dieser Endpunkt unterstützt die Anmeldung mit privaten Microsoft-Konten sowie mit Azure Active Directory-Konten. Weitere Informationen zu Azure Active Directory 2.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.
Klicken Sie auf Speichern.

Anmeldevorgang mit dem Firebase SDK verarbeiten

Wenn Sie eine Web-App entwickeln, ist es am einfachsten, Ihre Nutzer mit Firebase über ihre Microsoft-Konten zu authentifizieren, indem Sie den gesamten Anmeldevorgang mit dem Firebase JavaScript SDK abwickeln.

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

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

Web

import { OAuthProvider } from "firebase/auth";

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

Web

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-Anfrage senden möchten.

Web

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

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. Hinweis: Firebase-Parameter können nicht mit setCustomParameters() übergeben werden. Diese Parameter sind client_id, response_type, redirect_uri, state, scope und response_mode.

Damit sich nur Nutzer eines bestimmten Azure AD-Mandanten in der Anwendung anmelden können, kann entweder der Anzeigename des Azure AD-Mandanten oder die GUID-Kennung des Mandanten verwendet werden. Dazu müssen Sie das Feld „tenant“ im Objekt für benutzerdefinierte Parameter angeben.

Web

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

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 an, die über das grundlegende Profil 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 Einwilligung von Microsoft.

Authentifizieren Sie sich mit Firebase über das OAuth-Anbieterobjekt. Sie können Ihre 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 mit einem Pop-up-Fenster anmelden möchten, rufen Sie signInWithPopup auf:

Web

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

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

Wenn Sie sich anmelden möchten, indem Sie zur Anmeldeseite weitergeleitet werden, rufen Sie signInWithRedirect auf:

Halten Sie sich an die Best Practices, wenn Sie signInWithRedirect, linkWithRedirect oder reauthenticateWithRedirect verwenden.

Web

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

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

Web

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

Nachdem sich der Nutzer angemeldet hat und zur Seite zurückkehrt, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult abrufen.

Web

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

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

Im Gegensatz zu anderen von Firebase Auth unterstützten Anbietern stellt Microsoft keine Foto-URL bereit. 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 Nutzers aus dem firebase.auth.UserCredential-Objekt abgerufen werden. Der sub-Anspruch im ID-Token ist appspezifisch und stimmt nicht mit der föderierten Nutzer-ID überein, die von Firebase Auth verwendet wird und über user.providerData[0].uid zugänglich ist. Stattdessen sollte das Anspruchsfeld oid verwendet werden. Wenn Sie sich mit einem Azure AD-Mandanten anmelden, ist der oid-Anspruch eine genaue Übereinstimmung. Im Fall ohne Mandant wird das Feld oid jedoch aufgefüllt. Für eine föderierte ID 4b2eabcdefghijkl hat die oid das Format 00000000-0000-0000-4b2e-abcdefghijkl.

Die oben genannten Beispiele konzentrieren sich auf Anmeldeabläufe. Sie haben aber auch die Möglichkeit, einen Microsoft-Anbieter mit einem vorhandenen Nutzer über linkWithPopup/linkWithRedirect zu verknüpfen. So können Sie beispielsweise mehrere Anbieter mit demselben Nutzer verknüpfen, damit er sich mit einem der Anbieter anmelden kann.

Web

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

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, um aktuelle Anmeldedaten für sensible Vorgänge abzurufen, für die eine aktuelle Anmeldung erforderlich ist.

Web

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

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

Fehler „account-exists-with-different-credential“ beheben

Wenn Sie in der Firebase-Konsole die Einstellung Ein Konto pro E-Mail-Adresse aktiviert haben und ein Nutzer versucht, sich mit einer E-Mail-Adresse bei einem Anbieter (z. B. Microsoft) 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 mit dem bisherigen 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. Der Unterschied besteht darin, dass das ausstehende Anmeldedatenobjekt zwischen Seitenweiterleitungen im Cache gespeichert werden muss (z. B. mit dem Sitzungsspeicher).

Im Gegensatz zu anderen von Firebase unterstützten OAuth-Anbietern wie Google, Facebook und Twitter, bei denen die Anmeldung direkt mit Anmeldedaten auf Basis von OAuth-Zugriffstokens erfolgen kann, unterstützt Firebase Auth diese Funktion für Anbieter wie Microsoft nicht, da der Firebase Auth-Server die Zielgruppe von Microsoft OAuth-Zugriffstokens nicht überprüfen kann. Dies ist eine kritische Sicherheitsanforderung und kann Anwendungen und Websites Wiederholungsangriffen aussetzen, bei denen ein für ein Projekt (Angreifer) erhaltenes Microsoft OAuth-Zugriffstoken verwendet werden kann, um sich in einem anderen Projekt (Opfer) anzumelden. Stattdessen bietet Firebase Auth die Möglichkeit, den gesamten OAuth-Ablauf und den Austausch des Autorisierungscodes mit der in der Firebase Console konfigurierten OAuth-Client-ID und dem zugehörigen Secret zu verarbeiten. Da der Autorisierungscode nur in Verbindung mit einer bestimmten Client-ID/einem bestimmten Client-Secret verwendet werden kann, kann ein für ein Projekt abgerufener Autorisierungscode nicht für ein anderes Projekt verwendet werden.

Wenn diese Anbieter in nicht unterstützten Umgebungen verwendet werden müssen, sind eine OAuth-Bibliothek von Drittanbietern und die benutzerdefinierte Firebase-Authentifizierung erforderlich. Ersteres ist für die Authentifizierung beim Anbieter erforderlich, letzteres, um die Anmeldedaten des Anbieters gegen ein benutzerdefiniertes Token einzutauschen.

Authentifizierung mit Firebase in einer Chrome-Erweiterung

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

Beim Erstellen eines Projekts stellt Firebase eine eindeutige Subdomain für Ihr Projekt bereit: https://my-app-12345.firebaseapp.com.

Dies wird auch als Weiterleitungsmechanismus für die OAuth-Anmeldung verwendet. Diese Domäne muss für alle unterstützten OAuth-Anbieter zugelassen sein. Das bedeutet jedoch, dass Nutzer diese Domain möglicherweise sehen, wenn 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 möchten, können Sie mit Firebase Hosting eine benutzerdefinierte Domain einrichten:

Folgen Sie der Anleitung in 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.
Fügen Sie Ihre benutzerdefinierte Domain der Liste der autorisierten Domains in der Firebase-Konsole hinzu: auth.custom.domain.com.
Fügen Sie in der Microsoft-Entwicklerkonsole oder auf der OAuth-Einrichtungsseite die URL der Weiterleitungsseite auf die Whitelist, die über Ihre benutzerdefinierte Domain zugänglich ist: https://auth.custom.domain.com/__/auth/handler.

Wenn Sie die JavaScript-Bibliothek initialisieren, geben Sie Ihre benutzerdefinierte Domain mit dem 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

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

In Ihren Apps ist es am besten, den Authentifizierungsstatus des Nutzers zu ermitteln, indem Sie einen Observer für das Auth-Objekt festlegen. Anschließend können Sie die grundlegenden Profilinformationen des Nutzers 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 auth-Variablen abrufen und damit steuern, auf welche Daten ein Nutzer zugreifen kann.

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

Rufen Sie signOut auf, um einen Nutzer abzumelden:

Web

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

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

Mit Microsoft mit JavaScript authentifizieren Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.