שיטות מומלצות לטופס OTP באמצעות SMS

למד כיצד לבצע אופטימיזציה לטופס ה-OTP ב-SMS ולשפר את חוויית המשתמש.

אייג'י קיטמורה

אחת הדרכים הנפוצות לאשר את מספר הטלפון של המשתמש היא לבקש ממשתמש לספק OTP (סיסמה חד-פעמית) שנשלח ב-SMS. הנה מספר תרחישים לדוגמה ל-SMS OTP:

• אימות דו-שלבי. בנוסף לשם המשתמש ולסיסמה, אפשר להשתמש ב-SMS OTP כאות חזק לכך שהחשבון הוא בבעלות האדם שקיבל את ה-SMS OTP.
• אימות מספר הטלפון. בשירותים מסוימים, מספר הטלפון משמש כמזהה הראשי של המשתמש. בשירותים כאלה, המשתמשים יכולים להזין את מספר הטלפון שלהם ואת ה-OTP שהם מקבלים ב-SMS כדי להוכיח את זהותם. לפעמים שילוב עם קוד אימות מוגדר כאימות דו-שלבי.
• שחזור חשבון. כשמשתמש מאבד את הגישה לחשבון, צריכה להיות דרך לשחזר אותה. שליחת אימייל לכתובת האימייל הרשומה או סיסמה חד-פעמית ב-SMS למספר הטלפון הן שיטות נפוצות לשחזור החשבון.
• אישור תשלום במערכות תשלום, מטעמי אבטחה, בנקים מסוימים ומנפיקי כרטיסי אשראי מבקשים מהמשלם אימות נוסף. בדרך כלל משתמשים ב-SMS OTP למטרה הזו.

בפוסט הזה נסביר על השיטות המומלצות ליצירת טופס OTP ב-SMS, בתרחישי השימוש שצוינו למעלה.

רשימת המשימות

כדי לספק את חוויית המשתמש הטובה ביותר באמצעות SMS OTP, יש לבצע את השלבים הבאים:

• משתמשים ברכיב <input> עם:
  • type="text"
  • inputmode="numeric"
  • autocomplete="one-time-code"
• יש להשתמש במספר @BOUND_DOMAIN #OTP_CODE בשורה האחרונה של הודעת ה-SMS עם 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" בשדה להזנת קלט עשוי להיראות אינטואיטיבי כי הוא משנה את המקלדת של הנייד למספרים בלבד. לא מומלץ לעשות זאת, כי הדפדפן מצפה ששדה הקלט יהיה מספר שניתן לספור ולא רצף של כמה מספרים. זה עלול לגרום להתנהגות בלתי צפויה. השימוש ב-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 תומכים גם בכלל הקודים החד-פעמיים ממקור המקור באמצעות 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. לחלופין, אפשר להעתיק ולהדביק את קטע הקוד הבא. (חשוב לוודא שהמאפיין <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);
    });
  });
}

תמונה מאת Jason Leung ב-UnFlood.