Rol ve Erişime Göre Arayüzler

1) İlkeler

1. Güvenlik = UX görevi. Kullanıcı, "gri alanlar" olmadan neler yapabileceğini ve yapamayacağını açıkça anlamalıdır.
2. Minimum gerekli haklar. Gösterimden eylemlere kadar her şey rol görevleriyle sınırlıdır.
3. Yasak yerine işaret. Erişim yoksa, neden ve nasıl alınacağını açıklıyoruz (talep, uygulama, eğitim).
4. Sunucuda çoğaltma. UI korumaları asla sunucu kontrollerinin yerini almaz.
5. Şeffaf denetim. Her hassas eylem okunabilir bir iz bırakır.

2) Erişim kontrol modelleri

RBAC (Rol Tabanlı): sabit roller: Oyuncu, Destek, Finans, Risk/Uyum, Ortaklık Yöneticisi, Moderatör, Yönetici.
ABAC (Öznitelik Tabanlı): özniteliğe dayalı politika (yetki alanı, marka, saat dilimi, VIP seviyesi, takım, vardiya).
ReBAC (İlişki Tabanlı): ilişkiye göre erişim (oyuncu işleyicisi, bilet sahibi, ortak yöneticisi).
SoD (Segregation of Duties) - kritik görevlerin ayrılması (oluşturulan ≠ onaylanan).

Uygulama: Temel olarak RBAC, ince ayar için ABAC (marka/bölge), finans/limitler için SoD, ReBAC - nokta (küratörlü portföyler).

3) Role göre işlev haritası (örnek iGaming)

Bölüm	Oyuncu	Destek	Finans	Uyumluluk/Risk	İştirakler	Yönetici
Profil/Sınırlar	(kendi)	R/W (istek üzerine)	R	R/W (kısıtlı) R	R
Ödemeler (para yatırma/çekme)	(kendi)	R	R/W (gönderme)	R/W (dondur/tut)	R	R
CMC/belgeler	(kendi)	R (kısmen maskeleme) R (maske) R/W (karar)	—	R
Bahisler/Geçmiş	(kendi)	R	R	R	—	R
Promosyonlar/Bonuslar	R/W (şarj)	—	R	R/W (Ortaklar)	R
Kullanıcılar	—	R (biletli)	—	R	R (ortaklar)	R/W
R - oku, W - yaz. Maskeleme - veri politikasına göre (PII/PAN/KYC).

4) Haklar ve roller için UX kalıpları

4. 1 Navigasyon ve görünürlük

Erişilemeyen bölümleri navigasyondan gizleyin (gürültü azaltma), ancak olasılıkları anlamaya yardımcı olursa bilgilendirici "boş" kartlar gösterin.
Geçici olarak kullanılamayanlar için - bir ipucu ile "Kilitle": sebep, gereksinimler, CTA "Erişim iste".

4. 2 Eylem durumları

Disabled + tooltip: "Finans rolü gerekli. Erişim Talebi.
Salt okunur mod: alanlar "camın altında", açık bir işaretleyici "Salt okunur".
Eskalasyon - Uygula yerine Onay için Gönder'e tıklayın.

4. 3 Maskeleme ve Düzenleme

PII (e-posta, telefon, adres) - diğer kişilerin kayıtları için 'user @.', '+ 380 90'.
PAN/IBAN - sadece belirteçler/son 4.
Tam radyo düğmesini göster - yalnızca denetim olayına göre/role sahip olmak.

5) UI'de izin mimarisi

İstemcide politika bağlamı: izin önbelleği (TTL kısa) + güncellemelere abonelik.
Rota muhafızları: erişilemeyen yönlendirmeler - açıklama ve CTA ile 403 sayfalık.
Bileşen korumaları: 'Can ({action:' approve _ within ', resource:' payout '})'.
Ficheflags: deneysel/mevsimsel şeyler - haklardan ayrı.

Snippet (React):

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) Sunucu> İstemci

Herhangi bir eylem, sunucu tarafından işaretli bir belirteç (rol, nitelikler) ile onaylanır.
Politikalar merkezileştirilmiştir (PDP/OPA/Cedar/Zanzibar benzeri), UI yalnızca çözümü alır.
Tüm kritik işlemler - iki faktörlü onay + denetim.

7) Maskeleme ve kırmızı veri bölgeleri

Veri kategorileri:

PII: isim, e-posta, telefon, adres, doğum tarihi.
Finans: PAN/IBAN/kripto cüzdanları, miktarlar, limitler, bonus bakiyeleri.
Pasaportlar/kimlikler/özçekimler (KYC)
Oyun: Bahis geçmişi/kazançlar/desenler.

Görüntüleme ilkesi:

Tam - sahip rol/kayıt sahibi.
Maskeli - destek, finans (sahibi değil).
Toplu - Analytics (kimlik yok).

Maskeleme bileşeni:

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) Onaylar ve SoD akışları

Dört göz: başlatıcı ≠ onaylayıcı.
Çok aşamalı yollar (örneğin, miktarlar> X> 2. satır).
Uygulamaların geçerliliği, SLA, tırmanma.
Dergi: kim yarattı, kim değiştirdi, kim onayladı, ne zaman ve nereden.

Örnekler: çekilmenin onaylanması, oyuncu limitlerinde değişiklik, KYC kararı, yaptırım bayrağının kaldırılması.

