HTML attributes to improve your users' two factor authentication experience

Jan 21, 2020 08:54 · 807 words · 2 minute read

twillioのHTML attributes to improve your users’ two factor authentication experienceというブログを読んでなるほどなとなったのでいろいろ書いておく。

tl;dr

ユーザーの2要素認証での体験をHTMLを利用してよくしようという内容だった。inputmodeでモバイル端末でのキーボード表示を最適化したり、autocompleteでSMSで送信される認証コードを自動入力できるようにするといいよ、とのことが書いてある。

Getting the right keyboard

入力に最も適したキーボードを表示した方がいい。例えば、2要素認証であれば数字6桁を入力させるものが一般的であるので、アルファベットや日本語入力ではなく数字のみのキーボードを最初に表示させた方がいい。

inputmode

inputmodeはユーザーがフォームを編集するときに入力されるデータの型のヒントを与えるための属性である。
https://developer.mozilla.org/ja/docs/Web/HTML/Global_attributes/inputmode

例えば、

<input type="text" name="token" id="token" inputmode="numeric" />

とすることで入力時に数字入力用のキーボードを表示させることができる。なお、対応しているブラウザは以下の通り。safariやchromeではすでに対応済みである。
https://caniuse.com/#feat=input-inputmode

キーボード表示を確認するには

表示の確認にPCのブラウザを使っていると正しいキーボードが表示されているかの確認が困難である。このため、自分の場合、Android Studioで起動させたエミュレータ内のChromeで動作確認を行った。なお、エミュレータからlocalhostに接続するには10.0.2.2を利用する必要がある。
https://developer.android.com/studio/run/emulator-networking.html

また、単にinputmodeでキーボード表示がどう変わるかを見てみたいだけならば、モバイルから以下にアクセスすればよかった。
https://codepen.io/estelle/pen/kFgGw

pattern

inputmodeに対応していない古いiOSでは"pattern=[0-9]*"が有効のようである。
https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/#article-header-id-0

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
/>

HTML autocomplete

autocomplete

autocomplete="one-time-code"でSMSで送信される認証コードを自動入力できる。
https://developer.mozilla.org/ja/docs/Web/HTML/Attributes/autocomplete

<input
  type="text"
  name="token"
  id="token"
  inputmode="numeric"
  pattern="[0-9]*"
  autocomplete="one-time-code"
/>