Authentifizieren Sie sich mit SAML in Web-Apps

Wenn Sie ein Upgrade auf Firebase-Authentifizierung mit Identity Platform durchgeführt haben, können Sie Ihre Benutzer mit Firebase mit dem SAML-Identitätsanbieter Ihrer Wahl authentifizieren. Dadurch können Sie Ihre SAML-basierte SSO-Lösung verwenden, um Benutzer bei Ihrer Firebase-App anzumelden.

Die Firebase-Authentifizierung unterstützt nur den vom Dienstanbieter initiierten SAML-Fluss.

Bevor Sie beginnen

Um Benutzer mit einem SAML-Identitätsanbieter anzumelden, müssen Sie zunächst einige Informationen vom Anbieter erfassen:

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

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

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

  2. Wenn Sie noch kein Upgrade auf Firebase Authentication mit Identity Platform durchgeführt haben, tun Sie dies. Die SAML-Authentifizierung ist nur in aktualisierten Projekten verfügbar.

  3. Klicken Sie auf der Seite Anmeldeanbieter der Firebase- Konsole auf Neuen Anbieter hinzufügen und dann auf SAML .

  4. Geben Sie diesem Anbieter einen Namen. Beachten Sie die generierte Anbieter-ID: etwas wie saml.example-provider . Sie benötigen diese ID, wenn Sie Ihrer App einen Anmeldecode hinzufügen.

  5. Geben Sie die Entitäts-ID, die SSO-URL und das öffentliche Schlüsselzertifikat 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 Ihnen Ihr Anbieter zugewiesen hat.

  6. Speichern Sie Ihre Änderungen.

  7. Wenn Sie die Domäne Ihrer App noch nicht autorisiert haben, fügen Sie sie der Zulassungsliste auf der Seite Authentifizierung > Einstellungen der Firebase-Konsole hinzu.

Behandeln Sie den Anmeldevorgang mit dem Firebase SDK

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

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

    Web version 9

    import { SAMLAuthProvider } from "firebase/auth";

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

    Web version 8

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

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

    Sie können den Benutzer entweder auf die Anmeldeseite des Anbieters umleiten oder die Anmeldeseite in einem Popup-Browserfenster öffnen.

    Fluss umleiten

    Leiten Sie zur Anmeldeseite des Anbieters um, indem signInWithRedirect() aufrufen:

    Web version 9

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

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

    Web version 8

    firebase.auth().signInWithRedirect(provider);

    Nachdem der Benutzer die Anmeldung abgeschlossen hat und zu Ihrer App zurückgekehrt ist, können Sie das Anmeldeergebnis abrufen, indem getRedirectResult() aufrufen.

    Web version 9

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

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

    Popup-Flow

    Web version 9

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

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

  2. Während sich die obigen Beispiele auf Anmeldeabläufe konzentrieren, können Sie dasselbe Muster verwenden, um einen SAML-Anbieter mit linkWithRedirect() und linkWithPopup() mit einem vorhandenen Benutzer zu verknüpfen und einen Benutzer mit reauthenticateWithRedirect() linkWithRedirect() und linkWithPopup() reauthenticateWithPopup() zu authentifizieren. die verwendet werden können, um neue Anmeldeinformationen für vertrauliche Vorgänge abzurufen, die eine kürzlich erfolgte Anmeldung erfordern.