Authentifizierung mit SAML in Web-Apps

Wenn Sie ein Upgrade auf Firebase Authentication with Identity Platform durchgeführt haben, können Sie Ihre Nutzer mit Firebase über den SAML-Identitätsanbieter Ihrer Wahl authentifizieren. So können Sie Ihre SAML-basierte SSO-Lösung verwenden, um Nutzer in Ihrer Firebase-App anzumelden.

Firebase Authentication unterstützt nur den vom Dienstanbieter initiierten SAML-Ablauf.

Hinweis

Wenn Sie Nutzer mit einem SAML-Identitätsanbieter anmelden möchten, müssen Sie zuerst einige Informationen vom Anbieter abrufen:

  • Entitäts-ID des Anbieters: Ein URI, der den Identitätsanbieter identifiziert.
  • SAML-SSO-URL des Anbieters: Die URL der Anmeldeseite des Identitätsanbieters.
  • Das Zertifikat für den öffentlichen Schlüssel des Anbieters: Das Zertifikat, das zum Validieren von Tokens verwendet wird, die vom Identitätsanbieter signiert wurden.
  • Entitäts-ID Ihrer App: Ein URI, der Ihre App, den „Dienstanbieter“, identifiziert.

Wenn Sie die oben genannten Informationen haben, aktivieren Sie SAML als Anmeldemethode für Ihr Firebase-Projekt:

  1. Fügen Sie Ihrem JavaScript-Projekt Firebase hinzu.

  2. Falls noch nicht geschehen, müssen Sie Ihr Projekt auf Firebase Authentication with Identity Platform aktualisieren. Die SAML-Authentifizierung ist nur in aktualisierten Projekten verfügbar.

  3. Wechseln Sie in der Firebase-Konsole zu Sicherheit > Authentifizierung.

  4. Klicken Sie auf dem Tab Anmeldemethode auf Neuen Anbieter hinzufügen und dann auf SAML.

  5. Geben Sie diesem Anbieter einen Namen. Notieren Sie sich die generierte Anbieter-ID, z. B. saml.example-provider. Sie benötigen diese ID, wenn Sie Ihrer App Anmeldecode hinzufügen.

  6. Geben Sie die Entitäts-ID, die SSO-URL und das Zertifikat für den öffentlichen Schlüssel Ihres Identitätsanbieters an. Geben Sie auch die Entitäts-ID Ihrer App (des Dienstanbieters) an. Diese Werte müssen genau mit den Werten übereinstimmen, die Ihr Anbieter Ihnen zugewiesen hat.

  7. Speichern Sie die Änderungen.

  8. Autorisieren Sie die Domain Ihrer App, falls noch nicht geschehen:

    1. Rufen Sie in der Firebase-Konsole den Tab Einstellungen unter Sicherheit > Authentifizierung auf.

    2. Klicken Sie im Abschnitt Autorisierte Domains auf Domain hinzufügen und fügen Sie Ihre Domain hinzu.

Anmeldevorgang mit dem Firebase SDK verarbeiten

So verarbeiten Sie den Anmeldevorgang mit dem Firebase JavaScript SDK:

  1. Erstellen Sie eine Instanz von SAMLAuthProvider mit der Anbieter-ID, die Sie in der Firebase-Konsole erhalten haben.

    Web 

    import { SAMLAuthProvider } from "firebase/auth";

const provider = new SAMLAuthProvider('saml.example-provider');

    Web 

    var provider = new firebase.auth.SAMLAuthProvider('saml.example-provider');
``

  1. Authentifizieren Sie sich mit Firebase mithilfe des SAML-Anbieterobjekts.

    Sie können den Nutzer entweder zur Anmeldeseite des Anbieters weiterleiten oder die Anmeldeseite in einem Pop-up-Browserfenster öffnen.

    Weiterleitungsvorgang

    Rufen Sie signInWithRedirect() auf, um zur Anmeldeseite des Anbieters weiterzuleiten:

    Web 

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

const auth = getAuth();
signInWithRedirect(auth, provider);

    Web 

    firebase.auth().signInWithRedirect(provider);

    Nachdem der Nutzer die Anmeldung abgeschlossen hat und zu Ihrer App zurückgekehrt ist, können Sie das Anmeldeergebnis durch Aufrufen von getRedirectResult() abrufen.

    Web 

    import { getAuth, getRedirectResult, SAMLAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    // User is signed in.

    // Provider data available using getAdditionalUserInfo()
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().getRedirectResult()
  .then((result) => {
    // User is signed in.

    // Provider data available in result.additionalUserInfo.profile,
    // or from the user's ID token obtained from result.user.getIdToken()
    // as an object in the firebase.sign_in_attributes custom claim.
  })
  .catch((error) => {
    // Handle error.
  });

    Pop-up-Ablauf

    Web 

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

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // User is signed in.

    // Provider data available in result.additionalUserInfo.profile,
    // or from the user's ID token obtained from result.user.getIdToken()
    // as an object in the firebase.sign_in_attributes custom claim.
  })
  .catch((error) => {
    // Handle error.
  });

    Web 

    firebase.auth().signInWithPopup(provider)
  .then((result) => {
    // User is signed in.

    // Provider data available in result.additionalUserInfo.profile,
    // or from the user's ID token obtained from result.user.getIdToken()
    // as an object in the firebase.sign_in_attributes custom claim.
  })
  .catch((error) => {
    // Handle error.
  });

    Das ID-Token und das UserInfo-Objekt enthalten die E-Mail-Adresse des Nutzers nur, wenn sie im Attribut NameID der SAML-Assertion des Identitätsanbieters angegeben ist:

    <Subject>
  <NameID Format="urn:oasis:names:tc:SAML:1.1:nameid-format:emailAddress">test@email.com</NameID>
</Subject>

  2. Die obigen Beispiele konzentrieren sich auf Anmeldeabläufe. Sie können jedoch dasselbe Muster verwenden, um einen SAML-Anbieter mit einem vorhandenen Nutzer zu verknüpfen (mit linkWithRedirect() und linkWithPopup()) und einen Nutzer mit reauthenticateWithRedirect() und reauthenticateWithPopup() neu zu authentifizieren. Dies kann verwendet werden, um neue Anmeldedaten für sensible Vorgänge abzurufen, die eine aktuelle Anmeldung erfordern.