ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย WebOTP API

ช่วยเหลือผู้ใช้เกี่ยวกับ OTP ที่ได้รับผ่าน SMS

WebOTP API คืออะไร

ทุกวันนี้ คนส่วนใหญ่ในโลกเป็นเจ้าของอุปกรณ์เคลื่อนที่ และนักพัฒนาซอฟต์แวร์มักจะใช้หมายเลขโทรศัพท์เป็นตัวระบุสำหรับผู้ใช้บริการของตน

มีหลายวิธีในการยืนยันหมายเลขโทรศัพท์ แต่รหัสผ่านที่ใช้งานได้เพียงครั้งเดียว (OTP) ที่สร้างขึ้นแบบสุ่มซึ่งส่งทาง SMS เป็นวิธีหนึ่งที่พบบ่อยที่สุด การส่งโค้ดนี้กลับไปยังเซิร์ฟเวอร์ของนักพัฒนาซอฟต์แวร์แสดงถึงการควบคุมหมายเลขโทรศัพท์

แนวคิดนี้มีการนำไปใช้แล้วในหลายๆ สถานการณ์เพื่อให้บรรลุผลสิ่งต่อไปนี้

• หมายเลขโทรศัพท์เป็นตัวระบุสำหรับผู้ใช้ เมื่อลงชื่อสมัครใช้บริการใหม่ บางเว็บไซต์จะขอหมายเลขโทรศัพท์แทนที่อยู่อีเมล และใช้รหัสดังกล่าวเป็นตัวระบุบัญชี
• การยืนยันแบบ 2 ขั้นตอน เมื่อลงชื่อเข้าใช้ เว็บไซต์จะขอให้ป้อนรหัสแบบครั้งเดียวที่ส่งทาง SMS นอกเหนือจากรหัสผ่านหรือปัจจัยความรู้อื่นเพื่อเพิ่มความปลอดภัย
• การยืนยันการชำระเงิน เมื่อผู้ใช้ชำระเงิน การขอให้ป้อนรหัสแบบครั้งเดียวที่ส่งทาง SMS จะช่วยยืนยันเจตนาของผู้ใช้ได้

กระบวนการในปัจจุบันสร้างความยุ่งยากให้แก่ผู้ใช้ การค้นหา OTP ในข้อความ SMS แล้วคัดลอกและวางลงในแบบฟอร์มเป็นเรื่องยุ่งยาก ลดอัตรา Conversion ในเส้นทางของผู้ใช้ที่สำคัญ การผ่อนปรนนี้เป็นคำขอเว็บจากนักพัฒนาซอฟต์แวร์รายใหญ่ที่สุดของโลก มาอย่างยาวนาน Android มี API ที่ช่วยในเรื่องนี้ เช่นเดียวกับ iOS และ Safari

WebOTP API ช่วยให้แอปของคุณรับข้อความที่มีการจัดรูปแบบพิเศษซึ่งเชื่อมโยงกับโดเมนของแอปคุณ จากจุดนี้ คุณสามารถรับ OTP ทางโปรแกรมจากข้อความ SMS และยืนยันหมายเลขโทรศัพท์สำหรับผู้ใช้ได้ง่ายขึ้น

ดูของจริง

สมมติว่าผู้ใช้ต้องการยืนยันหมายเลขโทรศัพท์กับเว็บไซต์ เว็บไซต์ส่ง SMS ไปยังผู้ใช้ผ่าน SMS และให้ผู้ใช้ป้อน OTP จากข้อความเพื่อยืนยันความเป็นเจ้าของหมายเลขโทรศัพท์

WebOTP API ช่วยให้ผู้ใช้ทำตามขั้นตอนเหล่านี้ได้ง่ายๆ ด้วยการแตะเพียงครั้งเดียวตามที่แสดงในวิดีโอ เมื่อได้รับข้อความดังกล่าว Bottom Sheet จะปรากฏขึ้นและแจ้งให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์ หลังจากคลิกปุ่มยืนยันใน Bottom Sheet เบราว์เซอร์จะวาง OTP ลงในแบบฟอร์ม และส่งแบบฟอร์มโดยที่ผู้ใช้ไม่จำเป็นต้องกดต่อไป

ขั้นตอนทั้งหมดจะแสดงเป็นแผนภาพในรูปภาพด้านล่าง

