ยืนยันหมายเลขโทรศัพท์บนเดสก์ท็อปโดยใช้ WebOTP API

ตั้งแต่ Chrome 93 เป็นต้นไป เว็บไซต์สามารถยืนยันหมายเลขโทรศัพท์จาก Chrome บนเดสก์ท็อปได้

Yi Gu
Eiji Kitamura

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

เกริ่นนำ

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

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

การทำงานของ WebOTP API

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

WebOTP API บนเดสก์ท็อป

ลองเลย

ข้อกำหนดเบื้องต้น

  • เดสก์ท็อปหรือคอมพิวเตอร์แล็ปท็อป (Windows, Mac, Linux หรือ ChromeOS)
  • โทรศัพท์ Android ที่ใช้บริการ Google Play เวอร์ชัน 20.30.12 ขึ้นไป
  • Chrome 93 ขึ้นไป ทั้งในเดสก์ท็อปหรือแล็ปท็อปและอุปกรณ์เคลื่อนที่ Chrome 93 เบต้าพร้อมให้ใช้งานตั้งแต่ปลายเดือนกรกฎาคม 2021
  • คุณต้องลงชื่อเข้าใช้บัญชี Google เดียวกันทั้งใน Chrome บนเดสก์ท็อปและ Chrome บนอุปกรณ์เคลื่อนที่ ตัวอย่างเช่น ผ่าน https://myaccount.google.com/ หรือ https://mail.google.com โดยไม่จำเป็นต้องเปิดการซิงค์
  • บนอุปกรณ์ Android คุณต้องลงชื่อเข้าใช้ Android ผ่าน "การตั้งค่า -> Google"
  • Chrome 93 ต้องเป็นเบราว์เซอร์เริ่มต้นในอุปกรณ์ Android
  • Chrome 93 ต้องทำงานอยู่ในเบื้องหน้าหรือเบื้องหลังบนอุปกรณ์ Android

ข้อมูลประชากร

หากต้องการลองใช้ขั้นตอนการยืนยันหมายเลขโทรศัพท์ที่ราบรื่นบนเดสก์ท็อปด้วยตัวคุณเอง ให้ทำตามขั้นตอนต่อไปนี้

  1. ไปที่ https://web-otp-demo.glitch.me/ ในเดสก์ท็อป คลิกปุ่มยืนยัน
  2. ส่งข้อความเดียวกับที่อยู่บนหน้าจอจากโทรศัพท์เครื่องที่ 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 ที่นำหน้าด้วย #

เมื่อได้รับ SMS แถบข้อมูลจะปรากฏขึ้นและแจ้งให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์ หลังจากผู้ใช้คลิกปุ่ม 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 ใน Unsplash