واجهات حسب الدور والوصول

1) المبادئ

1. الأمن = مهمة UX. يجب أن يفهم المستخدم بوضوح ما يمكنه وما لا يمكنه فعله بدون «المناطق الرمادية».
2. الحد الأدنى من الحقوق الضرورية. من العرض إلى الأفعال، يقتصر كل شيء على مهام الأدوار.
3. إشارة بدلاً من الحظر. إذا لم يكن هناك وصول، فإننا نشرح سبب وكيفية الحصول (الطلب والتطبيق والتدريب).
4. تكرار على الخادم. لا يستبدل حراس واجهة المستخدم أبدًا فحوصات الخادم.
5. مراجعة شفافة للحسابات. كل عمل حساس يترك بصمة مقروءة.

2) نماذج التحكم في الوصول

RBAC (قائم على الأدوار): أدوار ثابتة: لاعب، دعم، تمويل، مخاطر/امتثال، مدير منتسب، مدير، إدارة.
ABAC (القائم على السمات): السياسة القائمة على السمات (الولاية القضائية، العلامة التجارية، المنطقة الزمنية، مستوى كبار الشخصيات، الفريق، التحول).
ReBAC (قائم على العلاقات): الوصول عن طريق العلاقة (معالج اللاعب، حامل التذكرة، مدير الشريك).
SoD (الفصل بين الواجبات) - الفصل بين المهام الحاسمة (تم إنشاؤها ≠ الموافقة عليها).

الممارسة: RBAC كأساس، ABAC للضبط الدقيق (العلامة التجارية/المنطقة)، SoD للتمويل/الحدود، ReBAC - نقطة (محافظ منسقة).

3) خريطة الوظيفة حسب الدور (مثال iGaming)

4) أنماط UX للحقوق والأدوار

4. 1 الملاحة والرؤية

إخفاء الأقسام التي لا يمكن الوصول إليها من التنقل (تقليل الضوضاء)، ولكن إظهار البطاقات «الفارغة» المعلوماتية إذا كان ذلك يساعد على فهم الاحتمالات.
لعدم توفرها مؤقتًا - «قفل» مع تلميح: السبب والمتطلبات، CTA «طلب الوصول».

4. 2 دول العمل

Disabled + tooltip: "الدور المالي مطلوب. طلب الوصول.
وضع القراءة فقط: حقول «تحت الزجاج»، علامة صريحة «اقرأ فقط».
التصعيد - انقر فوق الإرسال للموافقة بدلاً من التقديم.

4. 3 الإخفاء والتحرير

PII (بريد إلكتروني، هاتف، عنوان) - «user @».، «+ 380 90» لسجلات الآخرين.
PAN/IBAN - فقط الرموز/آخر 4.
أظهر زر الراديو الكامل - امتلاك الدور فقط/عن طريق حدث التدقيق.

5) بنية الإذن في واجهة المستخدم

سياق السياسة بشأن العميل: مخبأ الإذن (اختصار TTL) + الاشتراك في التحديثات.
حراس الطريق: مسارات يتعذر الوصول إليها → 403 صفحة مع شرح و CTA.
حراس المكونات: 'Can ({action:' approve _ inside ', resource:' payout'}) '.
Ficheflags: أشياء تجريبية/موسمية - منفصلة عن الحقوق.

tsx type Permission = string; // 'payout.approve', 'kyc.view_masked'
type Policy = { has:(p:Permission)=>boolean };
const PolicyCtx = React.createContext<Policy>({ has:()=>false });
export const Can: React.FC<{perm:Permission, children:React.ReactNode, fallback?:React.ReactNode}>
= ({perm, children, fallback=null}) => {
const { has } = React.useContext(PolicyCtx);
return has(perm)? <>{children}</>: <>{fallback}</>;
};

6) الخادم> العميل

