Ce este lobby-ul iFrame și cum să-l integrați
Ce este lobby-ul iFrame
Lobby-ul iFrame este un modul de lobby încorporat (catalog de jocuri, bannere, categorii, căutare, pornire rapidă), care este găzduit de furnizorul/agregatorul de conținut și afișat în interiorul paginii operatorului prin „
Ideea cheie: operatorul nu scrie lobby-ul de la zero, ci îl conectează pe cel finalizat, primind timp rapid pe piață, suport cross-browser și actualizări fără lansări pe partea sa.
Când este cazul
Lansarea rapidă a unui nou furnizor/vertical.
Aveți nevoie de o vitrină unificată pentru mai multe țări/mărci.
Comandă frontend limitată pe operator.
Argumente pro și contra
Argumente pro: viteză, bază unică de cod, auto-încărcare a noilor produse, analize convenite de furnizor.
Contra: mai puțin control asupra pixel-perfect, dependența de uptime furnizor, subtilități de urmărire, restricții SEO (conținut într-un iframe nu este indexat ca parte a DOM).
Arhitectura de bază
1. Front (operator): o pagină '/casino 'cu sloturi în care'
2. Garnitura Auth: „sessionToken” cu durată scurtă de viață (JWT/opac) este generat pe backend-ul operatorului.
3. Lobby-ul furnizorului: validează jetonul, înlocuiește limba/moneda/limitele, prestatorul de jocuri și bannerele.
4. Autobuz de mesagerie: "fereastră. PostMessage 'între pagină și iframe pentru evenimente (echilibru, start de joc, case de marcat deschise etc.).
5. Casier/KYC/RG: apelat pe partea operatorului (în afara iframe), dar accesibil din lobby de comenzi.
Cerințe minime de punere în aplicare
Autorizație: jetoane cu durată scurtă de viață (1-15 minute) + rotație transparentă (reîmprospătare silențioasă).
Securitate: CSP, 'sandbox' și exact 'allow' pentru filtrarea iframe, strictă 'postMessage'.
Stabilitate: contract de evenimente (versiuni, înapoi-compat), grațios-rezervă în caz de erori.
UX: grilă adaptivă, navigare rapidă, preîncărcare card, ecrane schelet.
Analytics: evenimente unificate (impresie, clic, lansare, eroare), maparea în Amplitude/GA4.
Exemplu de încorporare (securitate HTML +)
html
<iframe id = „providerLobby”
src = "https ://lobby. exemplu. com/embed? brand = ACME & lang = ru & valută = EUR & token = {{SESSION _ TOKEN}}"
încărcare =” leneș”
referrerpolicy =” strict-origine-când-cross-origine”
sandbox =” allow-scripts allow-same-origin allow-pop-up allow-pop-to-escape-sandbox”
allow = "fullscreen; autoplay; criptate-media; clipboard-read; clipboard-write"
stil = "latime: 100%; inaltime: 100vh; frontieră: 0; afişare: bloc; ">
</iframe>
Explicaţii:
- 'sandbox' - Activați numai steagurile pe care le doriți. Nu da 'allow-top-navigare' inutil.
- "allow" - adăugați caracteristici în mod conștient; " plata "numai dacă este efectiv utilizat.
- „referrerpolicy” - scurgeri de parametri limită.
Politica de securitate a conținutului:
implicit-src „sine”;
frame-src https ://lobby. exemplu. com;
script-src „auto” https ://lobby. exemplu. com „nesigure-inline”;
img-src „auto” https ://lobby. exemplu. com date:;
connect-src „auto” https ://api. exemplu. com https ://lobby. exemplu. com;
X-Frame-Options pentru paginile dvs. nu interferează cu încorporarea dvs. → furnizorul încorporează cu dvs. și nu invers.
Generarea unui jeton pe backend (Node/Express exemplu)
js import jwt de la „jsonwebtoken”;
expres de import din „expres”;
const app = express ();
app. get („/lobby-token ”, (req, res) => {
sarcina utilă = {
sub: req. utilizator. id, brand: „ACME”, valută: „EUR”, lang: „ru”, ts: Data. acum ()
};
const token = jwt. semn (sarcină utilă, proces. env. LOBBY_JWT_SECRET, {
algoritm: „HS256,” expiră În: „10m”, emitent: „acme-casino”, audiență: „lobby-provider”
});
res. json ({token});
});
Cele mai bune practici: scurt TTL, câmpuri de audit, chei în HSM/Secrets Manager, rotație „kid”.
Mesagerie contract eveniment
Utilizați „Mesaj post” cu lista albă sursă și validarea schemei.
js
//Gazdă (operator)
const iframe = document. getElementById („providerLobby”). contentWindow;
const LOBBY_ORIGIN = "https ://lobby. exemplu. com";
fereastră. addEventListener („mesaj”, (e) => {
dacă (e. originea! = = LOBBY_ORIGIN) se întoarce;
const {type, util} = e. date {};
switch (tip) {
caz „lobby: gata”:
//trimite datele de pornire iframe. postMessage ({type: „gazdă: context”, sarcină utilă: {
sold: 125. 40, kycStatus: „verificat”, limite: {betMax: 100}
}}, LOBBY_ORIGIN);
pauză;
case „lobby: redimensionare”:
document. getElementById („providerLobby”). stil. înălțime = sarcină utilă. înălțime + „px”;
pauză;
case „lobby: openCashier”:
openCasier () ;//funcția pauză;
case „lobby: launchGame”:
launchGame (sarcină utilă. gameId) ;//poate deschide o nouă fereastră/gaură;
case „lobby: requestTokenRefresh”:
refreshLobbyToken (). apoi (t =>
iframe. postMessage ({type: „gazdă: newToken”, sarcină utilă: {token: t}}, LOBBY_ORIGIN)
);
pauză;
}
});
Evenimente standard (exemplu stabilit):
- : 'lobby: ready', 'lobby: redimensionare', 'lobby: openCasier', 'lobby: openRG', 'lobby: launchGame', 'lobby: track', 'lobby: requestTokenRefresh', 'lobby: error'.
- Din host → lobby: 'host: context' (sold, locale, limite), 'host: newToken', 'host: balanceUpdate', 'host: rgState', 'host: navigation'.
Rularea jocului din lobby
Două abordări:1. În interiorul aceluiași iframe - mai rapid, dar mai puțin de control și de urmărire mai dificilă.
2. Rădăcină/fereastră separată - măsurători mai simple, puteți atârna suprapunerile (RG/limite), compatibilitate mai bună cu vizualizarea web.
Traseul minim:- Lobby trimite 'lobby: launchGame {gameId}'.
- Gazda generează un 'gameToken' pe spate și se deschide '/game/: id? token =... '.
- Jocul acceptă jetonul, validează, începe sesiunile de pariuri.
UX și performanță
atingere Α: 3-5 difuzoare pe desktop, 2 - tabletă, 1 - mobil; fixați înălțimea cărților.
Schelete și încărcare leneșă (încărcarea imaginilor = "leneș" "," fetchpriority = "scăzut" "pentru galerii).
Quick Find and Filters - Amintiți-vă etichetele selectate în '? interogare "/" Stocare locală ".
Clicuri pe card: faceți clic pe zona ≥ 44px; suport pentru tastatură (A11y).
Înlocuitori de bannere: astfel încât aspectul să nu „sară”.
Politica media iOS: video/audio autoplay necesită gestul utilizatorului; ia în considerare acest lucru în demo-uri.
Conformitatea și responsabilitatea jucătorilor (RG)
Limite și termene: suport pentru afișarea limitelor actuale ale jucătorului în lobby (numai în citire), apelând formularul de modificare pe partea gazdă.
Auto-excludere: evenimentul „lobby: openRG” → deschide modulul RG în afara iframe.
Yur. -bannere și 18 +: pe partea gazdă, și nu în interiorul lobby-ului, astfel încât să nu depindă de creativii furnizorului.
GDPR/cookie-uri: lobby - terță parte, gândiți-vă la cookie-consimțământul și cadrul legal (necesitatea contractuală/interesul legitim).
Localizare și branding
Treceți limba/moneda/regiunea la „src” și/sau „gazdă: context”.
Permiteți variabilelor de etichetă albă: culori, logo-uri, fonturi.
Păstrați blocurile „favorite/recente” pe partea operatorului, astfel încât să nu pierdeți date atunci când schimbați furnizorul.
Analiză și metrică
Strat de urmărire (exemplu):- 'lobby _ impression', 'tile _ view', 'tile _ click', 'search _ use', 'category _ change', 'launch _ game', 'error _ view'.
- TTFB-Bet (timp de la intrarea în lobby la primul pariu), CR_deposit→launch, categorii/căutare CTR, adâncimea medie de vizualizare.
Evenimente agregate din iframe; evitați „numărarea dublă” cu pixelii furnizorului.
Planul de testare a implementării
1. Securitate: verificarea steagurilor CSP, fără steaguri suplimentare 'allow' și 'sandbox', validarea 'postMessage. originea ".
2. Sesiuni: token expiration, silent-refresh, comportament la 401/403.
3. Redimensionare: înălțime corectă pe mobil/vizualizare web (Android/iOS).
4. Cash desk/CCM: scenarii pentru deschiderea/închiderea modalităților de evenimente de lobby.
5. Indisponibilitatea furnizorului: timeout-uri, afișarea ciot și retray.
6. Limite RG: Afişează şi împiedică pornirea jocului pe încuietori.
7. Comutarea localizărilor/valutelor: în zbor și pe repornire.
8. Analytics: comparație contoare gazdă vs furnizor.
Erori comune (anti-modele)
Atârnă un „mesaj” ascultător fără a verifica 'origin'.
Emite iframe acces complet („permite-aceeași origine permite-top-navigare-de-utilizator-activare” „doar în cazul în care”).
Jetoane de lungă durată fără rotaţie.
Bazați-vă pe conținutul de lobby pentru SEO.
Se amestecă cache-ul jucătorului și cache-ul directorului furnizorului (personalizarea pauzelor).
Rulați jocul în interiorul aceluiași iframe fără control de urmărire și suprapuneri RG.
Lista de verificare a integrării lobby-ului iFrame
- Contract de evenimente convenit (versiune, tipuri, scheme).
- Implementat/lobby-token cu TTL ≤ 15 minute și rotație.
- CSP configurat, 'sandbox', 'allow', 'refererpolicy'.
- Conectat casier/KYC/RG și legate 'openCasier '/' openRG' evenimente.
- Gândit înapoi atunci când furnizorul degradează.
- Localizare verificată, valute, bannere de vârstă.
- Configurați analize (id-uri de utilizator/sesiune end-to-end).
- Efectuat cross-browser și teste de vizualizare web mobil.
- Descris runbook de incidente și puncte de contact cu vânzătorul.
Lobby-ul iFrame este o modalitate rapidă și pragmatică de a extinde catalogul de jocuri și de a scurta timpul pe piață. Cheia integrării sănătoase este securitatea puternică, un contract de evenimente clar, autorizare puternică și UX/analytics grijuliu pe partea operatorului. Făcând acest lucru într-o zi, puteți scala integrările cu noi furnizori aproape „pe clic”.