使用 WebOTP API 驗證網路上的電話號碼

協助透過簡訊接收動態密碼的使用者

Eiji Kitamura

什麼是 WebOTP API？

現今，世界各地大多數的使用者都有自己的行動裝置，而開發人員 通常會使用電話號碼做為服務使用者的 ID。

驗證電話號碼的方法有很多種，但系統會隨機產生 簡訊傳送的動態密碼是最常見的密碼之一。正在傳送這組驗證碼 返回開發人員伺服器示範電話號碼的控制。

這個想法已用於許多情境中，目的是：

• 以電話號碼做為使用者的 ID。註冊新的帳戶時 有些網站會要求提供電話號碼，而不是電子郵件地址， 做為帳戶 ID
• 兩步驟驗證。網站會在登入時要求你輸入一次性驗證碼 透過簡訊，以密碼或其他知識因素傳送 安全性。
• 確認付款：使用者在付款時，要求 透過簡訊傳送的一次性驗證碼，有助於驗證來電者的意圖。

目前的程序會造成使用者的困擾，尋找簡訊中的動態密碼 訊息，複製並貼到表單中 的關鍵使用者歷程中的轉換率。簡化記錄和我們長期以來的成就 許多全球大型開發商表示希望建立網路廣告要求Android 提供與這項目標完全相同的 API。不過 iOS 版 和 Safari。

WebOTP API 可讓您的應用程式接收 要在您的應用程式網域中運作。這樣一來，你就能透過程式輔助方式透過簡訊取得動態密碼 ，方便使用者傳送訊息及驗證電話號碼。

實例觀摩

假設使用者想透過網站驗證電話號碼。網站 傳送簡訊給使用者，使用者輸入動態密碼 訊息，驗證電話號碼擁有權。

使用 WebOTP API 時，使用者只要輕觸一下就能輕鬆完成這些步驟， 各 API 的運作方式收到簡訊時，會彈出底部功能表 ，並提示使用者驗證電話號碼。點選「驗證」後 按鈕，瀏覽器就會將動態密碼貼到表單中 使用者不必按下 [Continue] (繼續)，即可提交表單。

下圖說明整個程序。

歡迎親自體驗示範模式。不會要求 手機號碼或傳送簡訊到您的裝置，但您可以從 複製示範中顯示的文字，藉此在其他裝置上進行。這麼做很有效 不論寄件者是誰使用 WebOTP API。

1. 使用 Chrome 第 84 版前往 https://web-otp.glitch.me，或 和日後發布的訊息
2. 透過另一支手機傳送以下簡訊簡訊給您的手機。

Your OTP is: 123456.

@web-otp.glitch.me #12345

你有收到簡訊，但看到提示要在輸入區域輸入驗證碼嗎？ 這就是 WebOTP API 對使用者的運作方式。

WebOTP API 的使用包含三個部分：

• 加上適當註解的 <input> 標記
• 網頁應用程式中的 JavaScript
• 透過簡訊傳送格式化的訊息文字。

先來介紹 <input> 標記。

為 <input> 標記加上註解

WebOTP 本身運作時不會有 HTML 註解，但適用於跨瀏覽器 相容性，我們強烈建議您將 autocomplete="one-time-code" 新增至 輸入動態密碼的 <input> 標記。

這可讓 Safari 14 以上版本建議使用者自動填入 <input> ] 欄位輸入動態密碼 (即使簡訊不支援 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');
    …
  });
}

處理動態密碼

WebOTP API 本身就夠了。使用 navigator.credentials.get()敬上 以取得動態密碼。WebOTP 會為該方法新增 otp 選項。僅有 一個屬性：transport，其值必須是含 'sms' 字串的陣列。

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
    …

這會在收到簡訊時觸發瀏覽器的權限流程。如果權限為 授予後，傳回的承諾使用 OTPCredential 物件就會解析。

取得的 OTPCredential 物件內容

{
  code: "123456" // Obtained OTP
  type: "otp"  // `type` is always "otp"
}

接著，將動態密碼值傳遞至 <input> 欄位。直接提交表單 能排除要求使用者輕觸按鈕的步驟。

JavaScript

    …
    navigator.credentials.get({
      otp: { transport:['sms'] }
      …
    }).then(otp => {
      input.value = otp.code;
      if (form) form.submit();
    }).catch(err => {
      console.error(err);
    });
    …

正在取消訊息

如果使用者手動輸入動態密碼並提交表單，您可以取消 透過 options 物件中的 AbortController 例項使用 get() 呼叫。