يتم تأكيد أي إجراء بواسطة الخادم بواسطة رمز مميز بعلامات (دور، سمات).
السياسات مركزية (PDP/OPA/Cedar/Zanzibar-like)، واجهة المستخدم تحصل فقط على الحل.
جميع العمليات الحرجة - تأكيد عاملين + مراجعة.

7) مناطق الإخفاء والبيانات الحمراء

• الاسم، البريد الإلكتروني، الهاتف، العنوان، تاريخ الميلاد.
• التمويل: محافظ PAN/IBAN/crypto والمبالغ والحدود وأرصدة المكافآت.
• الوثائق: جوازات السفر/الهوية/صور السيلفي (KYC).
• الألعاب: تاريخ الرهان/المكاسب/الأنماط.

• دور التملك الكامل/مالك التسجيل.
• مقنع - دعم، تمويل (وليس مالك).
• مجمعة - تحليلات (بدون معرفات).

tsx function Redact({text, perm}:{text:string, perm:Permission}){
const { has } = React.useContext(PolicyCtx);
return <span>{has(perm)? text: text.replace(/.(?=.{4})/g,'•')}</span>;
}

8) الموافقات وتدفقات SoD

أربع عيون: البادئ ≠ الموافقة.
طرق متعددة المراحل (على سبيل المثال، المبالغ> X → الخط الثاني).
صحة الطلبات، جيش تحرير السودان، التصعيد.
المجلة: من ابتكر، ومن تغير، ومن وافق، ومتى ومن أين.

أمثلة: تأكيد الانسحاب، تغيير حدود اللاعب، حكم KYC، إزالة علم العقوبة.

9) تفاصيل iGaming

الحدود والاستبعاد الذاتي: التغيير فقط مع SoD وإخطار المستخدم الإلزامي.
KYC/AML: الوصول إلى الوثائق - دور ضيق ؛ معاينة الصور المصغرة، الحجم الكامل - عن طريق إجراء منفصل مع السجل.
أعلام الجزاءات/برامج العمل الإقليمية: مرئية لفريق المخاطر ؛ الدعم - فقط الوضع «يحتاج إلى التحقق».
المدفوعات/النواتج: وظيفة/رفض - دور المحاسبة المالية فقط ؛ أعلى من العتبة - تأكيد مزدوج.
سجلات الرهان: يقرأ الدعم ولكنه لا يحرر ؛ التعديلات - وظيفة منفصلة مع التحقيق.

10) التوطين، A11y، RTL

النصوص «ممنوع الوصول» محلية وتتضمن مسارات صالحة (التطبيق/التدريب).
التحكم في التركيز: لا تنقل المستخدم إلى صفحة «فارغة» دون تفسير.
يتم دعم نمط RTL للأدوار في المناطق المعنية.
A11y: «aria-disabled» + شرح، توافر تصعيد لوحة المفاتيح.

11) الظروف والأخطاء

403 (غير مؤهل): صفحة ودية مع سياق الدور و «طلب الوصول» CTA.
404 (لا يوجد مورد): لا تكشف عن وجود أشياء مخفية.
413/422 (الكثير/المصادقة): لا تسرب تفاصيل السياسة، صياغتها بشكل محايد.
حدود الأسعار/الأقفال: اشرح حالة الوقت/فتح القفل.

12) المقاييس

معدل رفض الوصول: معدل الفشل حسب الدور/الشاشة (IA سيئ أو إشارة السياسة).
الموافقةSLA: متوسط وقت الموافقة حسب التدفق (الناتج، الحدود، KYC).
Mask Reveal Events: معدل «كشف» PII (متوقع صغير ومبرر).
خطأ إلى حل: الوقت من 403 إلى الوصول الممنوح.
Lest-Privilege Drift: الأدوار ذات الحقوق الزائدة (إمكانية الكشف عن طريق الاستخدام).

13) الأنماط المضادة

