Authentifizierung mit SAML in Web-Apps

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

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

Hinweis

Wenn Sie Nutzer über einen SAML-Identitätsanbieter anmelden möchten, müssen Sie zuerst einige Informationen vom Anbieter einholen:

  • Entitäts-ID des Anbieters: Ein URI, der den Identitätsanbieter identifiziert.
  • Die SAML-SSO-URL des Anbieters: Die URL der Anmeldeinformation des Identitätsanbieters. Seite.
  • Öffentliches Schlüsselzertifikat des Anbieters: Das Zertifikat, das zum Validieren von vom Identitätsanbieter signierten Tokens verwendet wird.
  • 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 with Identity Platform durchgeführt haben, tun Sie dies jetzt. SAML-Authentifizierung ist nur in Projekten mit Upgrade verfügbar.

  3. Unter Anbieter für Anmeldungen der Firebase-Konsole 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: etwa saml.example-provider. Sie benötigen diese ID, wenn Sie in Ihrer App anmelden.

  5. Geben Sie die Entitäts-ID, die SSO-URL und den öffentlichen Schlüssel Ihres Identitätsanbieters an Zertifikat. 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 die Änderungen.

  7. Falls Sie die Domain Ihrer Anwendung noch nicht autorisiert haben, fügen Sie sie der Zulassungsliste auf der Seite Authentifizierung > Einstellungen der Firebase-Konsole hinzu.

Anmeldevorgang mit dem Firebase SDK abwickeln

Gehen Sie wie folgt vor, um den Anmeldevorgang mit dem Firebase JavaScript SDK durchzuführen: Schritte:

  1. Erstellen Sie eine Instanz eines 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. Authentifizierung mit Firebase über das SAML-Anbieterobjekt

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

    Weiterleitungsablauf

    Leiten Sie durch Aufrufen von signInWithRedirect() zur Anmeldeseite des Anbieters weiter:

    Web 

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

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

    Web 

    firebase.auth().signInWithRedirect(provider);

    Nachdem der Nutzer sich angemeldet und zu Ihrer App zurückgekehrt ist, können Sie die indem du getRedirectResult() aufrufst.

    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 die UserInfo -Objekt enthält die E-Mail-Adresse des Nutzers nur dann, wenn sie im NameID-Attribut der SAML-Assertion vom Identitätsanbieter:

    <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 die Anmeldeabläufe. Mit demselben Muster können Sie jedoch einen SAML-Anbieter mit einem vorhandenen Nutzer über linkWithRedirect() und linkWithPopup() verknüpfen und einen Nutzer mit reauthenticateWithRedirect() und reauthenticateWithPopup() noch einmal authentifizieren. So können neue Anmeldedaten für sensible Vorgänge abgerufen werden, für die eine aktuelle Anmeldung erforderlich ist.