IFrame lobby дегеніміз не және оны қалай біріктіру керек
iFrame lobby дегеніміз не?
iFrame lobby - бұл мазмұнды жеткізушіде/агрегаторда орналастырылатын және '
Түйінді идея: оператор лобби жазбайды, дайын, жедел time-to-market, кросс-браузерлік қолдау мен жаңартуларды өз жағында шығармай қосады.
Бұл қашан орынды
Жаңа провайдерді/тігінен жылдам іске қосу.
Бірнеше ел/брендтер үшін біріздендірілген витрина қажет.
Оператордағы шектеулі фронтенд пәрмені.
Артықшылықтары мен кемшіліктері
Артықшылықтары: жылдамдық, бірыңғай кодтық база, жаңа өнімдерді автомобильмен тиеу, провайдердің келісілген талдауы.
Минустар: пиксель-перфектіні аз бақылау, вендор аптаймына тәуелділік, трекинг, SEO шектеулері (iframe мазмұны сіздің DOM-дың бір бөлігі ретінде индекстелмейді).
Негізгі сәулет
1. Front (оператор): '.../casino' бетінде слоттар орнатылған '
2. Auth төсем: қысқа өмір сүретін 'sessionToken' (JWT/opaque) оператордың бэкендінде пайда болады.
3. Provider lobby: токенді валидациялайды, тілді/валютаны/лимиттерді, ойындар мен баннерлерді рендерлейді.
4. Messaging шинасы: 'window. postMessage 'беттің арасында және оқиғалар үшін iframe (теңгерім, ойынның басталуы, кассаны ашу және т.б.).
5. Cashier/KYC/RG: оператор жағында шақырылады (iframe тыс), бірақ лоббилерден командалармен қол жетімді.
Енгізуге қойылатын ең төменгі талаптар
Авторизация: short-lived токендер (1-15 мин) + мөлдір ротация (silent refresh).
Қауіпсіздік: CSP, 'sandbox' және нақты 'allow' iframe үшін, қатаң сүзу 'postMessage'.
Тұрақтылық: оқиғалар келісімшарты (нұсқалар, backward-compat), қателер кезінде graceful-fallback.
UX: бейімделетін тор, жылдам навигация, карталарды алдын ала жүктеу, skeleton-экрандар.
Талдау: біріздендірілген оқиғалар (impression, click, launch, error), Amplitude/GA4 мэппинг.
Кірістіру үлгісі (HTML + қауіпсіздік)
html
<iframe id="providerLobby"
src="https://lobby. example. com/embed? brand=ACME&lang=ru¤cy=EUR&token={{SESSION_TOKEN}}"
loading="lazy"
referrerpolicy="strict-origin-when-cross-origin"
sandbox="allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow="fullscreen; autoplay; encrypted-media; clipboard-read; clipboard-write"
style="width:100%;height:100vh; border:0; display:block; ">
</iframe>
Түсіндірмелер:
- 'sandbox' - тек қажетті жалаушаларды қосыңыз. Қажетсіз 'allow-top-navigation' бермеңіз.
- 'allow' - фичтерді саналы түрде қосыңыз; 'payment' тек шын мәнінде пайдаланылса ғана.
- 'referrerpolicy' - параметрлердің жылыстауын шектеу.
Content-Security-Policy:
default-src 'self';
frame-src https://lobby. example. com;
script-src 'self' https://lobby. example. com 'unsafe-inline';
img-src 'self' https://lobby. example. com data:;
connect-src 'self' https://api. example. com https://lobby. example. com;
Сіздің беттеріңіз үшін X-Frame-Options сіз кірістіруге кедергі келтірмейді → провайдер керісінше емес, сізге кірістіріледі.
Бэкендте токен генерациясы (Node/Express мысалы)
js import jwt from "jsonwebtoken";
import express from "express";
const app = express();
app. get("/lobby-token", (req, res) => {
const payload = {
sub: req. user. id, brand: "ACME", currency: "EUR", lang: "ru", ts: Date. now()
};
const token = jwt. sign(payload, process. env. LOBBY_JWT_SECRET, {
algorithm: "HS256", expiresIn: "10m", issuer: "acme-casino", audience: "lobby-provider"
});
res. json({ token });
});
Үздік тәжірибелер: қысқа TTL, өріс аудиті, HSM/Secrets Manager кілттері, «kid» ротациясы.
Хабар алмасу: оқиғалар келісімшарты
Көзді whitelisting және схеманы валидациялау арқылы 'postMessage' дегенді пайдаланыңыз.
js
//Хост (оператор)
const iframe = document. getElementById("providerLobby"). contentWindow;
const LOBBY_ORIGIN = "https://lobby. example. com";
window. addEventListener("message", (e) => {
if (e. origin!== LOBBY_ORIGIN) return;
const { type, payload } = e. data {};
switch (type) {
case "lobby:ready":
//iframe бастапқы деректерін жібереміз. postMessage({ type: "host:context", payload: {
balance: 125. 40, kycStatus: "verified", limits: { betMax: 100 }
}}, LOBBY_ORIGIN);
break;
case "lobby:resize":
document. getElementById("providerLobby"). style. height = payload. height + "px";
break;
case "lobby:openCashier":
openCashier () ;//сіздің break функциясы;
case "lobby:launchGame":
launchGame(payload. gameId) ;//жаңа терезе/роут break ашуы мүмкін;
case "lobby:requestTokenRefresh":
refreshLobbyToken(). then(t =>
iframe. postMessage({ type: "host:newToken", payload: { token: t } }, LOBBY_ORIGIN)
);
break;
}
});
Стандартты оқиғалар (теру мысалы):
- От лобби → хосту: `lobby:ready`, `lobby:resize`, `lobby:openCashier`, `lobby:openRG`, `lobby:launchGame`, `lobby:track`, `lobby:requestTokenRefresh`, `lobby:error`.
- Хосттан → лобби: 'host: context' (теңгерім, локаль, лимиттер), 'host: newToken', 'host: balanceUpdate', 'host: rgState', 'host: navigation'.
Ойынды лоббилерден іске қосу
Екі тәсіл:1. Сол iframe ішінде - жылдам, бірақ аз бақылау және трекинг қиынырақ.
2. Жеке рут/терезе - метрикадан оңай, өзіңіздің оверлейлеріңізді (RG/лимиттер) ілуге болады, веб-күймен үйлесімділігі жақсы.
Ең кіші бағыт:- Лобби 'lobby: launchGame {gameId}' жібереді.
- Хост 'gameToken' дегенді өзінің бэктерінде құрып, '/game/: id? token=…`.
- Ойын токенді қабылдайды, валидациялайды, мөлшерлеме сессиялары басталады.
UX және өнімділігі
Α даптив: десктопта 3-5 баған, 2 - планшет, 1 - ұялы; карточкалардың биіктігін белгілеңіз.
Скелетондар және lazy-loading (галереялар үшін' loading =» lazy»',' fetchpriority =» low»' бейнелері).
Жылдам іздеу және сүзгілер: '? query '/' localStorage' ішінде таңдалған тегтерді жаттаңыз.
Карточка бойынша басу: 44px ≥ басу аймағы; пернетақтаны қолдау (A11y).
Баннерлердің плейсхолдерлері: Лэйаут «секіріп» кетпеуі үшін.
iOS медиа саясаты: бейне/аудио autoplay пайдаланушының қимылын талап етеді; мұны демо-роликтерде ескеріңіз.
Комплаенс және ойыншының жауапкершілігі (RG)
Лимиттер мен таймауттар: ойыншының ағымдағы лимиттерін лоббилерде көрсетуді қолдау (read-only), хост жағында өзгерту пішінін шақыру.
Өзін-өзі жою: 'lobby: openRG' → оқиғасы iframe тыс RG модулін ашады.
Юр. -баннерлер және 18 +: провайдердің креативтеріне тәуелді болмау үшін лобби ішінде емес, хост жағында.
GDPR/cookie: лобби - үшінші тарап, cookie-consent және құқықтық база (contractual necessity/legitimate interest) туралы ойланыңыз.
Локализация және брендинг
Тілді/валютаны/аймақты 'src' -ке және/немесе 'host: context' -ке беріңіз.
white-label айнымалы: түстер, логотиптер, қаріптер.
Вендор өзгерген кезде деректерді жоғалтпау үшін «таңдаулы/соңғы» блоктарын оператор жағында сақтаңыз.
Аналитика және метрика
Трекинг қабаты (мысал):- `lobby_impression`, `tile_view`, `tile_click`, `search_use`, `category_change`, `launch_game`, `error_view`.
- TTFB-Bet (лоббилерге кіруден бірінші ставкаға дейінгі уақыт), CR_deposit→launch, CTR санаттары/іздеу, Орташа қарау тереңдігі.
iframe оқиғаларын өзіңізде біріктіріңіз; провайдер пиксельдерімен «екі рет есептеуден» аулақ болыңыз.
Енгізу тест-жоспары
1. Қауіпсіздік: CSP тексеру, артық 'allow' және 'sandbox' жалаушаларының болмауы, 'postMessage' валидациясы. origin`.
2. Сессиялар: токеннің аяқталуы, silent-refresh, 401/403 кезінде мінез-құлық.
3. Резайз: ұялы/веб-view (Android/iOS) дұрыс биіктігі.
4. Касса/АЖК: лобби оқиғалары бойынша модалкалардың ашылу/жабылу сценарийлері.
5. Провайдердің қол жетімсіздігі: тайм-ауттар, бітеуіш пен ретраны көрсету.
6. RG лимиттері: бұғаттау кезінде ойынды көрсету және іске қосуға тыйым салу.
7. Жергілікті/валюталарды ауыстырып қосу: ұшуда және қайта іске қосу кезінде.
8. Талдау: Хост есептеуіштерін салыстыру vs вендор.
Типтік қателер (қарсы үлгілер)
'origin' тексермей 'message' -листенерді ілу.
Толық қолжетімділік iframe беру ('allow-same-origin allow-top-navigation-by-user-activation' «болған жағдайда»).
Ротациясыз ұзақ өмір сүретін токендер.
SEO үшін лобби мазмұнына сүйену.
Ойыншы кэшімен провайдер каталогының кэшін араластыру (дербестендіруді бұзады).
Трекинг пен RG-оверлейлерді бақылаусыз сол iframe ішінде ойынды іске қосу.
Біріктіру парағыFrame lobby
- Оқиғалардың келісімшарты туралы уағдаластық (нұсқа, үлгілер, схемалар).
- TTL ≤ 15 минут және ротациясы бар/lobby-token іске асырылды.
- CSP, 'sandbox', 'allow', 'referrerpolicy' баптады.
- Cashier/KYC/RG қосылып, 'openCashier '/' openRG' оқиғаларын байланыстырды.
- Провайдер деградациясы кезінде fallback ойластырылды.
- Жергілікті жерлерді, валюталарды, жас баннерлерін салыстырып көрдік.
- Талдауды теңшеді (өтпелі user/session ids).
- Кросс-браузерлік және мобильді веб-тесттер жүргізілді.
- Оқиғалар runbook және вендормен байланыс нүктелерін сипаттады.
iFrame-лобби - ойындар каталогын кеңейтудің және time-to-market қысқартудың жылдам және прагматикалық тәсілі. Салауатты интеграцияның кілті - қатаң қауіпсіздік, оқиғалардың нақты келісімшарты, сенімді авторизация және оператор жағында ойластырылған UX/аналитика. Мұны бір рет жасасаңыз, сіз жаңа жеткізушілермен интеграцияны іс жүзінде «басу арқылы» масштабтай аласыз.