WebOTP ומילוי אוטומטי של קוד אימות מסמס: מה זה, איך מוסיפים אותו להודעה ומה צריך באתר

הלקוח שלכם מתחבר לאתר מהטלפון, מקבל סמס עם קוד אימות, יוצא מהדפדפן, פותח את ההודעות, מנסה לזכור את הקוד, חוזר ומקליד. בחלק מהמקרים הוא טועה, ובחלק אחר הוא פשוט מוותר. WebOTP ומילוי אוטומטי של קוד מקצרים את כל זה ללחיצה אחת, והם דורשים שינוי קטן מאוד בהודעה ובאתר.

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

החדשות הטובות: הטלפונים והדפדפנים כבר יודעים לעשות את זה. צריך רק לתת להם את הרמזים הנכונים, חלק בתוך הסמס וחלק בעמוד שבו מקלידים את הקוד.

מה זה WebOTP?

WebOTP הוא ממשק תכנות (API) של הדפדפן שמאפשר לאתר לקבל קוד אימות מתוך סמס שהגיע לטלפון, ולמלא אותו בשדה בלי שהמשתמש יצטרך לעבור לאפליקציית ההודעות. כשהסמס מגיע, הדפדפן מציג למשתמש חלונית קטנה עם הקוד ושואל אם להזין אותו. לחיצה אחת על "אישור", והקוד בשדה.

כדי שזה יעבוד, הסמס צריך לכלול בשורה האחרונה שלו את כתובת האתר ואת הקוד, בפורמט קבוע:

קוד האימות שלך הוא: 123456

@www.mysite.co.il #123456

השורה האחרונה היא החשובה: הסימן @ ואחריו שם הדומיין של האתר, רווח, והסימן # ואחריו הקוד. הדפדפן מציע את הקוד רק לאתר שהדומיין שלו תואם בדיוק לדומיין שבהודעה.

למה זה משמש: שלושה יתרונות

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

איפה זה עובד: אנדרואיד ואייפון

