L2L ログインプラグイン - セットアップ

Last updated: June 19, 2026

L2L ログインプラグインは、L2L スタジオプロジェクトのコンポーネントの1つです。このプラグインの主な目的は、L2L スタジオアプリのSSOプロバイダーとしてL2Lを使用できるようにすることです。これにより、データを高いレベルでセキュリティ保護できます。

このガイドでは、任意のBubbleアプリにL2L ログインプラグインを追加する方法を説明します。

既存のプロジェクトでL2L ログインプラグインを設定する

  1. アプリにL2L ログインプラグインを追加します
  2. Bubble エディタで Workflow API を有効にします。Settings → API に移動し、「Enable Workflow API and backend workflows」の横にあるチェックボックスをクリックします。Workflow API のルート URL をメモします。後で使用します。
  3. User データ型に追加のパラメータを追加します。Data タブに移動し、「User」データ型をクリックします。次のフィールドを指定されたタイプで追加します。
    1. LoginError → text
  4. ログイン設定に使用する変数を保持する新しいデータ型を追加します。Data タブに移動し、「LoginConfig」という名前の新しいデータ型を作成します。新しい LoginConfig データ型に、次の新しいフィールドを指定されたデータ型で追加します。
    1. AuthExpiresMinutes → number
    2. BubbleAppCertificate → text
    3. BubbleAppPrivateKey → text
    4. BubbleAppURL → text
    5. CallbackURL → text
    6. DispatchCertificate → text
    7. DispatchServer → text
  5. User Sessions を保持する新しいデータ型を追加します。Data タブに移動し、「UserSession」という名前の新しいデータ型を作成します。次のフィールドを追加します。
    1. AuthExpires → date
    2. NameId → text
    3. UserUniqueId → text
  6. ログインエラーが発生した場合に表示する新しいページを作成します。
    1. 新しいページを「login_error」と呼びます
    2. 次の動的コンテンツを含むテキスト要素を作成します：Current User’s LoginError
  7. L2L Dispatch サーバーからの認証コールバックを処理する新しい API ワークフローを作成します。
    1. Bubble エディタでページ選択メニューに移動し、「Backend workflows」を選択します。
    2. 点線のボックスをクリックして新しいバックエンドワークフローを作成し、「New API workflow…」を選択して、ダイアログボックスに次の内容を入力します。
      1. API workflow name: login_complete
      2. Expose as a public API workflow: チェック
      3. This workflow can be run without authentication: チェック
      4. Ignore privacy rules when running the workflow: チェックしない
      5. Trigger workflow with: POST
      6. Parameter definition: Manual definition
      7. 新しいパラメータを追加します：
        1. Key: SAMLResponse
        2. Type: text
        3. Is a list/array: チェックしない
        4. Optional: チェックしない
        5. Querystring: チェックしない
      8. 新しいパラメータを追加します：
        1. Key: sessionid
        2. Type: text
        3. Is a list/array: チェックしない
        4. Optional: チェック
        5. Querystring: チェック
      9. 新しいパラメータを追加します：
        1. Key: user_unique_id
        2. Type: text
        3. Querystring: チェック
      10. Response Type: Page redirect (302)
      11. Redirection on success: index
      12. Redirection on error: login_error
    3. 「Click here to add an action…」というテキストの点線のボックスをクリックして新しいアクションを追加し、Action → Plugins → validate_response を選択します。ダイアログボックスに次の内容を入力します：
      1. Response: SAMLResponse
      2. Dispatch Certificate: 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. もう一つ新しいアクションを追加し、Data (Things) → Create a new thing... を選択します。
      1. ダイアログボックスで、Type に UserSession を選択します
      2. 次の各項目で「Set another field」をクリックします：
        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. 「Only when」セクションに次を入力します：Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. さらに新しいアクションを追加し、Account → Make changes to current user を選択します。
      1. ダイアログボックスで「Change another field」をクリックし、次を入力します：LoginError = Result of step 1 (validate_response)’s Error
  8. ユーザーにログオンを強制するために使用する新しい再利用可能なワークフローを追加します。
    1. ページ選択メニューから「Add a new reusable element…」をクリックし、新しい再利用可能要素を L2L Login と呼びます
    2. Workflow タブをクリックします
    3. 「Click here to add an event…」という点線のボックスをクリックして新しいイベントを追加し、Custom → Create a custom event… をクリックします
    4. ダイアログに次の内容を入力します：
      1. Event Name: L2L Login
      2. Only when: Search for UserSessions
      3. Search for UserSessions ボックスに次の内容を入力します：
        1. Type: UserSession
        2. 次の制約を追加します：
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. L2L Login ボックスの Only when セクションを更新し、次のようにします：Search for UserSessions:count is 0
      5. 「Click here to add an action…」という点線のボックスをクリックして新しいアクションを追加します
      6. Plugins → get_l2l_login_url を選択します
      7. ダイアログに次の内容を入力します：
        1. Dispatch Server: Search for LoginConfigs:first item’s DispatchServer
        2. Bubble App Private Key: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Bubble App Certificate: 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. *バージョン 2.0.0 以前の場合は、Callback URL に次の式を使用します：Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id。Arbitrary Text の入力には次のテキストを入力します：?user_unique_id=
        6. User Unique ID: CurrentUser's unique id
    5. 「Click here to add action…」をクリックして新しいアクションを追加します。
      1. Navigation → Open an external website を選択します
      2. ダイアログに次の内容を入力します：
        1. Destination: Result of step 1 (get_l2l_login_url)’s login_url
    6. 各ページに追加できるように、再利用可能要素の高さを 0 に設定します。
      1. Design タブに移動します
      2. 白いボックスを選択します
      3. ダイアログで Appearance タブを選択します
      4. 高さを 0 に設定します
  9. 認証が必要なすべてのページに L2L Login ワークフローを追加します。このガイドでは、index ページに追加する方法を説明します。
    1. ページ選択メニューで「index」を選択し、Design タブを選択します
    2. Reusable Elements セクションから L2L Login をページの上部にドラッグします。
    3. Workflow タブをクリックします
    4. 「Click here to add an event…」というボックスをクリックして新しいイベントを作成し、General → Page is loaded を選択します
    5. 「Click here to add an action…」というボックスをクリックして新しいアクションを追加します
    6. Custom Events → Trigger a custom event from a reusable element を選択します
    7. ダイアログボックスに次の内容を入力します：
      1. Reusable element: L2L Login A（または新しい要素に付けた名前）
      2. Custom event: L2L Login

