إضافة التحقق من الهوية إلى تطبيق React Native أو Flutter

يتطلب دمج التحقق من الهوية في تطبيق React Native أو Flutter بضعة أسطر من التعليمات البرمجية وقدرًا لا بأس به من الإعدادات الأصلية. Toden تقوم حزم تطوير البرامج (SDKs) بمعالجة العملية بأكملها (الموافقة، واختيار الهوية، والتقاط المستندات، والتقاط صورة شخصية، والتحقق من وجود المستخدم) وإرسالها نيابةً عنك. ما تملكه أنت هو إعدادات التطبيق، وإذن استخدام الكاميرا، والمفتاح الذي تُرسله، وما يفعله تطبيقك بعد أن يضغط المستخدم على زر الإرسال.

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

ما الذي تضيفه فعلياً إلى التطبيق؟

يعمل كلا نظامي تطوير البرامج (SDKs) بتقنية التحقق من الحضور المباشر على الجهاز نفسه : Apple Vision على نظام iOS وGoogle ML Kit على نظام Android. وهذا هو السبب الرئيسي لمعظم الإعدادات. يُقصد بالتحقق من الحضور هنا تقنية ذكاء الحضور (صورة سيلفي مباشرة بالإضافة إلى تحديات إيماءات عشوائية، أو تسلسل ألوان وميض الشاشة، أو كليهما)، وتعمل هذه التقنية على إطارات الكاميرا باستخدام التعليمات البرمجية الأصلية بدلاً من عرضها في صفحة ويب.

يتمتع كلا مجموعتي تطوير البرامج (SDKs) بنفس الميزات الموجودة في الويب SDK بالنسبة للتدفق الأساسي، وتضمين سير العمل، وإضافات الالتقاط (للتواصل) OTP إثبات العنوان، استبيان)، التحقق من النشاط التجاري، وأي وثائق دولية أخرى. وتضيف هذه الوثائق ميزة لا يمكن للإنترنت توفيرها: قراءة الشريحة الموجودة في جوازات السفر الإلكترونية وبطاقات الهوية المزودة بشريحة. NFC .

ما هي متطلبات هذه التصاميم؟

الحد الأدنى، من React Native (يفتح في علامة تبويب جديدة) و Flutter (يفتح في علامة تبويب جديدة) SDK الصفحات:

إنّ خط React Native هو الذي يوقع الفرق في الخطأ. SDK يستخدم معالج إطارات VisionCamera v5 (Nitro)، وهو عبارة عن كود أصلي، لذا لا يمكن تشغيله داخل Expo Go. لذا، خطط لإنشاء عميل تطوير مخصص منذ اليوم الأول للتكامل، وليس قبل يوم من الإصدار.

كيف يتم تثبيته؟

لتثبيت تطبيق Expo على React Native، قم بتثبيت SDK وأقرانها، أضف المكون الإضافي للتكوين، وقم ببناء عميل تطوير:

npx expo install @myazahq/kyc-sdk-react-native \
  react-native-vision-camera react-native-vision-camera-worklets \
  react-native-worklets react-native-nitro-modules react-native-nitro-image \
  react-native-safe-area-context react-native-svg

// app.json
{
  "expo": {
    "plugins": ["@myazahq/kyc-sdk-react-native"]
  }
}

npx expo prebuild
npx expo run:ios       # or: npx expo run:android

لا تقم بإضافة VisionCamera نفسها إلىpluginsلا يتضمن الإصدار 5 أي إضافة إعدادات، وإدراجها يجعلexpo prebuildفشل. Toden تضيف الإضافة سلسلة استخدام كاميرا نظام iOS ونظام AndroidCAMERAوINTERNETأذونات لك. تضيف تطبيقات React Native الأساسية وقت تشغيل وحدة Expo معnpx install-expo-modules@latestوإعلان التصاريح باليد؛ SDK تحتوي الصفحة على الأوامر الدقيقة.

بالنسبة لـ Flutter، أضف التبعية وقم بتشغيلهاflutter pub get:

dependencies:
  myaza_kyc_sdk_flutter: ^2.2.0

ثم قم بإعلان إذن استخدام الكاميرا بنفسك:NSCameraUsageDescriptionفيios/Runner/Info.plist، وCAMERAزائدINTERNETفيAndroidManifest.xml.

ما هي الصلاحيات التي سيراها المستخدمون؟

الكاميرا، دائمًا. الموقع، فقط إذا كانت عملية سير العمل تستخدم خطوة تحليل العناوين. يُضيف مُلحق تكوين React Native سلاسل الموقع افتراضيًا (مرر).{ "location": false }لإلغاء الاشتراك)؛ في Flutter وReact Native الأساسي، يمكنك إضافتها بنفسك. على نظام iOS، يتعطل التطبيق عند طلب الموقع إذاNSLocationWhenInUseUsageDescriptionإذا كان مفقودًا، فأضفه كلما أمكن ذلك في خطوة العنوان. الميكروفون، لا تستخدمه أبدًا: التوجيه الصوتي هو إخراج نص إلى كلام و SDK لا يسجل الصوت. هذه النقطة الأخيرة جديرة بالملاحظة في إجاباتك على أسئلة الخصوصية في متجر التطبيقات.