• אנדרואיד (כרום ודפדפנים מבוססי כרומיום): תומכים ב-WebOTP API המלא. האתר מבקש את הקוד, הדפדפן ממתין לסמס, מציג חלונית אישור, וממלא את הקוד אחרי לחיצה.
• אייפון ואייפד (ספארי): לא תומכים ב-WebOTP API עצמו, אבל יש להם מנגנון משלהם: כשמגיע סמס עם קוד, המקלדת מציגה את הקוד כהצעה מעליה, והמשתמש לוחץ עליה. גם אפל תומכת באותו פורמט של שורה אחרונה (@דומיין #קוד), ומציעה קוד כזה רק באתר שהדומיין שלו תואם.

במילים אחרות: אותה שורה בסמס משרתת את שתי המערכות, וכל מה שנשאר זה להכין את האתר.

איך מוסיפים את WebOTP להודעה במיקרופיי

בממשק ה-OTP של מיקרופיי זה פרמטר אחד. בשליחת הקוד מוסיפים את הפרמטר webotp עם שם הדומיין או תת-הדומיין שאליו המשתמש נכנס, בלי http ובלי לוכסן בסוף:

webotp=www.mysite.co.il

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

שתי נקודות שכדאי להקפיד עליהן:

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

התיעוד המלא של הממשק, כולל כל הפרמטרים ודוגמאות, נמצא בתיעוד ממשק ה-OTP, ומידע כללי על השירות בעמוד OTP וקוד אימות.

מה צריך להוסיף באתר שלכם

זה החלק שלכם, או של המפתח שבונה את האתר. מדובר בשני שינויים קטנים בעמוד שבו מקלידים את הקוד.

1. שדה הקוד: autocomplete="one-time-code"

מוסיפים לשדה הקלט את המאפיין הזה. זה מה שגורם לאייפון להציע את הקוד מעל המקלדת, וגם עוזר לדפדפנים אחרים לזהות שזה שדה של קוד אימות. כדאי להוסיף גם inputmode="numeric", כדי שתיפתח מקלדת מספרים:

<input type="text" name="otp" inputmode="numeric" autocomplete="one-time-code">

2. קטע JS שמפעיל את WebOTP

באנדרואיד, האתר צריך לבקש מהדפדפן להמתין לסמס. הקוד הבא בודק שהדפדפן תומך ב-WebOTP, ממתין להודעה, וממלא את הקוד בשדה. בדפדפן שלא תומך הוא פשוט לא עושה כלום, ולכן אפשר להוסיף אותו בבטחה לכל אתר. מוסיפים אותו בעמוד שבו מופיע שדה הקוד, כך שהוא ירוץ כשהעמוד נטען (אם השדה מופיע רק אחרי שליחת הקוד, מפעילים את startWebOtp באותו רגע):

function startWebOtp() {
  if (!('OTPCredential' in window)) return;
  var input = document.querySelector('input[autocomplete="one-time-code"]');
  if (!input) return;
  var ac = new AbortController();
  var form = input.closest('form');
  if (form) form.addEventListener('submit', function () { ac.abort(); });
  navigator.credentials.get({ otp: { transport: ['sms'] }, signal: ac.signal })
    .then(function (otp) {
      input.value = otp.code;
      // optional: if (form) form.submit();
    })
    .catch(function () {});
}
if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', startWebOtp);
else startWebOtp();

אם רוצים שהטופס יישלח מיד אחרי המילוי, אפשר להפעיל את השורה המסומנת כ-optional. רוב האתרים מעדיפים להשאיר למשתמש ללחוץ "אישור" בעצמו.

תנאים שחייבים להתקיים

• האתר עובד ב-https. מנגנון WebOTP לא פועל בכתובת לא מאובטחת.
• הסמס מגיע לאותו טלפון שבו פתוח האתר. המשתמש שמתחבר מהמחשב יקליד את הקוד כרגיל.
• שדה הקוד נמצא בעמוד עצמו, ולא בתוך iframe מדומיין אחר. הדומיין שבהודעה צריך להיות הדומיין של העמוד שהמשתמש רואה בשורת הכתובת.

להרחבה ולדוגמאות נוספות, המדריכים הרשמיים: המדריך של גוגל ל-WebOTP, תיעוד WebOTP API ב-MDN, וההנחיות של אפל למילוי קוד אוטומטי.

הטיפ שמשלים את התמונה: שורה באנגלית וכפתור "העתק קוד"

WebOTP עובד רק כשהאתר הטמיע אותו. אבל יש מנגנון נוסף, שלא דורש שום שינוי באתר: אפליקציית ההודעות של גוגל (Google Messages) באנדרואיד מזהה קוד אימות בהודעה, ומציגה בהתראה כפתור "העתק קוד". המשתמש לוחץ, חוזר לאתר ומדביק.

מה שגילינו בבדיקות שלנו: הודעה שכתובה בעברית בלבד לא תמיד מפעילה את הכפתור. הוספת שורה באנגלית בנוסח Your verification code is ואחריה הקוד, הפעילה אותו. השורה הזו מתווספת בנוסף לטקסט בעברית ולשורת ה-WebOTP, לא במקומם. כך נראית הודעה שמשלבת את שלושתם:

קוד האימות שלך הוא: 123456
Your verification code is 123456

@www.mysite.co.il #123456

שימו לב לסדר: השורה באנגלית באה לפני שורת ה-WebOTP, כי שורת ה-WebOTP חייבת להישאר האחרונה. כך אנחנו בונים גם את הודעות קוד הכניסה למערכת של מיקרופיי עצמה.

ומה באייפון? באייפון אין כפתור "העתק קוד" בהתראה, והשורה באנגלית לא משנה את זה. שם הפתרון הוא ההצעה שמופיעה מעל המקלדת, והיא עובדת כשבשדה הקוד באתר מוגדר autocomplete="one-time-code" (סעיף 1 למעלה). אם לא רואים את ההצעה, אפשר ללחוץ לחיצה ארוכה על ההודעה ולהעתיק את הקוד ממנה.

בשורה התחתונה, השילוב המומלץ:

• שורת WebOTP בסוף ההודעה: מילוי אוטומטי באנדרואיד, ושיוך הקוד לדומיין שלכם גם באייפון.
• autocomplete="one-time-code" בשדה: הצעת הקוד מעל המקלדת באייפון.
• שורה באנגלית: כפתור "העתק קוד" באנדרואיד, גם כשהמשתמש לא נמצא בדפדפן שתומך ב-WebOTP.

אם אתם רוצים להוסיף את השורה באנגלית להודעות הקוד שלכם, פנו אלינו ונעזור לכם להגדיר את הנוסח.

 שאלות נפוצות 

מה ההבדל בין OTP ל-WebOTP?

OTP הוא קוד חד-פעמי שנשלח למשתמש כדי לאמת אותו. WebOTP הוא תקן דפדפן שמאפשר לאתר לקרוא את הקוד הזה מהסמס ולמלא אותו אוטומטית. כלומר, WebOTP לא מחליף את ה-OTP, הוא חוסך למשתמש את ההקלדה.

האם WebOTP עובד באייפון?

ה-API עצמו לא נתמך בספארי, אבל לאייפון יש מנגנון מקביל: הקוד מוצע מעל המקלדת כשבשדה מוגדר autocomplete="one-time-code". אפל תומכת גם באותו פורמט של שורה אחרונה בסמס, ולכן אותה הודעה מתאימה לשתי המערכות.

האם צריך לשנות את טקסט ההודעה כדי להפעיל WebOTP?

לא. בממשק ה-OTP של מיקרופיי מוסיפים את הפרמטר webotp עם שם הדומיין, והמערכת מוסיפה את השורה הנדרשת בסוף ההודעה. הטקסט שלכם נשאר כמו שהוא.

למה המילוי האוטומטי לא עובד אצלי?

הסיבות הנפוצות: הדומיין בפרמטר לא תואם בדיוק לכתובת האתר (למשל עם www מול בלי www), האתר לא עובד ב-https, חסר קטע ה-JS או המאפיין autocomplete בשדה, שדה הקוד נמצא בתוך iframe מדומיין אחר, או שהסמס הגיע לטלפון אחר מזה שבו פתוח האתר.

האם WebOTP עולה כסף?

לא. זו יכולת של הדפדפן, והשורה הנוספת בסמס היא חלק מאותה הודעה. ממשק ה-OTP של מיקרופיי כלול בכל החבילות, ומשלמים רק על ההודעה שנשלחת.

האם השורה באנגלית מחליפה את WebOTP?

היא משלימה אותו. WebOTP ממלא את הקוד אוטומטית, אבל רק באתר שהטמיע אותו ובדפדפן שתומך בו. כפתור "העתק קוד" עובד באפליקציית ההודעות של גוגל בלי קשר לאתר, ולכן הוא עוזר גם במקרים ש-WebOTP לא מכסה. ההמלצה היא להשתמש בשניהם.

האם זה בטוח לתת לדפדפן לקרוא את הקוד?

כן. הדפדפן מבקש אישור מהמשתמש לפני שהוא ממלא את הקוד, והקוד מוצע רק לאתר שהדומיין שלו מופיע בהודעה. זה אפילו מקשה על אתרי התחזות, שלא יקבלו הצעה כזו. האימות עצמו עדיין מתבצע בשרת, מול ממשק ה-OTP.

לסיכום

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

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

רוצה להתקדם עם העסק שלך? פתחו חשבון במיקרופיי והתחילו לשלוח קודי אימות, או צרו קשר ונעזור לכם להתחיל לשלוח קודי אימות.

→ חזרה לבלוג