> ## Documentation Index
> Fetch the complete documentation index at: https://docs.didit.me/llms.txt
> Use this file to discover all available pages before exploring further.

# حزم SDK للتحقق من الهوية على الويب: JavaScript وiframe

> Didit: حزم SDK للتحقق من الهوية على الويب وKYC وKYB وAML وكشف الحيوية عبر JavaScript وiframe. من $0.33 لكل فحص KYC كامل، و$10 مجاناً شهرياً.

> [!NOTE]
>
> تُغطي هذه الأدلة التحقق من الهوية. لتسجيل دخول المستخدمين النهائيين، استخدم [أدلة منصة المصادقة](https://docs.didit.me/ar/authentication/overview.md)؛ حزم المصادقة الجديدة تعتمد على الإصدار.

ادمج التحقق من Didit في تطبيق الويب الخاص بك. نوفر سبع طرق للتكامل تناسب بنيتك ومتطلبات تجربة المستخدم، فاختر الطريقة التي تتوافق مع تقنياتك.

> [!NOTE]
>
> **اختر طريقة التكامل المناسبة**: من الإطارات المضمّنة السريعة التي لا تحتاج إلى أي كود، إلى التحكم البرمجي الكامل عبر حزمة تطوير JavaScript الخاصة بنا، أو الإضافات الجاهزة لـ WordPress وShopify وSalesforce.

***

## طرق التكامل

| الطريقة | مدة الإعداد | الخادم الخلفي؟ | الأفضل لـ |
| - | - | - | - |
| [JavaScript SDK](https://docs.didit.me/ar/integration/web-sdks/javascript-sdk.md) | 3 دقائق | اختياري | تحكم كامل — React/Vue/Angular/Next.js/Nuxt/Svelte/JavaScript العادي |
| [InContext (Iframe)](https://docs.didit.me/ar/integration/web-sdks/incontext-iframe.md) | أقل من دقيقة | اختياري | تجربة مضمّنة دون إعادة توجيه |
| [Redirect](https://docs.didit.me/ar/integration/web-sdks/web-redirect.md) | 5 دقائق | نعم | أقصى درجات التوافق، وتدفقات التحقق عبر الأجهزة |
| [WebView (iOS/Android)](https://docs.didit.me/ar/integration/web-sdks/webview-in-ios-android.md) | 15 دقيقة | نعم | بديل على الأجهزة المحمولة عند عدم توفر حزمة SDK أصلية |
| [WordPress + WooCommerce](https://docs.didit.me/ar/integration/web-sdks/wordpress-woocommerce.md) | 5 دقائق | بدون كود | مواقع WordPress ومتاجر WooCommerce |
| [Shopify](https://docs.didit.me/ar/integration/web-sdks/shopify.md) | 5 دقائق | بدون كود | متاجر Shopify، للتحقق عند الدفع أو من الحساب |
| [Salesforce](https://docs.didit.me/ar/integration/web-sdks/salesforce.md) | 10 دقائق | بدون كود | إدارة علاقات العملاء في Salesforce، للتحقق من سجلات جهات الاتصال والعملاء المحتملين |

> [!NOTE]
>
> **توصية**: بالنسبة لتطبيقات الويب في بيئة الإنتاج، استخدم **JavaScript SDK** للحصول على أفضل تجربة مستخدم وتحكم برمجي كامل. استخدم **InContext iframe** للإعداد الأسرع، و**إعادة التوجيه** عند الحاجة إلى التحقق بين الأجهزة، والتكاملات المخصصة **WordPress / Shopify / Salesforce** إذا كنت تعمل على هذه المنصات.

***

## JavaScript SDK

توفر حزمة تطوير Didit لـ JavaScript طريقة برمجية لدمج التحقق مع تحكم كامل في تجربة المستخدم.

**الميزات الرئيسية:**

* إدارة الجلسات واستدعاءات الأحداث
* دعم React وVue وAngular وNextJS وNuxt وSvelte وJavaScript العادي
* دعم كامل لـ TypeScript
* وضعا النافذة المنبثقة والمضمّن

**البدء السريع:**

```javascript theme={null}
import { DiditSdk } from '@didit-protocol/sdk-web';

DiditSdk.shared.onComplete = (result) => {
  switch (result.type) {
    case 'completed':
      console.log('Verification completed!');
      console.log('Session ID:', result.session?.sessionId);
      console.log('Status:', result.session?.status);
      break;
    case 'cancelled':
      console.log('User cancelled verification');
      break;
    case 'failed':
      console.error('Verification failed:', result.error?.message);
      break;
  }
};

// Start verification with the `url` returned by POST /v3/session/ (or your UniLink)
DiditSdk.shared.startVerification({
  url: 'https://verify.didit.me/session/3FaJ9wLqX2Mz'
});
```

→ [**الوثائق الكاملة لحزمة JavaScript SDK**](https://docs.didit.me/ar/integration/web-sdks/javascript-sdk.md)

***

## InContext (Iframe)

ضمّن مسار التحقق مباشرة داخل تطبيقك باستخدام iframe. تجربة سلسة دون توجيه المستخدمين بعيداً عن موقعك.

**الميزات الرئيسية:**

* UniLink (لا يتطلب خادماً خلفياً) - الإعداد في أقل من دقيقة
* جلسة API (مع خادم خلفي) - تخصيص كامل
* تنفيذان بنمط النافذة المنبثقة والنمط المضمّن
* أمثلة لمكوّنات React

**البدء السريع:**

```html theme={null}
<iframe 
  src="https://verify.didit.me/u/YOUR_WORKFLOW_ID_BASE64"
  style="width: 100%; height: 700px; border: none;" 
  allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
></iframe>
```

→ [**الوثائق الكاملة لـ InContext**](https://docs.didit.me/ar/integration/web-sdks/incontext-iframe.md)

***

## Redirect

وجّه المستخدمين إلى صفحة التحقق المستضافة من Didit. بعد الإكمال، يعود المستخدمون إلى رابط الاستدعاء الخاص بك.

**الميزات الرئيسية:**

* أقصى درجات التوافق مع المتصفحات
* دعم التحقق بين الأجهزة
* تكامل بسيط
* يعمل عند وجود مشكلات في وصول iframe إلى الكاميرا

**البدء السريع:**

```javascript theme={null}
// After creating a session via your backend
window.location.href = verificationUrl;
```

→ [**الوثائق الكاملة لإعادة التوجيه**](https://docs.didit.me/ar/integration/web-sdks/web-redirect.md)

***

## المقارنة

| الميزة | JavaScript SDK | InContext (Iframe) | Redirect |
| - | - | - | - |
| مدة الإعداد | 3 دقائق | أقل من دقيقة | 5 دقائق |
| الخادم الخلفي مطلوب | اختياري | اختياري | نعم |
| يبقى على نطاقك | نعم | نعم | لا |
| دعم التحقق بين الأجهزة | نعم | نعم | نعم |
| تحكم برمجي كامل | نعم | محدود | الاستدعاء فقط |
| استدعاءات الأحداث | في الوقت الفعلي | `postMessage` | الاستدعاء فقط |
| العلامة البيضاء | نعم | نعم | نعم |
| توافق المتصفحات | جميعها | جميعها | جميعها |

> [!NOTE]
>
> تُسلّم الطرق الثلاث جميعها النتائج النهائية الموقّعة عبر [webhook](https://docs.didit.me/ar/integration/webhooks.md)؛ تصف المقارنة أعلاه تجربة المستخدم داخل المتصفح، ولا تصف طريقة استلام قرار التحقق.

***

## الإعدادات

### أذونات iframe المطلوبة

بالنسبة لتكاملات iframe من نوع InContext، أدرج هذه الأذونات دائماً:

```html theme={null}
allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"
```

***

## مستودعات الأمثلة

> [card] [أمثلة SDK للويب](https://github.com/didit-protocol/sdk-web-examples)
>
> أمثلة لـ React وVue وAngular وNext.js وNuxt وSvelte وJavaScript العادي

> [card] [مثال Iframe](https://github.com/didit-protocol/iframe-example)
>
> أمثلة iframe لـ UniLink وجلسة API

> [card] [عرض Next.js كامل](https://github.com/didit-protocol/didit-full-demo)
>
> تكامل Next.js من البداية إلى النهاية

> [card] [حزمة NPM](https://www.npmjs.com/package/@didit-protocol/sdk-web)
>
> `@didit-protocol/sdk-web` على npm

## ذات صلة

* [webhook](https://docs.didit.me/ar/integration/webhooks.md) — استقبل نتائج التحقق الموقّعة على خادمك الخلفي
* [Create Session API](https://docs.didit.me/ar/sessions-api/create-session.md) — نقطة النهاية التي تعتمد عليها كل حزم SDK للويب
* [حزم SDK الأصلية](https://docs.didit.me/ar/integration/native-sdks/overview.md) — iOS وAndroid وReact Native وFlutter


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.