【JavaScript】WebOTP API で UI/UX を向上させる

まえがき

・OTP とは one-time-password のこと
・WebOTP APIとはSMSワンタイムパスワードをブラウザ側に通知するもの
・セキュリティ強化のため、二段階認証などで使われることが多い

・SMSで通知されてきたワンタイムパスワードをポチッとするだけで入力してくれる便利なアレのこと。

SMS認証を入力する入力欄の設定

<input autocomplete="one-time-code" required/>

SMSメッセージのフォーマット

Your OTP is: 123456.

@www.example.com #123456

・@以降は対応するドメイン、#以降はワンタイムパスワード

iOS と Android

・iOS: OSでサポートしていて自動的に入力まで行われる。特に対応はいらない。
・Android: 日本語SMSメッセージでは自動では行われない様子。スクリプトで対応。

Chrome on Android 用スクリプト

    <script>
      if ('OTPCredential' in window) {
        window.addEventListener('DOMContentLoaded', function(e) {
          var input = document.querySelector('input[autocomplete="one-time-code"]');
          if (!input) return;

          var ac = new AbortController();
          var form = input.closest('form');
          if (ac && form) {
            form.addEventListener('submit', function(evt) {
                ac.abort();
            });
          }
          navigator.credentials.get({
            otp: {transport:['sms']}
          }).then(function(otp){
            input.value = otp.code;
            input.dispatchEvent(new Event('change'));
          });
        });
      }
    </script>

コードが冗長だったので修正しました。
・input.dispatchEvent(new Event('change')); で入力後の change イベントを発火させています。
・OTPCredential は firefox on Android では現状未対応の様子。。。

お手軽にUX向上するので是非入れてみてはいかがでしょう。
以上、お疲れさまでした！

参考サイト