تخصيص واجهة المستخدم بسلاسة: Didit وSDK جافاسكريبت وTailwind CSS (AR)

تناسق العلامة التجارية هو المفتاحإن الحفاظ على تجربة علامة تجارية موحدة عبر جميع نقاط الاتصال، بما في ذلك التحقق من الهوية، يبني ثقة المستخدم وولائه. خيارات التكامل المرنة من Didit تجعل هذا ممكنًا.

JavaScript SDK للتحكميوفر JavaScript SDK الخاص بـ Didit تحكمًا برمجيًا كاملاً في تدفق التحقق، مما يتيح تخصيصًا عميقًا وتكاملًا سلسًا في أطر عمل الويب الحديثة مثل React وVue وAngular.

Tailwind CSS للتصميم السريعاستفد من نهج "الأداة أولاً" (utility-first) في Tailwind CSS لتصميم مكونات واجهة المستخدم الخاصة بـ Didit بسرعة وكفاءة، مما يضمن تطابقًا مثاليًا مع نظام التصميم الحالي الخاص بك دون تجاوزات معقدة.

حل Didit ذو العلامة البيضاءبالإضافة إلى التصميم المباشر، يوفر Didit إمكانيات شاملة للعلامة البيضاء ضمن Business Console الخاص به، مما يتيح تخصيصًا واسعًا للعلامة التجارية، بما في ذلك النطاقات المخصصة والألوان والشعارات، ليتم تطبيقها بسهولة على سير عملك.

أهمية تجربة المستخدم السلسة في التحقق من الهوية

في المشهد الرقمي اليوم، تُعد تجربة المستخدم (UX) ذات أهمية قصوى. عندما يتفاعل المستخدمون مع تطبيقك، تساهم كل نقطة اتصال في تصورهم العام لعلامتك التجارية. وهذا يشمل العمليات الحاسمة مثل التحقق من الهوية. يمكن أن يؤدي تدفق التحقق غير المتناسق وغير المتوافق مع العلامة التجارية إلى تعطيل رحلة المستخدم، ويؤدي إلى التخلي عن التطبيق، ويقوض الثقة. وعلى العكس من ذلك، فإن عملية التحقق المدمجة بسلاسة والمُصممة بشكل جميل تعزز الاحترافية وتؤكد ثقة المستخدم.

تقدم العديد من حلول التحقق من الهوية واجهات مستخدم عامة وموحدة تتعارض مع إرشادات العلامة التجارية المصممة بعناية للشركة. وهذا يجبر الشركات على الاختيار بين الأمان القوي وتجربة المستخدم المتسقة. يدرك Didit هذا التحدي ويوفر أدوات قوية، مثل JavaScript SDK وخيارات العلامة البيضاء الشاملة، لضمان عدم اضطرارك لتقديم تنازلات. من خلال السماح بالتخصيص العميق، يضمن Didit أن تبدو عملية التحقق من الهوية جزءًا لا يتجزأ من تطبيقك، وليس انقطاعًا خارجيًا مزعجًا.

دمج JavaScript SDK من Didit لتحقيق أقصى قدر من المرونة

تم تصميم JavaScript SDK من Didit للمطورين الذين يسعون للتحكم والمرونة القصوى. إنها طريقة التكامل الموصى بها لتطبيقات الإنتاج نظرًا لميزاتها الشاملة، بما في ذلك إدارة الجلسات، واستدعاءات الأحداث، ودعم الأطر الشائعة مثل React وVue وAngular وNextJS وNuxt وSvelte، بالإضافة إلى JavaScript النقي. على عكس تضمينات iframe أو عمليات إعادة التوجيه الأكثر بساطة، يتيح لك JavaScript SDK إدارة تدفق التحقق ومعالجة الأحداث برمجيًا مباشرة داخل تطبيقك.

التكامل الأساسي مباشر:

import DiditSdk from '@didit-protocol/sdk-web';

DiditSdk.init({
  session_token: 'YOUR_BACKEND_GENERATED_TOKEN',
  onSuccess: (session) => {
    console.log('Verification completed:', session.sessionId, session.status);
    // Handle successful verification, e.g., redirect user, update UI
  },
  onError: (error) => {
    console.error('SDK error:', error.code, error.message);
    // Handle errors appropriately
  },
  onCancel: () => {
    console.log('User cancelled verification');
    // Handle user cancellation
  }
});

يتيح لك هذا SDK التحكم فيما إذا كان التحقق يظهر كنافذة منبثقة (modal) أو مضمنًا (inline)، مما يمنحك تحكمًا دقيقًا في تفاعل المستخدم. من خلال الاستفادة من هذا SDK، تكتسب القدرة على تضمين مكونات Didit ضمن هيكل تطبيقك الخاص، مما يجعلها قابلة للتصميم المخصص.

تنسيق مكونات Didit باستخدام Tailwind CSS

أصبح Tailwind CSS مفضلاً بين المطورين لنهجه "الأداة أولاً"، مما يتيح تطوير واجهة مستخدم سريعًا وتصميمات متسقة للغاية. عند دمج JavaScript SDK من Didit، يمكنك تطبيق أنماط Tailwind CSS الخاصة بك على العناصر الحاوية التي تستضيف واجهة مستخدم Didit، مما يضمن مظهرًا وشعورًا متماسكين. بينما تم تصميم مكونات Didit الأساسية لتكون قوية وعملية، يمكن أن يتأثر عرضها ببنية DOM المحيطة والأنماط العامة لتطبيقك.

