🔐

パスワード入力時の補完をブラウザにさせつつ、1Passwordなどのパスワードマネージャーにも対応させたい

に公開
Chrome
HTML
Web
tech

経緯

ウェブブラウザでのログイン実装の際に、Chromeや外部パスワードマネージャーの入力補助を受け、補完を行わせたい場合があったため、それを満たすための実装を行なっています。

TL:DR;

htmlのautocomplete属性を使います。(1passwordの場合ですが、)Chrome上でパスワードマネージャーの支援を受けつつ、メールアドレスの自動補完を行いたい場合は入力されうる値がメールアドレスのみであっても、 autocomplete="username"をinputに指定することで補完が行われます。

便利なautocomplete属性

inputやtextareaといった入力が必要な要素、またform要素に対しても指定できるブラウザに対して入力補完を行うかどうかを指定できる属性です。

基本的には、autocomplete="on"をformまたはinputに対して指定することで機能しますが、inputやtextareaなどの要素に対して機能されない場合があるため以下の条件を守る必要があります。[1]

  1. name や id 属性を持つこと
  2. form 要素の子孫であること
  3. フォームが submit ボタンを持つこと（button type="submit"など）

指定可能な値の例

全て文字列での指定になりますが、基本的にはonかoffの２択です。
特にformに対してautocomplete="on"を指定すると、その子となるinputやtextareaもその恩恵を受けます。

onより詳細な指定としてメールアドレスであることを明示するemailや、名前であることを明示するnameなどがあります。また、名前に関してもname以上に詳細な区分としてファーストネーム（名）を指定するgiven-nameやファミリーネーム（姓）を指定するfamily-nameなどが存在しています。

詳細はmdn公式の解説ページを見るのが良いでしょう。

他にも利用可能なケース

mdn公式のページにも書いてありますが、autocomplete属性では、住所入力やクレジットカードの入力の補助も可能です。 普段私たちが目にしている入力フォームの補完はこれによって機能していたんですね。

ログイン時の入力補完支援を受けたい

今までの説明通り、基本的にはメール入力のinputに対してautocomplete="email",パスワード入力のinputに対してautocomplete="password"を指定すれば大丈夫です。

ただし、外部のパスワードマネージャー、特に1Passwordの場合は autocomplete="email"のみでは入力支援を受けられない場合があります。

そういった場合は、 autocomplete="username"を利用することで対応が可能です。 usernameの場合でも、Chromeからの支援を受けることはできます。

最後に

個人的な備忘録としつつ、HTML属性が私たちが普段扱っているウェブ体験の向上に寄与しているということに対して感謝しながら記事を終えたいと思います。

脚注

脚注

  1. HTML属性:autocomplete ↩︎

Discussion