L2L-Anmelde-Plugin – Einrichtung

Last updated: June 19, 2026

Das L2L-Anmelde-Plugin ist eine der Komponenten des L2L-Studio-Projekts. Der Hauptzweck dieses Plugins besteht darin, Ihnen die Verwendung von L2L als SSO-Anbieter für Ihre L2L-Studio-App zu ermöglichen. Dadurch können Sie ein hohes Maß an Sicherheit für Ihre Daten gewährleisten.

In dieser Anleitung wird erklärt, wie Sie das L2L-Anmelde-Plugin zu jeder Bubble-App hinzufügen.

Konfigurieren des L2L-Anmelde-Plugins in einem bestehenden Projekt

  1. Fügen Sie das L2L-Anmeldung-Plugin zu Ihrer App hinzu
  2. Aktivieren Sie die Workflow-API im Bubble-Editor. Gehen Sie zu Einstellungen → API und klicken Sie auf das Kontrollkästchen neben „Workflow-API und Backend-Workflows aktivieren“. Notieren Sie sich die Stamm-URL der Workflow-API, da sie später verwendet wird.
  3. Fügen Sie dem Datentyp „Benutzer“ einen zusätzlichen Parameter hinzu. Gehen Sie zum Tab „Daten“ und klicken Sie auf den Datentyp „Benutzer“. Fügen Sie das folgende Feld mit dem angegebenen Typ hinzu:
    1. LoginError → Text
  4. Fügen Sie einen neuen Datentyp hinzu, um Variablen für die Anmeldungskonfiguration zu speichern. Gehen Sie zum Tab „Daten“ und erstellen Sie einen neuen Datentyp namens „LoginConfig“. Fügen Sie unter dem neuen Datentyp „LoginConfig“ die folgenden neuen Felder mit dem angegebenen Datentyp hinzu:
    1. AuthExpiresMinutes → Zahl
    2. BubbleAppCertificate → Text
    3. BubbleAppPrivateKey → Text
    4. BubbleAppURL → Text
    5. CallbackURL → Text
    6. DispatchCertificate → Text
    7. DispatchServer → Text
  5. Fügen Sie einen neuen Datentyp hinzu, um Benutzersitzungen zu speichern. Gehen Sie zum Tab „Daten“ und erstellen Sie einen neuen Datentyp namens „UserSession“. Fügen Sie die folgenden Felder hinzu:
    1. AuthExpires → Datum
    2. NameId → Text
    3. UserUniqueId → Text
  6. Erstellen Sie eine neue Seite für den Fall eines Anmeldefehlers.
    1. Nennen Sie die neue Seite „login_error“
    2. Erstellen Sie ein Textelement mit folgendem dynamischen Inhalt: Current User’s LoginError
  7. Erstellen Sie einen neuen API-Workflow, um den Authentifizierungs-Callback vom L2L-Versandserver zu verarbeiten.
    1. Gehen Sie im Bubble-Editor zur Seitenauswahl und wählen Sie „Backend-Workflows“.
    2. Klicken Sie auf das gepunktete Feld, um einen neuen Backend-Workflow zu erstellen, wählen Sie „Neuer API-Workflow…“ und geben Sie im Dialogfeld Folgendes ein:
      1. Name des API-Workflows: login_complete
      2. Als öffentliche API-Workflow-API verfügbar machen: aktiviert
      3. Dieser Workflow kann ohne Authentifizierung ausgeführt werden: aktiviert
      4. Datenschutzregeln bei der Ausführung des Workflows ignorieren: nicht aktiviert
      5. Workflow auslösen mit: POST
      6. Parameterdefinition: Manuelle Definition
      7. Neuen Parameter hinzufügen:
        1. Schlüssel: SAMLResponse
        2. Typ: Text
        3. Ist eine Liste/ein Array: nicht aktiviert
        4. Optional: nicht aktiviert
        5. Querystring: nicht aktiviert
      8. Neuen Parameter hinzufügen:
        1. Schlüssel: sessionid
        2. Typ: Text
        3. Ist eine Liste/ein Array: nicht aktiviert
        4. Optional: aktiviert
        5. Querystring: aktiviert
      9. Neuen Parameter hinzufügen:
        1. Schlüssel: user_unique_id
        2. Typ: Text
        3. Querystring: aktiviert
      10. Antworttyp: Seitenweiterleitung (302)
      11. Weiterleitung bei Erfolg: index
      12. Weiterleitung bei Fehler: login_error
    3. Fügen Sie eine neue Aktion hinzu, indem Sie auf das gepunktete Feld mit dem Text „Klicken Sie hier, um eine Aktion hinzuzufügen…“ klicken und Aktion → Plugins → validate_response auswählen. Geben Sie im Dialogfeld Folgendes ein:
      1. Antwort: SAMLResponse
      2. Versandzertifikat: Search for LoginConfigs:first item’s DispatchCertificate
      3. Bubble-App-URL Search for LoginConfigs:first item’s BubbleAppURL
      4. Server Search for LoginConfigs:first item’s DispatchServer
    4. Fügen Sie eine weitere neue Aktion hinzu und wählen Sie Daten (Dinge) → Neues Ding erstellen...
      1. Wählen Sie im Dialogfeld UserSession als Typ aus
      2. Klicken Sie für jedes der folgenden Felder auf „Weiteres Feld festlegen“:
        1. AuthExpires = Current date/time +(minutes): Search for LoginConfigs:first item's AuthExpiresMinutes
        2. NameId = Result of step 1 (validate_response)’s Name ID
        3. UserUniqueId = user_unique_id
      3. Geben Sie im Abschnitt „Nur wenn“ Folgendes ein: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Fügen Sie eine weitere neue Aktion hinzu und wählen Sie Konto → Änderungen am aktuellen Benutzer vornehmen.
      1. Klicken Sie im Dialogfeld auf „Weiteres Feld ändern“ und geben Sie Folgendes ein: LoginError = Result of step 1 (validate_response)’s Error
  8. Fügen Sie einen neuen wiederverwendbaren Workflow hinzu, der Benutzer zur Anmeldung zwingt.
    1. Klicken Sie in der Seitenauswahl auf „Neues wiederverwendbares Element hinzufügen…“ und nennen Sie das neue wiederverwendbare Element: L2L Login
    2. Klicken Sie auf den Tab „Workflow“
    3. Fügen Sie ein neues Ereignis hinzu, indem Sie auf das gepunktete Feld „Klicken Sie hier, um ein Ereignis hinzuzufügen…“ klicken und Benutzerdefiniert → Benutzerdefiniertes Ereignis erstellen… auswählen
    4. Geben Sie im Dialogfeld Folgendes ein:
      1. Ereignisname: L2L Login
      2. Nur wenn: Search for UserSessions
      3. Geben Sie im Feld „Search for UserSessions“ Folgendes ein:
        1. Typ: UserSession
        2. Fügen Sie die folgenden Einschränkungen hinzu:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Aktualisieren Sie den Abschnitt „Nur wenn“ im Feld „L2L Login“, sodass er lautet: Search for UserSessions:count is 0
      5. Fügen Sie eine neue Aktion hinzu, indem Sie auf das gepunktete Feld „Klicken Sie hier, um eine Aktion hinzuzufügen…“ klicken
      6. Wählen Sie Plugins → get_l2l_login_url
      7. Geben Sie im Dialogfeld Folgendes ein:
        1. Versandserver: Search for LoginConfigs:first item’s DispatchServer
        2. Privater Schlüssel der Bubble-App: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Zertifikat der Bubble-App: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. Bubble-App-URL: Search for LoginConfigs:first item’s BubbleAppURL
        5. Callback-URL*: Search for LoginConfigs:first item’s CallbackURL  
          1. *Für Version 2.0.0 und früher verwenden Sie den folgenden Ausdruck für die Callback-URL: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id und geben Sie für den Eintrag „Beliebiger Text“ folgenden Text ein: ?user_unique_id=
        6. Eindeutige Benutzer-ID: CurrentUser's unique id
    5. Fügen Sie eine neue Aktion hinzu, indem Sie auf „Klicken Sie hier, um eine Aktion hinzuzufügen…“ klicken
      1. Wählen Sie Navigation → Externe Website öffnen
      2. Geben Sie im Dialogfeld Folgendes ein:
        1. Ziel: Result of step 1 (get_l2l_login_url)’s login_url
    6. Setzen Sie die Höhe des wiederverwendbaren Elements auf 0, damit es jeder Seite hinzugefügt werden kann
      1. Gehen Sie zum Tab „Design“
      2. Wählen Sie das weiße Feld aus
      3. Wählen Sie im Dialogfeld den Tab „Darstellung“ aus
      4. Setzen Sie die Höhe auf: 0
  9. Fügen Sie den L2L-Anmeldungsworkflow jeder Seite hinzu, auf der eine Authentifizierung erforderlich ist. Diese Anleitung zeigt Ihnen, wie Sie ihn zur Indexseite hinzufügen.
    1. Wählen Sie „index“ in der Seitenauswahl und anschließend den Tab „Design“ aus
    2. Ziehen Sie L2L Login aus dem Abschnitt „Wiederverwendbare Elemente“ an den oberen Rand der Seite.
    3. Klicken Sie auf den Tab „Workflow“
    4. Erstellen Sie ein neues Ereignis, indem Sie auf das Feld „Klicken Sie hier, um ein Ereignis hinzuzufügen…“ klicken und Allgemein → Seite ist geladen auswählen
    5. Fügen Sie eine neue Aktion hinzu, indem Sie auf das Feld „Klicken Sie hier, um eine Aktion hinzuzufügen…“ klicken
    6. Wählen Sie Benutzerdefinierte Ereignisse → Benutzerdefiniertes Ereignis aus einem wiederverwendbaren Element auslösen
    7. Geben Sie im Dialogfeld Folgendes ein:
      1. Wiederverwendbares Element: L2L Login A (oder wie auch immer Ihr neues Element heißt)
      2. Benutzerdefiniertes Ereignis: L2L Login

