أفضل الممارسات لنموذج كلمة المرور لمرة واحدة عبر الرسائل القصيرة SMS

تعرَّف على كيفية تحسين نموذج كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS وتحسين تجربة المستخدم.

Eiji Kitamura

تُعد مطالبة المستخدم بتقديم كلمة مرور صالحة لمرة واحدة (OTP) المرسَلة عبر الرسائل القصيرة SMS طريقة شائعة لتأكيد رقم هاتف المستخدم. هناك عدد قليل من حالات استخدام كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة:

• المصادقة الثنائية: بالإضافة إلى اسم المستخدم وكلمة المرور، يمكن استخدام كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS كإشارة قوية إلى أن الحساب يملكه الشخص الذي تلقى كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS.
• إثبات ملكية رقم الهاتف: تستخدم بعض الخدمات رقم الهاتف كمعرف أساسي للمستخدم. وفي هذه الخدمات، يمكن للمستخدمين إدخال أرقام هواتفهم وكلمة المرور لمرة واحدة التي تم تلقّيها عبر رسالة قصيرة SMS لإثبات هويتهم. وأحيانًا يتم دمجها مع رقم التعريف الشخصي لتكون مصادقة ثنائية.
• استرداد الحساب: عندما يفقد أحد المستخدمين إمكانية الوصول إلى حسابه، يجب أن تكون هناك طريقة لاسترداده. يعد إرسال بريد إلكتروني إلى عنوان البريد الإلكتروني المسجّل أو رسالة SMS OTP إلى رقم الهاتف من الطرق الشائعة لاسترداد الحساب.
• تأكيد الدفع في أنظمة الدفع، تطلب بعض المصارف أو جهات إصدار بطاقات الائتمان مصادقة إضافية من الجهة المسدِّدة لأسباب أمنية. ويشيع استخدام كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS لهذا الغرض.

تشرح هذه المشاركة أفضل الممارسات لإنشاء نموذج كلمة مرور صالحة لمرة واحدة (OTP) عبر الرسائل القصيرة SMS لحالات الاستخدام المذكورة أعلاه.

قائمة التحقّق

لتوفير أفضل تجربة للمستخدم باستخدام كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة، اتبع الخطوات التالية:

• يمكنك استخدام العنصر <input> مع:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• يُرجى استخدام @BOUND_DOMAIN #OTP_CODE كسطر أخير في رسالة SMS القصيرة المستنِدة إلى كلمة المرور لمرة واحدة (OTP).
• استخدِم WebOTP API.

استخدام العنصر <input>

إنّ استخدام نموذج يتضمّن عنصر <input> هو أهم ممارسة يمكنك اتّباعها لأنّه يعمل في جميع المتصفّحات. حتى إذا لم تعمل الاقتراحات الأخرى الواردة من هذه المشاركة في أحد المتصفحات، سيظل بإمكان المستخدم إدخال كلمة المرور لمرة واحدة (OTP) وإرسالها يدويًا.

<form action="/verify-otp" method="POST">
  <input type="text"
         inputmode="numeric"
         autocomplete="one-time-code"
         pattern="\d{6}"
         required>
</form>

في ما يلي بعض الأفكار لضمان حصول حقل الإدخال على أفضل أداء من وظائف المتصفّح.

type="text"

بما أنّ كلمات المرور OTP تتألف عادةً من خمسة أو ستة أرقام، قد يبدو استخدام type="number" في حقل الإدخال أمرًا سهلاً لأنّه يؤدي إلى تغيير لوحة مفاتيح الأجهزة الجوّالة إلى أرقام فقط. لا ننصح بتنفيذ هذا الإجراء لأنّ المتصفّح يتوقع أن يكون حقل الإدخال رقمًا قابلاً للعد بدلاً من تسلسل أرقام متعددة، ما قد يؤدي إلى سلوك غير متوقّع. يؤدي استخدام type="number" إلى عرض الزرين المتّجهين للأعلى وللأسفل بجوار حقل الإدخال، ويؤدي الضغط على هذه الأزرار إلى زيادة العدد أو تقليله وقد يؤدي إلى إزالة الأصفار السابقة.

يمكنك استخدام type="text" كبديل. لن يحوّل هذا لوحة مفاتيح الجوّال إلى أرقام فقط، ولكن هذا جيد لأن النصيحة التالية لاستخدام inputmode="numeric" تنجز هذه المهمة.

inputmode="numeric"

استخدِم inputmode="numeric" لتغيير لوحة مفاتيح الأجهزة الجوّالة إلى أرقام فقط.

