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

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

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

วันที่
แผนภาพ WebOTP API

ลองดูการสาธิตด้วยตัวเอง โดยจะไม่ขอ หมายเลขโทรศัพท์หรือส่ง 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 ขึ้นไปแนะนำให้ผู้ใช้ป้อน <input> โดยอัตโนมัติ ด้วย OTP เมื่อได้รับ 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 ใหม่ลงในเมธอดนั้น แต่มีเพียง พร็อพเพอร์ตี้ 1 รายการ: 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 มีรูปแบบที่ใช้กันโดยทั่วไปเพื่อรองรับ iframe แบบข้ามต้นทาง WebOTP API จะส่ง 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 เพื่อหลีกเลี่ยงการดำเนินการที่ไม่ได้ตั้งใจ พฤติกรรมของคุณ โดยทั่วไป มี 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 บนเดสก์ท็อปและ Android Chrome

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

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

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

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

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

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

โปรดกลับมาตรวจสอบรูปแบบเพื่อดูว่า SMS อยู่ในรูปแบบที่ถูกต้องหรือไม่

API นี้เข้ากันได้กับเบราว์เซอร์ต่างๆ หรือไม่

Chromium และ WebKit เห็นพ้องกันในเรื่องรูปแบบข้อความ SMS และ Apple ได้ประกาศการรองรับ Safari ของ 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. ระบุรายละเอียดให้มากที่สุดเท่าที่ทำได้ วิธีการง่ายๆ ในการทำซ้ำ และ ตั้งค่า Components เป็น Blink>WebOTP

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

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

แหล่งข้อมูล