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

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

Eiji Kitamura

WebOTP API คืออะไร

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

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

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

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

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

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

ดูของจริง

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

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

กระบวนการทั้งหมดแสดงเป็นแผนภาพในรูปภาพด้านล่าง

แผนภาพ WebOTP API

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

  1. ไปที่ https://web-otp.glitch.me ใน Chrome 84 ขึ้นไปบนอุปกรณ์ Android
  2. ส่งข้อความ SMS ต่อไปนี้จากโทรศัพท์เครื่องอื่นไปยังโทรศัพท์ของคุณ
Your OTP is: 123456.

@web-otp.glitch.me #123456

คุณได้รับ 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 เองควรดูเข้าใจง่าย แต่คุณควรทราบข้อมูลบางอย่างก่อนใช้งาน ข้อความต้องส่งหลังจากเรียกใช้ 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 แบบข้ามต้นทาง

โดยทั่วไป การป้อน OTP ทาง SMS ลงใน iframe ข้ามแหล่งที่มาจะใช้สำหรับการยืนยันการชำระเงิน โดยเฉพาะกับ 3D Secure WebOTP API มีรูปแบบทั่วไปที่รองรับ iframe แบบข้ามต้นทาง ซึ่งจะส่ง OTP ที่เชื่อมโยงกับต้นทางที่ฝังอยู่ เช่น

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

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

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

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

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

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

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

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

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

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

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

หากพบข้อบกพร่องในการใช้งาน Chrome

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

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

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

แหล่งข้อมูล