भूमिका और पहुँच द्वारा इंटरफेस

1) सिद्धांत

1. सुरक्षा = UX कार्य। उपयोगकर्ता को स्पष्ट रूप से समझना चाहिए कि वह "ग्रे क्षेत्रों" के बिना क्या कर सकता है और

2. न्यूनतम आवश्यक अधिकार। प्रदर्शन से लेकर कार्यों तक, सब कुछ भूमिका कार्यों तक सीमित है।

3. प्रतिबंध के बजाय संकेत। यदि कोई पहुँच नहीं है, तो हम समझाते हैं कि क्यों और कैसे प्राप्त करें (अनुरोध, आवेदन, प्रशिक्षण

4. सर्वर पर दोहराव। UI गार्ड कभी सर्वर चेक को नहीं बदलते.

5. पारदर्शी लेखा परीक्षा। प्रत्येक संवेदनशील क्रिया एक पढ़ ने योग्

2) एक्सेस कंट्रोल मॉडल

RBAC (भूमिका-आधारित): निश्चित भूमिकाएँ: खिलाड़ी, समर्थन, वित्त, जोखिम/अनुपालन, संबद्ध प्रबंधक, मॉडरेटर, व्यवस्थापक।

ABAC (विशेषता-आधारित): विशेषता-आधारित नीति (अधिकार क्षेत्र, ब्रांड, समय क्षेत्र, वीआईपी स्तर, टीम, शिफ्ट)।

ReBAC (रिलेशनशिप-बेस्ड): रिश्ते (प्लेयर हैंडलर, टिकट धारक, पार्टनर मैनेजर) द्वारा पहुंच।

SoD (कर्तव्यों का अलगाव) - महत्वपूर्ण कार्यों का पृथक्करण (निर्मित ≠ अनुमोदित)।

अभ्यास: आरबीएसी एक आधार के रूप में, ठीक ट्यूनिंग (ब्रांड/क्षेत्र) के लिए एबीएसी, वित्त/सीमा के लिए एसओडी, आरबीएसी - बिंदु (क्यूरेटेड पोर्टफोलियो)।

3) भूमिका द्वारा फंक्शन मैप (उदाहरण iGaming)

अनुभाग	खिलाड़ी	समर्थन	वित्त	अनुपालन/जोखिम	सहयोगी	प्रशासक
प्रोफ़ाइल/सीमाएँ	(अपना)	R/W (अनुरोध पर)	आर	R/W (प्रतिबंधित) R	आर
भुगतान (जमा/निकासी)	(अपना)	आर	आर/डब्ल्यू (पोस्टिंग)	R/W (फ्रीज/होल्ड)	आर	आर
सीएमसी/दस्तावेज़	(अपना)	आर (आंशिक रूप से मास्किंग) आर (मास्क) आर/डब्ल्यू (फैसला)	—	आर
दांव/इतिहास	(अपना)	आर	आर	आर	—	आर
प्रोमोस/बोनस	आर/डब्ल्यू (प्रभार)	—	आर	आर/डब्ल्यू (भागीदार)	आर
उपयोक्ता	—	आर (टिकट)	—	आर	आर (भागीदार)	आर/डब्ल्यू
आर - रीड, डब्ल्यू - राइट। मास्किंग - डेटा नीति (पीआईआई/पैन/केवाईसी) द्वारा।

4) अधिकारों और भूमिकाओं के लिए UX पैटर्न

4. 1 नेविगेशन और दृश्यता

नेविगेशन (शोर में कमी) से दुर्गम खंडों को छुपाएं, लेकिन सूचनात्मक "रिक्त" कार्ड दिखाएं यदि यह संभावनाओं को समझने में मदद करता है।

अस्थायी रूप से अनुपलब्ध के लिए - "लॉक" एक संकेत के साथ: कारण, आवश्यकताएं, सीटीए "अनुरोध पहुंच।"

4. 2 कार्रवाई के राज्य

अक्षम + टूलटिप: "वित्त भूमिका आवश्यक है। अनुरोध पहुँच।

रीड-ओनली मोड: फ़ील्ड्स "ग्लास के नीचे", एक स्पष्ट मार्कर "रीड-ओनली"।

वृद्धि - आवेदन के बजाय अनुमोदन के लिए प्रस्तुत करें।

4. 3 मास्किंग और संपादन

