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

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

Eiji Kitamura

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

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

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

قائمة التحقق

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

  • يمكنك استخدام العنصر <input> مع:
    • type="text"
    • inputmode="numeric"
    • autocomplete="one-time-code"
  • استخدِم @BOUND_DOMAIN #OTP_CODE كسطر أخير في رسالة SMS التي تُستخدم مرة واحدة فقط.
  • استخدِم 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" في حقول إدخال كلمة المرور لمرة واحدة، لأنّها أيضًا يحوِّل لوحة مفاتيح الجوّال إلى أرقام فقط (بما فيها * و#) عند التركيز. تم استخدام هذا الاختراق في الماضي عندما كان inputmode="numeric" لم يتم دعمه على نطاق واسع. منذ أن بدأ متصفّح Firefox في التوافق inputmode="numeric", ما مِن حاجة إلى استخدام اختراق type="tel" غير الصحيح دلاليًا.

autocomplete="one-time-code"

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

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

تنفيذ الإجراء " التحقّق التلقائي="one-time-code"`

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

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

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

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

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

Your OTP is 123456

@web-otp.glitch.me #123456

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

يوفر استخدام هذا التنسيق فائدتين:

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

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

يفيد تنسيق رسالة 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 متوافقة مع الرموز الصالحة لمرة واحدة والواردة في المصدر تسليمه ومنحه المستخدم حق الوصول. بعد تمرير كلمة المرور لمرة واحدة إلى 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);
    });
  });
}

صورة من إعداد جايسون لونغ على إزالة البداية