ยืนยันหมายเลขโทรศัพท์บนเดสก์ท็อปโดยใช้ 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. ส่ง 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

โปรดสังเกตว่าบรรทัดสุดท้ายมีต้นทางที่จะเชื่อมโยงกับ @ ตามด้วย OTP ที่ขึ้นต้นด้วย #

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

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

ประเด็นสำคัญ: หากการสาธิตไม่ได้ผลสำหรับคุณ โปรดตรวจสอบสิ่งต่อไปนี้ 1. ตรวจสอบอีกครั้งว่าข้อกำหนดเบื้องต้นทั้งหมดเป็นไปตามข้อกำหนด 2. หากหมายเลขโทรศัพท์ของผู้ส่งอยู่ในข้อมูลรายชื่อติดต่อของผู้รับ SMS จะไม่ กล่องโต้ตอบ WebOTP เนื่องจาก การออกแบบ โปรดลองใช้หมายเลขโทรศัพท์อื่น 3. หากยังคงพบปัญหาอยู่ ให้เปิด chrome://sync-internals ใน Android Chrome ที่ได้รับ SMS และกด หยุดการซิงค์ ตามด้วย Request Start เพื่อเริ่มการซิงค์อีกครั้ง

วิธีใช้ 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 ในวันที่ หน้าจอแนะนํา