WebOTP API

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

WebOTP API は、特別な形式の SMS メッセージの受信時にワンタイムパスワードを生成することで、電話番号がユーザーのものであることを検証する方法を提供します。

概念と使用法

電話番号はアプリケーションがユーザーを識別する方法としてよく使用され、番号がユーザーのものであることを検証するため、SMS がよく使用されます。通常のシナリオでは、ユーザーにワンタイムパスワードを含むメッセージが送信されます。そして、ユーザーはこのパスワードを、番号がユーザーのものであることを検証するフォームにコピペしなければならないでしょう。

WebOTP API は、アプリケーションがパスワードをコピペなしで自動で受信して検証することを可能にし、この手続きで生じるイライラを解消します。

インターフェイス

OTPCredential

Credential を継承し、新しいワンタイムパスワードが生成されたときに返す属性を持ちます。

例

この例では、SMS メッセージを受信し、ユーザーが許可すると、ワンタイムパスワードを含む OTPCredential オブジェクトが返ります。そして、このパスワードがフォームに入力され、フォームが送信されます。

電話機を使用してデモを体験する.

<input type="text" autocomplete="one-time-code" inputmode="numeric" />

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

関連情報