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 Public-Key-Zertifikat 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. Firebase zu Ihrem JavaScript-Projekt hinzufügen

  2. Wenn Sie noch nicht auf Firebase Authentication with Identity Platform umgestellt haben, holen Sie das nach. Die SAML-Authentifizierung ist nur in umgestellten Projekten verfügbar.

  3. Klicken Sie in der Firebase-Konsole auf der Seite Anbieter für Anmeldungen auf Neuen Anbieter hinzufügen und dann auf SAML.

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

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

  6. Speichern Sie die Änderungen.

  7. Falls Sie die Domain Ihrer Anwendung noch nicht autorisiert haben, fügen Sie sie der Liste der zulässigen Anwendungen auf der Seite Authentifizierung > Einstellungen der Firebase-Konsole 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 Console 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 über das SAML-Anbieterobjekt.

    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, für die eine aktuelle Anmeldung erforderlich ist.