IFrame lobisi nedir ve nasıl entegre edilir
iFrame lobisi nedir
iFrame lobi, içerik sağlayıcı/toplayıcı tarafından barındırılan ve operatörün sayfasının içinde '
Anahtar fikir: operatör lobiyi sıfırdan yazmaz, ancak bitmiş olanı bağlar, hızlı bir şekilde pazara sunulma süresi, çapraz tarayıcı desteği ve kendi tarafında sürümler olmadan güncellemeler alır.
Uygun olduğunda
Yeni bir sağlayıcı/dikey hızlı lansmanı.
Birden fazla ülke/marka için birleşik bir vitrine ihtiyacınız var.
Operatör üzerinde sınırlı ön uç komutu.
Artıları ve eksileri
Artıları: hız, tek kod tabanı, yeni ürünlerin otomatik yüklenmesi, kabul edilen sağlayıcı analizi.
Eksileri: piksel-mükemmel üzerinde daha az kontrol, satıcı çalışma süresine bağımlılık, izleme incelikleri, SEO kısıtlamaları (bir iframe'deki içerik DOM'unuzun bir parçası olarak dizine eklenmez).
Temel mimari
1. Ön (operatör): '
2. Auth contası: Operatörün arka ucunda kısa ömürlü 'sessionToken' (JWT/opak) oluşturulur.
3. Sağlayıcı lobisi: belirteci doğrular, dil/para birimi/limitleri, oyun oluşturucu ve afişleri değiştirir.
4. Mesajlaşma otobüsü: 'pencere. Etkinlikler için sayfa ve iframe arasında mesaj '(denge, oyun başlangıcı, açık yazar kasa, vb.).
5. Kasiyer/KYC/RG: Operatör tarafında (iframe dışında) çağrılır, ancak lobiden komutlarla erişilebilir.
Minimum uygulama gereksinimleri
Yetkilendirme: Kısa ömürlü belirteçler (1-15 dakika) + şeffaf rotasyon (sessiz yenileme).
Güvenlik: CSP, 'sandbox've kesin' izin 'için iframe, sıkı' Mesaj 'filtreleme.
Kararlılık: olay sözleşmesi (sürümler, geriye dönük compat), hata durumunda zarif geri dönüş.
UX: adaptif ızgara, hızlı navigasyon, kart ön yükleme, iskelet ekranlar.
Analytics: Birleştirilmiş olaylar (gösterim, tıklama, başlatma, hata), Amplitude/GA4 eşleme.
Gömme örneği (HTML + güvenliği)
html
<iframe id = "providerLobby"
src = "https ://lobby. örnek. com/embed? marka = ACME & lang = ru & currency = EUR & token = {{SESSION _ TOKEN}}"
yükleme =" tembel"
refererpolicy =" strict-origin-when-cross-origin"
sandbox =" allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
allow = "tam ekran; Otomatik oynatma; Şifreli-ortam; Pano-okuma; pano-yazma"
stil = "genişlik: %100; yükseklik: 100vh; sınır: 0; görüntüleme: bloğu; ">
</iframe>
Açıklamalar:
- 'sandbox' - Sadece istediğiniz bayrakları etkinleştirebilirsiniz. Gereksiz yere 'allow-top-navigation' vermeyin.
- 'izin ver' - bilinçli özellikler ekleyin; ' Ödeme 'sadece gerçekten kullanılırsa.
- 'reperrerpolicy' - limit parametre sızıntıları.
İçerik-Güvenlik-Politika:
varsayılan-src 'öz';
frame-src https ://lobby. örnek. com;
script-src 'self' https ://lobby. örnek. com 'güvensiz-satır içi';
img-src 'self' https ://lobby. örnek. com verileri:;
connect-src 'self' https ://api. örnek. com https ://lobby. örnek. com;
Sayfalarınız için X-Frame-Options, sizi gömmeyi engellemez - sağlayıcı sizinle gömülür ve bunun tersi de geçerli değildir.
Arka uçta bir belirteç oluşturma (Düğüm/Ekspres örneği)
Js import jwt "jsonwebtoken";
"ekspres'ten ekspres içe aktarma;
const app = express ();
Get ("/lobby-token ", (req, res) => {
Const yükü = {
sub: req. kullanıcı. id, marka: "ACME", para birimi: "EUR", lang: "ru", ts: Tarih. şimdi ()
};
const token = jwt. İşaret (yük, süreç. env. LOBBY_JWT_SECRET, {
Algoritma: "HS256," sona eriyorIn: "10m", veren: "acme-casino", izleyici: "lobi sağlayıcı"
});
Res. json ({belirteç});
});
En iyi uygulamalar: kısa TTL, denetim alanları, HSM/Secrets Manager'da anahtarlar,'çocuk 'rotasyonu.
Olay sözleşme mesajlaşma
Kaynak beyaz liste ve şema doğrulaması ile 'postMessage' kullanın.
js
//Ana bilgisayar (operatör)
const iframe = belge. GetElementById ("providerLobby"). contentWindow;
const LOBBY_ORIGIN = "https ://lobby. örnek. com";
Pencere. AddEventListener ("message", (e) => {
eğer (e. origin! = = LOBBY_ORIGIN) geri dönerse;
const {type, payload} = e. data {};
switch (type) {
Vaka "lobisi: hazır":
//iframe başlangıç verilerini gönder. PostMessage ({type:'ana bilgisayar: bağlam ", payload: {
Denge: 125. 40, kycDurum: "doğrulanmış", limitler: {betMax: 100}
}}, LOBBY_ORIGIN);
mola;
vaka "lobisi: yeniden boyutlandırma":
belge. GetElementById ("providerLobby"). stil. yükseklik = yük. yükseklik + "px";
mola;
Vaka "lobisi: openCashier":
OpenCashier () ;//mola fonksiyonunuz;
vaka "lobi: launchGame":
LaunchGame (payload. GameId) ;//yeni bir pencere/delik açabilir;
"lobi: requestTokenRefresh":
RefreshLobbyToken (). Sonra (t =>
iframe. PostMessage ({type:'ana bilgisayar: newToken ", payload: {token: t}}, LOBBY_ORIGIN)
);
mola;
}
});
Standart olaylar (örnek set):
- От лобби - хосту: 'Lobi: ready', 'lobby: resize', 'lobi: openCashier', 'lobby: openRG', 'lobby: launchGame', 'lobby: track', 'lobby: requestTokenRefresh', 'lobby: error'.
- Ana bilgisayardan - lobi: 'Ana bilgisayar: bağlam' (denge, yerel ayar, sınırlar),'ana bilgisayar: newToken ','ana bilgisayar: balanceUpdate','ana bilgisayar: rgState ','ana bilgisayar: navigasyon'.
Oyunu lobiden yürütmek
İki yaklaşım:1. Aynı iframe içinde - daha hızlı, ancak daha az kontrol ve daha zor izleme.
2. Ayrı kök/pencere - daha basit metrikler, bindirmelerinizi (RG/limitler) asabilirsiniz, web görünümüyle daha iyi uyumluluk.
Minimum rota:- Lobby 'lobi: launchGame {gameId}' gönderir.
- Ana bilgisayar, sırtında bir 'gameToken' oluşturur ve'/game/: id? token =... '.
- Oyun jetonu kabul eder, onaylar, bahis seanslarına başlar.
UX ve performans
Α dokunuş: Masaüstünde 3-5 hoparlör, 2 - tablet, 1 - mobil; Kartların yüksekliğini sabitleyin.
İskeletler ve tembel yükleme (galeriler için 'loading =' lazy '', 'fetchpriority =' low '' ').
Hızlı Bul ve Filtreler - 'içindeki seçili etiketleri hatırlıyor musunuz? sorgu'/' yerel 'Depolama'.
Karta tıklar: bölge ≥ 44px'i tıklayın; Klavye desteği (A11y).
Afişlerin yer tutucuları: böylece düzen "atlamaz".
IOS medya politikası: otomatik video/ses oynatma, kullanıcı hareketi gerektirir; Bunu demolarda düşünün.
Uyumluluk ve Oyuncu Sorumluluğu (RG)
Limitler ve zaman aşımları: Mevcut oyuncu limitlerini lobide gösterme (salt okunur), değişiklik formunu ana bilgisayar tarafında çağırma desteği.
Self-exclusion: event 'lobby: openRG' - RG modülünüzü iframe dışında açın.
Yur. -banners ve 18 +: ana tarafta ve lobinin içinde değil, sağlayıcının reklamlarına bağlı kalmamak için.
GDPR/çerezler: lobi - üçüncü taraf, çerez onayı ve yasal çerçeve (sözleşme gereği/meşru menfaat) hakkında düşünün.
Yerelleştirme ve markalama
Dili/para birimini/bölgeyi 'src've/veya'ev sahibi: bağlam'a geçirin.
Beyaz etiketli değişkenlere izin ver: renkler, logolar, fontlar.
Satıcıyı değiştirirken verileri kaybetmemek için "sık kullanılanlar/son" bloklarını operatörün tarafında tutun.
Analytics ve Metrikler
İzleme katmanı (örnek):- 'lobby _ impression', 'tile _ view', 'tile _ click', 'search _ use', 'category _ change', 'launch _ game', 'error _ view'.
- TTFB-Bet (lobiye girmekten ilk bahise kadar geçen süre), CR_deposit→launch, TO kategorileri/arama, Ortalama izleme derinliği.
iframe'den toplam olaylar; Sağlayıcı pikselleriyle "çift sayma'dan kaçının.
Uygulama Test Planı
1. Güvenlik: CSP'yi kontrol etme, ekstra 'allow've' sandbox 'bayrakları yok,' postMessage'ın doğrulanması. Kökeni.
2. Oturumlar: belirteç son kullanma, sessiz yenileme, 401/403'te davranış.
3. Yeniden boyutlandırma: mobil/web görünümünde doğru yükseklik (Android/iOS).
4. Cash desk/CCM: Lobi etkinlikleri tarafından açılan/kapanan modeller için senaryolar.
5. Sağlayıcı yokluğu: zaman aşımları, saplama ve yeniden ödeme gösterimi.
6. RG Limitleri: Oyunun kilitlerde başlamasını görüntüler ve engeller.
7. Yerel/para birimlerini değiştirme: anında ve yeniden başlatmada.
8. Analytics: Sayaçların ev sahibi ile satıcısının karşılaştırılması.
Yaygın hatalar (anti-desenler)
'Origin'i işaretlemeden bir' mesaj 'dinleyicisi asın.
Sorun iframe tam erişim ('allow-same-origin allow-top-navigation-by-user-activation' "just in case").
Rotasyon olmadan uzun ömürlü belirteçler.
SEO için lobi içeriğine güvenin.
Oynatıcı önbelleğini ve sağlayıcı dizin önbelleğini karıştırın (kişiselleştirmeyi keser).
İzleme kontrolü ve RG kaplamaları olmadan oyunu aynı iframe içinde çalıştırın.
iFrame lobi entegrasyonu kontrol listesi
- Kabul edilen olay sözleşmesi (sürüm, türler, şemalar).
- Uygulanan/TTL ile lobi-token ≤ 15 dakika ve rotasyon.
- Yapılandırılmış CSP, 'sandbox', 'allow', 'referrerpolicy'.
- Bağlı kasiyer/KYC/RG ve bağlantılı 'openCashier'/' openRG' etkinlikleri.
- Sağlayıcı bozulduğunda geri dönüşü düşündüm.
- Kontrol edilen yerelleştirme, para birimleri, yaş afişleri.
- Analitik ayarlayın (uçtan uca kullanıcı/oturum kimlikleri).
- Çapraz tarayıcı ve mobil web görünümü testleri yapıldı.
- Olayların runbook'unu ve satıcıyla iletişim noktalarını açıkladı.
ICrame lobisi, oyun kataloğunu genişletmek ve pazara girme süresini kısaltmak için hızlı ve pragmatik bir yoldur. Sağlıklı entegrasyonun anahtarı güçlü güvenlik, net bir etkinlik sözleşmesi, güçlü yetkilendirme ve operatör tarafında düşünceli UX/analitiktir. Bunu bir gün yaparak, yeni satıcılarla entegrasyonları neredeyse "tıklamayla" ölçeklendirebilirsiniz.