IFrame लॉबी क्या है और इसे कैसे एकीकृत किया जाए
आईफ्रेम लॉबी क्या है
iFrame लॉबी एक एम्बेडेड लॉबी मॉड्यूल (गेम, बैनर, श्रेणियां, खोज, त्वरित शुरुआत) है, जिसे सामग्री प्रदाता/एग्रीगेटर द्वारा होस्ट किया जाता है और ऑपरेटर के पृष्ठ के अंदर '
मुख्य विचार: ऑपरेटर लॉबी को खरोंच से नहीं लिखता है, लेकिन इसके पक्ष में रिलीज के बिना तेजी से समय-से-बाजार, क्रॉस-ब्राउज़र समर्थन और अपडेट प्राप्त करते हुए तैयार को जोड़ ता है।
जब उपयुक्त हो
नए प्रदाता/ऊर्ध्वाधर का त्वरित लॉन्च।- कई देशों/ब्रांडों के लिए एकीकृत शोकेस की आवश्यकता है।
- ऑपरेटर पर सीमित फ्रंटेंड कमांड।
पेशेवरों और विपक्ष
पेशेवरों: गति, एकल कोड आधार, नए उत्पादों का ऑटो-लोडिंग, सहमत प्रदाता एनालिटिक्स।
विपक्ष: पिक्सेल-परफेक्ट पर कम नियंत्रण, विक्रेता अपटाइम पर निर्भरता, सूक्ष्मताओं पर नज़र रखना, SEO प्रतिबंध (एक iframe में सामग्री आपके DOM के हिस्से के रूप में अनुक्रमित नहीं है)।
बुनियादी वास्तुकला
1. फ्रंट (ऑपरेटर): स्लॉट के साथ एक पृष्ठ '/कैसीनो 'जिसमें'
2. ऑथ गैस्केट: अल्पकालिक 'करंट टोकन' (JWT/अपारदर्शी) ऑपरेटर के बैकएंड पर उत्पन्न होता है।
3. प्रदाता लॉबी: मान्य टोकन, विकल्प भाषा/मुद्रा/सीमा, गेम रेंडरर और बैनर।
4. मैसेजिंग बस: 'विंडो। घटनाओं के लिए पृष्ठ और इफ्रेम के बीच पोस्टमैसेज (शेष, गेम स्टार्ट, ओपन कैश रजिस्टर, आदि)।
5. कैशियर/केवाईसी/आरजी: ऑपरेटर की तरफ (इफ्रेम के बाहर) बुलाया जाता है, लेकिन लॉबी कमांड से सुलभ है।
न्यूनतम कार्यान्वयन आवश्यकता
प्राधिकरण: अल्पकालिक टोकन (1-15 मिनट) + पारदर्शी रोटेशन (मूक ताज़ा)।
सुरक्षा: सीएसपी, 'सैंडबॉक्स' और इफ्रेम के लिए सटीक 'अनुमति', सख्त 'पोस्टमैसेज' फ़िल्टरिंग।
स्थिरता: घटना अनुबंध (संस्करण, पिछड़े-कॉम्पैट), त्रुटियों के मामले में सुंदर-पतन।
UX: अनुकूली ग्रिड, तेज नेविगेशन, कार्ड प्रीलोड, कंकाल स्क्रीन।
एनालिटिक्स: एकीकृत घटना (छाप, क्लिक, लॉन्च, त्रुटि), मैपिंग in।
एम्बेडिंग उदाहरण (HTML + सुरक्षा)
html
<iframe id = "providerLobby"
src = "https ://लॉबी। उदाहरण। com/embed? ब्रांड = ACME & lang = ru & money = EUR & टोकन = {{SESSIVE _ TOKEN}"
लोडिंग =" आलसी"
रेफरपोलिसी =" सख्त-मूल-जब-क्रॉस-मूल"
सैंडबॉक्स =" अनुमति-स्क्रिप्ट अनुमति-समान-मूल अनुमति-पॉपअप अनुमति-पॉपअप-टू-एस्केप-सैंडबॉक्स"
= "फुलस्क्रीन की अनुमति दें; ऑटोप्ले; एन्क्रिप्टेड-मीडिया; क्लिपबोर्ड-रीड; क्लिपबोर्ड-राइट"
शैली = "चौड़ाई: 100%; ऊंचाई: 100vh; सीमा: 0; प्रदर्शन: ब्लॉक; ">
</iframe>
स्पष्टीकरण:
- 'sandbox' -केवल आप चाहते हैं झंडे सक्षम करें. अनावश्यक रूप से 'अलो-टॉप-नेविगेशन' न दें।
- 'allow' - सचेत रूप से सुविधाओं को जोड़ें; ' भुगतान अगर वास्तव में उपयोग किया जाता है।
- 'Referrerpolicy' - सीमा पैरामीटर लीक।
सामग्री-सुरक्षा-नीति:
डिफ़ॉल्ट-src 'स्वयं';
फ्रेम-src https ://लॉबी। उदाहरण। कॉम;
स्क्रिप्ट-एसआरसी 'सेल्फ' https ://लॉबी। उदाहरण। कॉम 'असुरक्षित-इनलाइन';
img-src 'सेल्फ' https ://लॉबी। उदाहरण। कॉम डेटा:;
कनेक्ट-src 'सेल्फ' https ://api। उदाहरण। कॉम https ://लॉबी। उदाहरण। कॉम;
आपके पृष्ठों के लिए एक्स-फ्रेम-विकल्प आपको एम्बेड करने में हस्तक्षेप नहीं करते हैं - प्रदाता आपके साथ एम्बेडिंग है, न कि इसके विपरीत।
बैकेंड पर एक टोकन उत्पन्न कर रहा है (नोड/एक्सप्रेस उदाहरण)
js "jsonwebtoken" से jwt आयात;
"एक्सप्रेस" से आयात एक्सप्रेस
const ऐप = एक्सप्रेस ();
app.get ("/लॉबी-टोकन ", (req, res) => {
कॉन्स्ट पेलोड = {
उप: req। उपयोगकर्ता। आईडी, ब्रांड: "एसीएमई", मुद्रा: "ईयूआर", लैंग: "आरयू", टीएस: डेट। अब ()
};
const टोकन = jwt। हस्ताक्षर (पेलोड, प्रक्रिया। env। LOBBY_JWT_SECRET, {
एल्गोरिथ्म: "HS256," exp 10 In: "m", जारीकर्ता: "acme-casino", दर्शक: "लॉबी-प्रदाता"
});
रेस। json ({टोकन});
});
सर्वश्रेष्ठ प्रथाएं: छोटी टीटीएल, ऑडिटिंग फील्ड, एचएसएम/सीक्रेट मैनेजर, 'किड' रोटेशन में कुंजी।
घटना संविदा संदेश
स्रोत व्हाइटलिस्टिंग और स्कीमा सत्यापन के साथ 'पोस्टमैसेज' का उपयोग करें।
जेएस
//होस्ट (ऑपरेटर)
Const iframe = दस्तावेज़। gettelLyBYId ("ProviderLobby")। contentWindow
const = "https ://लॉबी। उदाहरण। कॉम";
विंडो। AddeventListener ("संदेश", (ई) => {
यदि (ई। मूल! = = LOBBY_ORIGIN) वापसी;
const {type, पेलोड} = ई। डेटा {};
स्विच (प्रकार) {
मामला "लॉबी: तैयार":
//iframe प्रारंभ डेटा भेजें. पोस्टमैसेज ({प्रकार: "होस्ट: संदर्भ", पेलोड: {
संतुलन: 125। 40, kycState: "सत्यापित", सीमा: {betMax: 100}
}}, LOBBY_ORIGIN);
ब्रेक;
मामला "लॉबी: नया आकार":
दस्तावेज़। gettelLyBYId ("ProviderLobby")। शैली। ऊंचाई = पेलोड। ऊंचाई + "पीएक्स";
ब्रेक;
मामला "लॉबी: ओपनकैशियर":
ओपनकैशियर () ;//आपका ब्रेक फंक्शन;
केस "लॉबी: लॉन्चगेम":
लॉन्चगेम (पेलोड)। GameId) ;//एक नया विंडो/ब्रेक होल खोल सकता है;
केस "लॉबी: TokenRefresh":
रिफ्रेशलॉबी टोकन ()। तब (t =>
iframe। पोस्टमैसेज ({प्रकार: "होस्ट: न्यूटोकन", पेलोड: {टोकन: t}}, LOBBY_ORIGIN)
);
ब्रेक;
}
});
मानक घटनाएँ (उदाहरण सेट):
- От лобби → хосту: 'लॉबी: रेडी', 'लॉबी: रीसाइज़', 'लॉबी: ओपनकैशियर', 'लॉबी: ओपनआरजी', 'लॉबी: लॉबी गेम', 'लॉबी: ट्रैक', 'लॉबी:' टोकेनरेफ्रेश ',' लॉबी त्रुटि: '।
- होस्ट → लॉबी से: 'होस्ट: संदर्भ' (बैलेंस, लोकेल, लिमिट), 'होस्ट: न्यूटोकन', 'होस्ट: अपडेट', 'होस्ट: rgState', 'होस्ट: नेविगेशन'।
लॉबी से खेल चलाया जा रहा है
दो दृष्टिकोण:1. एक ही iframe के अंदर - तेज, लेकिन कम नियंत्रण और अधिक कठिन ट्रैकिंग।
2. अलग रूट/विंडो - सरल मैट्रिक्स, आप अपने ओवरले (आरजी/लिमिट) को लटका सकते हैं, वेब दृश्य के साथ बेहतर संगतता।
न्यूनतम मार्ग:- लॉबी 'लॉबी: LaunchGame {GameId}' भेजती है।
- मेजबान अपनी पीठ पर एक 'gameToken' उत्पन्न करता है और खोलता है '/game/: id? टोकन =... '।
- खेल टोकन स्वीकार करता है, मान्य करता है, सट्टेबाजी सत्र शुरू करता है।
यूएक्स और प्रदर्शन
É टच: डेस्कटॉप पर 3-5 स्पीकर, 2 - टैबलेट, 1 - मोबाइल; कार्ड की ऊंचाई ठीक करें।
कंकाल और आलसी-लोडिंग (चित्र 'लोडिंग = "आलसी",' दीर्घाओं के लिए 'कम ")।
त्वरित खोज और फ़िल्टर - 'में चयनित टैग याद रखें? क्वैरी '/' लोकसंग्रहण '।
कार्ड पर क्लिक करें: क्लिक ज़ोन ≥ 44px; कीबोर्ड समर्थन (A11y)।
बैनर के प्लेसहोल्डर्स: ताकि लेआउट "कूद" न हो।
iOS मीडिया नीति: ऑटोप्ले वीडियो/ऑडियो के लिए उपयोगकर्ता इशारे की आवश्यकता होती है; डेमो में इस पर विचार करें।
अनुपालन और खिलाड़ी जिम्मेदारी (आरजी)
सीमाएं और समय: लॉबी (केवल पढ़ ने के लिए) में वर्तमान खिलाड़ी सीमाओं को प्रदर्शित करने के लिए समर्थन, मेजबान पक्ष पर परिवर्तन रूप को बुलाता है।
स्व-बहिष्करण: घटना 'लॉबी: OpenRG' → iframe के बाहर अपना RG मॉड्यूल खोलें।
यूर। -बैनर और 18 +: मेजबान की तरफ, और लॉबी के अंदर नहीं, ताकि प्रदाता के क्रिएटिव पर निर्भर न हों।
GDPR/कुकीज़: लॉबी - तीसरा पक्ष, कुकी-सहमति और कानूनी ढांचे (संविदात्मक आवश्यकता/वैध हित) के बारे में सोचें।
स्थानीयकरण और ब्रांडिंग
भाषा/मुद्रा/क्षेत्र को 'src' और/या 'होस्ट: संदर्भ' में पास करें।
सफेद लेबल चर की अनुमति दें: रंग, लोगो, फ़ॉन्ट.
ऑपरेटर की तरफ "पसंदीदा/हालिया" ब्लॉक रखें ताकि विक्रेता को बदलते समय डेटा न खोना पड़े।
एनालिटिक्स और मेट्रिक्स
ट्रैकिंग परत (उदाहरण):- 'लॉबी _ इंप्रेशन', 'टाइल _ व्यू', 'टाइल _ क्लिक', 'search _ use', 'श्रेणी _ change', 'lounch _ game', 'त्रुटि _ view'।
- TTFB-Bet (लॉबी में प्रवेश करने से पहले शर्त तक का समय), CR_deposit→launch, CTR श्रेणियां/खोज, औसत देखने की गहराई।
Iframe से कुल घटनाएँ; प्रदाता पिक्सेल के साथ "डबल काउंटिंग" से बचें।
कार्यान्वयन परीक्षण योजना
1. सुरक्षा: CSP की जाँच, कोई अतिरिक्त 'अनुमति' और 'सैंडबॉक्स' फ्लैग, 'पोस्टमैसेज' का सत्यापन. मूल '।
2. सत्र: टोकन समाप्ति, मूक-ताज़ा, 401/403 पर व्यवहार।
3. नया आकार: मोबाइल/वेब दृश्य (Android/iOS) पर सही ऊंचाई।
4. कैश डेस्क/CCM: लॉबी इवेंट्स द्वारा मॉडल खोलने/बंद करने के परिदृश्य।
5. प्रदाता अनुपलब्धता: टाइमआउट, स्टब और रिट्रे का प्रदर्शन।
6. आरजी लिमिट्स: प्रदर्शित करता है और खेल को ताले पर शुरू करने से रोकता है।
7. स्विचिंग लोकेल/मुद्राएं: मक्खी पर और रिबूट पर।
8. एनालिटिक्स: काउंटर होस्ट बनाम विक्रेता की तुलना।
सामान्य त्रुटियाँ (एंटी-पैटर्न)
'origin' की जाँच किए बिना एक 'संदेश' श्रोता को लटकाएं।- इफ्रेम पूर्ण पहुंच ('अनुमति-समान-मूल अनुमति-शीर्ष-नेविगेशन-बाय-यूजर-सक्रियण' "केवल मामले में") जारी करें।
- रोटेशन के बिना लंबे समय तक रहने वाले टोकन।
- SEO के लिए लॉबी सामग्री पर भरोसा करें।
- खिलाड़ी कैश और प्रदाता निर्देशिका कैश मिलाएं (निजीकरण को तोड़ ता है)।
- ट्रैकिंग नियंत्रण और आरजी ओवरले के बिना एक ही इफ्रेम के अंदर खेल चलाएं।
आईफ्रेम लॉबी एकीकरण जांच सूची
- सहमत घटना अनुबंध (संस्करण, प्रकार, स्कीमा)।
- TTL ≤ 15 मिनट और रोटेशन के साथ लागू/लॉबी-टोकन।
- कॉन्फ़िगर सीएसपी, 'सैंडबॉक्स', 'अनुमति', 'रेफरपोलिसी'।
- कनेक्टेड कैशियर/केवाईसी/आरजी और लिंक्ड 'ओपनकैशियर '/' ओपनआरजी' इवेंट।
- जब प्रदाता नीचा दिखाता है तो गिरावट सोचा।
- स्थानीयकरण, मुद्राओं, आयु बैनर की जाँच की।
- एनालिटिक्स सेट करें (एंड-टू-एंड यूजर/सेशन आईडी)।
- क्रॉस-ब्राउज़र और मोबाइल वेब दृश्य परीक्षण किया।
- विक्रेता के साथ घटनाओं और संपर्क बिंदुओं की रनबुक का वर्णन किया।
IFrame लॉबी खेलों की सूची का विस्तार करने और समय-से-बाजार को छोटा करने का एक त्वरित और व्यावहारिक तरीका है। स्वस्थ एकीकरण की कुंजी मजबूत सुरक्षा, एक स्पष्ट घटना अनुबंध, मजबूत प्राधिकरण और ऑपरेटर पक्ष पर विचारशील यूएक्स/एनालिटिक्स है। एक दिन ऐसा करके, आप नए विक्रेताओं के साथ लगभग "क्लिक पर" एकीकरण कर सकते हैं।