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

تُغطي هذه الأدلة التحقق من الهوية. لتسجيل دخول المستخدمين النهائيين، استخدم أدلة منصة المصادقة؛ حزم المصادقة الجديدة تعتمد على الإصدار.

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

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

طرق التكامل

الطريقة	مدة الإعداد	الخادم الخلفي؟	الأفضل لـ
JavaScript SDK	3 دقائق	اختياري	تحكم كامل — React/Vue/Angular/Next.js/Nuxt/Svelte/JavaScript العادي
InContext (Iframe)	أقل من دقيقة	اختياري	تجربة مضمّنة دون إعادة توجيه
Redirect	5 دقائق	نعم	أقصى درجات التوافق، وتدفقات التحقق عبر الأجهزة
WebView (iOS/Android)	15 دقيقة	نعم	بديل على الأجهزة المحمولة عند عدم توفر حزمة SDK أصلية
WordPress + WooCommerce	5 دقائق	بدون كود	مواقع WordPress ومتاجر WooCommerce
Shopify	5 دقائق	بدون كود	متاجر Shopify، للتحقق عند الدفع أو من الحساب
Salesforce	10 دقائق	بدون كود	إدارة علاقات العملاء في Salesforce، للتحقق من سجلات جهات الاتصال والعملاء المحتملين

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

JavaScript SDK

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

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

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

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

InContext (Iframe)

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

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

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

<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

Redirect

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

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

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

// After creating a session via your backend
window.location.href = verificationUrl;

→ الوثائق الكاملة لإعادة التوجيه

المقارنة

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

تُسلّم الطرق الثلاث جميعها النتائج النهائية الموقّعة عبر webhook؛ تصف المقارنة أعلاه تجربة المستخدم داخل المتصفح، ولا تصف طريقة استلام قرار التحقق.

الإعدادات

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

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

allow="camera; microphone; geolocation; clipboard-write; fullscreen; autoplay; encrypted-media; digital-credentials-get"

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

أمثلة SDK للويب

أمثلة لـ React وVue وAngular وNext.js وNuxt وSvelte وJavaScript العادي

مثال Iframe

أمثلة iframe لـ UniLink وجلسة API

عرض Next.js كامل

تكامل Next.js من البداية إلى النهاية

حزمة NPM

@didit-protocol/sdk-web على npm

الأدلة

المصادقة

Model Context Protocol (MCP)

SDKs الويب

SDKs الأصلية

SDKs الخادم

التكاملات

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

طرق التكامل

JavaScript SDK

InContext (Iframe)

Redirect

المقارنة

الإعدادات

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

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

أمثلة SDK للويب

مثال Iframe

عرض Next.js كامل

حزمة NPM

ذات صلة

​طرق التكامل

​JavaScript SDK

​InContext (Iframe)

​Redirect

​المقارنة

​الإعدادات

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

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

أمثلة SDK للويب

مثال Iframe

عرض Next.js كامل

حزمة NPM

​ذات صلة

طرق التكامل

JavaScript SDK

InContext (Iframe)

Redirect

المقارنة

الإعدادات

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

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

ذات صلة