アプリを設定する

  1. L2L 発送にスタジオアプリへのリンクを追加する
    1. サンドボックスサイトには開発バージョンへのリンクを、本番サイトにはLive Bubbleアプリへのリンクを追加することをお勧めします。開発バージョンの場合は、Bubble URLの末尾に/version-test/を追加してください。Liveバージョンの場合は、追加しないでください。
  2. L2L 発送サーバーでBubbleアプリを検証するために使用する、新しい自己署名証明書とキーを作成します。これらは手順3で使用します。
  3. L2L証明書をダウンロードします。
  4. Bubbleに新しいアプリデータを入力します。アプリの構築中は、Developmentデータベースを選択してください。Liveにデプロイする際は、Liveデータベースを選択してください。
    1. Data → App dataタブに移動し、「All LoginConfigs」を選択して、「New entry」ボタンをクリックします。
    2. 新しいフォームに以下を入力します：
      1. AuthExpiresMinutes → 720
        1. 720分は12時間です。このフィールドは、アプリに適した値にカスタマイズできます。
      2. BubbleAppCertificate → 手順2で生成したcertificate.pemファイルの内容全体をコピーして貼り付けます。
      3. BubbleAppPrivateKey → 手順2で生成したkey.pemファイルの内容全体をコピーして貼り付けます。
      4. BubbleAppURL → これはBubbleアプリのURLです。カスタムドメインを使用している場合は、Bubble EditorのSettings → Domain / emailで確認できます。カスタムドメインを使用していない場合は、Bubble Appリスト画面で「run」ボタンをクリックすると確認できます。完全なドメイン以外をすべて削除します。次のようになります：acme-app.bubbleapps.io
        1. DevelopmentとLiveの両方のBubbleデータベースで同じものになります。/version-testを追加しないでください。
      5. CallbackURL → 認証後、L2LはブラウザをこのURLに戻します。このURLは自分で作成する必要があります。まず、Settings → API画面にある「Workflow API root URL」というURLをコピーします。次に、末尾に「/login_complete」を追加します。次のようになります：https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → これはL2L 発送サーバーの証明書です。手順3でダウンロードしたものです。
      7. DispatchServer → これはお客様のL2L 発送サーバーです。「https://」を含めてください。次のようになります：https://acme.leading2lean.com

アプリを公開する

L2Lプラグインが追加され、データとワークフローが定義され、アプリが設定されたので、アプリを公開できます。Bubbleの一部の機能は公開前は無効になっているため、L2Lログインプラグインを完全にテストするにはサブスクリプションを追加する必要があります。

アプリのテストが完了したら、Liveサイト用にアプリを設定する必要があります。Liveデータベースについて、「アプリの設定」セクションの手順に従ってください。

トラブルシューティング

BubbleアプリまたはL2Lサーバーでエラーが発生した場合は、次の点を確認してください。

  • 各ログイン設定に余分なスペースや改行がないことを確認します。
  • ログイン設定のBubbleアプリURLが、L2Lスタジオアプリ設定のURLと一致していることを確認します。

関連記事