Các phần mở rộng và tích hợp tùy chỉnh

1. 1

   Dịch vụ hậu kết bên ngoài

   Tốt nhất cho ERP, cửa hàng web, WMS, BI và đồng bộ hóa tương tự. token vẫn ở trên máy chủ của bạn và dữ liệu di chuyển thông qua API và webhooks.

2. 2

   Phanele iframe cabinet

   Xây dựng một trang HTML/JavaScript thông thường bằng bất kỳ framework nào. SelSup nhúng nó vào iframe; nó không thực hiện mã React của bạn bên trong tủ.

3. 3

   SelSup backend module

   Cần cho một thị trường sâu hoặc tích hợp giao hàng tham gia vào các quy trình nền SelSup chia sẻ.

Giữ token trong một quản lý bí mật và gọi SelSup chỉ từ backend của bạn. Ứng dụng trình duyệt của bạn nên nói chuyện với API của bạn và không bao giờ nhận token SelSup.

Chia tách bộ điều chỉnh SelSup, hàng xếp và mô hình miền.

Sử dụng hộp thư đến cho các sự kiện tiếp theo và hộp thư ra để thay đổi ra ngoài. Cả hai tạp chí nên hỗ trợ chơi lại và kiểm toán.

SelSup webhook → inbox → domain worker → ERP/WMS
ERP/WMS change → outbox → SelSup API → reconciliation

Xây dựng một trang HTML/JavaScript thông thường bằng bất kỳ framework nào. SelSup nhúng nó vào iframe; nó không thực hiện mã React của bạn bên trong tủ.

Tự lưu bảng điều khiển trên một trang web HTTPS riêng biệt không chia sẻ tên miền cookie với tủ. mở tích hợp → My extensions → Thêm mở rộng và chọn tên, biểu tượng, URL, phần menu và vị trí. lưu bảng riêng mà không có quyền, sau đó chỉ bật các quyền cần thiết.

Một dịch vụ giao hàng thường bao gồm mã thông báo, thẻ, giá cả, cổ phiếu, đơn đặt hàng và cập nhật tình trạng nền.

Module này thay đổi nền SelSup chính và theo dõi quá trình xem xét, kiểm tra, định vị và phát hành của nó.

Chuyển đổi lỗi API bên ngoài thành giá trị ApplicationError ổn định và mã thông báo bên ngoài bị hủy hoặc không hợp lệ thành AccessException theo các quy tắc dự án hậu kết.

1. 1

   Tạo tài khoản thử nghiệm

   Các mã chỉ thử nghiệm, kho, sản phẩm và đơn đặt hàng riêng biệt từ dữ liệu sản xuất của khách hàng.

2. 2

   Thêm khả năng quan sát

   Theo dõi sự chậm trễ hàng, lỗi theo mã, số lần thử lại và sự khác biệt về sự hòa giải.

3. 3

   Kế hoạch di cư hợp đồng

   Cung cấp các trường cũ trong quá trình chuyển đổi và triển khai người tiêu dùng trước khi vô hiệu hóa định dạng cũ.

4. 4

   Phân khép tài liệu

   Người dùng phải biết cách hủy bỏ token, loại bỏ webhook và ngừng đồng bộ hóa mà không mất dữ liệu.

Chọn một trang menu (MENU_PAGE), một tab thẻ sản phẩm (PRODUCT_TAB) hoặc một tab đặt hàng (ORDER_TAB). Phần menu và vị trí chỉ áp dụng cho MENU_PAGE. Tab yêu cầu một thực thể được lưu với ID.

Chỉ được chia sẻ các trường ngữ cảnh được cấp. Người dùng cung cấp user.id và user.locale; CLIENT cung cấp client.id; ORGANIZATION cung cấp ID và tên tổ chức truy cập. PRODUCT cấp riêng product.modelId trên thẻ sản phẩm; ORDER cấp order.id trên một đơn đặt hàng. Các hồ sơ đầy đủ, liên hệ, mật khẩu và mã thông báo được loại trừ. Đây là các nhận dạng của trang đã mở, không phải bằng chứng truy cập cho phần sau của bạn.

{
  "type": "selsup.extension.context",
  "version": 1,
  "context": {
    "version": 1,
    "extensionId": "example-extension-id",
    "placement": "MENU_PAGE",
    "user": {"id": 101, "locale": "ru"},
    "client": {"id": 202},
    "organizations": [{"id": 303, "name": "Demo"}]
  }
}

[
  {
    "version": 1,
    "extensionId": "example",
    "placement": "PRODUCT_TAB",
    "apiMethods": [],
    "product": {
      "modelId": 404
    }
  },
  {
    "version": 1,
    "extensionId": "example",
    "placement": "ORDER_TAB",
    "apiMethods": [],
    "order": {
      "id": 505
    }
  }
]

Kiểm tra chính xác event.origin, event.source === window.parent, loại tin nhắn, phiên bản và cấu trúc. Sending ready on connection and request-context to refresh. SelSup kiểm tra lại truy cập và hợp nhất các yêu cầu thường xuyên. Không bao giờ chuyển token trong URL, bảng localStorage hoặc tin nhắn.