على سبيل المثال، إذا قام SDK من Didit بعرض نافذة منبثقة أو مكون مضمن داخل "div" معين، يمكنك تطبيق فئات Tailwind على هذا "div" للتحكم في حجمه وتباعده، وحتى بعض جوانب مظهره. لتخصيص أعمق للعناصر الداخلية لتدفق التحقق الفعلي (مثل الأزرار وحقول الإدخال والنصوص)، يقدم Didit إمكانيات واسعة للعلامة البيضاء من خلال Business Console الخاص به، وهو غالبًا نهج أكثر فعالية وقابلية للصيانة من محاولة تجاوز الأنماط مباشرة.

ومع ذلك، بالنسبة للعناصر التغليفية أو واجهة المستخدم المخصصة التي تبنيها حول Didit SDK، فإن Tailwind CSS مثالي. تخيل أنك تريد عرض تدفق التحقق داخل مكون بطاقة معين لتطبيقك:

<div class="flex justify-center items-center h-screen bg-gray-100">
  <div class="bg-white p-8 rounded-lg shadow-xl w-full max-w-md">
    <h2 class="text-2xl font-bold mb-6 text-center">Verify Your Identity</h2>
    <!-- Didit SDK will render its UI here -->
    <div id="didit-verification-container"></div>
  </div>
</div>

في هذا المثال، يتم التعامل مع جميع الأنماط الخارجية (الخلفية، مظهر البطاقة، أنماط النص) بواسطة Tailwind. سيتم بعد ذلك تهيئة Didit SDK للعرض داخل #didit-verification-container، مع وراثة بعض الأنماط السياقية وضمان توافقه بصريًا مع التطبيق المحيط. بالنسبة للعناصر داخل تدفق Didit، توفر ميزات العلامة البيضاء من Didit التخصيص النهائي.

حل العلامة البيضاء الشامل من Didit

بينما يمكن للتعديل المباشر لـ CSS التعامل مع بعض الجوانب، فإن الطريقة الأساسية والأكثر قوة لـ Didit لتخصيص واجهة المستخدم هي ميزة العلامة البيضاء المدمجة، والتي يمكن الوصول إليها عبر Didit Business Console. يتجاوز هذا بكثير ما يمكن تحقيقه بتجاوزات CSS البسيطة، ويوفر حلاً قويًا لتجربة ذات علامة تجارية حقيقية. باستخدام إمكانيات العلامة البيضاء من Didit، يمكنك:

• تخصيص الألوان: التحكم في الأزرار والنصوص واللوحات والخلفيات لتتناسب مع لوحة ألوان علامتك التجارية.
• تعيين الخطوط: تطبيق خطوط علامتك التجارية للحصول على مظهر متناسق.
• تحميل الشعارات: دمج شعاراتك المربعة والمستطيلة مباشرة في تدفق التحقق.
• تعديل التخطيط: ضبط نصف قطر الحدود للوحات والأزرار.
• تكوين شاشة تسجيل الدخول: تحديد ما إذا كنت تريد عرض شاشة تسجيل الدخول الأولية أو تخطيها.
• استخدام نطاقات مخصصة: استضافة تدفق التحقق على نطاقك الخاص (مثل verify.yourcompany.com) بدلاً من verify.didit.me، مما يضمن رحلة مستخدم سلسة تمامًا دون أي علامة تجارية خارجية.

يتم تطبيق هذا المستوى من التخصيص مباشرة ضمن سير عمل Didit الخاص بك، مما يعني أنه بمجرد التكوين في Business Console، ستعكس جميع جلسات التحقق التي يتم بدؤها من خلال سير العمل هذا علامتك التجارية تلقائيًا. هذا فعال بشكل خاص لمنتجات Didit مثل التحقق من الهوية والكشف عن الحيوية السلبية والنشطة وتقدير العمر، مما يضمن توافق كل خطوة في تفاعل المستخدم مع هذه الميزات بشكل مثالي مع علامتك التجارية.

كيف يساعد Didit

يبرز Didit كمنصة هوية تعتمد على الذكاء الاصطناعي وموجهة للمطورين، تمكن الشركات من تخصيص تجربة التحقق من الهوية بشكل كامل. من خلال بنيتنا المعيارية، تحصل على فحوصات هوية قابلة للتشغيل الفوري تندمج بسلاسة في أنظمتك الحالية. يوفر JavaScript SDK الخاص بنا التحكم البرمجي اللازم للتكامل العميق مع أطر عمل الويب الحديثة، بينما تتيح ميزات العلامة البيضاء الشاملة في Business Console تخصيصًا واسعًا للعلامة التجارية – من الألوان والخطوط إلى النطاقات المخصصة. وهذا يضمن تجربة مستخدم متسقة وجديرة بالثقة عبر جميع منتجات Didit، بما في ذلك التحقق القوي من الهوية (OCR، MRZ، الباركود)، والكشف عن الحيوية السلبية والنشطة لمنع الاحتيال، وتقدير العمر الذي يحافظ على الخصوصية. يقدم Didit خدمة KYC الأساسية المجانية ونموذج الدفع لكل عملية تحقق ناجحة بدون رسوم إعداد، مما يجعل التحقق المتقدم من الهوية متاحًا وفعالًا.

هل أنت مستعد للبدء؟

هل أنت مستعد لرؤية Didit في العمل؟ احصل على عرض توضيحي مجاني اليوم.

ابدأ في التحقق من الهويات مجانًا باستخدام الخطة المجانية من Didit.