ลองใช้งานเดโมด้วยตัวคุณเอง ระบบจะไม่ขอหมายเลขโทรศัพท์หรือส่ง 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 ประกอบด้วย 3 ส่วนต่อไปนี้

• แท็ก <input> ที่มีคำอธิบายประกอบถูกต้อง
• JavaScript ในเว็บแอปของคุณ
• ข้อความที่จัดรูปแบบแล้วซึ่งส่งผ่าน SMS

ฉันจะอธิบายเรื่องแท็ก <input> ก่อน

ใส่คำอธิบายประกอบในแท็ก <input>

WebOTP ทำงานโดยไม่ต้องมีคำอธิบายประกอบ HTML แต่สำหรับความเข้ากันได้กับเบราว์เซอร์ต่างๆ เราขอแนะนำให้คุณเพิ่ม autocomplete="one-time-code" ลงในแท็ก <input> ที่คุณต้องการให้ผู้ใช้ป้อน OTP

การดำเนินการนี้จะอนุญาตให้ Safari 14 ขึ้นไปแนะนำให้ผู้ใช้ป้อน OTP ในช่อง <input> โดยอัตโนมัติเมื่อได้รับ 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 เองควรดูเรียบง่าย แต่มี 2-3 สิ่งที่คุณควรทราบก่อนที่จะใช้งาน ข้อความต้องส่งหลังจากที่มีการเรียกใช้ navigator.credentials.get() และต้องได้รับข้อความนั้นในอุปกรณ์ที่มีการเรียกใช้ get() สุดท้าย ข้อความต้องเป็นไปตามการจัดรูปแบบต่อไปนี้

• ข้อความจะขึ้นต้นด้วย (ไม่บังคับ) ข้อความที่มนุษย์อ่านได้ ซึ่งประกอบด้วยสตริงอักขระที่เป็นตัวอักษรและตัวเลขคละกัน 4-10 ตัว โดยมีตัวเลขอย่างน้อย 1 ตัวอยู่ในบรรทัดสุดท้ายสำหรับ 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	คาดว่าจะมีช่องว่าง 1 ช่องระหว่าง @host ถึง #code
Your verification code is 123456 @example.com  #123456	คาดว่าจะมีช่องว่าง 1 ช่องระหว่าง @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 OTP ลงใน iframe แบบข้ามต้นทางจะใช้เพื่อยืนยันการชำระเงิน โดยเฉพาะกับ 3D Secure WebOTP API มีรูปแบบ OTP ที่ผูกกับต้นทางแบบซ้อนหลายแหล่งเพื่อรองรับ iframe แบบข้ามต้นทาง ตัวอย่างเช่น

• ผู้ใช้ไปที่ shop.example เพื่อซื้อรองเท้าด้วยบัตรเครดิต
• หลังจากป้อนหมายเลขบัตรเครดิตแล้ว ผู้ให้บริการชำระเงินแบบผสานรวมจะแสดงแบบฟอร์มจาก bank.example ใน iframe ที่ขอให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์เพื่อการชำระเงินที่รวดเร็ว
• bank.example จะส่ง SMS ที่มี OTP ให้กับผู้ใช้เพื่อให้ป้อน OTP เพื่อยืนยันตัวตน

หากต้องการใช้ WebOTP API จากภายใน iframe แบบข้ามต้นทาง คุณจะต้องทำ 2 สิ่งต่อไปนี้

• ใส่คำอธิบายประกอบทั้งต้นทางระดับบนสุดและต้นทาง iframe ในข้อความ SMS
• กำหนดค่านโยบายสิทธิ์เพื่ออนุญาตให้ iframe แบบข้ามต้นทางรับ OTP จากผู้ใช้โดยตรง

คุณลองใช้การสาธิตได้ที่ 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-credentials เพื่อหลีกเลี่ยงลักษณะการทำงานที่ไม่ตั้งใจ โดยทั่วไป มี 2 วิธีที่จะบรรลุเป้าหมายนี้ ได้แก่

ผ่านส่วนหัว HTTP

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

ผ่านแอตทริบิวต์ iframe allow:

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

ดูตัวอย่างเพิ่มเติมเกี่ยวกับวิธีระบุนโยบายสิทธิ์

ใช้ WebOTP บนเดสก์ท็อป

ใน Chrome WebOTP รองรับการฟัง SMS ที่ได้รับในอุปกรณ์เครื่องอื่น เพื่อช่วยให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์ในเดสก์ท็อปเสร็จสมบูรณ์

