Authentifizieren Sie sich mithilfe von SAML in Web-Apps

Wenn Sie mit Identity Platform auf die Firebase-Authentifizierung aktualisiert haben, können Sie Ihre Benutzer bei Firebase mithilfe des SAML-Identitätsanbieters Ihrer Wahl authentifizieren. Dadurch ist es möglich, Ihre SAML-basierte SSO-Lösung zum Anmelden von Benutzern bei Ihrer Firebase-App zu verwenden.

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

Bevor Sie beginnen

Um Benutzer über einen SAML-Identitätsanbieter anzumelden, müssen Sie zunächst einige Informationen vom Anbieter sammeln:

• 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 zur Validierung der vom Identitätsanbieter signierten Token verwendet wird.
• Die Entitäts-ID Ihrer App : Ein URI, der Ihre App, den „Dienstanbieter“, identifiziert.

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

1. Fügen Sie Firebase zu Ihrem JavaScript-Projekt 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. Notieren Sie sich die generierte Anbieter-ID: etwa 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 Public-Key-Zertifikat Ihres Identitätsanbieters an. Geben Sie außerdem die Entitäts-ID Ihrer App (des Dienstanbieters) an. Diese Werte müssen genau mit den Werten übereinstimmen, die Ihnen Ihr Provider 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 abzuwickeln:

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

   Modulare Web-API

   import { SAMLAuthProvider } from "firebase/auth";
   
   const provider = new SAMLAuthProvider('saml.example-provider');
   

   Web-Namespace-API

   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 zur Anmeldeseite des Anbieters umleiten oder die Anmeldeseite in einem Popup-Browserfenster öffnen.

   Fluss umleiten

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

   Modulare Web-API

   import { getAuth, signInWithRedirect } from "firebase/auth";
   
   const auth = getAuth();
   signInWithRedirect(auth, provider);
   

   Web-Namespace-API

   firebase.auth().signInWithRedirect(provider);
   

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

   Modulare Web-API

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

   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

   Modulare Web-API

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

   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 Benutzers nur, wenn sie im NameID Attribut der SAML-Assertion vom Identitätsanbieter bereitgestellt wird:

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

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() und reauthenticateWithPopup() erneut zu authentifizieren. Dies kann verwendet werden, um neue Anmeldeinformationen für vertrauliche Vorgänge abzurufen, die eine kürzliche Anmeldung erfordern.