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