JavaScript

    …
    const ac = new AbortController();
    …
    if (form) {
      form.addEventListener('submit', e => {
        ac.abort();
      });
    }
    …
    navigator.credentials.get({
      otp: { transport:['sms'] },
      signal: ac.signal
    }).then(otp => {
    …

設定簡訊格式

API 本身看起來應該夠簡單，但您必須完成以下事項 請務必在使用前瞭解郵件必須晚於 系統會呼叫 navigator.credentials.get()，且必須在裝置上接收這項資訊 呼叫 get()。最後，訊息必須遵循下列規範 格式設定：

• 訊息的開頭是 (選填) 使用者可理解的文字，其中包含 4 到 10 個字元 由英數字元組成的字串，最後一行則包含至少一個數字 做為網址和動態密碼
• 叫用 API 的網站網址的網域部分必須放在前面 上傳者：@。
• 網址必須包含井字號 (「#」)，後面接著動態密碼。

例如：

Your OTP is: 123456.

@www.example.com #123456

以下舉出不良示例：

示範

根據示範操作，嘗試各種訊息訊息： https://web-otp.glitch.me

您也可以建立分支並建立版本： https://glitch.com/edit/#!/web-otp.

使用跨來源 iframe 的 WebOTP

通常用於輸入跨來源 iframe 的簡訊動態密碼 特別是使用 3D Secure 時。使用共同支援的通用格式 跨來源 iframe，WebOTP API 則會傳送繫結至巢狀來源的 OTP。例如：

• 使用者前往 shop.example 購買了一雙信用卡鞋。
• 輸入信用卡號碼後，整合付款服務供應商會顯示 表單內顯示 bank.example 的表單，要求使用者驗證身分 電話號碼，快速結帳。
• 「bank.example」會傳送含有動態密碼的簡訊給使用者， 輸入 PIN 碼，藉此驗證身分。

如要從跨來源 iframe 中使用 WebOTP API，您必須執行下列兩項操作：

• 在簡訊文字中同時註解頂端頁框和 iframe 來源 撰寫新的電子郵件訊息
• 設定權限政策，允許跨來源 iframe 接收動態密碼 直接從使用者登入

您可以到這裡試用 https://web-otp-iframe-demo.stackblitz.io.

在簡訊中為繫結來源加上註解

從 iframe 內呼叫 WebOTP API 時，簡訊必須 包含頂層頁框起點 (在 @ 開頭，後面加上 # 的動態密碼) 且 iframe 來源在最後一行前面加上 @。

Your verification code is 123456

@shop.example #123456 @bank.exmple

設定權限政策

如要在跨來源 iframe 中使用 WebOTP，嵌入器必須授予存取權 透過 otp 憑證權限政策設定 API，避免發生非預期的情況 行為一般來說，您可以透過兩種方式達成這個目標：

透過 HTTP 標頭：

Permissions-Policy: otp-credentials=(self "https://bank.example")

透過 iframe allow 屬性：

<iframe src="https://bank.example/…" allow="otp-credentials"></iframe>

查看進一步瞭解如何指定權限政策的範例 。

在電腦上使用 WebOTP

在 Chrome 中，WebOTP 支援監聽其他裝置收到的簡訊， 協助使用者在電腦上完成電話號碼驗證。

使用者必須在兩個裝置中登入同一個 Google 帳戶，才能使用這項功能 電腦版的 Chrome 和 Android Chrome。

所有開發人員都需要在電腦版網站上導入 WebOTP API。 和行動版網站一樣 這通常代表交易 不會十分要求關聯語意

詳情請參閱在電腦上使用 WebOTP API 驗證電話號碼。

常見問題

我傳送的郵件格式正確，但對話方塊並未顯示。發生了什麼事？

測試 API 時，請留意下列幾點：

• 如果寄件人的聯絡人清單中有寄件人的電話號碼，則 受限於基礎 SMS User Consent API 的設計，系統不會觸發 API。
• 如果您在 Android 裝置上使用工作資料夾，而 WebOTP 會 無法運作，請嘗試改為在個人資料夾中安裝及使用 Chrome (也就是您接收 SMS 訊息的同一個設定檔)。

請檢查格式，確認簡訊格式是否正確。

這個 API 是否與其他瀏覽器相容？

Chromium 和 WebKit 同意簡訊格式和 Apple 宣布在 iOS 14 上支援 Safari 以及 macOS Big Sur雖然 Safari 不支援 WebOTP JavaScript API， 預設使用 autocomplete=["one-time-code"] 為 input 元素加上註解 鍵盤會自動建議輸入動態密碼，前提是簡訊符合規定 格式。

使用簡訊進行驗證安全嗎？

雖然簡訊動態密碼很適合用來驗證首次輸入的電話號碼 的，務必謹慎地透過簡訊驗證電話號碼 重新驗證，因為電話號碼可能會遭電信業者入侵及回收。 WebOTP 是方便的重新驗證及復原機制，但服務 並搭配其他因素，例如知識難題 網路驗證 API 強化驗證機制

該到哪裡回報 Chrome 的實作錯誤？

您發現 Chrome 實作錯誤嗎？

• 回報錯誤： https://new.crbug.com. 盡可能附上最多細節、重現流程的簡單指示。 將「元件」設為 Blink>WebOTP。

對這項功能有何幫助？

您是否打算使用 WebOTP API？你的公共支援團隊可協助我們優先 功能，並向其他瀏覽器廠商說明支援這些功能的重要性。 使用主題標記將推文傳送至 @ChromiumDev #WebOTP敬上 ，並說明你使用這項服務的位置和方式。

資源

• 簡訊動態密碼表單最佳做法
• 在電腦上使用 WebOTP API 驗證電話號碼
• 使用 WebOTP API 在跨來源 iframe 中填入 OTP 表單
• Yahoo! JAPAN 的免密碼驗證次數減少 25%，登入時間也縮短了 2.6 倍