App konfigurieren

  1. Einen Link zur Studio-App in L2L Versand hinzufügen
    1. Wir empfehlen, auf einer Sandbox-Seite einen Link zur Entwicklungsversion und auf Ihren Produktionsseiten einen Link zur Live-Bubble-App hinzuzufügen. Für die Entwicklungsversion müssen Sie /version-test/ an das Ende der Bubble-URL anhängen. Für die Live-Version darf dieser Zusatz nicht enthalten sein.
  2. Erstellen Sie ein neues selbstsigniertes Zertifikat und einen Schlüssel, die zur Validierung der Bubble-App mit dem L2L Versandserver verwendet werden. Diese werden in Schritt 3 verwendet.
  3. L2L-Zertifikat herunterladen.
  4. Geben Sie neue App-Daten in Bubble ein. Achten Sie beim Erstellen der App darauf, die Entwicklungsdatenbank auszuwählen. Achten Sie beim Bereitstellen für die Live-Umgebung darauf, die Live-Datenbank auszuwählen.
    1. Gehen Sie zum Tab Daten → App-Daten, wählen Sie „Alle LoginConfigs“ aus und klicken Sie dann auf die Schaltfläche „Neuer Eintrag“.
    2. Geben Sie Folgendes in das neue Formular ein:
      1. AuthExpiresMinutes → 720
        1. 720 Minuten entsprechen 12 Stunden. Sie können dieses Feld an Ihre Anforderungen anpassen.
      2. BubbleAppCertificate → Kopieren Sie den gesamten Inhalt der in Schritt 2 generierten Datei certificate.pem und fügen Sie ihn ein.
      3. BubbleAppPrivateKey → Kopieren Sie den gesamten Inhalt der in Schritt 2 generierten Datei key.pem und fügen Sie ihn ein.
      4. BubbleAppURL → Dies ist die URL der Bubble-App. Sie finden diese im Bubble Editor unter Einstellungen → Domain / E-Mail, wenn Sie eine benutzerdefinierte Domain haben. Wenn Sie keine benutzerdefinierte Domain haben, finden Sie diese, indem Sie auf dem Bildschirm mit der Bubble-App-Liste auf die Schaltfläche „Ausführen“ klicken. Entfernen Sie alles außer der vollständigen Domain. Sie sieht folgendermaßen aus: acme-app.bubbleapps.io
        1. Sie ist in Ihren Entwicklungs- und Live-Bubble-Datenbanken identisch. Hängen Sie /version-test nicht an.
      5. CallbackURL → Nach der Authentifizierung sendet L2L den Browser zurück an diese URL. Sie müssen diese URL erstellen. Kopieren Sie zunächst die URL, die Sie im Bildschirm Einstellungen → API unter „Workflow API-Stamm-URL“ finden. Hängen Sie anschließend „/login_complete“ an das Ende an. Sie sollte folgendermaßen aussehen: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Dies ist das Zertifikat des L2L Versandservers. Es wurde in Schritt 3 heruntergeladen.
      7. DispatchServer → Dies ist der L2L Versandserver des Kunden. Achten Sie darauf, „https://“ einzuschließen. Er sollte folgendermaßen aussehen: https://acme.leading2lean.com

App veröffentlichen

Nachdem das L2L-Plugin hinzugefügt, Daten und Workflows definiert und die App konfiguriert wurden, können Sie die App veröffentlichen. Einige Bubble-Funktionen sind vor der Veröffentlichung deaktiviert, daher muss ein Abonnement hinzugefügt werden, um das L2L-Anmelde-Plugin vollständig zu testen.

Nachdem die App getestet wurde, müssen Sie die App für die Live-Site konfigurieren. Befolgen Sie einfach die Schritte im Abschnitt „App konfigurieren“ für Ihre Live-Datenbank.

Fehlerbehebung

Wenn Fehler in der Bubble-App oder auf dem L2L-Server auftreten, überprüfen Sie Folgendes:

  • Überprüfen Sie jede der Anmeldekonfigurationen darauf, dass sie keine zusätzlichen Leerzeichen oder Zeilenumbrüche enthält.
  • Stellen Sie sicher, dass die Bubble-App-URL Ihrer Anmeldekonfiguration mit der URL der L2L-Studio-App-Konfiguration übereinstimmt.

Verwandte Artikel