من الشائع أن يُطلب من المستخدم تقديم كلمة مرور صالحة لمرة واحدة (OTP) لتأكيد هويته من خلال إرسال رسالة SMS. تشمل بعض حالات استخدام كلمة المرور لمرة واحدة عبر الرسائل القصيرة ما يلي:
- المصادقة الثنائية: بالإضافة إلى اسم المستخدم وكلمة المرور، يمكن استخدام كلمة المرور الصالحة لمرة واحدة عبر الرسائل القصيرة كإشارة قوية إلى أنّ الحساب يملكه الشخص الذي تلقّى كلمة المرور.
- إثبات ملكية رقم الهاتف تستخدم بعض الخدمات رقم الهاتف كمعرّف أساسي للمستخدم. في هذه الخدمات، يمكن للمستخدمين إدخال رقم هاتفهم ورمز OTP الذي تم تلقّيه عبر رسالة SMS لإثبات هويتهم. وفي بعض الأحيان، يتم دمجها مع رقم تعريف شخصي لتشكّل مصادقة ثنائية.
- استرداد الحساب عندما يتعذّر على مستخدم الدخول إلى حسابه، يجب أن تتوفّر طريقة لاسترداده. يُعدّ إرسال رسالة إلكترونية إلى عنوان البريد الإلكتروني المسجّل أو إرسال كلمة مرور صالحة لمرة واحدة عبر رسالة SMS إلى رقم الهاتف من الطرق الشائعة لاسترداد الحساب.
- تأكيد الدفع في أنظمة الدفع، تطلب بعض المصارف أو جهات إصدار بطاقات الائتمان من الدافع إجراء مصادقة إضافية لأسباب أمنية. ويتم عادةً استخدام كلمة المرور لمرة واحدة المستلمة عبر الرسائل القصيرة لهذا الغرض.
تابِع القراءة للتعرّف على أفضل الممارسات المتعلّقة بإنشاء نماذج كلمات المرور لمرة واحدة عبر الرسائل القصيرة لحالات الاستخدام هذه.
قائمة التحقق
لتقديم أفضل تجربة للمستخدم من خلال رمز التحقّق لمرة واحدة عبر الرسائل القصيرة، اتّبِع الخطوات التالية:
- استخدِم العنصر
<input>مع:type="text"inputmode="numeric"autocomplete="one-time-code"
- استخدِم
@BOUND_DOMAIN #OTP_CODEكآخر سطر في رسالة SMS التي تتضمّن كلمة المرور الصالحة لمرة واحدة. - استخدِم WebOTP API.
استخدام العنصر <input>
يُعدّ استخدام نموذج يتضمّن عنصر <input> أهم أفضل الممارسات التي يمكنك اتّباعها لأنّه يعمل في جميع المتصفحات. حتى إذا لم تنجح الاقتراحات الأخرى الواردة في هذه المشاركة في بعض المتصفّحات، سيظل بإمكان المستخدم إدخال كلمة المرور الصالحة لمرة واحدة وإرسالها يدويًا.
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
في ما يلي بعض الأفكار لضمان استفادة حقل الإدخال إلى أقصى حدّ من وظائف المتصفّح.
type="text"
بما أنّ كلمات المرور الصالحة لمرة واحدة تتألف عادةً من خمسة أو ستة أرقام، قد يبدو استخدام
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 أثناء فتح نموذج، سيحلّل نظام التشغيل رمز OTP في الرسالة القصيرة بطريقة استدلالية، وستقترح لوحة المفاتيح رمز OTP على المستخدم لإدخاله. لا تتوفّر هذه الميزة إلا على الإصدار 12 من متصفّح Safari والإصدارات الأحدث على أجهزة iOS وiPadOS وmacOS، ولكن ننصحك بشدة باستخدامها لأنّها طريقة أفضل لتحسين تجربة استخدام كلمات المرور لمرة واحدة المستندة إلى الرسائل القصيرة على هذه المنصات.
autocomplete="one-time-code" قيد التنفيذ.
يساهم autocomplete="one-time-code" في تحسين تجربة المستخدم، ولكن يمكنك فعل المزيد من خلال ضمان توافق الرسالة القصيرة مع تنسيق الرسالة المرتبطة بالمصدر.
السمات الاختيارية
تشمل السمات الاختيارية ما يلي:
- تحدّد السمة
patternالتنسيق الذي يجب أن يتطابق معه رمز OTP الذي تم إدخاله. استخدِم التعبيرات العادية لتحديد نمط المطابقة. على سبيل المثال، يفرض\d{6}أن يكون رمز OTP عبارة عن سلسلة من ستة أرقام. يمكنك الاطّلاع على استخدام JavaScript لإجراء عمليات التحقّق الأكثر تعقيدًا في الوقت الفعلي لمزيد من المعلومات حولpattern. - يشير الرمز
requiredإلى أنّه على المستخدم ملء الحقل.
يمكنك الاطّلاع على أفضل الممارسات المتعلّقة بنماذج تسجيل الدخول للحصول على مزيد من النصائح.
تنسيق نص الرسالة القصيرة
يمكنك تحسين تجربة المستخدم عند إدخال كلمة مرور صالحة لمرة واحدة من خلال الالتزام بمواصفات رموز المرور الصالحة لمرة واحدة والمرتبطة بالمصدر والتي يتم إرسالها عبر الرسائل القصيرة.
في الأساس، تكون قاعدة التنسيق على النحو التالي: يجب إنهاء رسالة SMS بنطاق المستلِم مسبوقًا بـ @، ورمز التحقّق لمرة واحدة مسبوقًا بـ #.
على سبيل المثال:
Your OTP is 123456
@web-otp.glitch.me #123456
يسهّل التنسيق العادي لرسائل كلمة المرور الصالحة لمرة واحدة استخراجها ويجعلها أكثر موثوقية. يصعّب ربط رموز كلمة المرور الصالحة لمرة واحدة بالمواقع الإلكترونية خداع المستخدمين وحملهم على تقديم الرمز إلى مواقع إلكترونية ضارة.
قواعد التنسيق الدقيقة
القواعد الدقيقة هي:
- تبدأ الرسالة بنص (اختياري) يمكن قراءته ويتضمّن سلسلة أبجدية رقمية تتألف من أربعة إلى عشرة أحرف مع رقم واحد على الأقل، مع ترك السطر الأخير لعنوان URL وكلمة المرور الصالحة لمرة واحدة.
- يجب أن يسبق الجزء الخاص بالنطاق في عنوان URL للموقع الإلكتروني الذي استدعى واجهة برمجة التطبيقات
@. - يجب أن يحتوي عنوان URL على
#، متبوعًا بكلمة المرور الصالحة لمرة واحدة. يجب ألا يتجاوز عدد الأحرف 140 حرفًا.
يوفر استخدام هذا التنسيق مزايا عديدة:
- سيتم ربط كلمة المرور لمرة واحدة بالنطاق. إذا كان المستخدم ضمن نطاقات أخرى غير النطاق المحدّد في رسالة SMS، لن يظهر اقتراح كلمة المرور لمرة واحدة. ويحدّ ذلك أيضًا من خطر هجمات التصيّد الاحتيالي وعمليات اختراق الحسابات المحتملة.
- سيتمكّن المتصفّح الآن من استخراج كلمة المرور لمرة واحدة بشكل موثوق بدون الاعتماد على إحصاءات غامضة وغير موثوقة.
عندما يستخدم موقع إلكتروني autocomplete="one-time-code"، سيقترح متصفّح Safari الذي يعمل بنظام التشغيل iOS 14 أو الإصدارات الأحدث كلمة المرور لمرة واحدة وفقًا لهذه القواعد.
يفيد تنسيق رسائل SMS هذا أيضًا المتصفحات الأخرى غير Safari. يتيح Chrome وOpera وVivaldi على Android أيضًا استخدام قاعدة الرموز الصالحة لمرة واحدة والمرتبطة بالمصدر من خلال WebOTP API، ولكن ليس من خلال autocomplete="one-time-code".
استخدام WebOTP API
تتيح واجهة WebOTP API الوصول إلى كلمة المرور لمرة واحدة التي تم تلقّيها في رسالة 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 أو نسخ مقتطف الرمز التالي ولصقه. احرص على ضبط السمتَين 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);
});
});
}