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

עזרה למשתמשים עם סיסמאות חד-פעמיות שהתקבלו ב-SMS

Eiji Kitamura

מה זה WebOTP API?

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

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

הרעיון הזה כבר נפרס בתרחישים רבים כדי להשיג:

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

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

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

ראו הדגמה

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

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

התהליך כולו מתואר בתמונה למטה.

תרשים WebOTP API

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

  1. עוברים אל https://web-otp.glitch.me ב-Chrome 84 או מאוחר יותר במכשיר Android.
  2. שלח לטלפון שלך את הודעת הטקסט הבאה ב-SMS מטלפון אחר.
Your OTP is: 123456.

@web-otp.glitch.me #12345

האם קיבלת את הודעת ה-SMS והופיעה בקשה להזין את הקוד באזור הקלט? כך פועל ה-API של WebOTP עבור המשתמשים.

השימוש ב-WebOTP API מורכב משלושה חלקים:

  • תג <input> עם הערות מתאימות
  • JavaScript באפליקציית האינטרנט שלך
  • טקסט הודעה מעוצב שנשלח באמצעות SMS.

קודם אני אסגור את התג <input>.

הוספת הערות לתג <input>

WebOTP עצמו פועל ללא הערת HTML, אבל תאימות, מומלץ מאוד להוסיף את autocomplete="one-time-code" אל התג <input> שבו אתם מצפים שהמשתמש יזין OTP.

הפעולה הזו תאפשר ל-Safari 14 ואילך להציע למשתמש למלא באופן אוטומטי את <input> שדה עם OTP כשהם מקבלים SMS בפורמט שמתואר בעיצוב הודעת ה-SMS למרות שהוא לא תומך ב-WebOTP.

HTML

<form>
  <input autocomplete="one-time-code" required/>
  <input type="submit">
</form>

שימוש ב-WebOTP API

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

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    const ac = new AbortController();
    const form = input.closest('form');
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.log(err);
    });
  });
}

זיהוי תכונות

זיהוי התכונות זהה להרבה ממשקי API אחרים. האזנה ל: האירוע DOMContentLoaded ימתין עד שעץ ה-DOM יהיה מוכן לשליחת שאילתה.

JavaScript

if ('OTPCredential' in window) {
  window.addEventListener('DOMContentLoaded', e => {
    const input = document.querySelector('input[autocomplete="one-time-code"]');
    if (!input) return;
    …
    const form = input.closest('form');
    …
  });
}

עיבוד ה-OTP

ה-WebOTP API עצמו פשוט מספיק. כדאי להשתמש navigator.credentials.get() כדי לקבל OTP. ל-WebOTP יש אפשרות חדשה של otp לשיטה הזו. יש בו רק מאפיין אחד: transport, שהערך שלו חייב להיות מערך עם המחרוזת 'sms'.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

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

התוכן של האובייקט OTPCredential שהתקבל

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

לאחר מכן מעבירים את ערך ה-OTP לשדה <input>. שליחה ישירה של הטופס יבטל את השלב שמחייב את המשתמש להקיש על לחצן.

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

ביטול ההודעה

אם המשתמש מזין באופן ידני OTP ושולח את הטופס, אפשר לבטל את הקריאה get() באמצעות מופע AbortController באובייקט options.

JavaScript 

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

עיצוב הודעת ה-SMS

ה-API עצמו אמור להיראות פשוט מספיק, אבל יש כמה דברים שכדאי לעשות לדעת לפני שמשתמשים בו. ההודעה חייבת להישלח אחרי בוצעה שיחה אל navigator.credentials.get() וצריך לקבל אותה במכשיר שבה נקרא get(). לבסוף, ההודעה חייבת להיכתב בהתאם להנחיות הבאות: format:

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

לדוגמה:

Your OTP is: 123456.

@www.example.com #123456

הנה כמה דוגמאות לתוויות לא תקינות:

דוגמה לטקסט שגוי של SMS למה זה לא עובד
Here is your code for @example.com #123456 @ צפוי להיות התו הראשון בשורה האחרונה.
Your code for @example.com is #123456 @ צפוי להיות התו הראשון בשורה האחרונה.
Your verification code is 123456

@example.com\t#123456		 צפוי רווח יחיד בין @host ל-#code.
Your verification code is 123456

@example.com  #123456		 צפוי רווח יחיד בין @host ל-#code.
Your verification code is 123456

@ftp://example.com #123456		 לא ניתן לכלול את סכימת כתובת ה-URL.
Your verification code is 123456

@https://example.com #123456		 לא ניתן לכלול את סכימת כתובת ה-URL.
Your verification code is 123456

@example.com:8080 #123456		 לא ניתן לכלול את היציאה.
Your verification code is 123456

@example.com/foobar #123456		 לא ניתן לכלול נתיב.
Your verification code is 123456

