Limited support 一部のブラウザのみ対応。使用時はサポート状況を確認すること。

WebOTP

WebOTP API の OTPCredential インターフェイスは、新しいワンタイムパスワードを取得したときに返す属性を持ちます。

Credential OTPCredential

認証・暗号・セキュリティ

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
OTPCredential
実験的
93
93
84
HTML 属性
allow (otp-credentials)
実験的
93
93
84
DOM API
get (otp option)
実験的

otp`オプション
93
93
84
code
実験的

OTPCredential インターフェイスの code プロパティは、ワンタイムパスワードを返します。
93
93
84
その他
otp-credentials
実験的

HTTP の Permissions-Policy ヘッダーにおける otp-credentials ディレクティブは、現在の文書が WebOTP API を使用して、アプリのサーバーから送信された特別な形式の SMS メッセージからワンタイムパスワード (OTP) をリクエストすること、すなわち {{domxref("CredentialsContainer.get", "navigator.credentials.get({otp: ..., ...})")}} を許可するかどうかを制御します。
93
93
88
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)

基本構文

JAVASCRIPT 
navigator.credentials
  .get({
    otp: { transport: ["sms"] },
    signal: ac.signal,
  })
  .then((otp) => {
    input.value = otp.code;
    if (form) form.submit();
  })
  .catch((err) => {
    console.error(err);
  });

実務での使いどころ

  • WebOTP の活用

    WebOTP API の OTPCredential インターフェイスは、新しいワンタイムパスワードを取得したときに返す属性を持ちます。

注意点

  • 一部のブラウザでのみ対応。使用前にブラウザサポートを確認すること。

実装メモ

  • 一部の API はセキュアコンテキスト (HTTPS) やユーザー操作起点を必要とする。利用前に要件を確認すること。

参考リンク