تستخدم بعض المواقع الإلكترونية type="tel" لحقول إدخال كلمات المرور لمرة واحدة (OTP) لأنّه يحوِّل لوحة مفاتيح الأجهزة الجوّالة إلى أرقام فقط (بما في ذلك * و#) عند التركيز. وقد تم استخدام هذا الاختراق في الماضي عندما لم يحصل inputmode="numeric" على الدعم على نطاق واسع. منذ أن بدأ Firefox متوافقًا مع inputmode="numeric"، لن تكون هناك حاجة لاستخدام هجوم type="tel" غير صحيح دلاليًا.

autocomplete="one-time-code"

autocomplete تتيح للمطوّرين تحديد الإذن الذي يجب أن تمنحه المتصفّح لتقديم المساعدة بشأن الإكمال التلقائي، وإعلام المتصفِّح بنوع المعلومات المتوقّعة في الحقل.

باستخدام autocomplete="one-time-code"، كلما تلقّى المستخدم رسالة قصيرة SMS أثناء فتح النموذج، سيحلّل نظام التشغيل كلمة المرور OTP الواردة في الرسالة القصيرة كدليل إرشادي، وستقترح لوحة المفاتيح كلمة المرور لمرة واحدة (OTP) كي يدخلها المستخدم. وهو متوافق فقط مع الإصدار 12 من Safari والإصدارات اللاحقة على أنظمة التشغيل iOS وiPadOS وmacOS، ولكنّنا ننصح باستخدامه بشدة لأنّه طريقة سهلة لتحسين تجربة استخدام كلمة المرور لمرة واحدة (OTP) عبر الرسائل القصيرة SMS على تلك الأنظمة الأساسية.

يحسن autocomplete="one-time-code" من تجربة المستخدم، ولكن هناك المزيد مما يمكنك فعله من خلال ضمان توافق الرسالة القصيرة SMS مع تنسيق الرسالة المحددة المصدر.

تنسيق نص رسالة SMS

يمكنك تحسين تجربة المستخدم عند إدخال كلمة مرور صالحة لمرة واحدة (OTP) من خلال التوافق مع مواصفات رموز الرموز الصالحة لمرة واحدة التي يتم إرسالها مرة واحدة والتي يتم تسليمها عبر الرسائل القصيرة SMS.

قاعدة التنسيق بسيطة: عليك إنهاء رسالة SMS باستخدام نطاق المُستلِم المسبقة بـ @ وكلمة المرور OTP المسبوقة بالرمز #.

مثال:

Your OTP is 123456

@web-otp.glitch.me #123456

يؤدي استخدام تنسيق قياسي لرسائل منشئ كلمة المرور لمرة واحدة إلى جعل استخراج الرموز منها أسهل وأكثر موثوقية. يؤدي ربط رموز كلمة المرور لمرة واحدة بالمواقع إلى صعوبة خداع المستخدمين لتقديم رمز للمواقع الضارة.

يوفر استخدام هذا الشكل ميزتين:

• سيتم ربط كلمة المرور لمرة واحدة (OTP) بالنطاق. وإذا كان المستخدم في نطاقات غير النطاق المحدد في رسالة SMS، فلن يظهر اقتراح كلمة المرور لمرة واحدة (OTP). ويحدّ ذلك أيضًا من خطر هجمات التصيّد الاحتيالي وعمليات الاستيلاء المحتملة على الحسابات.
• سيتمكن المتصفح الآن من استخراج كلمة المرور التي تُستخدَم لمرة واحدة بشكل موثوق بدون الاعتماد على إشارات استدلالية غامضة وغير مستقرة.

عندما يستخدم موقع إلكتروني autocomplete="one-time-code"، سيقترح متصفّح Safari الذي يعمل بالإصدار 14 من نظام التشغيل iOS أو إصدار أحدث كلمة المرور لمرة واحدة (OTP) باتّباع القواعد الواردة أعلاه.

إنّ تنسيق رسائل SMS هذا مفيد أيضًا للمتصفّحات الأخرى غير Safari. يتيح Chrome وOpera وVivaldi على Android أيضًا استخدام قاعدة الرموز لمرة واحدة المرتبطة بالمصدر مع واجهة برمجة تطبيقات WebOTP API، وليس من خلال autocomplete="one-time-code".

استخدام WebOTP API

WebOTP API: توفّر إمكانية الوصول إلى كلمة المرور لمرة واحدة (OTP) التي يتم تلقّيها في رسالة SMS. من خلال طلب الرقم navigator.credentials.get() باستخدام النوع otp (OTPCredential) حيث يتضمّن transport sms، سينتظر الموقع الإلكتروني حتى يتم تسليم رسالة قصيرة SMS متوافقة مع الرموز المخصّصة لمرة واحدة والمخصّصة للاستخدام مرة واحدة، ومنحه للمستخدم إذن الوصول. بمجرد تمرير كلمة المرور OTP إلى JavaScript، يمكن لموقع الويب استخدامها في نموذج أو نشرها مباشرةً إلى الخادم.

navigator.credentials.get({
  otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);

تعرَّف على كيفية استخدام WebOTP API بالتفصيل في قسم التحقّق من أرقام الهواتف على الويب باستخدام WebOTP API أو انسخ المقتطف التالي والصقه. (تأكَّد من ضبط السمة action وmethod بشكل صحيح في العنصر <form>)

// Feature detection
if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    // Cancel the WebOTP API if the form is submitted manually.
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        // Cancel the WebOTP API.
        ac.abort();
      });
    }
    // Invoke the WebOTP API
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // Automatically submit the form when an OTP is obtained.
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

تصوير جايسون ليونغ على قناة Unسبلاش