9) iGaming'in özellikleri

Sınırlar ve kendini dışlama: Yalnızca SoD ve zorunlu kullanıcı bildirimi ile değiştirin.
KYC/AML: belge erişimi - dar rol; Küçük resimlerin önizlemesi, tam boyut - günlük ile ayrı bir eylemle.
Yaptırımlar/RAP bayrakları: risk ekibi tarafından görülebilir; Destek - sadece durum "doğrulama gerekir".
Ödemeler/Çıktılar: Post/Reject - Sadece Finansal Muhasebe rolü; Eşiğin üzerindeki miktarlar - çift onay.
Bahis günlükleri: Destek okur ancak düzenlemez; Ayarlamalar - soruşturma ile ayrı bir işlev.

10) Yerelleştirme, A11y, RTL

"Erişim yok" metinleri yerelleştirilmiştir ve geçerli yollar (uygulama/eğitim) içerir.
Odak kontrolü: Kullanıcıyı açıklama yapmadan "boş'bir sayfaya aktarmayın.
RTL modu, ilgili bölgelerdeki roller için desteklenir.
A11y: 'aria-disabled' + açıklama, klavye yükseltme kullanılabilirliği.

11) Koşullar ve hatalar

403 (Uygun değil): Rol bağlamı ve "Erişim İste" CTA'sı ile uyumlu sayfa.
404 (kaynak yok): gizli nesnelerin varlığını göstermez.
413/422 (çok fazla/doğrulama): politika ayrıntılarını sızdırmayın, tarafsız bir şekilde formüle edin.
Hız limitleri/kilitler: Zamanlayıcı/kilit açma koşulunu açıklayın.

12) Metrikler

Erişim Reddedildi Oranı: rol/ekrana göre başarısızlık oranı (kötü IA veya politika sinyali).
Onay SLA: Akışa göre medyan onay süresi (çıkış, limitler, KYC).
Mask Reveal Events: PII "reveal" oranı (beklenen küçük ve haklı).
Error-to-Resolution: 403'ten verilen erişime kadar geçen süre.
En Az Ayrıcalıklı Sürüklenme: Gereksiz haklara sahip roller (kullanım yoluyla tespit edilebilirlik).

13) Anti-desenler

"Hiçbir şey olmadı" altındaki hataları gizleyin.
Açıklama olmadan boş düğmeleri göster.
Sahibini kendi verileriyle maskeleyin.
Sunucu ilkeleri olmadan UI korumalarına güvenin.
Ficheflags'ı erişimlerle karıştırın (farklı görevler).
Kolaylık sağlamak için "god-mode" desteğini verin.

14) Tasarım sistemi belirteçleri (örnek)

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) Snippets UI

Rota bekçisi:

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 ile erişim kartı yok:

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

Denetim günlüğü (kısaltılmış):

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

16) KG kontrol listesi

Navigasyon ve IA

Kullanılamayan bölümler menüde gürültü yapmaz.
CTA ile açık "erişim yok" sayfaları/kartları var.

Eylemler ve muhafızlar

Hakları olmayan düğmeler - 'devre dışı' + araç ipucu/metin.
Routs korumalı; Bir açıklama ile 403 doğrudan URL.
Sunucu her eylemi onaylar.

Veri

PII/PAN/KYC politika tarafından maskelenir.
"Açıklama" günlükleri yazılır ve gözden geçirilir.
İhracat/Raporlar role karşılık gelir (analiz için toplamlar).

SoD/Onaylar

Başlatıcı başvurusunu onaylayamaz.
Eşik miktarları - çok aşamalı rotalar.

А11у/Localization

"Erişim yok" yerelleştirilmiştir; Klavye navigasyon çalışır.
Kontrast/odak halkaları AA'ya karşılık gelir.

Güvenilirlik

Kısa TTL ile izin önbelleği; rolleri değiştirirken sakatlık.
PDP drop> UI varsayılan güvenli moddadır.

17) Tasarım sistemindeki belgeler

Компоненты: 'ProtectedRoute', 'Can', 'NoAccessCard', 'ApprovalBanner', 'Redact'.
Politikalar: rol/eylem matrisi, SoD kuralları, maskeleme seviyeleri.
Süreç: erişim talebi, rollerin eğitimi/sertifikasyonu, her N haftada bir hakların gözden geçirilmesi.
Do/Don't gallery: "Sebepsiz yere boş düğmeler", "sahibine kılık değiştirme", "sunucu kontrolleri olmadan UI" vs "açıklanan kısıtlamalar ve CTA".

Kısa özet

Rol arayüzleri açık bilgi mimarisi + katı politikalar + dostça açıklamalardır. Yalnızca ihtiyacınız olanı gösterin, hassas verileri maskeleyin, korumalarla rotaları ve eylemleri koruyun, denetimdeki her kritik olayı kaydedin ve para ve uyumu etkilediği yerlerde sorumlulukları paylaşın. Bu, iGaming'de sadece riskleri azaltmakla kalmaz, aynı zamanda ekipleri daha hızlı ve daha sakin hale getirir.

Rol ve Erişime Göre Arayüzler

Navigasyon ve IA

Eylemler ve muhafızlar

Veri

SoD/Onaylar

Güvenilirlik

Kısa özet

Bizimle iletişime geçin

Hızlı iletişim

Video yakında güncellenecek

Şu anda projelerle çok meşgulüz