@example .com #123456		 אין רווחים לבנים בדומיין.
Your verification code is 123456

@domain-forbiden-chars-#%/:<>?@[] #123456		 אין תווים אסורים בדומיין.
@example.com #123456

Mambo Jumbo		 השורה האחרונה צפויה להיות @host ו-#code.
@example.com #123456

App hash #oudf08lkjsdf834		 השורה האחרונה צפויה להיות @host ו-#code.
Your verification code is 123456

@example.com 123456		 חסר #.
Your verification code is 123456

example.com #123456		 חסר @.
Hi mom, did you receive my last text חסרים @ ו#.

הדגמות

אפשר לנסות הודעות שונות עם ההדגמה: https://web-otp.glitch.me

אפשר גם לפצל אותו וליצור את הגרסה הרצויה: https://glitch.com/edit/#!/web-otp.

שימוש ב-WebOTP מ-iframe ממקורות שונים

בדרך כלל, הזנת סיסמה חד-פעמית של SMS ל-iframe ממקורות שונים משמשת לתשלום אישור, במיוחד עם 3D Secure. שימוש בפורמט המשותף מסגרות iframe ממקורות שונים, WebOTP API מספק OTPs שקשורים למקורות בתוך מקורות. לדוגמה:

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

כדי להשתמש ב-WebOTP API מתוך iframe ממקורות שונים, צריך לבצע שתי פעולות:

  • יש להוסיף הערות גם למקור המסגרת העליונה וגם למקור ה-iframe בטקסט של ה-SMS הודעה.
  • הגדרת מדיניות הרשאות כדי לאפשר ל-iframe ממקורות שונים לקבל OTP ישירות מהמשתמש.
WebOTP API בתוך iframe בפעולה.

אפשר לנסות את ההדגמה בכתובת https://web-otp-iframe-demo.stackblitz.io.

הוספת הערות למקורות קשורים להודעת הטקסט ב-SMS

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

Your verification code is 123456

@shop.example #123456 @bank.exmple

הגדרה של מדיניות ההרשאות

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

דרך כותרת HTTP:

Permissions-Policy: otp-credentials=(self "https://bank.example")

באמצעות מאפיין allow של iframe:

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

דוגמאות נוספות לציון של מדיניות הרשאות

שימוש ב-WebOTP במחשב

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

WebOTP API במחשב.

היכולת הזו מחייבת את המשתמש להיכנס לאותו חשבון Google בשני המכשירים. Chrome למחשב ו-Android ל-Chrome.

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

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

שאלות נפוצות

תיבת הדו-שיח לא מופיעה למרות ששלחתי הודעה בפורמט המתאים. מה השתבש?

יש כמה נקודות שכדאי לשים לב אליהן כשבודקים את ה-API:

  • אם מספר הטלפון של השולח כלול ברשימת אנשי הקשר של הנמען, ה-API לא יופעל בגלל העיצוב של ה-SMS User Consent API, שהוא הבסיס אליו.
  • אם אתם משתמשים בפרופיל עבודה במכשיר Android שלכם, ו-WebOTP כן לא עובד, נסה להתקין את Chrome ולהשתמש בו בפרופיל האישי שלך במקום זאת (כלומר, אותו פרופיל שבו אתם מקבלים הודעות SMS).

בדקו שוב את הפורמט כדי לראות אם הפורמט של הודעת ה-SMS תקין.

האם ה-API הזה תואם לדפדפנים שונים?

החל מ-iOS 14, Chromium ו-WebKit הסכימו על הפורמט של הודעות טקסט ב-SMS וApple הודיעה על תמיכה של Safari בו ו-macOS Big Sur. אמנם Safari לא תומך ב-WebOTP JavaScript API, אבל הוספת הערות לרכיב input עם autocomplete=["one-time-code"], ברירת המחדל המקלדת מציעה באופן אוטומטי שהזנת את הסיסמה החד-פעמית (OTP) אם הודעת ה-SMS תואמת עם הפורמט.

האם בטוח להשתמש ב-SMS כאמצעי אימות?

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

איפה אפשר לדווח על באגים בהטמעה של Chrome?

מצאת באג בהטמעה של Chrome?

  • דיווח על באג ב- https://new.crbug.com. כדאי לכלול כמה שיותר פרטים, הוראות פשוטות לשחזור החשבון מגדירים את Components (רכיבים) ל-Blink>WebOTP.

איך אפשר לעזור לתכונה הזו?

האם בכוונתך להשתמש ב-WebOTP API? התמיכה הציבורית שלך עוזרת לנו לקבוע סדר עדיפויות וגם מראה לספקי דפדפנים אחרים עד כמה זה קריטי לתמוך בהם. שליחת ציוץ אל @ChromiumDev בעזרת hashtag #WebOTP וספר לנו איפה אתה משתמש בו ובאיזה אופן.

משאבים