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

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

Yi Gu
Yi Gu
Eiji Kitamura
Eiji Kitamura

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

מבוא

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

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

WebOTP API בפעולה.

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

WebOTP API במחשב.

רוצה לנסות?

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

הדגמה (דמו)

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

  1. נכנסים לכתובת https://web-otp-demo.glitch.me/ במחשב. לוחצים על הלחצן Verify.
  2. שולחים את הודעת הטקסט המדויקת שהופיעה במסך מטלפון שני למכשיר Android.
  3. כשהודעת ה-SMS תישלח למכשיר Android, תוצג תיבת דו-שיח עם שאלה אם רוצים לאמת את מספר הטלפון במחשב. מקישים על שליחה כדי לאשר.
  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 OS ב-Chrome.

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

משוב

המשוב שלכם עוזר לנו לשפר את WebOTP API. אפשר לנסות ולספר לנו מה דעתך.

תמונה של Luis Villasmil מ-Unsplash