כדאי לקרוא איך לבצע אופטימיזציה של טופס ה-SMS ל-OTP ולשפר את חוויית המשתמש.
הרבה פעמים מבקשים ממשתמש לספק OTP (סיסמה חד-פעמית) שהועברה באמצעות SMS. דרך לאמת מספר טלפון של משתמש. יש כמה תרחישים לדוגמה של סיסמאות חד-פעמיות ל-SMS:
- אימות דו-שלבי. בנוסף לשם משתמש ולסיסמה, אפשר להזין SMS OTP משמש כאות חזק שהחשבון נמצא בבעלותו של האדם שקיבל את SMS חד-פעמי.
- אימות מספר הטלפון. בחלק מהשירותים, מספר הטלפון משמש את המשתמש מזהה ראשי. בשירותים כאלה המשתמשים יכולים להזין את מספר הטלפון שלהם OTP התקבל ב-SMS כדי להוכיח את זהותו. לפעמים הכרטיס משולב עם קוד אימות להגדרת אימות דו-שלבי.
- שחזור החשבון. כשמשתמש מאבד את הגישה לחשבון שלו, כדי שתהיה דרך לשחזר אותו. לשלוח אימייל לכתובת האימייל הרשומה שלו, או שליחת SMS חד-פעמי למספר הטלפון של איש הקשר היא שיטה נפוצה לשחזור החשבון.
- אישור התשלום במערכות תשלומים, בנקים מסוימים או כרטיסי אשראי מנפיקים מבקשים אימות נוסף מהמשלם מטעמי אבטחה. לשם כך, משתמשים בדרך כלל ב-SMS OTP.
בפוסט הזה מפורטות שיטות מומלצות ליצירת טופס SMS OTP לשימוש שתואר למעלה במקרים שונים.
רשימת המשימות
כדי לספק את חוויית המשתמש הטובה ביותר באמצעות SMS חד-פעמי, צריך לבצע את הפעולות הבאות:
- משתמשים ברכיב
<input>עם:type="text"inputmode="numeric"autocomplete="one-time-code"
- יש להזין
@BOUND_DOMAIN #OTP_CODEכשורה האחרונה בהודעת ה-SMS של ה-OTP. - משתמשים ב-WebOTP API.
שימוש ברכיב <input>
השימוש בטופס עם רכיב <input> הוא השיטה המומלצת החשובה ביותר
יכול לעקוב אחריו כי הוא פועל בכל הדפדפנים. גם אם הצעות אחרות של
הפוסט הזה לא עובד בדפדפן מסוים. המשתמש עדיין יוכל להזין ולשלוח את הסיסמה החד-פעמית (OTP)
במצב ה-GRU
<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 בהודעת ה-SMS באופן היוריסטי
המקלדת תציע את הסיסמה החד-פעמית (OTP) שהמשתמש צריך להזין. זה פועל רק ב-Safari 12
ב-iOS, ב-iPadOS וב-macOS, אבל מומלץ מאוד להשתמש בהם, כי
דרך קלה לשפר את חוויית SMS OTP בפלטפורמות האלה.
חוויית המשתמש של autocomplete="one-time-code" משפרת, אבל יש עוד יתרונות
יכול לעשות זאת על ידי הקפדה שהודעת ה-SMS תואמת להודעה שקשורה למקור
פורמט.
עיצוב טקסט ה-SMS
שיפור חוויית המשתמש בכניסה ל-OTP באמצעות התאמה עם קודים חד-פעמיים שקשורים למקור ונשלחים באמצעות SMS למפרט.
כלל הפורמט פשוט: מסיימים את הודעת ה-SMS עם הדומיין של המקבל
המשפט הקודם: @ וה-OTP קודם ב-#.
לדוגמה:
Your OTP is 123456
@web-otp.glitch.me #123456
שימוש בפורמט סטנדרטי להודעות OTP מחלץ של קודים קלים ואמינים יותר. שיוך קודי OTP עם קשה יותר להטעות משתמשים כדי שיספקו קוד לאתרים זדוניים.
יש כמה יתרונות לשימוש בפורמט הזה:
- הסיסמה החד-פעמית (OTP) תהיה מקושרת לדומיין. אם המשתמש נמצא בדומיינים שאינם הסיסמה שצוינה בהודעת ה-SMS, ההצעה ל-OTP לא תופיע. כך גם מפחיתים את הסיכון למתקפות פישינג ופריצות פוטנציאליות לחשבונות.
- הדפדפן יוכל כעת לחלץ את ה-OTP בצורה אמינה בלי להסתמך על היוריסטיקה מסתורית ופתאומית.
כשאתר משתמש ב-autocomplete="one-time-code", ב-Safari עם iOS 14 ואילך
תציע סיסמה חד-פעמית (OTP) לפי הכללים שלמעלה.
הפורמט הזה של הודעת SMS מועיל גם לדפדפנים אחרים מלבד Safari. Chrome, Opera,
ו-Vivaldi ב-Android תומך גם בכלל הקודים החד-פעמיים המשויכים למקור עם
ה-API של WebOTP, אבל לא דרך 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 בקטע אימות מספרי טלפון באינטרנט
באמצעות ה-API של WebOTP, או מעתיקים ומדביקים את קטע הקוד הבא. (לעשות
חשוב לוודא שברכיב <form> מוגדרים כראוי המאפיינים action ו-method).
// 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);
});
});
}
צילום של ג'ייסון לאונג ב- ביטול הפתיחה.