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

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

מה זה WebOTP API?

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

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

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

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

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

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

ראו הדגמה

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

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

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

תרשים של 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 וראית בקשה להזין את הקוד באזור הקלט? כך ה-WebOTP API פועל עבור המשתמשים.

השימוש ב-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(). לבסוף, ההודעה חייבת להיות בפורמט הבא:

  • ההודעה מתחילה בטקסט (אופציונלי) שקריא לבני אדם, שמכיל מחרוזת אלפאנומרית של ארבעה עד עשרה תווים, עם לפחות מספר אחד שיוצא מהשורה האחרונה של כתובת ה-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. ל-WebOTP API יש פורמט נפוץ לתמיכה במסגרות iframe ממקורות שונים, כך שמפתחות OTP מגיעים למקורות בתוך עץ. לדוגמה:

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

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

  • בהודעת הטקסט ב-SMS, מציינים גם את המקור של המסגרת העליונה וגם את מקור ה-iframe.
  • צריך להגדיר מדיניות הרשאות כדי לאפשר ל-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 במחשב וגם ב-Chrome ל-Android.

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

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

שאלות נפוצות

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

יש כמה אזהרות שצריך לשים לב אליהן כשבודקים את ה-API:

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

צריך לחזור לפורמט כדי לראות אם ה-SMS הוא בפורמט הנכון.

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

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

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

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

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

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

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

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

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

משאבים