WebOTP API
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
WebOTP API は、特別な形式の SMS メッセージの受信時にワンタイムパスワードを生成することで、電話番号がユーザーのものであることを検証する方法を提供します。
概念と使用法
電話番号はアプリケーションがユーザーを識別する方法としてよく使用され、番号がユーザーのものであることを検証するため、SMS がよく使用されます。通常のシナリオでは、ユーザーにワンタイムパスワードを含むメッセージが送信されます。そして、ユーザーはこのパスワードを、番号がユーザーのものであることを検証するフォームにコピペしなければならないでしょう。
WebOTP API は、アプリケーションがパスワードをコピペなしで自動で受信して検証することを可能にし、この手続きで生じるイライラを解消します。
インターフェイス
OTPCredential-
Credentialを継承し、新しいワンタイムパスワードが生成されたときに返す属性を持ちます。
例
この例では、SMS メッセージを受信し、ユーザーが許可すると、ワンタイムパスワードを含む OTPCredential オブジェクトが返ります。そして、このパスワードがフォームに入力され、フォームが送信されます。
html
<input type="text" autocomplete="one-time-code" inputmode="numeric" />
js
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.error(err);
});
});
}
仕様書
| Specification |
|---|
| WebOTP API |