【ITニュース解説】🤖 WebOTP API: State of art and UX improvements

WebOTP APIは、SMSで送られてくるワンタイムパスワード（OTP）を自動入力する機能をWebブラウザに提供する技術だ。これは、二段階認証、アカウントの復旧、決済の認証など、現在広く利用されているOTPを使った電話番号認証のユーザー体験を向上させることを目的としている。

従来のOTP認証は、ユーザーにとって煩雑な作業を伴うことが多かった。例えば、ウェブサイトを閲覧中にSMSを受信し、メッセージアプリに切り替える際にスマートフォンの動作が遅延したり、OTPコードをコピーしようとしてメッセージ全体を選択してしまったり、手動で入力する際にタイプミスをしたりするなどの問題が発生しやすい。このようなプロセスは、時間がかかり、エラーが発生しやすく、ユーザーをイライラさせる原因となっていた。

WebOTP APIは、このような問題を解決するために開発された。このAPIを利用することで、ユーザーが許可すれば、ブラウザがSMSからOTPコードを自動的に読み取り、入力フォームに自動入力してくれる。これにより、ユーザーは手動でコードを入力する手間を省くことができ、認証プロセスがスムーズになる。

ただし、WebOTP APIはまだ実験的な段階であり、すべてのブラウザで完全にサポートされているわけではない。現在、Chrome、Opera、Safari（一部）がこの機能をサポートしている。

WebOTP APIの導入は比較的簡単だ。HTMLのフォームにいくつかの属性を追加するだけで、この機能を有効にすることができる。具体的には、<input>要素にtype="text"、inputmode="numeric"、autocomplete="one-time-code"、pattern="\d{6}"といった属性を設定する。

type="text"は、type="number"を使用した場合に先頭の0が削除されるのを防ぐために使用される。inputmode="numeric"は、モバイルデバイスで数字キーボードを表示させる。autocomplete="one-time-code"は、SMSからOTPを直接提案する機能を提供する。pattern="\d{6}"は、6桁の数字のみを受け入れるように制限する。

WebOTP APIは、すべてのSMSメッセージに対応しているわけではない。APIがOTPコードを認識し、自動入力を行うためには、メッセージが特定の形式に従っている必要がある。具体的には、SMSメッセージの最後に、アットマーク（@）に続いてドメイン名を含める必要があり、OTPコードはハッシュ記号（#）の後に記述する必要がある。また、SMSメッセージの長さは140文字程度に制限されており、ウェブページはHTTPSで提供されている必要がある。以下に例を示す。

"あなたのコードは123456です @yourdomain.com #123456"

SMS OTP認証は、フィッシング詐欺やSIMスワップ攻撃に対して脆弱であるという課題も残されている。より安全な認証方法としては、WebAuthnや生体認証が将来的に普及すると考えられている。

しかし、現状では、WebOTP APIは、手動入力のエラーを減らし、ユーザーエクスペリエンスを大幅に向上させ、メッセージ形式を少し変更するだけでセキュリティを向上させることができる有効な手段だ。将来的にSMS認証が不要になる可能性もあるが、それまでの間、WebOTP APIを活用することで、より安全で効率的な認証プロセスを実現できる。