تعرَّف على كيفية تحسين نموذج رمز التحقّق المرسَل عبر الرسائل القصيرة وتحسين تجربة المستخدم.
إنّ طلب كلمة المرور الصالحة لمرة واحدة (OTP) من المستخدم وإرسالها إليه عبر رسالة قصيرة SMS هي إحدى الطرق الشائعة لتأكيد رقم هاتف المستخدم. في ما يلي بعض حالات استخدام رمز التحقّق المرسَل عبر الرسائل القصيرة:
- المصادقة الثنائية: بالإضافة إلى اسم المستخدم وكلمة المرور، يمكن استخدام رمز التفعيل المرسَل عبر الرسائل القصيرة كإشارة قوية على أنّ الحساب مملوك للشخص الذي تلقّى رمز التفعيل المرسَل عبر الرسائل القصيرة.
- إثبات ملكية رقم الهاتف: تستخدم بعض الخدمات رقم الهاتف كمعرّف أساسي للمستخدم. في هذه الخدمات، يمكن للمستخدمين إدخال رقم هاتفهم ورمز التفعيل المُرسَل عبر رسالة قصيرة لإثبات هويتهم. وفي بعض الأحيان، يتم دمجها مع رقم تعريف شخصي لتشكيل مصادقة ثنائية.
- استرداد الحساب: عندما يفقد المستخدم إمكانية الوصول إلى حسابه، يجب أن تتوفر طريقة لاسترداده. إنّ إرسال رسالة إلكترونية إلى عنوان البريد الإلكتروني المسجّل أو إرسال كلمة مرور صالحة لمرة واحدة عبر رسالة قصيرة 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، ولكننا ننصح بشدة باستخدامه، لأنّه يمثّل طريقة سهلة لتحسين تجربة رمز التحقّق المرسَل عبر الرسائل القصيرة على هذه الأنظمة الأساسية.
autocomplete="one-time-code" تُحسِّن تجربة المستخدم، ولكن هناك المزيد مما
يمكنك فعله من خلال التأكّد من امتثال رسالة الرسائل القصيرة لتنسيق الرسالة المقيّد بالمصدر.
تنسيق نص الرسالة القصيرة
يمكنك تحسين تجربة المستخدم عند إدخال رمز مزوّد بوقت محدد من خلال الالتزام بمواصفات الرموز المزوّدة بوقت محدد والمرتبطة بالمصدر والتي يتم إرسالها عبر الرسائل القصيرة.
قاعدة التنسيق بسيطة: يمكنك إنهاء رسالة SMS بنطاق المستلِم
قبله @ وكلمة المرور لمرة واحدة قبلها #.
على سبيل المثال:
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، سينتظر الموقع الإلكتروني
وصول رسالة قصيرة متوافقة مع الرموز المخصّصة لمرة واحدة والمرتبطة بالمصدر ليتم
تسليمها ومنح المستخدم إذن الوصول. بعد تمرير مفتاح 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);
});
});
}
الصورة مقدمة من Jason Leung على Unsplash.