Plugin Đăng nhập L2L - Thiết lập

Last updated: June 19, 2026

Plugin Đăng nhập L2L là một trong những thành phần của dự án L2L Studio. Mục đích chính của plugin này là cho phép bạn sử dụng L2L làm nhà cung cấp SSO cho ứng dụng L2L Studio của mình. Điều này cho phép bạn duy trì mức độ bảo mật cao cho dữ liệu của mình.

Hướng dẫn này sẽ giải thích cách thêm plugin Đăng nhập L2L vào bất kỳ ứng dụng Bubble nào.

Cấu hình Plugin Đăng nhập L2L trên một dự án hiện có

  1. Thêm plugin Đăng nhập L2L vào Ứng dụng của bạn
  2. Bật Workflow API trong Trình chỉnh sửa Bubble. Đi đến Settings → API và nhấp vào hộp kiểm bên cạnh “Bật Workflow API và các workflow backend.” Ghi lại URL gốc của Workflow API, vì URL này sẽ được sử dụng sau.
  3. Thêm một tham số bổ sung vào kiểu dữ liệu User. Đi đến tab Data và nhấp vào kiểu dữ liệu “User”. Thêm trường sau với kiểu được chỉ định:
    1. LoginError → văn bản
  4. Thêm một kiểu dữ liệu mới để lưu trữ các biến được sử dụng cho cấu hình đăng nhập. Đi đến tab Data và tạo một kiểu dữ liệu mới có tên “LoginConfig.” Trong kiểu dữ liệu LoginConfig mới, thêm các trường mới sau với kiểu dữ liệu được chỉ định:
    1. AuthExpiresMinutes → số
    2. BubbleAppCertificate → văn bản
    3. BubbleAppPrivateKey → văn bản
    4. BubbleAppURL → văn bản
    5. CallbackURL → văn bản
    6. DispatchCertificate → văn bản
    7. DispatchServer → văn bản
  5. Thêm một kiểu dữ liệu mới để lưu trữ các Phiên người dùng. Đi đến tab Data và tạo một kiểu dữ liệu mới có tên "UserSession." Thêm các trường sau:
    1. AuthExpires → ngày
    2. NameId → văn bản
    3. UserUniqueId → văn bản
  6. Tạo một Trang mới trong trường hợp đăng nhập lỗi.
    1. Đặt tên trang mới là “login_error”
    2. Tạo một phần tử văn bản với nội dung động sau: Current User’s LoginError
  7. Tạo một workflow API mới để xử lý callback xác thực từ máy chủ Điều phối L2L.
    1. Trong trình chỉnh sửa Bubble, đi đến trình chọn trang và chọn “Backend workflows.”
    2. Nhấp vào hộp có dấu chấm để tạo một workflow backend mới, chọn “New API workflow…” và nhập các nội dung sau vào hộp thoại:
      1. Tên workflow API: login_complete
      2. Công khai dưới dạng workflow API công khai: đã chọn
      3. Workflow này có thể chạy mà không cần xác thực: đã chọn
      4. Bỏ qua các quy tắc riêng tư khi chạy workflow: không chọn
      5. Kích hoạt workflow bằng: POST
      6. Định nghĩa tham số: Định nghĩa thủ công
      7. Thêm tham số mới:
        1. Khóa: SAMLResponse
        2. Kiểu: văn bản
        3. Là danh sách/mảng: không chọn
        4. Tùy chọn: không chọn
        5. Querystring: không chọn
      8. Thêm tham số mới:
        1. Khóa: sessionid
        2. Kiểu: văn bản
        3. Là danh sách/mảng: không chọn
        4. Tùy chọn: đã chọn
        5. Querystring: đã chọn
      9. Thêm tham số mới:
        1. Khóa: user_unique_id
        2. Kiểu: văn bản
        3. Querystring: đã chọn
      10. Kiểu phản hồi: Chuyển hướng trang (302)
      11. Chuyển hướng khi thành công: index
      12. Chuyển hướng khi lỗi: login_error
    3. Thêm một hành động mới bằng cách nhấp vào hộp có dấu chấm với dòng chữ “Nhấp vào đây để thêm một hành động…” và chọn Action → Plugins → validate_response. Nhập các nội dung sau vào hộp thoại:
      1. Phản hồi: SAMLResponse
      2. Chứng chỉ Điều phối: Search for LoginConfigs:first item’s DispatchCertificate
      3. URL ứng dụng Bubble Search for LoginConfigs:first item’s BubbleAppURL
      4. Máy chủ Search for LoginConfigs:first item’s DispatchServer
    4. Thêm một hành động mới khác và chọn Data (Things) → Create a new thing...
      1. Trong hộp thoại, chọn UserSession cho Type
      2. Nhấp vào "Set another field" cho từng mục sau:
        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. Nhập nội dung sau trong phần “Only when”: Result of step 1 (validate_response)’s Is Authenticated is “yes”
    5. Thêm một hành động mới nữa và chọn Account → Make changes to current user.
      1. Trong hộp thoại, nhấp vào “Change another field” và nhập nội dung sau: LoginError = Result of step 1 (validate_response)’s Error
  8. Thêm một workflow có thể tái sử dụng mới để buộc người dùng đăng nhập.
    1. Từ trình chọn Trang, nhấp vào “Add a new reusable element…” và đặt tên phần tử có thể tái sử dụng mới là: L2L Login
    2. Nhấp vào tab Workflow
    3. Thêm một sự kiện mới bằng cách nhấp vào hộp có dấu chấm có tên “Nhấp vào đây để thêm một sự kiện…” và chọn Custom → Create a custom event…
    4. Nhập các nội dung sau vào Hộp thoại:
      1. Tên sự kiện: L2L Login
      2. Chỉ khi: Search for UserSessions
      3. Trong hộp Search for UserSessions, nhập các nội dung sau:
        1. Kiểu: UserSession
        2. Thêm các điều kiện sau:
          1. UserUniqueId = CurrentUser's unique id
          2. AuthExpires > Current date/time
      4. Cập nhật phần Only when trong hộp L2L Login để hiển thị: Search for UserSessions:count is 0
      5. Thêm một hành động mới bằng cách nhấp vào hộp có dấu chấm có tên “Nhấp vào đây để thêm một hành động…”
      6. Chọn Plugins → get_l2l_login_url
      7. Trong hộp thoại, nhập các nội dung sau:
        1. Máy chủ Điều phối: Search for LoginConfigs:first item’s DispatchServer
        2. Khóa riêng của ứng dụng Bubble: Search for LoginConfigs: first item’s BubbleAppPrivateKey
        3. Chứng chỉ ứng dụng Bubble: Search for LoginConfigs:first item’s BubbleAppCertificate
        4. URL ứng dụng Bubble: Search for LoginConfigs:first item’s BubbleAppURL
        5. URL callback*: Search for LoginConfigs:first item’s CallbackURL  
          1. *Đối với phiên bản 2.0.0 và trước đó, hãy sử dụng biểu thức sau cho URL callback: Search for LoginConfigs:first item’s CallbackURL Arbitrary Text CurrentUser's unique id và nhập văn bản sau cho mục Arbitrary Text: ?user_unique_id=
        6. ID người dùng duy nhất: CurrentUser's unique id
    5. Thêm một hành động mới bằng cách nhấp vào “Nhấp vào đây để thêm hành động…”
      1. Chọn Navigation → Open an external website
      2. Trong hộp thoại, nhập các nội dung sau:
        1. Đích: Result of step 1 (get_l2l_login_url)’s login_url
    6. Đặt chiều cao của phần tử có thể tái sử dụng thành 0 để có thể thêm phần tử này vào từng trang
      1. Đi đến tab Design
      2. Chọn hộp màu trắng
      3. Trong hộp thoại, chọn tab Appearance
      4. Đặt chiều cao thành: 0
  9. Thêm workflow L2L Login vào mọi trang yêu cầu xác thực. Hướng dẫn này sẽ chỉ cho bạn cách thêm workflow này vào trang index.
    1. Chọn “index” trong trình chọn Trang và chọn tab Design
    2. Kéo L2L Login từ phần Reusable Elements lên đầu trang.
    3. Nhấp vào tab Workflow
    4. Tạo một sự kiện mới bằng cách nhấp vào hộp có tên “Nhấp vào đây để thêm một sự kiện…” và chọn General → Page is loaded
    5. Thêm một hành động mới bằng cách nhấp vào hộp có tên “Nhấp vào đây để thêm một hành động…”
    6. Chọn Custom Events → Trigger a custom event from a reusable element
    7. Trong hộp thoại, nhập các nội dung sau:
      1. Phần tử có thể tái sử dụng: L2L Login A (hoặc tên phần tử mới của bạn)
      2. Sự kiện tùy chỉnh: L2L Login

