ما هو ردهة iFrame وكيفية دمجها
ما هو ردهة iFrame
لوبي iFrame عبارة عن وحدة لوبي مضمنة (كتالوج الألعاب واللافتات والفئات والبحث والبدء السريع)، والتي يستضيفها مزود/مجمع المحتوى وتعرض داخل صفحة المشغل عبر «
الفكرة الرئيسية: لا يكتب المشغل اللوبي من الصفر، ولكنه يربط اللوبي النهائي، ويتلقى وقتًا سريعًا إلى السوق، ودعمًا متصفحًا وتحديثات دون إصدارات على جانبه.
عند الاقتضاء
إطلاق سريع لمزود/عمودي جديد.
تحتاج إلى عرض موحد لعدة بلدان/علامات تجارية.
قيادة أمامية محدودة على المشغل.
الإيجابيات والسلبيات
الإيجابيات: السرعة، قاعدة الرمز الفردي، التحميل التلقائي للمنتجات الجديدة، تحليلات المزود المتفق عليها.
السلبيات: سيطرة أقل على البكسل المثالي، والاعتماد على وقت تشغيل البائع، وتتبع التفاصيل الدقيقة، وقيود تحسين محركات البحث (المحتوى في iframe غير مفهرس كجزء من DOM الخاص بك).
الهندسة المعمارية الأساسية
1. الأمامي (المشغل): صفحة "/كازينو "بها فتحات"
2. Auth gasket: تم إنشاء «SessionToken» قصير الأجل (JWT/opaque) على الواجهة الخلفية للمشغل.
3. لوبي المزود: يتحقق من صحة الرمز، ويستبدل اللغة/العملة/الحدود، وعرض الألعاب واللافتات.
4. حافلة الرسائل: نافذة. Post Message 'between the page and iframe for events (balance, game start, open cash register, etc.).
5. أمين الصندوق/KYC/RG: دعا جانب المشغل (خارج الإطار)، ولكن يمكن الوصول إليه من أوامر الردهة.
متطلبات التنفيذ الدنيا
الترخيص: رموز قصيرة الأجل (1-15 دقيقة) + دوران شفاف (تحديث صامت).
الأمان: CSP و «sandbox» و «السماح» بالضبط بتصفية iframe و «PostMessage» الصارمة.
الاستقرار: عقد الحدث (الإصدارات، المقارن الخلفي)، التراجع الرشيق في حالة الأخطاء.
UX: شبكة تكيفية، تنقل سريع، تحميل مسبق للبطاقة، شاشات هيكل عظمي.
التحليلات: أحداث موحدة (الانطباع، النقر، الإطلاق، الخطأ)، رسم الخرائط في Amplitude/GA4.
مثال تضمين (HTML + security)
html
<iframe id = «providerLobby»
src = "https ://lobby. مثال على ذلك. com/embed ؟ العلامة التجارية = ACME & lang = ru & currency = EUR & token = {{SESSION _ TOKEN}}"
التحميل =» كسول»
سياسة الإحالة =» الأصل الصارم - متى - المنشأ المشترك»
sandbox =» السماح بالبرامج النصية تسمح لنفس الأصل بالسماح للبوب المنبعث بالهروب من الرمل»
السماح = "الشاشة الكاملة ؛ التشغيل التلقائي ؛ والوسائط المشفرة ؛ قراءة الحافظة ؛ كتابة حافظة"
النمط = "العرض: 100٪ ؛ الارتفاع: 100 فولت في الساعة ؛ الحدود: 0 ؛ العرض: كتلة ؛ ">
</iframe>
تفسيرات:
- «صندوق التسليم» - لا يمكن إلا الأعلام التي تريدها. لا تعطي «allow-top-navigation» دون داع.
- "ألوه" - أضف ميزات بوعي ؛ " الدفع فقط إذا تم استخدامه بالفعل.
- «referrerpolicy» - تسرب معامل الحد.
المحتوى - الأمن - السياسة:
الافتراضي «الذات» ؛
إطار src https ://لوبي. مثال على ذلك. com;
script-src 'self' https ://lobby. مثال على ذلك. com 'insafe inline' ؛
img-src 'self' https ://lobby. مثال على ذلك. بيانات: ؛
connect-src 'self' https ://api. مثال على ذلك. com https ://لوبي. مثال على ذلك. com;
لا تتداخل خيارات X-Frame لصفحاتك مع تضمينك → يقوم المزود بتضمينك معك، وليس العكس.
توليد رمز في الخلف (عقدة/مثال Express)
js import jwt from «jsonwebtoken»;
والاستيراد السريع من «الصريح» ؛
تطبيق const = express () ؛
app. get («/lobby-token », (req, res) => {
حمولة كونست = {
sub: req. المستخدم. id، العلامة التجارية: «ACME»، العملة: «EUR»، lang: «ru»، ts: Date. الآن ()
};
const token = jwt. علامة (حمولة، عملية. environment. LOBBY_JWT_SECRET، {
الخوارزمية: «HS256,» تنتهي صلاحيتها: «10 م»، المصدر: «acme-casino»، الجمهور: «lobby-provider»
});
قرار. json ({token}) ؛
});
أفضل الممارسات: TTL قصير، مجالات التدقيق، المفاتيح في HSM/مدير الأسرار، تناوب «الطفل».
رسائل عقد الحدث
استخدم «رسالة ما بعد» مع القائمة البيضاء للمصدر والتحقق من صحة المخطط.
js
/ المضيف (المشغل)
const iframe = document. getElementById («providerLobby»). نافذة المحتوى ؛
const LOBBY_ORIGIN = "https ://lobby. مثال على ذلك. ؛
النافذة. EventListener («رسالة»، (هـ) => {
إذا (e. الأصل! = LOBBY_ORIGIN) العودة ؛
const {نوع، حمولة} = e {};
تبديل (نوع) {
قضية «لوبي: جاهز»:
//أرسل بيانات بدء iframe. PostMessage ({النوع: «المضيف: السياق»، الحمولة: {
الرصيد: 125. 40، kycStatus: «تم التحقق منه»، حدود: {betMax: 100}
}، LOBBY_ORIGIN) ؛
والكسر ؛
قضية «لوبي: إعادة الحجم»:
. getElementById («providerLobby»). أسلوب. الارتفاع = الحمولة. الارتفاع + «px» ؛
والكسر ؛
قضية «لوبي: أمين الصندوق المفتوح»:
OpenCashier () ؛//وظيفة الاستراحة الخاصة بك ؛
قضية «لوبي: لعبة الإطلاق»:
لعبة الإطلاق (الحمولة. يمكن فتح نافذة جديدة/فتحة كسر ؛
case «lobby: requestTokenRefresh»:
refreshLobbyToken (). ثم (t =>
iframe. PostMessage ({type: «host: newToken», pabload: {token: t}}, LOBBY_ORIGIN)
);
والكسر ؛
}
});
الأحداث القياسية (مجموعة الأمثلة):
- От лобби → хосту: «اللوبي: جاهز»، «اللوبي: إعادة الحجم»، «اللوبي: openCashier»، «اللوبي: openRG»، «اللوبي: إطلاق اللعبة»، «اللوبي: المسار»، «اللوبي: requestTokenRefresh»، «اللوبي: خطأ».
- من لوبي → المضيف: «المضيف: السياق» (التوازن، الموقع، الحدود)، «المضيف: newToken»، «المضيف: balanceUpdate»، «المضيف: rgState»، «المضيف: الملاحة».
تشغيل اللعبة من الردهة
نهجان:1. داخل نفس الإطار - أسرع، ولكن أقل تحكمًا وأكثر صعوبة في التتبع.
2. منفصل الجذر/النافذة - مقاييس أبسط، يمكنك تعليق التراكبات (RG/limits)، وتوافق أفضل مع عرض الويب.
الحد الأدنى للطريق:- لوبي يرسل «لوبي: launchGame {gameId}».
- يقوم المضيف بإنشاء "gameToken" على ظهره ويفتح "/لعبة/: معرف ؟ رمز =... '.
- تقبل اللعبة الرمز المميز، وتتحقق من صحته، وتبدأ جلسات المراهنة.
UX والأداء
لمسة Α: 3-5 مكبرات صوت على سطح المكتب، 2 - جهاز لوحي، 1 - متنقل ؛ أصلح ارتفاع البطاقات.
هياكل عظمية وتحميل كسول (الصور 'تحميل =' كسول '،' fetchpriority = 'منخفض' لصالات العرض).
البحث السريع والفلاتر - تذكر العلامات المختارة في '؟ الاستفسار "/" التخزين المحلي ".
نقرات على البطاقة: انقر فوق منطقة ≥ 44px ؛ دعم لوحة المفاتيح (A11y).
عناصر من اللافتات: بحيث لا «يقفز» التصميم.
سياسة وسائط iOS: يتطلب التشغيل التلقائي للفيديو/الصوت إيماءة المستخدم ؛ اعتبر هذا في العروض التوضيحية.
الامتثال ومسؤولية اللاعب (RG)
الحدود والمهل: دعم عرض حدود اللاعب الحالية في الردهة (اقرأ فقط)، واستدعاء نموذج التغيير على الجانب المضيف.
الاستبعاد الذاتي: «لوبي الحدث: openRG» → يفتح وحدة RG الخاصة بك خارج الإطار.
يور. - لافتات و 18 +: على الجانب المضيف، وليس داخل الردهة، حتى لا تعتمد على إبداعات المزود.
اللائحة العامة لحماية البيانات/ملفات تعريف الارتباط: اللوبي - طرف ثالث، فكر في موافقة ملفات تعريف الارتباط والإطار القانوني (الضرورة التعاقدية/المصلحة المشروعة).
التوطين والعلامة التجارية
نقل اللغة/العملة/المنطقة إلى «src» و/أو «المضيف: السياق».
اسمح بمتغيرات التسمية البيضاء: الألوان والشعارات والخطوط.
احتفظ بالكتل «المفضلة/الحديثة» من جانب المشغل حتى لا تفقد البيانات عند تغيير البائع.
التحليلات والمقاييس
طبقة التتبع (مثال):- «lobby _ impression», «tile _ view», «tile _ click», «search _ use», «category _ change», «launch _ game», «error _ view».
- TTFB-Bet (الوقت من دخول الردهة إلى الرهان الأول)، CR_deposit→launch، فئات CTR/البحث، متوسط عمق المشاهدة.
تجمّع المناسبات من الإطار الإلكتروني ؛ تجنب «العد المزدوج» مع بكسلات المزود.
خطة اختبار التنفيذ
1. الأمان: التحقق من CSP، وعدم وجود أعلام إضافية «تسمح» و «صندوق الرمل»، والتحقق من صحة «رسالة ما بعد». '.
2. الجلسات: انتهاء صلاحية رمزية، تحديث صامت، سلوك 401/403.
3. إعادة الحجم: الارتفاع الصحيح على عرض الهاتف المحمول/الويب (Android/iOS).
4. مكتب النقد/CCM: سيناريوهات لوسائط الافتتاح/الإغلاق حسب أحداث الضغط.
5. عدم توفر المزود: المهلات وعرض الكعب وإعادة الدفع.
6. حدود RG: تعرض اللعبة وتمنعها من البدء على الأقفال.
7. تبديل المواقع/العملات: أثناء التنقل وعند إعادة التشغيل.
8. التحليلات: مقارنة العدادات المضيفة مقابل البائع.
الأخطاء الشائعة (الأنماط المضادة)
علق مستمع «رسالة» دون التحقق من «origin».
إصدار iframe الوصول الكامل («السماح بنفس الأصل السماح بالملاحة العلوية حسب المستخدم» «فقط في حالة»).
رموز طويلة العمر بدون دوران.
اعتمد على محتوى اللوبي لـ SEO.
امزج ذاكرة التخزين المؤقت للمشغل وذاكرة التخزين المؤقت لمقدم الخدمة (يكسر التخصيص).
قم بتشغيل اللعبة داخل نفس الإطار دون التحكم في التتبع وتراكب RG.
قائمة مرجعية لدمج لوبي iFrame
- عقد الحدث المتفق عليه (النسخة والأنواع والمخططات).
- نفذ/lobby-token مع TTL ≤ 15 دقيقة والتناوب.
- ضبط CSP، «sandbox»، «السماح»، «سياسة الإحالة».
- أمين صندوق متصل/KYC/RG ومرتبط بأحداث «أمين الصندوق المفتوح »/« النمو الحقيقي المفتوح».
- فكر في التراجع عندما يتحلل مقدم الخدمة.
- التوطين المدقق والعملات واللافتات العمرية.
- إعداد تحليلات (المستخدم من البداية إلى النهاية/رموز الجلسات).
- تم إجراء اختبارات عرض عبر المتصفح والجوال على الويب.
- وصف دليل الحوادث ونقاط الاتصال مع البائع.
يعد لوبي iFrame طريقة سريعة وعملية لتوسيع كتالوج الألعاب وتقصير الوقت إلى السوق. مفتاح التكامل الصحي هو الأمان القوي، وعقد حدث واضح، وتفويض قوي، و UX/تحليلات مدروسة من جانب المشغل. من خلال القيام بذلك يومًا ما، يمكنك توسيع نطاق عمليات التكامل مع البائعين الجدد تقريبًا «بالنقر».