ما هي وحدات React Native الاختيارية المهمة؟

أربعةexpo-*الوحدات النمطية هي وحدات اختيارية، وتضيف كل وحدة منها ميزةً إلى النظام. الميزة التي تغفل عنها معظم الفرق هيexpo-document-pickerبدون ذلك، فإن خطوات إثبات العنوان ومستندات العمل تقبل صورة ملتقطة بالكاميرا فقط، لذا PDF لا يمكن تقديم كشف الحساب البنكي على الإطلاق.expo-deviceيعمل على تحسين بصمة الجهاز المستخدمة بواسطة ذكاء الجهاز،expo-applicationيسجل إصدار تطبيقك عند إرساله، وexpo-localizationيعطي SDK منطقة الجهاز.

كيف ينبغي عليك تركيب التدفق؟

قم بتثبيت سير عمل منشور باستخدام معرّفه. يتضمن سير العمل البلد، وأنواع المعرّفات، وخطوات الالتقاط، والعلامة التجارية، والنص، ويمكنه أيضًا تضمين قواعد اتخاذ القرار من جانب الخادم. React Native:

import { MyazaKYC } from "@myazahq/kyc-sdk-react-native";

export default function VerifyScreen() {
  return (
    <MyazaKYC
      apiKey="pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
      workflowId="wf_AbC123dEf456"
      userId="user_42"
      userData={{ firstName: "Jane", lastName: "Doe" }}
      metadata={{ requestId: "order_1001" }}
      onSubmit={(submission) => console.log("submitted", submission.verificationId)}
      onError={(err) => console.error(err.code, err.message)}
      onClose={() => console.log("closed")}
    >
      Verify Identity
    </MyazaKYC>
  );
}

يفتح تطبيق Flutter نفس مسار عمل نافذة منبثقة. لاحظ أنcontextهو مُعامل مُسمى، وتوجد دوال الاستدعاء بجانبه.config، وليس داخله:

MyazaKYC.show(
  context: context,
  config: const MyazaKYCConfig(
    apiKey: 'pk_test_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    workflowId: 'wf_AbC123dEf456',
    userId: 'user_42',
    userData: UserData(firstName: 'Jane', lastName: 'Doe'),
    metadata: {'requestId': 'order_1001'},
  ),
  onSubmit: (submission) => debugPrint('Submitted: ${submission.verificationId}'),
  onError: (error) => debugPrint('Error: ${error.code}: ${error.message}'),
  onClose: () => debugPrint('KYC closed'),
);

ثلاثة تفاصيل في تلك المقتطفات مقصودة.

