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

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

Yi Gu

Eiji Kitamura

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

บทนำ

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

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

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

ลองเลย

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

• คอมพิวเตอร์เดสก์ท็อปหรือแล็ปท็อป (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. ส่ง SMS ที่ปรากฏบนหน้าจอจากโทรศัพท์เครื่องที่ 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

โปรดทราบว่าบรรทัดสุดท้ายมีต้นทางที่จะเชื่อมโยงอยู่ก่อนตามด้วย @ followed by the OTP preceded with a #

เมื่อข้อความมาถึง แถบข้อมูลจะปรากฏขึ้นและแจ้งให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์ หลังจากผู้ใช้คลิกปุ่ม Verify แล้ว เบราว์เซอร์จะส่งต่อ OTP ไปยังเว็บไซต์โดยอัตโนมัติและแก้ไข navigator.credentials.get() จากนั้นเว็บไซต์จะดึงข้อมูล OTP และดำเนินการตามกระบวนการยืนยันให้เสร็จสมบูรณ์

ดูข้อมูลเพิ่มเติมได้ที่ยืนยันหมายเลขโทรศัพท์บนเว็บด้วย WebOTP API

วิธีใช้ WebOTP API ในเดสก์ท็อป

การยืนยันหมายเลขโทรศัพท์ผ่าน SMS นั้นใช้กันอย่างแพร่หลายและใช้ได้กับแพลตฟอร์มต่างๆ Use Case ใดๆ ในอุปกรณ์เคลื่อนที่ควรใช้ได้กับอุปกรณ์เดสก์ท็อป

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

การรองรับเบราว์เซอร์และการทํางานร่วมกัน

ฟีเจอร์นี้ทำงานด้วยระบบการซิงค์ของ Chrome จึงใช้ได้กับ Chrome เท่านั้นในขณะนี้ ระบบไม่รองรับการรับและส่ง SMS ใน iOS หรือ iPadOS ใน Chrome

แม้ว่าเครื่องมือของเบราว์เซอร์อื่นๆ นอกเหนือจาก Chromium จะไม่ใช้ WebOTP API แต่ Safari จะใช้รูปแบบ SMS เดียวกันกับที่รองรับ input[autocomplete="one-time-code"] ใน Safari ตราบใดที่ผู้ใช้เปิดการซิงค์อัตโนมัติของ iMessage ไว้ เมื่อ SMS ที่มีรูปแบบรหัสแบบครั้งเดียวซึ่งเชื่อมโยงกับต้นทางมาถึงพร้อมกับต้นทางที่ตรงกันใน iOS หรือ iPadOS ระบบจะส่งต่อข้อความไปยัง macOS หากผู้ใช้โฟกัสที่ช่องป้อนข้อมูล Safari จะแนะนำ OTP ให้ผู้ใช้ป้อน

ความคิดเห็น

ความคิดเห็นของคุณมีคุณค่ามากในการช่วยเราปรับปรุง WebOTP API ให้ดีขึ้น ลองใช้แล้วบอกเราว่าคุณคิดอย่างไร

รูปภาพโดย Luis Villasmil ใน Unsplash