إخفاء الأخطاء تحت «لم يحدث شيء».
أظهر أزرارًا فارغة دون تفسير.
أخفي المالك ببياناته الخاصة.
اعتمد على حراس واجهة المستخدم بدون سياسات الخادم.
امزج ficheflags مع الوصول (مهام مختلفة).
أعط الدعم «وضع الله» من أجل الراحة.

14) رموز نظام التصميم (مثال)

json
{
"access": {
"badge": { "viewer":"#607D8B", "editor":"#4CAF50", "approver":"#FF9800", "admin":"#9C27B0" },
"lockColor": "#9E9E9E",
"maskChar": "•"
},
"states": {
"noAccess": { "bg":"var(--bg-elev)", "border":"var(--border)", "icon":"#9E9E9E" },
"approval": { "pending":"#FFC107", "approved":"#4CAF50", "rejected":"#F44336" }
},
"a11y": { "ariaDisabled": true, "explainDenial": true }
}

15) واجهة المستخدم المقتطفات

tsx import { Navigate, Outlet } from 'react-router-dom';
function GuardedRoute({perm}:{perm:Permission}){
const { has } = React.useContext(PolicyCtx);
if (has(perm)) return <Outlet/>;
return <Navigate to={`/403?perm=${encodeURIComponent(perm)}`} replace/>;
}

html
<article class="no-access">
<h3>Недостаточно прав</h3>
<p>Доступ к разделу «Выплаты» доступен ролям: Финансы/Админ.</p>
<button class="btn" data-open-request>Запросить доступ</button>
</article>

json
{
"ts": "2025-11-03T18:45:12Z",
"actor": "u_5412",
"action": "payout.approve",
"target": "withdraw#w_91822",
"ip": "194...12",
"result": "success"
}

16) قائمة QA المرجعية

الملاحة والوكالة الدولية

• الأقسام غير المتاحة لا تحدث ضوضاء في القائمة.
• هناك صفحات/بطاقات واضحة «لا وصول» مع CTA.

الأعمال والحراس

• أزرار بدون حقوق - «معطل» + تلميح/نص.
• الطرق المحمية ؛ توجيه عنوان URL → 403 مع شرح.
• الخادم يؤكد كل إجراء.

البيانات

• PII/PAN/KYC ملثمة بالسياسة.
• يتم كتابة ومراجعة سجلات «الإفصاحات».
• التصدير/التقارير تتوافق مع الدور (مجاميع للتحليل).

SoD/الموافقات

• لا يمكن للمبادر الموافقة على طلبه.
• كميات العتبة → طرق متعددة المراحل.

А11у/Localization

• «عدم الوصول» محدد الموقع ؛ تعمل لوحة المفاتيح.
• حلقات التباين/التركيز تتوافق مع AA.

الموثوقية

• مخبأ الإذن مع TTL قصير ؛ عند تغيير الأدوار.
• انخفاض PDP → واجهة المستخدم في وضع آمن افتراضيًا.

17) التوثيق في نظام التصميم

Компоненты: «GuardedRoute» و «Can» و «NoAccessCard' و» AdvisorationBanner «و» Redact'.
السياسات: مصفوفة الدور/العمل، قواعد SoD، مستويات الإخفاء.
العملية: طلب الوصول، والتدريب/التصديق على الأدوار، وتنقيح الحقوق مرة كل أسبوع.
Do/Don 't Gallery: «أزرار فارغة بدون سبب»، «تنكر للمالك»، «UI بدون فحوصات الخادم» مقابل «شرح القيود و CTA».

موجز

واجهات الأدوار هي بنية معلومات واضحة + سياسات صارمة + تفسيرات ودية. أظهر فقط ما تحتاجه، وقم بإخفاء البيانات الحساسة، وحماية الطرق والإجراءات مع الحراس، وقم بتسجيل كل حدث مهم في التدقيق وتقاسم المسؤوليات حيث يؤثر على المال والامتثال. في iGaming، لا يقلل هذا من المخاطر فحسب، بل يجعل الفرق أيضًا أسرع وأكثر هدوءًا.