SelSup платформасы · Жол башчылары
Кошумчалоо жана ылайыкташтырылган интеграциялар
Ар кандай алкактагы HTML/JavaScript баракчасын түзүңүз. SelSup аны iframeге коштурат; ал сиздин React кодун шкафтын ичинде аткарбайт.
Ар кандай алкактагы HTML/JavaScript баракчасын түзүңүз. SelSup аны iframeге коштурат; ал сиздин React кодун шкафтын ичинде аткарбайт.
Колдонмолорду иштеп чыгуучулар жана технологиялык өнөктөштөр1
Интеграциянын түрүн тандаңыз
- 1
Тышкы бакилдетүү кызматы
ERP, веб-дүкөн, WMS, BI жана башка ушул сыяктуу синхрондоо үчүн мыкты. Токен серверде калат жана маалыматтар API жана веб-хоктор аркылуу жүрөт.
- 2
Кабинанын iframe панели
Ар кандай алкактагы HTML/JavaScript баракчасын түзүңүз. SelSup аны iframeге коштурат; ал сиздин React кодун шкафтын ичинде аткарбайт.
- 3
SelSup арткы чекит модулу
SelSup фондук процесстерине катышуучу терең рыноктук же жеткирүү интеграциясы үчүн талап кылынат.
Биринчиден, бир толук иш агымын жана анын байкоосу бар. Толук импортту, UI жана башка окуя түрлөрүн кошуу шайкештик туруктуу болгондон кийин.
2
Тышкы колдонмо архитектурасы
Токенди сырларды башкаруучуда сактаңыз жана SelSup коштоочуңуздан гана чалыңыз. Сиздин браузердик тиркемеңиз API менен сүйлөшүп, SelSup токенди эч качан кабыл албашы керек.
SelSup адаптерин, жумуш кезегин жана домендин моделин бөлүп алыңыз. API келишимдерин өзгөртүүлөр андан кийин тиркеменин калган бөлүгүнөн бөлүнүп турат.
Келе жаткан окуялар үчүн кире турган кутуча жана чыгып жаткан өзгөрүүлөр үчүн сырттан чыккан кутучаны колдонуңуз.
SelSup webhook → inbox → domain worker → ERP/WMS
ERP/WMS change → outbox → SelSup API → reconciliation
API менен байланышкан чектөөлөр
GET/api/product/findСөздүктүн окулушуGET/api/order/findӨсүп-өсүп синхрондоо мисалы
3
Кабинанын iframe панели
Ар кандай алкактагы HTML/JavaScript баракчасын түзүңүз. SelSup аны iframeге коштурат; ал сиздин React кодун шкафтын ичинде аткарбайт.
Панелди кабинет менен cookie доменде бөлүшпөгөн өзүнчө HTTPS сайтында өткөрүп алыңыз. Ачык интеграциялар → Менин кеңейтүүлөрүм → кеңейтүү кошуу жана аталыш, сүрөтчө, URL, меню бөлүмү жана позициясын тандаңыз. Уруксатсыз жеке панелди сактап, андан кийин ага керектүү уруксаттарды гана иштетсеңиз. Дүкөндүн жарыялоосу SelSup текшерүүсүн талап кылат.
4
Сервердик интеграция модулу
Базардын интеграциясы, адатта, токендерди, карталарды, бааларды, запастарды, буйруктарды жана тарыхый абалды жаңыртууну камтыйт.
Бул модул SelSup негизги арткы чеги өзгөртүп, аны карап чыгуу, сыноо, жергиликтүүдөө жана чыгаруу процессин жүргүзөт.
API тышкы каталарын туруктуу ApplicationError маанилерине жана жокко чыгарылган же жараксыз тышкы белгилерди AccessExceptionге арткы чекиттик долбоордун эрежелерине ылайык айлантуу.
Базарга мүнөздүү талааларды бөлүшүү субъекттерине кошпоңуз. Интеграциялык DTOларда чийки келишимдерди сактап, аларды чек арага карата карталоо.
5
Ачкычтарды чыгаруу жана пайдалануу
- 1
Сынак эсебин түзүү
Колдонуучулардын өндүрүш маалыматтарынан тесттик белгилерди, кампаларды, продукцияны жана буйруктарды бөлүү.
- 2
Байкоо жөндөмүн кошуу
Түзөтүү кезегинин кечиктириши, код боюнча каталар, кайра аракет кылуунун эсеби жана элдештирүү келишпестиктери.
- 3
Пландык келишимдик миграция
Эски форматты өчүрүүдөн мурун эски талааларды өткөөл мезгилде колдоп, керектөөчүлөрдү жайгаштыруу.
- 4
Документтердин байланышын үзүү
Колдонуучулар белгини кантип жокко чыгарууну, веб-чатакты кантип алып салууну жана маалыматтарды жоготпой синхрондоону токтотууну билиши керек.
6
Продукция жана буйруктар
Меню баракчасын (MENU_PAGE), продукт картасы (PRODUCT_TAB) же буйрук берүү (XTECTOX) деген тепти тандаңыз. Меню бөлүмү жана абалы MENU_PAGE үчүн гана колдонулат. Тебдер үчүн ID менен сакталган субъект керек.
7
Контекст жана уруксат
Жөн гана берилген контексттик талаалар бөлүштүрүлөт. USER user.id жана user.locale; CLIENT client.id; ORGANIZATION жеткиликтүү уюмдун ID жана атын берет. PRODUCT өзүнчө продукт картасында product.modelId берет; ORDER бир буйрук боюнча order.id берет. Толук жазуулар, байланыштар, сырсөздөр жана токендер жок. Бул буга чейин ачылган барактын идентификатору, сиздин арткы чегиңиз үчүн мүмкүнчүлүккө ээ эмес.
{
"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
}
}
]
8
билдирүү v1 билдирүүлөрү
Толук event.origin, event.source === window.parent, билдирүү түрү, версиясы жана түзүлүшү текшерилет. Жөндөмөлөрдү жаңылоо үчүн байланыш жана өтүнүч контекстти даярдаңыз. SelSup кирүүнү кайра текшерип, көп өтүнүчү менен бириктирет. URL, панель localStorage же билдирүүлөрдө эч качан белгилерди өткөрүп бербеңиз.
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');
9
API iframe көпүрө аркылуу
Жазуучу кеңейтүү орнотууларында талап кылынган ыкмаларды жарыялайт. Ар бир орнотуучу клиент ошол декларациядан ыкмаларын ачык берет. API кирүүсү жоктукталган, анын ичинде учурдагы орнотуулар. Суранган тизмени өзгөртүү дагы бир карап чыгууну талап кылат; орнотулган көчүрмөлөр эч качан автоматтык түрдө жаңы уруксаттарды ала албайт.
Колдонуучу жайгаштыруучу учурдагы кызматкерлердин уруксаты менен SelSupFront кызматтары аркылуу төмөнкү ыкмаларды гана чакырат. Serverге кирүү контролдоолор дагы деле колдонулат. ClientService жана authService толугу менен тыюу салынат; бул тизмеден тышкары бардык ыкмалар да четке кагылат. Колдонмолор URL, башталгычтар, токендер же каалаган Axios конфигурациясын бере албайт. Server учурдагы орнотууну жана анын Grant API чыныгы өтүнүч боюнча текшерет.
API гранттары контексттик уруксаттардан көз каранды эмес. context.apiMethods берилген ыкмаларды тизмелейт. Грант учурдагы кесиптеги субъектке гана эмес, кызматкердин мүмкүнчүлүгү боюнча кабинеттин ичиндеги ыкмага колдонулат.
Бир учуу өтүнүчү жана секундасына бир баштоо. акыркы 256 өтүнүч ID дубликаттардан корголот. Коноктогу каталар: ACCESS_DENIED, INVALID_REQUEST, ERATE_LIMITED, DUPLICATE_REQUEST, eREQUEST_FAILED. SDK каталары NOT_CONNECTED, DISCONNECTED жана TIMEOUT (20 секунд) да камтыйт. Эч качан автоматтык түрдө мутацияларды кайра аракет кылбаңыз: error, убакыт бүткөн же iframe жабылышы операцияны кайра иштеткен дегенди билдирбейт.
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);
10
Колдонмонун үлгүсү жана хостинг
Үлгүлү өз алдынча GitHub кампасына көчүрүп алууга болот. Node.js 22+, npm тест жана npm башталышынан тесттер жана API ачкычтары же чыныгы маалыматтарсыз жергиликтүү макияж шкафы менен. config.js конфигурациялоо жана HTTPS хостингге беш статикалык файлды жайгаштыруу. Төмөндө шилтемеленген архивди жүктөп, анын мазмунун GitHub сактагычыңызга көчүрүңүз.
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
11
Коопсуздук чектери
Sandbox формаларды, эшиктерин, жүктөмдөрдү, жогорку навигацияны жана сезимтал браузердин API-дерин бөгөт. панельдин келип чыгышы iframeтин үстүндө көрсөтүлөт. кеңейтүү эч качан SelSup сырсөзүн сурабашы керек. Анын сайты дагы деле конок IP-ди көрө алат жана ага берилген маалыматтарды сактай алат же өткөрүп берет. Текшерүү тышкы URL-ка көрсөтүлгөн кодду тоңдура албайт.
SelSup өзү iframe көпүрө чакырыктарына уруксат берет; кукилер жана токендер колдонмого эч качан жетпейт. Сиздин жеке арткы чегиңизге дагы деле өздүк тастыктама керек: контексттин өздүгүн далилдебейт. Узак жашаган SelSup токендерин серверде гана сактаңыз. Толук тартипте/product жазуулары жана ички карталар блоктору колдоого алынбайт.