المفتاح قابل للنشر. فقط...pk_المفتاح موجود في التطبيق. يستمد فلاتر البيئة من بادئته (pk_test_هو Sandbox،pk_live_(في بيئة الإنتاج)، لذا يُعدّ الانتقال إلى بيئة الإنتاج تغييرًا جوهريًا. يمكن للمفتاح القابل للنشر بدء عملية التحقق، لكن لا يمكنه قراءة نتيجتها.

userId،userDataوmetadataالتزم بالبرمجة. سير العمل عبارة عن قالب مشترك بين جميع الزوار، لذا لا يمكنه حمل قيم خاصة بكل مستخدم.userDataيستحق الأمر التجاوز: إنه الاسم الذي تعتقد أن المستخدم لديه، مقارنةً بالاسم المقروء من مستنده لإنتاجdataMatchاتركه جانباً وdataMatchيعودnull.

metadata.requestIdيجب أن يكون هذا المفتاح من سجلّك الخاص. فهو مفتاح التكرار لعملية الإرسال، لذا استخرجه من سجلّ الإعداد الذي ينتمي إليه بدلاً من إنشاء مفتاح جديد في كل مرة يتم فيها تحميل الشاشة.

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

ماذا يحدث بعد أن يقدم المتقدم طلبه؟

onSubmitيتم إطلاق هذا الإشعار عندما يقبل الخادم عملية التحقق. وهو ليس النتيجة. تُجرى عمليات التحقق بشكل غير متزامن، وتصل النتيجة إلى خادمك الخلفي عبر رابط ويب، أو عن طريق استدعاء مفتاح سري إلىGET /api/kyc/verifications/:id.onErrorيتم إطلاق النار فقط بسبب الأخطاء التقنية (الشبكة، المصادقة، الرصيد، التحميل)، وليس بسبب رفض التحقق.

إذن، النمط على الهاتف المحمول هو: علىonSubmitأرسلverificationIdأرسل طلبًا إلى خادمك، واعرض شاشة "نتحقق من بياناتك"، ودع خادمك يُخبر التطبيق بما يجب عرضه تاليًا عند وصول طلب الويب هوك. لا تسترجع النتيجة كاملةً من التطبيق، فهذا يتطلب مفتاحًا سريًا، والمفتاح السري في ملف التطبيق هو مفتاح سري يملكه شخص آخر.

متى NFC هل قراءة الشريحة منطقية؟

عندما يحمل المتقدمون جوازات سفر إلكترونية أو بطاقات هوية مزودة بشريحة، وترغب في الحصول على أعلى مستوى من الأمان، تقوم حزم تطوير البرامج (SDKs) الخاصة بالهواتف المحمولة بقراءة الشريحة عبر قناتها الآمنة، ويقوم الخادم بتشغيل المصادقة السلبية: حيث يعيد فحص تجزئة كل مجموعة بيانات مقابل كائن الأمان الموقع على الشريحة، ويتحقق من أن المُوقِّع مرتبط بشهادة جهة إصدار موثوقة. CSCA الشريحة التي يثبت أنها تعرضت للتلاعب تفشل في عملية التحقق.chip_not_authentic.

أربعة قيود يجب مراعاتها في التصميم، من NFC وثائق الشريحة (يفتح في علامة تبويب جديدة) :

• التغطية مشروطة بالشهادات. تُقدم خدمة الشريحة فقط للدول المدرجة في Toden قائمة الشهادات الخاصة بها، والتي تغطي 138 دولة بما في ذلك نيجيريا وغانا وكينيا ومصر وإثيوبيا والسنغال.GET /configتقريرsupportsNfcلكل نوع هوية لحسابك.

• بعض الشرائح الإلكترونية غير قابلة للقراءة من قبل أي شخص. تستخدم بطاقة الهوية الذكية في جنوب إفريقيا، وبطاقة الهوية الإماراتية، وبطاقة MyKad الماليزية تطبيقات شرائح خاصة. ومع ذلك، لا تزال هذه الوثائق تخضع للتحقق من خلال فحص المستندات.

• هواتف بدون NFC يمكن تخطي هذه الخطوة ، ولن يؤدي تخطيها إلى فشل عملية التحقق. في حال فقدان الشريحة أو عدم إمكانية قراءتها، يتم اللجوء إلى فحص المستندات والسجلات الحكومية.

• يتم تنفيذ خطوة الشريحة بعد مسح المستند ، لأن المفتاح الذي يفتح القناة الآمنة للشريحة مشتق من المنطقة القابلة للقراءة آلياً في المستند.

تُعدّ إعدادات سير العمل في أداة الإنشاء هي تحديد بطاقات الهوية التي تدعم الشريحة وتوفر هذه الخطوة، وما إذا كان بإمكان المستخدمين تخطيها. NFC لوحة.

كيف تحافظ على حجم التطبيق معقولاً؟

في نظام أندرويد، تستخدم تقنية التعرف على الوجوه والتعرف على النصوص مجموعة أدوات التعلم الآلي من جوجل، و SDK يعتمد ذلك على إصدارات خدمات جوجل بلاي التي تُنزّل نماذجها عند الاستخدام الأول بدلاً من تضمينها. يُضيف تضمينها حجم تنزيل كبير لكل جهاز، ولهذا السبب تُعدّ الإصدارات المُنزّلة هي الافتراضية. لكن في المقابل، لا تعمل إصدارات خدمات جوجل بلاي على الأجهزة التي لا تحتوي على خدمات جوجل بلاي، مثل أجهزة هواوي. إذا كنت تُوزّع منتجاتك على هذه الأجهزة، فقم بتعيينext { myazaKycBundledMlKit = true }في جذركbuild.gradleبدلاً من ذلك، يتم تجميع النماذج.

شحن حزمة تطبيقات أندرويد بدلاً من حزمة تطبيقات عالمية APK كما أن تفعيل R8 مع خاصية تقليص الموارد يقلل حجم التنزيل بشكل أكبر. SDK تُصدر الشركة قواعدها الخاصة بالمستهلكين لـ R8.

قائمة التحقق قبل الإصدار

• React Native: عميل تطوير أو إصدار أساسي في التكامل المستمر، وليس Expo Go أبدًا؛ تم تمكين البنية الجديدة.

• تم تحديد إذن استخدام الكاميرا؛ وتم تحديد سلسلة الموقع إذا كان أي سير عمل يجمع عنوانًا؛ ولم يتم تحديد إذن استخدام الميكروفون.

• expo-document-pickerيتم تثبيته إذا كان أي سير عمل يجمع المستندات كملفات.

• سير عمل منشور مثبت بواسطة المعرف؛userId،userDataومستقرmetadata.requestIdتم تمريرها من الكود.

• أpk_test_عنصر أساسي في عمليات التطوير وpk_live_المفتاح موجود في إصدارات الإنتاج، وليس مفتاحًا سريًا أبدًا.

• onSubmitيسلمverificationIdإلى الواجهة الخلفية الخاصة بك؛ تأتي النتائج من روابط الويب.

• NFC تم التحقق من التغطيةsupportsNfcبالنسبة للدول التي تخدمها.

اختبر المسار بالكامل في بيئة الاختبار أولاً باستخدام معرّفات الاختبار المنشورة، ثم بدّل المفتاح. يربط مركز المطورين كلا المسارين.SDK أدلة.