Web Components Identity Access Management —
Web Components IAM
Web Components Identity Access Management Custom Elements Shadow DOM OAuth RBAC Login Session Token JWT Permission Guard Security Production
| Component | Purpose | Attributes | Events | Security |
|---|---|---|---|---|
| login-form | Authentication UI | auth-url redirect-url | login-success login-error | CSRF Token |
| oauth-button | Social Login | provider client-id | oauth-callback | State param |
| permission-guard | RBAC UI | required-role fallback | access-denied | Server verify |
| session-timer | Session Management | timeout warn-before | session-expired | httpOnly cookie |
| user-profile | User Info Display | show-role show-avatar | profile-updated | Sanitize output |
| mfa-input | 2FA Code Input | digits verify-url | mfa-verified | Rate limiting |
Custom Element Implementation
=== Web Component — Login Form ===
class LoginForm extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['auth-url', 'redirect-url'];
}
connectedCallback() {
this.shadowRoot.innerHTML = `
<style>
:host { display: block; max-width: 400px; margin: 0 auto; }
form { display: flex; flex-direction: column; gap: 16px; }
input { padding: 12px; border: 1px solid #ccc; border-radius: 8px; }
button { padding: 12px; background: #4f46e5; color: white; border: none;
border-radius: 8px; cursor: pointer; font-size: 16px; }
button:hover { background: #4338ca; }
.error { color: #ef4444; display: none; }
</style>
<form>
<input type="text" name="username" placeholder="Username" required />
<input type="password" name="password" placeholder="Password" required />
<div class="error"></div>
<button type="submit">Login</button>
</form>
เนื้อหาเกี่ยวข้อง — ทำความเข้าใจ tagged vlan คือ — ข้อมูลครบถ้วน 2026
`;
this.shadowRoot.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
this.handleLogin(e.target);
});
}
async handleLogin(form) {
แนะนำเพิ่มเติม — คอร์สเทรด Forex ที่ iCafeForex
const data = new FormData(form);
try {
const res = await fetch(this.getAttribute('auth-url'), {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
username: data.get('username'),
password: data.get('password'),
}),
credentials: 'include',
});
if (res.ok) {
const { token } = await res.json();
this.dispatchEvent(new CustomEvent('login-success', {
detail: { token }, bubbles: true, composed: true
}));
}
} catch (err) {
this.dispatchEvent(new CustomEvent('login-error', {
เนื้อหาเกี่ยวข้อง — ทำความเข้าใจ Vector Database Pinecone Career Development IT
detail: { error: err.message }, bubbles: true, composed: true
}));
}
}
}
customElements.define('login-form', LoginForm);
from dataclasses import dataclass
@dataclass
class WebComponentAPI:
lifecycle: str
when_called: str
use_case: str
apis = [
WebComponentAPI("constructor()", "Element created", "Initialize state, attach Shadow DOM"),
WebComponentAPI("connectedCallback()", "Added to DOM", "Render template, add event listeners"),
แนะนำเพิ่มเติม — บทวิเคราะห์จาก XM Signal
WebComponentAPI("disconnectedCallback()", "Removed from DOM", "Cleanup listeners, cancel timers"),
WebComponentAPI("attributeChangedCallback()", "Attribute changes", "React to attribute updates"),
WebComponentAPI("adoptedCallback()", "Moved to new document", "Re-initialize if needed"),
WebComponentAPI("observedAttributes", "Static getter", "List attributes to watch"),
]
RBAC Permission Guard
=== Permission Guard Component ===
class PermissionGuard extends HTMLElement {
constructor() {
super();
เนื้อหาเกี่ยวข้อง — บทความที่เกี่ยวข้อง: SOPS Encryption Compliance Automation
this.attachShadow({ mode: 'open' });
}
static get observedAttributes() {
return ['required-role', 'required-permission'];
}
connectedCallback() {
this.checkAccess();
}
async checkAccess() {
const requiredRole = this.getAttribute('required-role');
const userRoles = await this.getUserRoles();
if (userRoles.includes(requiredRole)) {
this.shadowRoot.innerHTML = '<slot></slot>';
} else {
this.shadowRoot.innerHTML = '<slot name="fallback"></slot>';
this.dispatchEvent(new CustomEvent('access-denied', {
detail: { requiredRole, userRoles },
bubbles: true, composed: true
}));
}
}
async getUserRoles() {
const token = document.cookie.match(/token=([^;]+)/)?.[1];
if (!token) return [];
const payload = JSON.parse(atob(token.split('.')[1]));
return payload.roles || [];
เนื้อหาเกี่ยวข้อง — แนะนำให้อ่าน Datadog APM Code Review Best Practice
}
}
customElements.define('permission-guard', PermissionGuard);
Usage:
<permission-guard required-role="admin">
<admin-dashboard></admin-dashboard>
<div slot="fallback">Access Denied</div>
</permission-guard>
@dataclass
class RBACRule:
role: str
permissions: str
ui_access: str
api_access: str
rules = [
RBACRule("admin", "all", "Full dashboard, user management, settings", "All endpoints"),
RBACRule("editor", "read write publish", "Content editor, media library, preview", "CRUD content, media"),
RBACRule("viewer", "read", "View content, reports, analytics", "GET endpoints only"),
RBACRule("moderator", "read write delete-content", "Content moderation, user reports", "Content CRUD, reports"),
RBACRule("guest", "read-public", "Public pages only", "Public API only"),
]
เคล็ดลับ
- Shadow DOM: ใช้ Shadow DOM ป้องกัน Style Leak และ XSS
- Server: ตรวจสอบ Permission ที่ Server เสมอ ไม่พึ่ง UI อย่างเดียว
- httpOnly: เก็บ Token ใน httpOnly Cookie ไม่ใช่ localStorage
- Events: ใช้ Custom Events สื่อสารระหว่าง Components
- Reusable: ออกแบบ Component ให้ Configurable ด้วย Attributes
Web Components สำหรับ IAM คืออะไร
Web Standard Reusable Custom Elements Shadow DOM Login OAuth RBAC Permission Guard Session ใช้ทุก Framework React Vue Angular Vanilla
