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

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

Eiji Kitamura

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

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

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

قائمة التحقق

لتقديم أفضل تجربة للمستخدمين باستخدام كلمة المرور المؤقتة المرسَلة عبر الرسائل القصيرة، اتّبِع الخطوات التالية:

  • استخدِم عنصر <input> مع:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • استخدِم @BOUND_DOMAIN #OTP_CODE كآخر سطر من رسالة 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"

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

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

inputmode="numeric"

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

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

autocomplete="one-time-code"

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

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

عمل " التحقّق التلقائي"="one-time-code"`

autocomplete="one-time-code" تُحسِّن تجربة المستخدم، ولكن هناك المزيد مما يمكنك فعله من خلال التأكّد من امتثال رسالة الرسائل القصيرة لتنسيق الرسالة المقيّد بالمصدر .

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

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

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

على سبيل المثال:

Your OTP is 123456

@web-otp.glitch.me #123456

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

يوفّر استخدام هذا التنسيق بعض المزايا:

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

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

يستفيد أيضًا متصفّحات أخرى غير 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 بالتفصيل في مقالة إثبات ملكية أرقام الهواتف على الويب باستخدام واجهة برمجة التطبيقات 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قلاش