從 Chrome 93 版開始，網站可以透過電腦版 Chrome 驗證電話號碼。
WebOTP 可讓使用者在行動網站上輕鬆輸入電話號碼驗證碼，無須切換應用程式。Chrome 93 也將這項功能擴展至電腦。請繼續閱讀以瞭解詳情！
簡介
簡訊動態密碼 (動態密碼) 通常用於驗證電話號碼，例如驗證中的第二個步驟或驗證網路付款。不過，從電腦切換到手機、開啟簡訊應用程式、記下並在原始網站輸入 OTP 的整個流程會增加摩擦。這麼做很容易出錯，而且容易遭到網路釣魚攻擊。
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 中登入相同的 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 裝置時，系統會顯示對話方塊，詢問您是否要在電腦上驗證電話號碼。按一下「提交」即可核准。
- 在電腦上，系統會自動將傳送至 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 按鈕後，瀏覽器會自動將 OTP 轉送至網站，並解析 navigator.credentials.get()。網站就能擷取 OTP 並完成驗證程序。
如要進一步瞭解如何使用 WebOTP API 在網站上驗證電話號碼，請參閱這篇文章。
如何在電腦上使用 WebOTP API
透過簡訊驗證電話號碼的做法廣泛運用，且不受平台限制。行動裝置上的任何用途都應適用於電腦裝置。
在電腦上使用 WebOTP API 的做法與行動裝置相同，因此網站可以在不同平台上部署相同的程式碼。
瀏覽器支援和互通性
這項功能採用 Chrome 同步功能，因此目前僅能使用 Chrome。 Chrome 不支援在 iOS 或 iPadOS 上接收及傳送 SMS 訊息。
雖然 Chromium 以外的瀏覽器引擎不會實作 WebOTP API，但 Safari 會透過 input[autocomplete="one-time-code"] 支援共用相同的 簡訊格式。在 Safari 中，只要使用者啟用 iMessage 自動同步功能，在 iOS 或 iPadOS 上收到包含來源繫結的一次性代碼格式的簡訊時，系統會將訊息轉寄至 macOS。如果使用者將焦點放在輸入欄位，Safari 會建議使用者輸入 OTP。
意見回饋
您的意見回饋對改善 WebOTP API 至關重要。立即試用，並與我們分享您的想法。
相片來源：Luis Villasmil 在 Unsplash 網站上