使用 WebOTP API 在電腦上驗證電話號碼

從 Chrome 93 版開始，網站可透過電腦版 Chrome 驗證電話號碼。

Yi Gu
Eiji Kitamura

WebOTP 可讓使用者在 只要輕觸一下，不必切換應用程式Chrome 93 擴充了這項功能 同樣的請繼續閱讀以瞭解詳情！

簡介

簡訊動態密碼 (動態密碼) 常用於驗證電話號碼， 做為驗證流程的第二個步驟，或用來驗證網路上的付款。 不過，從電腦切換到行動裝置的流程，只會開啟簡訊 應用程式，並記住並輸入動態密碼，回到原本的電腦版網站 新增阻礙這種方式很容易出錯，而且容易造成 網路釣魚攻擊

WebOTP API 可讓網站 以程式輔助的方式取得從 SMS 訊息和簡訊取得的動態密碼 使用者只要輕觸一下，就能自動填入表單，不必切換應用程式。 簡訊具有特定格式，且繫結至來源，因此可減輕 詐騙網站也會竊取動態密碼

WebOTP API 實際操作

WebOTP 目前不支援的其中一項用途是指定電話號碼 並透過遠端電腦或筆記型電腦 此 API 僅適用於具備電話功能的裝置。立即使用 API 可以監聽其他裝置的簡訊，以協助使用者 在 Chrome 93 中在電腦上完成電話號碼驗證。

WebOTP API 的電腦。

立即試用

必要條件

示範

如要自行在電腦上嘗試這項流暢的電話號碼驗證流程，請按照 步驟如下：

  1. 前往以下網站：https://web-otp-demo.glitch.me/ 電腦。按一下「驗證」按鈕。
  2. 將第二支手機螢幕上顯示的確切簡訊傳送至 Android 裝置。
  3. 傳送簡訊至 Android 裝置時，系統會顯示對話方塊，詢問您是否為 。按一下「Submit」即可 或批准。
  4. 在電腦上，傳送到 Android 裝置的驗證碼應會顯示 。

WebOTP API 的運作方式

以下是 WebOTP API 的運作方式：

…
  const otp = await navigator.credentials.get({
    otp: { transport:['sms'] }
  });
  if (otp.code) input.value = otp.code;
…

簡訊必須使用來源繫結的一次性代碼設定格式。

Your OTP is: 123456.

@web-otp-demo.glitch.me #123456

請注意，最後一行包含要與前面加上 @ 繫結的起點 後面加上 # 的動態密碼。

收到簡訊時，系統會彈出資訊列，提示使用者 驗證電話號碼。使用者按下 Verify 按鈕後， 瀏覽器會自動將動態密碼轉達給該網站並解析 navigator.credentials.get()。接著網站就能擷取動態密碼，並填妥 進行驗證

詳情請參閱「使用 WebOTP API 驗證網路上的電話號碼」一文。

如何在電腦上使用 WebOTP API

透過簡訊驗證電話號碼是廣泛使用且跨平台的做法。任何用途 行動裝置的保護殼應適用於電腦裝置。

在電腦上使用 WebOTP API 的方式和行動裝置相同 讓網站能在不同平台上部署相同的程式碼。

瀏覽器支援與互通性

這項功能採用 Chrome 同步功能，因此目前僅能使用 Chrome。 目前 Chrome 不支援透過 iOS 或 iPad 作業系統接收及傳輸簡訊。

雖然 Chromium 以外的瀏覽器引擎並未實作 WebOTP API， Safari 採用相同的簡訊格式 以及 input[autocomplete="one-time-code"] 支援。在 Safari 中， 使用者已開啟 iMessage 自動同步功能 (含有來自來源端的簡訊) 一次性代碼格式會在 iOS 或 iPadOS 上與相符來源傳送， 就會轉寄訊息至 macOS如果使用者將焦點移到輸入欄位 會提供動態密碼建議使用者輸入。

意見回饋

因此，你的寶貴意見將有助於 WebOTP API 改善。立即體驗 並告訴我們 。

相片來源：Luis Villasmil 為 停用