يمكن لواجهة WebOTP API الآن تلقّي كلمات المرور لمرة واحدة (OTP) من داخل إطارات iframe.
تتيح WebOTP API للمواقع الإلكترونية إمكانية الحصول آليًا على كلمة المرور التي تُستخدَم لمرة واحدة من خلال رسالة SMS وإدخالها تلقائيًا في نموذج للمستخدمين بنقرة واحدة فقط بدون تبديل التطبيق. ويتم تنسيق الرسائل القصيرة بشكلٍ خاص وربطها بالمصدر، لذلك يحدّ ذلك من احتمالات سرقة كلمة المرور هذه لمرة واحدة على المواقع الإلكترونية للتصيّد الاحتيالي أيضًا.
كانت إحدى حالات الاستخدام التي لم تتوفر بعد في WebOTP تستهدِف مصدرًا داخل إطار iframe. يُستخدم هذا عادةً لتأكيد الدفع، خاصةً مع نظام 3D Secure. بفضل التنسيق الشائع لدعم إطارات iframe متعددة المصادر، أصبحت واجهة برمجة تطبيقات WebOTP API توفّر الآن كلمات مرور لمرة واحدة مرتبطة بالمصادر المتداخلة التي تبدأ في 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
لاحظ في السطر الأخير أنه يحتوي على المصدر الذي يجب ربطه مسبوقًا بعلامة @ متبوعة بكلمة OTP المسبوقة بالرمز #.
عندما تصل الرسالة النصية، ينبثق شريط معلومات ويطلب من المستخدم إثبات ملكية رقم هاتفه. بعد أن ينقر المستخدم على الزر "Verify"، سيعيد المتصفِّح تلقائيًا توجيه كلمة المرور لمرة واحدة (OTP) إلى الموقع الإلكتروني ويحلّ مشكلة
navigator.credentials.get(). يمكن للموقع بعد ذلك استخراج كلمة المرور لمرة واحدة
وإكمال عملية التحقق.
تعرَّف على أساسيات استخدام WebOTP من خلال التحقّق من أرقام الهواتف على الويب باستخدام WebOTP API.
حالات استخدام إطارات iframe متعددة المصادر
يُعد إدخال كلمة مرور صالحة لمرة واحدة (OTP) في نموذج داخل إطار iframe متعدد المصادر أمرًا شائعًا في سيناريوهات الدفع. تتطلب بعض جهات إصدار بطاقات الائتمان خطوة تحقق إضافية للتحقق من مصداقية الدافع. وهذا ما يسمى 3D Secure، ويتم عرض النموذج عادةً ضمن إطار iframe على الصفحة نفسها كما لو كان جزءًا من عملية الدفع.
مثال:
- يزور أحد المستخدمين
shop.exampleلشراء زوج من الأحذية باستخدام بطاقة ائتمان. - بعد إدخال رقم بطاقة الائتمان، يعرض مقدّم خدمات الدفع المتكامل نموذجًا من
bank.exampleضمن إطار iframe يطلب من المستخدم إثبات ملكية رقم هاتفه لإتمام الدفع بسرعة. - يرسل "
bank.example" رسالة قصيرة تحتوي على كلمة المرور لمرة واحدة (OTP) إلى المستخدم حتى يتمكّن من إدخالها لإثبات هويته.
كيفية استخدام WebOTP API من إطار iframe متعدد المصادر
لاستخدام WebOTP API من داخل إطار iframe متعدد المصادر، عليك تنفيذ شيئين:
- أضِف تعليقات توضيحية على كل من أصل الإطار العلوي وأصل iframe في الرسالة النصية القصيرة (SMS).
- يمكنك ضبط سياسة الأذونات للسماح لإطار iframe متعدد المصادر بتلقّي كلمة المرور لمرة واحدة (OTP) من المستخدم مباشرةً.
يمكنك تجربة العرض التوضيحي بنفسك على https://web-otp-iframe-demo.stackblitz.io.
إضافة تعليقات توضيحية على الأصول المرتبطة بالرسالة النصية القصيرة
عند طلب واجهة برمجة تطبيقات WebOTP API من داخل إطار iframe، يجب أن تتضمّن الرسالة النصية القصيرة SMS مصدر الإطار العلوي مسبوقًا بـ @ متبوعًا بكلمة OTP مسبوقة بـ # متبوعة بأصل 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
يمكن استخدام WebOTP ضمن b.com، ولكن لا يُسمح باستخدامه في c.com.
لاحظ أن السيناريو التالي غير معتمد أيضًا بسبب نقص الطلب وتعقيدات تجربة المستخدم.
- a.com -> b.com -> a.com (استدعاء واجهة برمجة تطبيقات WebOTP)
التوافقية
على الرغم من أنّ محركات المتصفّح الأخرى غير Chromium لا تنفّذ واجهة برمجة تطبيقات WebOTP API،
يتشارك Safari تنسيق الرسائل القصيرة SMS نفسه
مع دعم input[autocomplete="one-time-code"]. في Safari، عند وصول رسالة قصيرة SMS تحتوي على تنسيق رمز
اعتبارًا من نيسان (أبريل) 2021، أصبح متصفّح Safari يتيح استخدام إطار iframe بتنسيق فريد للرسائل القصيرة باستخدام
%.
ومع ذلك، وبما أنّ المناقشة المتعلقة بالمواصفات قد اختتمت مع @ بدلاً من ذلك، نأمل أن يتقارب تنفيذ تنسيق الرسائل القصيرة المتوافق.
إضافة ملاحظات
نستفيد كثيرًا من ملاحظاتك في تحسين واجهة برمجة تطبيقات WebOTP API، لذا ننصحك بتجربتها وإعلامنا برأيك.
المراجِع
- التحقّق من أرقام الهواتف على الويب باستخدام Web OTP API
- أفضل الممارسات لنموذج كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة
- WebOTP API
- رموز للاستخدام لمرة واحدة والصادرة من المصدر ويتم تسليمها عبر الرسائل القصيرة SMS
صورة من موقع rupixen.com على موقع Unسبلاش