7 צעדים להטמעת Web OTP API בטפסי לידים במובייל

אורי, בעל סוכנות ביטוח מרחוב אחד העם בתל אביב, הראה לי את הנתונים שלו: 42% מהאנשים שהתחילו למלא את טופס הלידים באתר שלו נטשו בדיוק בשלב אימות ה-SMS.

אנשים שונאים להקליד.

ברגע שגולש מובייל צריך לצאת מהדפדפן, לפתוח את אפליקציית ההודעות, להעתיק 6 ספרות ולהחזיר אותן לטופס — איבדתם אותו. ב-2026, הציפייה של המשתמש היא לאפס חיכוך.

הגדרה · Web OTP API

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

הנה 7 צעדים מעשיים להטמעת הטכנולוגיה באתר שלכם.

1. הבנת המנגנון: איך התהליך עובד

כשהמשתמש מזין טלפון בטופס, השרת שלכם שולח אליו SMS. ברגע שההודעה מגיעה למכשיר, הדפדפן מזהה אותה ומציג הודעה בתחתית המסך: "להזין קוד 849201?".

זה עובד מעולה.

לחיצה אחת של המשתמש והקוד נכנס לשדה הקלט. הטופס יכול אפילו להישלח אוטומטית ברגע שהקוד התקבל.

2. התאמת מבנה הודעת ה-SMS לסטנדרט הבינלאומי

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

השורה האחרונה בהודעה חייבת להכיל את הדומיין שלכם ואת הקוד.

דוגמה לנוסח SMS תקין:

קוד האימות שלך לאתר Just Better הוא: 481902

@justbettersite.com #481902

3. הגדרת שדה הקלט (Input Field) ב-HTML

כדי שהדפדפן ידע לאיזה שדה להכניס את הקוד, ובנוסף כדי לתמוך במכשירי iOS (ספארי), מציבים את המאפיינים הנכונים ב-HTML:

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

המאפיין autocomplete="one-time-code" אומר למקלדת של האייפון להציע את הקוד מעל המקלדת. המאפיין inputmode="numeric"פותח מיד מקלדת מספרים נוחה.

4. כתיבת פונקציית ה-JavaScript לקריאת ה-SMS

עכשיו מגיע החלק של ה-Web OTP API בפועל. אנחנו קוראים ל-navigator.credentials.get וממתינים לתשובה:

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.getElementById('otp-input');
    if (!input) return;
    
    const ac = new AbortController();
    
    navigator.credentials.get({
      otp: { transport: ['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      // אופציונלי: שליחת הטופס באופן אוטומטי
      document.getElementById('lead-form').submit();
    }).catch(err => {
      console.log('OTP error or cancelled:', err);
    });
  });
}

הקוד הזה מבקש מהדפדפן להאזין ל-SMS נכנס ברגע שהדף עולה.

5. הוספת AbortController להפסקת ההאזנה

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

אני מגדיר תמיד טיימר של 60 שניות שמבטל את ה-AbortController, או מפעיל את ac.abort() ברגע שהמשתמש מתחיל להקליד בשדה בעצמו.

קוד נקי מונע תקלות.

6. יצירת תהליך גיבוי (Fallback) לדפדפני דסקטופ

Web OTP API מיועד למכשירים ניידים. במחשב שולחני, OTPCredential לא יהיה קיים בחלון המשתמש.

המערכת בודקת אם התכונה נתמכת בדפדפן. אם לא — היא פשוט נשארת טופס רגיל.

7. בדיקות תקינות בסביבת פיתוח

איך בודקים את זה בלי לבזבז כסף על שליחת מאות הודעות SMS בכל טסט?

בדפדפן Chrome במחשב, אפשר לפתוח את DevTools, להגיע ל-Sensors, ולהשתמש בסימולטור ה-Web OTP כדי לשלוח הודעת דמה ישירות לדפדפן. לחלופין, באנדרואיד מבוסס כבל USB, אפשר לשלוח SMS אמיתי למכשיר הבדיקה ולראות את ההודעה הצפה מתקבלת.

בדקו תמיד גם מקרה שבו המשתמש דוחה את ההרשאה.

סיכום

בניית אתרים נכונה ב-2026 נמדדת בפרטים הקטנים שמקטינים חיכוך. הטמעת Web OTP API היא משימה של שעת עבודה אחת למפתח, אבל היתרון של מורגש מיד בשורת הרווח של העסק.

💡

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