Cấu hình ứng dụng

  1. Thêm liên kết đến ứng dụng Studio trong L2L Dispatch
    1. Chúng tôi khuyến nghị thêm một liên kết trong trang web sandbox đến phiên bản phát triển và một liên kết đến ứng dụng Bubble Live trong các trang web sản xuất của bạn. Đối với phiên bản phát triển, hãy đảm bảo thêm /version-test/ vào cuối URL Bubble. Đối với phiên bản Live, hãy đảm bảo không thêm phần này.
  2. Tạo một chứng chỉ tự ký và khóa mới sẽ được sử dụng để xác thực ứng dụng Bubble với máy chủ L2L Dispatch. Các tệp này sẽ được sử dụng ở bước 3.
  3. Tải xuống chứng chỉ L2L.
  4. Nhập dữ liệu ứng dụng mới vào Bubble. Trong khi xây dựng ứng dụng, hãy đảm bảo chọn cơ sở dữ liệu Development. Khi triển khai lên phiên bản live, hãy đảm bảo chọn cơ sở dữ liệu Live.
    1. Đi đến tab Data → App data, chọn “All LoginConfigs”, sau đó nhấp vào nút “New entry”.
    2. Nhập các thông tin sau vào biểu mẫu mới:
      1. AuthExpiresMinutes → 720
        1. 720 phút tương đương 12 giờ. Bạn có thể tùy chỉnh trường này theo nhu cầu của ứng dụng.
      2. BubbleAppCertificate → Sao chép/dán toàn bộ nội dung của tệp certificate.pem được tạo ở bước 2.
      3. BubbleAppPrivateKey → Sao chép/dán toàn bộ nội dung của tệp key.pem được tạo ở bước 2.
      4. BubbleAppURL → Đây là URL của ứng dụng Bubble. Bạn có thể tìm thấy URL này trong Bubble Editor, tại Settings → Domain / email nếu bạn có miền tùy chỉnh. Nếu không có miền tùy chỉnh, bạn có thể tìm thấy URL này bằng cách nhấp vào nút “run” trên màn hình danh sách Bubble App. Xóa tất cả nội dung trừ miền đầy đủ. URL sẽ có dạng như sau: acme-app.bubbleapps.io
        1. URL này sẽ giống nhau trong cả cơ sở dữ liệu Bubble Development và Live. Không thêm /version-test.
      5. CallbackURL → Sau khi xác thực, L2L sẽ đưa trình duyệt trở lại URL này. Bạn sẽ cần tạo URL này. Trước tiên, sao chép URL trong màn hình Settings → API có tên là “Workflow API root URL.” Sau đó thêm “/login_complete” vào cuối. URL sẽ có dạng như sau: https://acme-app.bubbleapps.io/version-test/api/1.1/wf/login_complete
      6. DispatchCertificate → Đây là chứng chỉ của máy chủ L2L Dispatch. Chứng chỉ này đã được tải xuống ở bước 3.
      7. DispatchServer → Đây là máy chủ L2L Dispatch của khách hàng. Hãy đảm bảo bao gồm “https://.” URL sẽ có dạng như sau: https://acme.leading2lean.com

Phát hành ứng dụng

Bây giờ Plugin L2L đã được thêm, dữ liệu và quy trình làm việc đã được xác định, và ứng dụng đã được cấu hình, bạn có thể xuất bản ứng dụng. Một số tính năng của Bubble bị vô hiệu hóa trước khi xuất bản, vì vậy cần thêm gói đăng ký để kiểm thử đầy đủ plugin Đăng nhập L2L.

Sau khi ứng dụng đã được kiểm thử, bạn sẽ cần cấu hình ứng dụng cho Trang web Live. Chỉ cần làm theo các bước trong phần "Cấu hình ứng dụng" cho cơ sở dữ liệu Live của bạn.

Khắc phục sự cố

Nếu bạn gặp lỗi trên ứng dụng Bubble hoặc máy chủ L2L, hãy kiểm tra những điều sau:

  • Kiểm tra từng Cấu hình Đăng nhập để đảm bảo chúng không có khoảng trắng thừa hoặc dòng mới.
  • Đảm bảo URL ứng dụng Bubble trong Cấu hình Đăng nhập khớp với URL của Cấu hình ứng dụng L2L Studio.

Bài viết liên quan