const allowedOrigins = new Set(['https://your-cabinet.example.com']);
window.addEventListener('message', (event) => {
  if (event.source !== window.parent || !allowedOrigins.has(event.origin)) return;
  const message = event.data;
  if (!message || message.type !== 'selsup.extension.context' || message.version !== 1) return;
  const context = message.context;
  if (!context || context.version !== 1 || !['MENU_PAGE', 'PRODUCT_TAB', 'ORDER_TAB'].includes(context.placement)) return;
  // The complete sample also validates fields and strips unknown properties.
  document.querySelector('#context').textContent = JSON.stringify(context, null, 2);
});
for (const origin of allowedOrigins) {
  window.parent.postMessage({type: 'selsup.extension.ready', version: 1}, origin);
}
// Refresh after connecting: use the validated origin, never "*".
window.parent.postMessage({type: 'selsup.extension.request-context', version: 1},
  'https://your-cabinet.example.com');

Nhà tác giả tuyên bố các phương pháp cần thiết trong cài đặt mở rộng. Mỗi client cài đặt cho phép các phương thức từ tuyên bố đó. API truy cập mặc định không có, bao gồm cả các cài đặt hiện có. Thay đổi danh sách yêu cầu đòi hỏi phải xem xét lại; các bản sao cài đặt không bao giờ nhận được quyền mới tự động.

Các máy chủ chỉ gọi các phương pháp dưới đây thông qua các dịch vụ SelSupFront với quyền của nhân viên hiện tại. Các kiểm soát truy cập máy chủ hiện có vẫn áp dụng. ClientService và authService hoàn toàn bị cấm; tất cả các phương thức bên ngoài danh sách này cũng bị từ chối. Các ứng dụng không thể cung cấp URL, tiêu đề, token hoặc cấu hình Axios tùy ý.

API trợ cấp độc lập với các quyền ngữ cảnh. context.apiMethods liệt kê các phương pháp được cấp. Một trợ cấp áp dụng cho phương pháp trên toàn bộ bộ bộ nội dung trong quyền truy cập của nhân viên, chứ không chỉ là thực thể trong tab hiện tại. Kết quả chỉ chứa các trường được ghi chép, không bao giờ là các đối tượng hoặc tín chỉ của Axios.

Một yêu cầu trong chuyến bay và tối đa một khởi động mỗi giây. Các ID yêu cầu 256 cuối cùng được bảo vệ chống lại trùng lặp. Hầm host: ACCESS_DENIED, INVALID_REQUEST, RATE_LIMITED, EDUPLICATE_REQUEST, EREQUEST_FAILED. Hình lỗi SDK cũng bao gồm NOT_CONNECTED, DISCONNECTED và TIMEOUT (20 giây). Không bao giờ tự động thử lại đột biến: một error, thời gian hoặc đóng iframe không có nghĩa là hoạt động đã được xoay ngược.

tagService.findTags              {query?, page?, limit?}   => {rows: [{id, name}]}
tagService.createTag             {name}                   => {id, name}
tagService.updateTag             {id, name}               => {id, name}
tagService.deleteTag             {id}                     => null
productService.updateFavourite   {id, favourite}          => null

id: positive safe integer; updateFavourite.id = product.modelId
favourite: boolean
name: 1..100 characters (trimmed); query: 0..100 characters
page: 1..10000, default 1; limit: 1..100, default 30

{
  "type": "selsup.extension.api-request",
  "version": 1,
  "requestId": "request-1",
  "method": "tagService.createTag",
  "params": {
    "name": "Demo"
  }
}

{
  "type": "selsup.extension.api-response",
  "version": 1,
  "requestId": "request-1",
  "ok": true,
  "result": {
    "id": 1,
    "name": "Demo"
  }
}

// connection = connectExtension(...) from selsup-extension.js
// Run from a button click after receiving context.apiMethods.
const tag = await connection.callApi('tagService.createTag', {name: 'Demo'});
console.log(tag.id, tag.name);

Mô hình có thể được sao chép vào một kho lưu trữ GitHub độc lập. Với Node.js 22+, thử nghiệm npm và thử nghiệm bắt đầu npm chạy và một tủ giả mạo địa phương mà không có phím API hoặc dữ liệu thực. Thiết lập config.js và triển khai năm tập tin tĩnh vào lưu trữ HTTPS. Tải các tệp liên kết dưới đây và sao chép nội dung của nó vào kho lưu kho GitHub của bạn.

cd selsup-extension-example
npm test
npm start
# Mock host: http://localhost:4174/
# Panel: http://127.0.0.1:4173/

Content-Security-Policy: default-src 'none'; script-src 'self'; style-src 'self'; connect-src 'none'; form-action 'none'; base-uri 'none'; frame-ancestors https://your-cabinet.example.com
Referrer-Policy: no-referrer
X-Content-Type-Options: nosniff

https://api.selsup.ru/assets/examples/selsup-extension-example.zip

Sandbox chặn các biểu mẫu, popup, tải xuống, điều hướng hàng đầu và API trình duyệt nhạy cảm. Nguồn gốc bảng được hiển thị trên iframe. Một phần mở rộng không bao giờ phải yêu cầu mật khẩu SelSup. Trang web của nó vẫn có thể xem IP du khách và giữ hoặc chuyển dữ liệu được cấp cho nó. Review không thể đóng băng mã được phục vụ tại một URL bên ngoài. Chỉ cấp các quyền cần thiết.

SelSup tự cho phép cuộc gọi cầu iframe; cookie và token không bao giờ đạt đến ứng dụng. Backend của bạn vẫn cần xác thực riêng của mình: ngữ cảnh không chứng minh danh tính. Chỉ giữ token SelSup lâu dài trên máy chủ của bạn.