瞭解如何最佳化簡訊動態密碼表單，並提升使用者體驗。
要求使用者提供透過簡訊傳送的動態密碼 (動態密碼) 是常見的行為 確認使用者電話號碼的方式簡訊動態密碼的用途如下：
- 雙重驗證。除了使用者名稱和密碼之外， 主要用來表示帳戶是由收到 簡訊動態密碼。
- 驗證電話號碼。部分服務會使用電話號碼做為使用者的 做為主要 ID。在這類服務中，使用者可以輸入自己的電話號碼和 透過簡訊接收動態密碼以證明身分。有時會與 PIN 碼合併 來建立雙重驗證
- 帳戶救援。當使用者失去帳戶存取權時 可用來復原資料傳送電子郵件至他們註冊的電子郵件地址，或 透過簡訊動態密碼傳送至手機號碼是常見的帳戶救援方式。
- 付款確認 在付款系統上，部分銀行或信用卡 基於安全考量，發卡機構會要求付款人進行額外的驗證。 簡訊動態密碼經常用於上述目的。
這篇文章說明針對上述用途建立簡訊動態密碼表單的最佳做法 用途
檢查清單
如要提供最佳的簡訊動態密碼使用體驗，請按照下列步驟操作：
- 搭配以下項目使用
<input>元素：type="text"inputmode="numeric"autocomplete="one-time-code"
- 使用
@BOUND_DOMAIN #OTP_CODE做為動態密碼簡訊的最後一行。 - 使用 WebOTP API。
使用 <input> 元素
使用含有 <input> 元素的表單是最重要的最佳做法
可以追蹤，因為該模組適用於所有瀏覽器。即使
這篇貼文不適用於某些瀏覽器，但使用者仍可輸入及提交動態密碼
<form action="/verify-otp" method="POST">
<input type="text"
inputmode="numeric"
autocomplete="one-time-code"
pattern="\d{6}"
required>
</form>
以下提供幾個建議，可確保輸入欄位能發揮最佳成效 瀏覽器功能
type="text"
由於 OTP 通常為 5 或 6 位數字
輸入欄位的 type="number" 可能會改變行動裝置外觀，因此看起來可能符合直覺
只用鍵盤轉成數字。我們不建議這麼做，因為瀏覽器預期
輸入欄位當做可計數數字，而不是由多個數字組成的序列
否則可能會導致非預期的行為使用 type="number" 會造成上下起伏
按鈕會顯示在輸入欄位旁邊；按下這些按鈕。
這項數值會遞增或遞減，但可能會移除前面的零。
請改用 type="text"。這項操作不會讓行動鍵盤變成數字
但沒關係，因為下一個使用 inputmode="numeric" 的提示
該工作。
inputmode="numeric"
使用 inputmode="numeric"
，將行動鍵盤改為只顯示數字。
部分網站也會使用 type="tel" 做為動態密碼輸入欄位，原因是
會在發生以下情況時，只將行動鍵盤數字轉成數字 (包括 * 和 #)
焦點。這項入侵手法過去的時間是 inputmode="numeric"
無法受到廣泛支援自 Firefox 開始支援
inputmode="numeric",
也不必使用語意錯誤的 type="tel" 駭客。
autocomplete="one-time-code"
autocomplete敬上
屬性可讓開發人員指定瀏覽器
系統必須提供自動完成協助，並向瀏覽器通知
此欄位中預期的資訊類型
透過 autocomplete="one-time-code"，當使用者在
表單開啟時，作業系統將剖析簡訊的動態密碼
鍵盤會提供動態密碼建議，讓使用者自行輸入。這項功能僅適用於 Safari 12 和
會在 iOS、iPadOS 和 macOS 上執行，但我們強烈建議您使用
輕鬆提升這些平台上的簡訊動態密碼使用體驗。
autocomplete="one-time-code" 可改善使用者體驗，但您可以提供更多功能
方法只要確保簡訊符合來源收到的訊息，
格式。
設定簡訊文字格式
在輸入動態密碼時，根據 透過簡訊傳送的一次性代碼 規格。
格式規則十分簡單：使用接收者網域完成簡訊
前面加上 @，以及前面加上 # 的動態密碼。
例如：
Your OTP is 123456
@web-otp.glitch.me #123456
針對動態密碼訊息使用標準格式進行擷取 更加簡單可靠將動態密碼與 讓網站更難誘騙使用者提供程式碼給惡意網站。
採用這種格式有幾項好處：
- 動態密碼將繫結至網域。如果使用者位於 則系統不會顯示動態密碼建議。 也能降低遭到網路釣魚攻擊和潛在帳戶盜用的風險。
- 現在瀏覽器成功擷取動態密碼時，不需要特別啟用 神祕且不雅的經驗法則。
如果網站使用 autocomplete="one-time-code"，且 Safari 是 iOS 14 以上版本
會根據上述規則提供動態密碼建議。
此外，這種簡訊格式對 Safari 以外的瀏覽器也有所助益。Chrome、Opera
Android 和 Vivaldi 也支援
WebOTP API (但不透過 autocomplete="one-time-code")。
使用 WebOTP API
WebOTP API 可用來存取動態密碼
傳送給您。撥打電話
navigator.credentials.get()敬上
otp 類型為 (OTPCredential)，其中 transport 包含 sms、網站
會等待符合來源繫結的一次性代碼的簡訊
並授予使用者存取權將動態密碼傳遞到 JavaScript 後
網站可以用表單形式使用，或以 POST 直接的方式傳送至伺服器
navigator.credentials.get({
otp: {transport:['sms']}
})
.then(otp => input.value = otp.code);
想進一步瞭解如何使用 WebOTP API，請參閱在網路上驗證電話號碼
使用 WebOTP API，或複製並貼上下列程式碼片段。(廠牌
確認 <form> 元素已正確設定 action 和 method 屬性)。
// Feature detection
if ('OTPCredential' in window) {
window.addEventListener('DOMContentLoaded', e => {
const input = document.querySelector('input[autocomplete="one-time-code"]');
if (!input) return;
// Cancel the WebOTP API if the form is submitted manually.
const ac = new AbortController();
const form = input.closest('form');
if (form) {
form.addEventListener('submit', e => {
// Cancel the WebOTP API.
ac.abort();
});
}
// Invoke the WebOTP API
navigator.credentials.get({
otp: { transport:['sms'] },
signal: ac.signal
}).then(otp => {
input.value = otp.code;
// Automatically submit the form when an OTP is obtained.
if (form) form.submit();
}).catch(err => {
console.log(err);
});
});
}
Jason Leung 提供的相片： Unsplash。