يمكن لواجهة برمجة التطبيقات WebOTP API الآن تلقّي كلمات المرور لمرة واحدة (OTP) من داخل إطارات iframe.
تتيح WebOTP API للمواقع الإلكترونية إمكانية إنشاء الحصول على كلمة المرور التي تُستخدَم لمرة واحدة من رسالة SMS وإدخالها تلقائيًا في شكله للمستخدمين بنقرة واحدة فقط دون تبديل التطبيق. يتم تنسيق الرسالة القصيرة بشكل خاص وربطها بالمصدر، لذلك يتم التخفيف فرص سرقة كلمة المرور لمرة واحدة (OTP) للمواقع الإلكترونية التي تهدف إلى التصيّد الاحتيالي.
إحدى حالات الاستخدام التي لم يتم دعمها بعد في WebOTP هي استهداف مصدر. داخل iframe. يُستخدَم هذا عادةً لتأكيد الدفعة، خاصةً باستخدام نظام الأمان الثلاثي الأبعاد سيساعدك وجود القواسم المشتركة لإتاحة الوصول من نطاقات أخرى iframe، تعرضها واجهة برمجة التطبيقات WebOTP API الآن تكون كلمات المرور لمرة واحدة (OTP) المرتبطة بمصادر مدمَجة تبدأ من Chrome 91.
آلية عمل WebOTP API
واجهة برمجة التطبيقات WebOTP API نفسها بسيطة بما يكفي:
…
const otp = await navigator.credentials.get({
otp: { transport:['sms'] }
});
…
يجب تنسيق رسالة SMS باستخدام الملف المرتبط بالمصدر لمرة واحدة الرموز البرمجية.
Your OTP is: 123456.
@web-otp.glitch.me #12345
لاحظ أنه في السطر الأخير يحتوي على الأصل المراد ضمه قبله
علامة @ متبوعة بكلمة مرور لمرة واحدة مسبوقة بعبارة #.
عندما تصل الرسالة النصية، ينبثق شريط معلومات يطلب من المستخدم
إثبات ملكية رقم الهاتف. بعد أن ينقر المستخدم على الزر "Verify"، يتم
إعادة توجيه كلمة المرور لمرة واحدة (OTP) تلقائيًا إلى الموقع ومعالجة
navigator.credentials.get() يمكن للموقع الإلكتروني بعد ذلك استخراج كلمة المرور لمرة واحدة وإكمال
عملية التحقق.
تعرَّف على أساسيات استخدام WebOTP على إثبات ملكية أرقام الهواتف على الويب باستخدام WebOTP API.
حالات استخدام إطارات iframe مشتركة المصدر
يُعد إدخال كلمة مرور لمرة واحدة في نموذج ضمن إطار iframe متعدد المصادر أمرًا شائعًا في الدفع والسيناريوهات. تتطلب بعض جهات إصدار بطاقات الائتمان خطوة تحقُّق إضافية التحقق من صحة الجهة المسدِّدة وهذا ما يسمى بـ 3D Secure ويتم إنشاء عادةً ما يتم عرضها ضمن إطار iframe على نفس الصفحة كما لو كانت جزءًا من عملية الدفع
على سبيل المثال:
- يزور أحد المستخدمين
shop.exampleلشراء زوج من الأحذية باستخدام بطاقة ائتمان. - بعد إدخال رقم بطاقة الائتمان، يعرض مقدم خدمات الدفع المدمج
نموذج من
bank.exampleضمن إطار iframe يطلب من المستخدم إثبات ملكيته أو رقم الهاتف للدفع السريع. - يرسل
bank.exampleإلى المستخدم رسالة قصيرة تحتوي على كلمة المرور لمرة واحدة حتى يتمكن من إدخاله للتحقق من هويته.
كيفية استخدام واجهة برمجة التطبيقات WebOTP API من إطار iframe متعدد المصادر
لاستخدام واجهة برمجة التطبيقات WebOTP API من داخل إطار iframe متعدد المصادر، عليك تنفيذ الأشياء:
- إضافة تعليقات توضيحية إلى كل من أصل الإطار العلوي وأصل إطار iframe في نص الرسالة القصيرة SMS .
- يمكنك إعداد سياسة الأذونات للسماح لإطار iframe متعدد المصادر بتلقّي كلمة المرور لمرة واحدة. من المستخدم مباشرةً.
يمكنك تجربة العرض التوضيحي بنفسك في https://web-otp-iframe-demo.stackblitz.io.
إضافة تعليقات توضيحية إلى المصادر المرتبطة بالرسالة النصية القصيرة SMS
عند استدعاء واجهة برمجة التطبيقات WebOTP API من داخل إطار iframe، يجب أن تتضمن الرسالة النصية القصيرة SMS
تضمين مصدر الإطار العلوي مسبوقًا بـ @ متبوعًا بكلمة مرور لمرة واحدة مسبوقة #
متبوعًا بأصل إطار iframe مسبوقة بـ @.
@shop.example #123456 @bank.exmple
إعداد سياسة الأذونات
لاستخدام WebOTP في إطار iframe متعدد المصادر، يجب أن تمنح أداة التضمين إذن الوصول إلى هذا واجهة برمجة التطبيقات من خلال سياسة أذونات بيانات اعتماد otp لتجنُّب الزيارات غير المقصودة السلوك. بشكل عام، هناك طريقتان لتحقيق هذا الهدف:
- عبر عنوان HTTP:
Permissions-Policy: otp-credentials=(self "https://bank.example")
- عبر سمة
allowفي إطار iframe:
<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>
الاطّلاع على مزيد من الأمثلة حول كيفية تحديد سياسة أذونات .
المحاذير
مستويات التداخل
في الوقت الحالي، لا يدعم Chrome سوى طلبات البيانات من واجهة برمجة التطبيقات WebOTP API من إطارات iframe من مصادر متعددة. التي ليس لها أكثر من أصل فريد في سلسلة الكيانات الأصلية. في جلسة المعمل، السيناريوهات التالية:
- a.com -> b.com
- a.com -> b.com -> b.com
- a.com -> a.com -> b.com
- a.com -> b.com -> c.com
استخدام كلمة المرور لمرة واحدة (OTP) في b.com متاحة ولكن لا يمكن استخدامها في c.com.
يُرجى العلم أنّ السيناريو التالي غير متاح أيضًا بسبب نقص الطلب. وتعقيدات تجربة المستخدم.
- a.com -> b.com -> a.com (استدعاء واجهة برمجة التطبيقات WebOTP API)
إمكانية التشغيل التفاعلي
على الرغم من أنّ محرّكات المتصفحات الأخرى غير Chromium لا تستخدم واجهة برمجة التطبيقات WebOTP API،
يستخدم Safari تنسيق الرسائل القصيرة SMS نفسه.
مع دعم input[autocomplete="one-time-code"]. في Safari، وبمجرد
عند إرسال رسالة قصيرة تحتوي على تنسيق رمز يُستخدم لمرة واحدة ومرتبط بالمصدر، يتم إرسالها
تقترح لوحة المفاتيح إدخال كلمة المرور لمرة واحدة في حقل الإدخال.
اعتبارًا من نيسان (أبريل) 2021، سيدعم متصفّح Safari إطار iframe بالتنسيق الفريد للرسائل القصيرة باستخدام
%
ومع ذلك، وكما انتهت مناقشة المواصفات مع @ بدلاً من ذلك، نأمل أن
ستتقارب عملية تنفيذ تنسيق الرسائل القصيرة SMS المتوافق.
ملاحظات
نستفيد كثيرًا من ملاحظاتك في تحسين واجهة برمجة التطبيقات WebOTP API، لذا ندعوك لتجربتها. ويُرجى إعلامنا. رأيك.
الموارد
- إثبات ملكية أرقام الهواتف على الويب باستخدام كلمة المرور لمرة واحدة (OTP) على الويب واجهة برمجة التطبيقات
- أفضل الممارسات المتعلّقة بنموذج كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة
- واجهة برمجة التطبيقات WebOTP API
- يتم تسليم الرموز لمرة واحدة والمرتبطة بنقطة الشحن عبر الرسائل القصيرة
صورة من موقع rupixen.com على Unspark