簡訊動態密碼表單最佳做法

瞭解如何最佳化簡訊動態密碼表單，並提升使用者體驗。

Eiji Kitamura

要求使用者提供透過簡訊傳送的動態密碼 (動態密碼) 是常見的行為 確認使用者電話號碼的方式簡訊動態密碼的用途如下：

  • 雙重驗證。除了使用者名稱和密碼之外， 主要用來表示帳戶是由收到 簡訊動態密碼。
  • 驗證電話號碼。部分服務會使用電話號碼做為使用者的 做為主要 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"」實際運作情形。

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，請參閱在網路上驗證電話號碼 使用 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。