ความสามารถนี้กำหนดให้ผู้ใช้ลงชื่อเข้าใช้บัญชี Google เดียวกันทั้งใน Chrome สำหรับเดสก์ท็อปและ Android Chrome

นักพัฒนาซอฟต์แวร์เพียงแค่ใช้ WebOTP API ในเว็บไซต์บนเดสก์ท็อป เช่นเดียวกับที่ทำในเว็บไซต์บนอุปกรณ์เคลื่อนที่ แต่ไม่จำเป็นต้องใช้เคล็ดลับพิเศษใดๆ

ดูรายละเอียดเพิ่มเติมที่ยืนยันหมายเลขโทรศัพท์ในเดสก์ท็อปโดยใช้ WebOTP API

คำถามที่พบบ่อย

กล่องโต้ตอบไม่ปรากฏขึ้นแม้ว่าฉันกำลังส่งข้อความที่จัดรูปแบบถูกต้องแล้ว เกิดปัญหาอะไรขึ้น

มีข้อควรระวัง 2 ข้อเมื่อทดสอบ API ดังนี้

• หากหมายเลขโทรศัพท์ของผู้ส่งรวมอยู่ในรายชื่อติดต่อของผู้รับ ระบบจะไม่เรียกใช้ API นี้เนื่องจากการออกแบบ API คำยินยอมของผู้ใช้ SMS ที่เกี่ยวข้อง
• หากคุณใช้โปรไฟล์งานในอุปกรณ์ 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 ตรวจสอบสิทธิ์จะปลอดภัยไหม

แม้ว่า SMS OTP จะมีประโยชน์ในการยืนยันหมายเลขโทรศัพท์เมื่อให้หมายเลขครั้งแรก แต่การยืนยันหมายเลขโทรศัพท์ผ่าน SMS จะต้องใช้ในการตรวจสอบสิทธิ์ซ้ำเนื่องจากผู้ให้บริการอาจลักลอบใช้หมายเลขโทรศัพท์และนำกลับมาใช้ใหม่ได้ WebOTP เป็นกลไกการกู้คืนและการตรวจสอบสิทธิ์ซ้ำที่สะดวก แต่บริการควรรวมกับปัจจัยอื่นๆ ด้วย เช่น การทดสอบความรู้ หรือใช้ API การตรวจสอบสิทธิ์ผ่านเว็บเพื่อการตรวจสอบสิทธิ์อย่างเข้มงวด

ฉันจะรายงานข้อบกพร่องในการใช้งาน Chrome ได้ที่ใด

คุณพบข้อบกพร่องในการใช้งาน Chrome หรือไม่

• รายงานข้อบกพร่องที่ https://new.crbug.com ระบุรายละเอียดให้มากที่สุดเท่าที่จะทำได้ วิธีการง่ายๆ ในการทำซ้ำ และ ตั้งค่าคอมโพเนนต์เป็น Blink>WebOTP

ฉันจะช่วยฟีเจอร์นี้ได้อย่างไร

คุณกำลังวางแผนจะใช้ WebOTP API ไหม การสนับสนุนแบบสาธารณะของคุณจะช่วยให้เราจัดลำดับความสำคัญของฟีเจอร์ และแสดงให้ผู้ให้บริการเบราว์เซอร์รายอื่นๆ เห็นว่าการสนับสนุนฟีเจอร์ดังกล่าวสำคัญเพียงใด ส่งทวีตไปที่ @ChromiumDev โดยใช้แฮชแท็ก #WebOTP และบอกให้เราทราบว่าคุณใช้แฮชแท็กนี้ที่ไหนและอย่างไร

แหล่งข้อมูล

• แนวทางปฏิบัติแนะนำสำหรับแบบฟอร์ม SMS OTP
• ยืนยันหมายเลขโทรศัพท์บนเดสก์ท็อปโดยใช้ WebOTP API
• กรอกแบบฟอร์ม OTP ภายใน iframe แบบข้ามต้นทางด้วย WebOTP API
• Yahoo! การตรวจสอบสิทธิ์โดยไม่ต้องใช้รหัสผ่านของ JAPAN ลดการสอบถามลงได้ 25% ทำให้เวลาลงชื่อเข้าใช้เร็วขึ้น 2.6 เท่า