4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-06-17

まえがき

・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向上するので是非入れてみてはいかがでしょう。
以上、お疲れさまでした!

参考サイト

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?