從 Chrome 93 版開始，網站可以透過 Chrome 電腦版驗證電話號碼。
WebOTP 可讓使用者只要輕觸一下，就能在行動網站上輸入電話號碼驗證碼，不必切換應用程式。Chrome 93 也將這項功能擴展到電腦。請繼續閱讀以瞭解詳情。
簡介
簡訊動態密碼通常用於驗證電話號碼，例如做為驗證或線上驗證付款的第二個步驟。不過，在從電腦轉向行動裝置的整個流程中，開啟簡訊應用程式、記住並在電腦版原始網站上輸入動態密碼都會增加不便。這樣很容易出錯，而且容易受到網路釣魚攻擊。
WebOTP API 可讓網站以程式輔助方式從簡訊取得動態密碼，使用者只要輕觸一下就能自動填寫表單，不必切換應用程式。簡訊具有特定格式，且繫結至來源，因此也降低了網路釣魚網站竊取動態密碼的風險。
WebOTP 尚未支援的其中一種用途是指定遠端桌面裝置或筆記型電腦提出的電話號碼驗證要求，這個 API 僅適用於具備電話功能的裝置。這個 API 現在支援監聽其他裝置收到的簡訊，以協助使用者在 Chrome 93 版中在電腦上完成電話號碼驗證。
立即體驗
必要條件
- 桌上型電腦或筆記型電腦 (Windows、Mac、Linux 或 ChromeOS)。
- 搭載 Google Play 服務 20.30.12 以上版本的 Android 手機。
- 在桌上型電腦、筆記型電腦和行動裝置上使用 Chrome 93 以上版本。Chrome 93 Beta 版已於 2021 年 7 月底推出。
- 您必須在電腦版 Chrome 和行動版 Chrome 上登入相同的 Google 帳戶。例如透過 https://myaccount.google.com/ 或 https://mail.google.com。不需要開啟同步功能。
- 您需要在 Android 裝置上透過 [設定] -> [Google] 登入 Android。
- Chrome 93 必須是 Android 裝置的預設瀏覽器。
- Chrome 93 必須在 Android 裝置的前景或背景中執行。
操作示範
如要自行在電腦上執行這個無縫整合的電話號碼驗證流程，請按照下列步驟操作：
- 透過電腦前往 https://web-otp-demo.glitch.me/。按一下「驗證」按鈕。
- 將螢幕上的完整文字訊息從第二支手機傳送至 Android 裝置。
- 簡訊傳送到 Android 裝置時，系統會顯示對話方塊，詢問您是否要從電腦上驗證電話號碼。按下「Submit」即可核准。
- 在桌上型電腦中，傳送至 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
請注意，最後一行含有要繫結的起點，前面會加上 @，後面接著 OTP 前面加上 #。
簡訊收到時，畫面上會彈出資訊列，並提示使用者驗證電話號碼。使用者按一下 Verify 按鈕後，瀏覽器會自動將動態密碼轉送至網站，並解析 navigator.credentials.get()。網站即可擷取動態密碼並完成驗證程序。
詳情請參閱使用 WebOTP API 驗證網路上的電話號碼。
如何在電腦上使用 WebOTP API
透過簡訊驗證電話號碼的方式廣受使用，且無論在何處都適用。行動裝置的所有用途都應適用於電腦裝置。
在電腦上使用 WebOTP API 與在行動裝置上使用相同，因此網站可以跨平台部署相同的程式碼。
瀏覽器支援和互通性
這項功能採用 Chrome 同步功能，因此目前僅適用於 Chrome。 iOS 或 iPad 作業系統上的 Chrome 不支援接收及傳輸簡訊的功能。
雖然 Chromium 以外的瀏覽器引擎不會實作 WebOTP API，但 Safari 會與 input[autocomplete="one-time-code"] 支援具有相同的簡訊格式。在 Safari 中，只要使用者已啟用 iMessage 自動同步功能，當 iOS 或 iPadOS 收到包含來源限定一次性代碼格式的簡訊時，系統會將訊息轉送到 macOS。如果使用者聚焦在輸入欄位，Safari 將建議使用者輸入的動態密碼。
意見回饋：
您的寶貴意見將有助我們改善 WebOTP API。歡迎試用並與我們分享您的想法。
相片來源：Luis Villasmil 在 Unsplash 上