HTML属性を使い、ユーザーに優しい2要素認証を実現する方法

HTML属性を使い、ユーザーに優しい2要素認証を実現する方法

ユーザーから見ると、ログイン操作、特に2要素認証コードの入力は面倒なものです。開発者として、アカウントセキュリティ要件を満たすアプリケーション構築は必須ですが、快適な操作性にも気を配る必要があります。この2つの要件がトレードオフに感じることもあるでしょう。

この記事では、基本的な<input>要素とHTML属性に焦点を当て、スピーディーな2要素認証を実現する方法を解説します。

デフォルトのユーザー体験

このままでも、使いやすいフォームです。<input>には名前と一意のIDを割り当てます。<label>には、適切なfor属性を明確に割り当てます。これはアクセス性を確保するために重要です。<input>を<label>で囲んでも同じ効果が得られます。CSSで少し見栄えを整えると、以下のような表示になります。

属性をいくつか追加していくと、ユーザー操作をさらに改善できます。

適切なキーボードを表示

これは、オンスクリーンキーボードを備えたモバイルやデバイスの画面ですが、まず気付くのは英字入力用のフルキーボードが表示されていることです。ワンタイムパスワードは数字で構成されるため、数字を入力できるテンキーパッドを表示した方が便利です。

そこで、<input>のtypeを「text」から「number」に変更してみましょう。

しかし、これでは解決になりません。iOSでは別のキーボードが起動しますが、まだ不要なキーがいくつか表示されます。

フィールドのtypeを変更すると、ブラウザによるフィールドの解釈方法が変化します。ここでもエラーが発生します。2要素認証コードがゼロで始まる場合、数字フィールドは先頭のゼロを省略する可能性があります。

inputmode

inputmode属性は、ブラウザが表示すべきキーボードを変更します。ただし、そのフィールドが収集するデータの解釈方法は変更しません。このサンプルでは、<input>でテキスト入力を受け付けますが、入力はテンキーパッドを使用するように設定します。inputmode="numeric"を追加します。

inputmodeでは、ほかにもいくつかの値を指定できます。たとえば、電話番号用の「tel」や、「email」「decimal」「url」「search」などや独自のキーボードをレンダリングできる「none」が用意されています。CSS Tricksにあるこちらの記事では、さまざまなinputmodeに関する詳細を解説しています。

inputmodeのブラウザサポートによると、この機能は、最近のモバイルOSでは対応されています。しかし、ほんの数年前はほとんど非対応でした。古いブラウザでテンキーパッドを起動するには、別のやり方があり、そちらを利用すると簡単な検証機能も併せて利用できます。

pattern

pattern属性では、正規表現を使用して<input>の内容を検証できます。パターン[0-9]*を使用し、そのフィールドでは数字のみを受け付けるようブラウザに指示することも、inputmodeを利用することなくブラウザにテンキーパッドを呼び出すこともできます。

HTMLは以下のようになります。

キーパッドは、よりシンプルな数値入力パッドになります。

このフォームの入力をさらに使いやすくするため、ワンタイムパスワードのオートコンプリート機能も追加できます。

HTML autocomplete

MDNでは、「autocompleteを使用すると、ウェブ開発者は入力欄にどの種類の情報が期待されているかをブラウザに示唆するのと同様に、ユーザーエージェントがフォーム入力欄の値を埋めるための自動支援を提供する必要があることを指定します」と規定しています。

iOSとmacOSのSafariでは、この属性を利用し、SMS経由でデバイスに送信する2要素認証コードの入力をブラウザから促すことができます。「one-time-code」という値でautocomplete属性を追加すると、この動作が有効になります。

これで<input>は完成です。ユーザーに表示される画面は以下のようになります。

その他の便利なautocomplete属性値

autocomplete属性値はほかにも数多く用意されています。名前、アドレス、クレジットカードやアカウントの詳細情報なども適用できます。サインアップやログイン関連でも、便利なautocomplete属性値がいくつかあります。たとえば、username、email、new-password、current-passwordなどです。

ブラウザやパスワードマネージャーには、Webページでログインフォームを検出する手法がありますが、usernameおよびcurrent-passwordを使用すると非常に明確になります。さまざまなページに配置するユーザー名とパスワードを入力する1つのログインフォームを構築する場合は、こうした属性を使用することをお勧めします。

サインアップフォームでは、「new-password」という値を使用するようにします。これにより、一部のブラウザでパスワードの選択肢が表示されるためです。

他のブラウザでのワンタイムパスワードのオートコンプリート

このオートコンプリート動作が適用されるのは、現時点でiOSおよびmacOS上のSafariのみです。しかし、Chromeチームは、このプロセスを合理化する同様のアイデアを検討しています。現在は、必須となるSMS Receiver APIをAndroidのSMS Receiver APIでモデル化する実験を進めています。このAPIにより、開発者はSMSからワンタイムパスワードを抽出できます。JavaScriptで稼働するため、フォームが瞬時に送信され、さらなる時間短縮につながります。

執筆時点では、このAPIはOrigin Trialの対象です。実際にテストしてChromeチームにフィードバックできます。興味がある方は、サインアップしてAPIをお試しください。

HTMLによるユーザー体験の改善

この記事では、HTML属性を少し使用するだけで、特にモバイルデバイスでのユーザーログインを改善できることを説明しました。

<input>要素は、こうした用途に利用できる最も興味深いHTML属性の1つです。その属性に従い、テキストフィールド、範囲指定スライダー、ファイル選択ダイアログ、ボタン、そのほかさまざまな用途に利用できます。

2要素認証のユーザー操作をさらに改善したい場合は、Authyプッシュ認証をご覧ください。エンドユーザーが確認コードをコピーする必要がなくなります。

これ以外に、ユーザーログインの操作性を改善するヒントをお持ちではありませんか。下のコメント欄でぜひお聞かせください。Twitter（@philnash）でもご意見をお待ちしています。