\`Embed Didit identity verification into my web page using an iframe. \## Two Options \### Option A: UniLink (no backend — fastest setup) Copy your UniLink URL from Didit Console > Workflows > Copy Link. It looks like: https://verify.didit.me/u/ Embed it directly: \ ```> ⚠️ **مطلوب**: سمة `allow` إلزامية للوصول إلى الكاميرا أثناء كشف الحيوية.### أبرز المزايا- **إعداد في أقل من دقيقة**: بدون خادم خلفي ولا مفاتيح API - **دون أي إعدادات**: يُضبط رابط الاستدعاء في إعدادات سير العمل - **مثالي للنماذج الأولية (MVP)**: ابدأ فوراً***## جلسة iframe عبر API (مع خادم خلفي)للتكاملات المتقدمة التي تحتاج إلى تخصيص لكل جلسة.### متى تستخدمها- مرّر `vendor_data` أو `metadata` مخصصة لكل جلسة - اضبط روابط استدعاء مختلفة لكل جلسة - تتبّع الجلسات على الخادم قبل بدء التحقق - اربط الجلسات بمعرّفات المستخدمين لديك### التنفيذ**الخطوة 1: أنشئ جلسة (من الخادم الخلفي)**تستخدم استجابة إنشاء الجلسة حقلاً اسمه **`url`**، استخدمه كقيمة `src` للـ iframe.```javascript theme={null} // Node.js / Express app.post('/api/create-verification', async (req, res) => { const { userId } = req.body; const response = await fetch('https://verification.didit.me/v3/session/', { method: 'POST', headers: { 'x-api-key': process.env.DIDIT_API_KEY, 'Content-Type': 'application/json', }, body: JSON.stringify({ workflow_id: process.env.DIDIT_WORKFLOW_ID, vendor_data: userId, callback: 'https://yourapp.com/verification-callback', metadata: { source: 'web-app', timestamp: Date.now() }, }), }); if (!response.ok) { return res.status(response.status).send(await response.text()); } // 201 per OpenAPI: { session_id, session_number, session_token, url, vendor_data, // metadata, status, workflow_id, workflow_version, callback } const session = await response.json(); res.json({ sessionId: session.session_id, verificationUrl: session.url }); }); ```**الخطوة 2: ضمّن الجلسة في iframe (الواجهة الأمامية)**```html theme={null} ```***## الاستماع للأحداث (postMessage)ترسل صفحة التحقق الأحداث إلى النافذة الأم. تحتوي كل رسالة على هذا الغلاف:```typescript theme={null} { type: 'didit:', // e.g. 'didit:completed' data: { /* payload */ }, // event-specific; may be undefined timestamp: 1718000000000 // ms epoch } ```الحمولة **متداخلة**: اقرأ `event.data.data.sessionId` وليس `event.data.sessionId`:```javascript theme={null} window.addEventListener('message', (event) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; const { type, data } = event.data || {}; if (type === 'didit:ready') { console.log('Session ID:', data.sessionId); // available as soon as the page loads } if (type === 'didit:completed') { console.log('Done:', data.sessionId, data.status); // e.g. "Approved" | "Declined" | "In Review" // UI hint only — the canonical decision arrives on your backend via webhook } }); ```أهم الأحداث: `didit:ready` (`{ sessionId }`)، `didit:started`، `didit:step_started` / `didit:step_completed` / `didit:step_changed` (`{ step, ... }`)، `didit:status_updated` (`{ status }`)، `didit:completed` (`{ sessionId, status }`)، `didit:cancelled`، `didit:error` (`{ error, step? }`)، `didit:close_request`، و`didit:layout` (`{ contentHeight, colorScheme, dir }`، انظر [أدناه](#تحديد-حجم-iframe-من-diditlayout)). تسرد [مرجع أحداث SDK لـ JavaScript](https://docs.didit.me/ar/integration/web-sdks/javascript-sdk.md#مرجع-الأحداث) أحداث التحقق المتاحة كدوال رد نداء محددة النوع. ابتداءً من الإصدار 0.5.0، يتولى SDK رسائل التخطيط داخلياً ولا يمررها إلى `onEvent`.### تحديد حجم iframe من `didit:layout`تُخبرك صفحة التحقق بالمساحة التي تحتاجها عبر رسالة `didit:layout`. ترسل رسالة عند التحميل وأخرى كلما تغيّر ارتفاع المحتوى أو السمة أو اتجاه النص:```typescript theme={null} { type: 'didit:layout', data: { contentHeight: 612, // CSS px colorScheme: 'light', // 'light' | 'dark' dir: 'ltr' // 'ltr' | 'rtl' }, timestamp: 1718000000000 } ```| الحقل | النوع | الوصف | | - | - | - | | `contentHeight` | `number` | الارتفاع الطبيعي لمحتوى الصفحة ببكسل CSS، بما في ذلك الشريط العلوي | | `colorScheme` | `'light' \| 'dark'` | السمة التي تُعرض بها الصفحة. مع ألوان العلامة البيضاء، يحدد لون خلفيتك السمة وليس إعداد الجهاز | | `dir` | `'ltr' \| 'rtl'` | اتجاه النص للغة الصفحة |> [!NOTE] > > لاستقبال `didit:layout` في iframe الخاص بك، أضف `sdk_presentation=embedded` إلى رابط التحقق الخاص به. ابتداءً من الإصدار 0.5.0، يضبط [SDK لـ JavaScript](https://docs.didit.me/ar/integration/web-sdks/javascript-sdk.md) هذا العرض تلقائياً. بدون معامل العرض، تستخدم الصفحة تخطيطها المستقل ولا ترسل رسائل التخطيط.يتبع هذا المضيف [الأحجام الموصى بها](#حجم-الإطار): بطاقة ثابتة من عرض 1024 بكسل، وملء الشاشة عند 540 بكسل وأقل، وبينهما iframe بعرض 500 بكسل يأخذ الارتفاع الذي تُبلغ عنه الصفحة:```html theme={null} ```بين 541 و1023 بكسل، يستخدم هذا المثال ارتفاع بداية قدره 700 بكسل إلى أن تصل رسالة التخطيط، مع حد أقصى 90% من ارتفاع النافذة المرئية. تُطبّق أحجام الحاسوب والهاتف فوراً. على الهواتف يغطي iframe النافذة، لذا وفّر طريقة للخروج من التحقق داخل المضيف. استخدم `colorScheme` و`dir` لمطابقة أي عناصر تحكم ترسمها حول iframe مع سمة الصفحة واتجاه نصها.إذا انقطع اتصال المستخدم، تعرض الصفحة شاشة "لا يوجد اتصال بالإنترنت" تُغلق نفسها تلقائياً عند عودة الاتصال. إذا اختار المستخدم **Exit Verification** هناك، ترسل الصفحة `didit:error` مع `error: "network_error"`، ثم `didit:cancelled`: أغلق iframe عند `didit:cancelled`.***## تنفيذ النافذة المنبثقةلتجربة نافذة منبثقة متقنة تُعرض فوق صفحتك:### HTML/CSS/JS```html theme={null} ```***## مكوّن Reactمكوّن React قابل لإعادة الاستخدام للتحقق عبر نافذة منبثقة:```tsx theme={null} import { useState, useEffect } from 'react'; interface DiditInContextProps { /** * Either the `url` returned by POST /v3/session/ (API session) * or your UniLink URL copied from the Console (Workflows → Copy Link). * Don't derive the UniLink yourself — the path segment is a 22-character * base64url encoding of the workflow UUID's raw bytes, not btoa(workflowId). */ verificationUrl: string; isOpen: boolean; onClose: () => void; onComplete?: (sessionId: string, status: string) => void; } export function DiditInContext({ verificationUrl, isOpen, onClose, onComplete }: DiditInContextProps) { const [iframeSrc, setIframeSrc] = useState(''); useEffect(() => { if (isOpen) { setIframeSrc(verificationUrl); document.body.style.overflow = 'hidden'; } else { setIframeSrc(''); document.body.style.overflow = ''; } }, [isOpen, verificationUrl]); // Listen for postMessage from iframe // Messages look like: { type: 'didit:', data: {...}, timestamp } useEffect(() => { const handleMessage = (event: MessageEvent) => { // Use your white-label domain here if you have one configured if (event.origin !== 'https://verify.didit.me') return; if (event.data?.type === 'didit:completed' && onComplete) { onComplete(event.data.data?.sessionId, event.data.data?.status); onClose(); } }; window.addEventListener('message', handleMessage); return () => window.removeEventListener('message', handleMessage); }, [onComplete, onClose]); // Handle escape key useEffect(() => { const handleEscape = (e: KeyboardEvent) => { if (e.key === 'Escape' && isOpen) onClose(); }; document.addEventListener('keydown', handleEscape); return () => document.removeEventListener('keydown', handleEscape); }, [isOpen, onClose]); if (!isOpen) return null; return (

e.target === e.currentTarget && onClose()} >