पीआईआई (ईमेल, फोन, पता) - 'उपयोगकर्ता @।', '+ 380 90' अन्य लोगों के रिकॉर्ड के लिए।

PAN/IBAN - केवल टोकन/अंतिम 4।

पूर्ण रेडियो बटन दिखाएँ - केवल/ऑडिट घटना द्वारा स्वामित्व भूमिका।

5) यूआई में अनुमति वास्तुकला

क्लाइंट पर नीति संदर्भ: अद्यतन के लिए अनुमति कैश (टीटीएल शॉर्ट) + सदस्यता।

रूट गार्ड: दुर्गम मार्ग → 403-पृष्ठ स्पष्टीकरण और सीटीए के साथ।

घटक गार्ड: 'कर सकते हैं ({क्रिया:' अनुमोदन _ भीतर ', संसाधन:' भुगतान '})।

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 जैसी), UI को केवल समाधान मिलता है।

सभी महत्वपूर्ण संचालन - दो-कारक पुष्टि + ऑडिट।

7) मास्किंग और लाल डेटा क्षेत्र

डेटा श्रेणी:

PII: नाम, ईमेल, फोन, पता, जन्म की तारीख।
वित्त: पैन/आईबीएएन/क्रिप्टो पर्स, मात्रा, सीमा, बोनस बैलेंस।
दस्तावेज़: पासपोर्ट/आईडी/सेल्फी (केवाईसी)।
गेमिंग: सट्टेबाजी इतिहास/जीत/पैटर्न।

प्रदर्शन नीति:

पूर्ण स्वामित्व वाली भूमिका/रिकॉर्ड
नकाबपोश - समर्थन, वित्त (मालिक नहीं)।
एकत्र - एनालिटिक्स (कोई आईडी नहीं)।

मास्किंग घटक:

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 → 2nd लाइन)।

अनुप्रयोगों की वैधता, एसएलए, वृद्धि।

पत्रिका: किसने बनाया, किसने बदल दिया, किसने मंजूरी दी, कब और कहां से।

उदाहरण: वापसी की पुष्टि, खिलाड़ी की सीमा में बदलाव, केवाईसी का फैसला, मंजूरी ध्वज को हटाना।

9) iGaming की बारीकियां

सीमाएं और स्व-बहिष्करण: केवल SoD और अनिवार्य उपयोगकर्ता अधिसूचना के साथ परिवर्तन।

केवाईसी/एएमएल: दस्तावेज़ अभिगम - संकीर्ण भूमिका; थंबनेल का पूर्वावलोकन, पूर्ण आकार - लॉग के साथ एक अलग क्रिया द्वारा।

प्रतिबंध/आरएपी झंडे: जोखिम टीम को दिखाई देता है; समर्थन - केवल स्थिति "सत्यापन की आवश्यकता है।"

भुगतान/आउटपुट: पोस्ट/अस्वीकार - केवल वित्तीय लेखा भूमिका; सीमा से ऊपर की मात्रा - दोहरी पुष्टि।

सट्टेबाजी लॉग: समर्थन पढ़ ता है लेकिन संपादित नहीं करता है; समायोजन - जांच के साथ एक अलग कार्य।

10) स्थानीयकरण, A11y, आरटीएल

"नो एक्सेस" ग्रंथ स्थानीयकृत हैं और इसमें वैध पथ (एप्लिकेशन/प्रशिक्षण) हैं।

फोकस नियंत्रण: बिना स्पष्टीकरण के उपयोगकर्ता को "खाली" पृष्ठ पर स्थानांतरित न करें।

आरटीएल मोड संबंधित क्षेत्रों में भूमिकाओं के लिए समर्थित है।

A11y: 'आरिया-अक्षम' + स्पष्टीकरण, कीबोर्ड वृद्धि उपलब्धता।

11) शर्तें और त्रुटियाँ

403 (अयोग्य): भूमिका संदर्भ और "अनुरोध पहुंच" सीटीए के साथ अनुकूल पृष्ठ।

404 (कोई संसाधन नहीं): छिपी हुई वस्तुओं के अस्तित्व को प्रकट न करें।

413/422 (बहुत अधिक/सत्यापन): नीति विवरण लीक न करें, तटस्थ रूप से तैयार करें।

