אימות מספר טלפון במחשב באמצעות WebOTP API

החל מגרסה 93 של Chrome, אתרים יכולים לאמת מספרי טלפון מ-Chrome במחשב.

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

מבוא

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

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

WebOTP API בפעולה.

אחד מהתרחישים לדוגמה שעדיין לא נתמך ב-WebOTP הוא טירגוט לבקשות לאימות מספרי טלפון ממחשב או ממחשב מרוחק – ה-API פועל רק במכשירים עם יכולות טלפוניה. ה-API תומך עכשיו בהאזנה להודעות SMS שהתקבלו במכשירים אחרים, כדי לעזור למשתמשים להשלים את האימות של מספר הטלפון במחשב עם Chrome 93.

WebOTP API במחשב.

אני רוצה לנסות

דרישות מוקדמות

הדגמה (דמו)

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

  1. נכנסים לכתובת https://web-otp-demo.glitch.me/ במחשב. לוחצים על הלחצן אימות.
  2. שולחים למכשיר ה-Android את הודעת הטקסט המדויקת שהייתה במסך מהטלפון השני.
  3. כשהודעת ה-SMS נמסרת למכשיר Android, מופיעה תיבת דו-שיח שבה אתם נשאלים אם אתם רוצים לאמת את מספר הטלפון במחשב. לוחצים על Submit לאישור.
  4. במחשב, קוד האימות שנשלח למכשיר Android צריך להיות מלא באופן אוטומטי בשדה הקלט.

איך פועל WebOTP API

איך פועל WebOTP API:

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

הודעת ה-SMS צריכה להיות בפורמט של קודים חד-פעמיים שמוגדרים למקור.

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

שימו לב שהשורה האחרונה מכילה את המקור שחייב להיות לפניו עם @ ואחריו ה-OTP שלפניו מופיע #.

כשהודעת הטקסט מגיעה, מופיע סרגל מידע עם בקשה לאמת את מספר הטלפון. אחרי שהמשתמש לוחץ על הלחצן Verify, הדפדפן מעביר באופן אוטומטי את ה-OTP לאתר ופותר את הבעיה navigator.credentials.get(). אחרי זה האתר יוכל לחלץ את ה-OTP ולהשלים את תהליך האימות.

מידע נוסף זמין במאמר אימות מספרי טלפון באינטרנט באמצעות WebOTP API.

איך משתמשים ב-WebOTP API במחשב

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

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

תמיכה בדפדפן ויכולת פעולה הדדית

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

במנועי דפדפנים אחרים מלבד Chromium לא מטמיעים את WebOTP API, אבל ל-Safari יש את אותו פורמט SMS עם התמיכה ב-input[autocomplete="one-time-code"]. ב-Safari, כל עוד המשתמש הפעיל את הסנכרון האוטומטי של iMessage, ומגיעה הודעת SMS שמכילה קוד חד-פעמי למקור תואם ב-iOS או ב-iPadOS, ההודעה מועברת ל-macOS. אם המשתמשים מתמקדים בשדה להזנת קלט, Safari יציע את ה-OTP שעליו להזין.

משוב

חשוב לנו לקבל ממך משוב כדי לשפר את WebOTP API. נסה אותו וספר לנו מה דעתך.

תמונה מאת Luis Villasmil באתר UnFlood