ช่วยเหลือผู้ใช้เกี่ยวกับ OTP ที่ได้รับทาง SMS
WebOTP API คืออะไร
ปัจจุบันผู้คนส่วนใหญ่ในโลกมีอุปกรณ์เคลื่อนที่ และนักพัฒนาแอปมักใช้หมายเลขโทรศัพท์เป็นตัวระบุผู้ใช้บริการของตน
การยืนยันหมายเลขโทรศัพท์มีหลายวิธี แต่รหัสผ่านที่สามารถใช้งานได้เพียงครั้งเดียว (OTP) ที่สร้างขึ้นแบบสุ่มซึ่งส่งทาง SMS เป็นหนึ่งในวิธีที่พบบ่อยที่สุด การส่งรหัสนี้กลับไปยังเซิร์ฟเวอร์ของนักพัฒนาแอปแสดงให้เห็นถึงการควบคุมหมายเลขโทรศัพท์
แนวคิดนี้ถูกนำไปใช้งานในหลายสถานการณ์เพื่อให้บรรลุเป้าหมายต่อไปนี้
- หมายเลขโทรศัพท์เป็นตัวระบุผู้ใช้ เมื่อลงชื่อสมัครใช้บริการใหม่ เว็บไซต์บางแห่งจะขอหมายเลขโทรศัพท์แทนอีเมล และใช้หมายเลขดังกล่าวเป็นตัวระบุบัญชี
- การยืนยันแบบ 2 ขั้นตอน เมื่อลงชื่อเข้าใช้ เว็บไซต์จะขอรหัสแบบครั้งเดียวที่ส่งทาง SMS นอกเหนือจากรหัสผ่านหรือปัจจัยที่ทราบอื่นๆ เพื่อความปลอดภัยเพิ่มเติม
- การยืนยันการชำระเงิน เมื่อผู้ใช้ชำระเงิน การขอรหัสแบบครั้งเดียวที่ส่งทาง SMS จะช่วยยืนยันความตั้งใจของบุคคลนั้นได้
กระบวนการปัจจุบันทำให้เกิดความไม่สะดวกสําหรับผู้ใช้ การค้นหา OTP ในข้อความ SMS แล้วคัดลอกและวางลงในแบบฟอร์มนั้นยุ่งยาก ทำให้อัตรา Conversion ในเส้นทางของผู้ใช้ที่สําคัญลดลง การลดความซับซ้อนของกระบวนการนี้เป็นสิ่งที่นักพัฒนาซอฟต์แวร์รายใหญ่ทั่วโลกร้องขอมาอย่างยาวนาน Android มีAPI ที่ทําสิ่งๆ นี้โดยเฉพาะ iOS และ Safari เองก็รองรับเช่นกัน
WebOTP API ช่วยให้แอปของคุณได้รับข้อความที่มีรูปแบบพิเศษซึ่งเชื่อมโยงกับโดเมนของแอป จากข้อมูลนี้ คุณสามารถรับ OTP จากข้อความ SMS โดยใช้โปรแกรม และยืนยันหมายเลขโทรศัพท์ของผู้ใช้ได้ง่ายขึ้น
ดูของจริง
สมมติว่าผู้ใช้ต้องการยืนยันหมายเลขโทรศัพท์กับเว็บไซต์ เว็บไซต์จะส่ง SMS ไปยังผู้ใช้ และผู้ใช้จะป้อน OTP จากข้อความเพื่อยืนยันการเป็นเจ้าของหมายเลขโทรศัพท์
เมื่อใช้ WebOTP API ขั้นตอนเหล่านี้จะง่ายขึ้นสำหรับผู้ใช้เพียงแตะครั้งเดียว ดังที่แสดงในวิดีโอ เมื่อได้รับ SMS แผ่นงานด้านล่างจะปรากฏขึ้นและแจ้งให้ผู้ใช้ยืนยันหมายเลขโทรศัพท์ หลังจากคลิกปุ่มยืนยันในชีตด้านล่างแล้ว เบราว์เซอร์จะวาง OTP ลงในแบบฟอร์มและส่งแบบฟอร์มโดยที่ผู้ใช้ไม่จําเป็นต้องกดต่อไป
กระบวนการทั้งหมดแสดงเป็นแผนภาพในรูปภาพด้านล่าง
ลองใช้เวอร์ชันเดโมด้วยตัวคุณเอง โดยจะไม่ขอหมายเลขโทรศัพท์หรือส่ง SMS ไปยังอุปกรณ์ของคุณ แต่คุณสามารถส่ง SMS จากอุปกรณ์เครื่องอื่นได้โดยคัดลอกข้อความที่แสดงในเดโม ซึ่งใช้งานได้เนื่องจากไม่ว่าผู้ส่งจะเป็นใครก็ตามเมื่อใช้ WebOTP API
- ไปที่ https://web-otp.glitch.me ใน Chrome 84 ขึ้นไปบนอุปกรณ์ Android
- ส่งข้อความ 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 ขึ้นไปแนะนำให้ผู้ใช้ป้อน 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 จากผู้ใช้โดยตรง
คุณสามารถลองใช้เดโมได้ที่ 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 ที่ได้รับในอุปกรณ์อื่นๆ เพื่อช่วยเหลือผู้ใช้ในการยืนยันหมายเลขโทรศัพท์บนเดสก์ท็อปให้เสร็จสมบูรณ์
ความสามารถนี้กำหนดให้ผู้ใช้ลงชื่อเข้าใช้บัญชี 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
และแจ้งให้เราทราบว่าคุณใช้ฟีเจอร์นี้ที่ไหนและอย่างไร