दर-सीमा/ताले: टाइमर/अनलॉक स्थिति समझाएं।

12) मेट्रिक्स

पहुंच से वंचित दर: भूमिका/स्क्रीन (खराब आईए या नीति संकेत) द्वारा विफलता दर।

अनुमोदन एसएलए: प्रवाह द्वारा औसत अनुमोदन समय (आउटपुट, सीमा, केवाईसी)।

मास्क रिवील इवेंट्स: पीआईआई "खुलासा" दर (अपेक्षित छोटा और उचित)।

त्रुटि-से-रिज़ॉल्यूशन: 403 से दिया गया एक्सेस का समय।

कम से कम-विशेषाधिकार बहाव: निरर्थक अधिकारों के साथ भूमिकाएँ (उपयोग द्वारा पहचान)।

13) एंटी-पैटर्न

"कुछ नहीं हुआ" के तहत त्रुटियों को छिपाएं।

बिना स्पष्टीकरण के खाली बटन दिखाएँ।

अपने स्वयं के डेटा के साथ मालिक को मुखौटा।

बिना सर्वर पॉलिसी के UI गार्ड पर भरोसा करें.

एक्सेस (विभिन्न कार्यों) के साथ 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/>;
}

CTA के साथ कोई पहुँच कार्ड नहीं:

html
<article class="no-access">
<h3> Insufficient rights </h3>
<p> Access to Payouts is available to Finance/Admin roles. </p>
<button class =" btn" data-open-request> Request access </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) क्यूए चेकलिस्ट

नेविगेशन और आईए

अनुपलब्ध अनुभाग मेनू में शोर नहीं करते हैं।
CTA के साथ स्पष्ट "नो एक्सेस" पेज/कार्ड हैं।

क्रियाएँ और गार्ड

अधिकारों के बिना बटन - 'अक्षम' + टूलटिप/पाठ।
राउट्स संरक्षित; स्पष्टीकरण के साथ प्रत्यक्ष URL → 403।
सर्वर प्रत्येक क्रिया की पुष्टि करता है।

डाटा

PII/PAN/KYC नीति द्वारा नकाबपोश हैं।
"खुलासे" के लॉग लिखे और समीक्षा की जाती है।
निर्यात/रिपोर्ट भूमिका के अनुरूप है (विश्लेषण के लिए कुल)।

SoD/अनुमोदन

सर्जक अपने आवेदन को मंजूरी नहीं दे सकता।
थ्रेशोल्ड मात्रा - मल्टीस्टेज मार्ग।

A11/Localization

"नो एक्सेस" स्थानीयकृत है; कुंजीपटल नेविगेशन काम करता है।
कंट्रास्ट/फोकस रिंग एए के अनुरूप हैं।

विश्वसनीयता

छोटे टीटीएल के साथ अनुमति कैश; भूमिकाओं को बदलते समय विकलांगता।
पीडीपी ड्रॉप - यूआई डिफ़ॉल्ट-सुरक्षित मोड में है।

17) डिजाइन प्रणाली में प्रलेखन

: 'गुओ रूट', 'कैन', 'नोएक्सकार्ड', ' बैनर', 'रिडैक्ट'।

नीतियां: भूमिका/एक्शन मैट्रिक्स, SoD नियम, मास्किंग स्तर।

प्रक्रिया: अभिगम अनुरोध, भूमिकाओं का प्रशिक्षण/प्रमाणन, प्रत्येक एन सप्ताह एक बार अधि

गैलरी करें/न करें: "बिना किसी कारण के खाली बटन", "मालिक को भेजें", "सर्वर चेक के बिना यूआई" बनाम "समझाया प्रतिबंध और सीटीए।"

संक्षिप्त सारांश

भूमिका इंटरफेस स्पष्ट सूचना वास्तुकला + सख्त नीतियां + अनुकूल स्पष्टीकरण हैं। केवल आपको जो चाहिए, मास्क संवेदनशील डेटा दिखाएं, गार्ड के साथ मार्गों और कार्यों की रक्षा करें, ऑडिट में हर महत्वपूर्ण घटना को रिकॉर्ड करें और जिम्मेदारियों को साझा करें जहां यह पैसे और अनुपालन को प्रभावित करता है। IGaming में, यह न केवल जोखिमों को कम करता है, बल्कि टीमों को तेज और शांत भी बनाता है।