【Bitwarden】 複数のログイン項目に入力する方法【カスタムフィールドを使えば簡単!】

【Bitwarden】 複数のログイン項目に入力する方法【カスタムフィールドを使えば簡単!】IT/WEB

Bitwardenはとても使いやすいパスワード管理ソフトですが、普通にログイン情報を登録すると「ユーザー名」と「パスワード」しか登録できません

ですので、ログイン項目が複数あるようなサイトでは自動入力がうまくいかないことがあります。

例えば、次のイメージは「ゆうちょダイレクト」のログイン画面です。

ゆうちょダイレクトログイン画面

ゆうちょダイレクトも「ユーザー名」と「パスワード」ではなく、「お客さま番号」という3つの項目への入力が求められます。

このような複数項目への入力が求められるサイトでも、Bitwardenの「カスタムフィールド」を使えば自動で各項目に入力できるようになります

この記事では、Bitwardenのカスタムフィールドを使って複数のログイン項目に入力する方法を説明します。

WebブラウザはChromeを使って説明していきます。

Bitwardenのブラウザ拡張機能は「「Bitwarden」の導入方法【アカウント作成~ブラウザ拡張機能のインストール】」を参考にしてあらかじめインストールしておきましょう。

【Bitwarden】 複数のログイン項目に入力する方法(カスタムフィールド設定)

Bitwardenのカスタムフィールドを使って複数のログイン項目に入力する方法を説明していきます。

カスタムフィールドとは

カスタムフィールドとは、ユーザー名とパスワード以外に独自で設定できるログイン項目のようなイメージです。

例えばゆうちょダイレクトのお客さま番号のように、ユーザー名とパスワード以外の項目で、

“この項目(Aとします)” には “この情報(Bとします)” を入力したい!

という場合があると思います。

そういった場合に、

A = 入力項目を識別する情報

B = 項目に入力する情報

をカスタムフィールドを使って設定することができます。

AとBのペアをカスタムフィールドを使って設定すれば、ユーザー名とパスワード以外の項目でも指定した項目に指定したログイン情報を入力することができるようになります

カスタムフィールドの設定

カスタムフィールドを設定する流れとしては次の通りです。

カスタムフィールドを設定する流れ
  • 1|ログインするサイトにアクセスする
  • 2|入力する項目の識別情報を確認する
  • 3|カスタムフィールドを設定する

1|ログインするサイトにアクセスする

まずはログインするサイトにアクセスしましょう。

ここではサンプルとしてゆうちょダイレクトのログイン画面を使って説明していきたいと思います。

ゆうちょダイレクト|ログインページ

ゆうちょダイレクトのログイン画面は次のイメージのように、「お客さま番号」を3つの項目で入力するようになっています。

1.ログインするサイトにアクセスする1

2|入力する項目の識別情報を確認する

上で書いたAとBのペアのうち、「入力項目を識別する情報(A)」を確認していきます。

お客さま番号をBitwardenに登録しただけでは、Bitwardenはその情報をログインページのどの項目に入力すればいいのかわかりません

ですので、入力する項目を指定するために「入力項目を識別する情報(A)」を確認する必要があるわけです。

ログインページを開いた状態で「F12」を押します。

(Macの場合は「Command」+「Option」+「I」)

すると「デベロッパーツール」という画面が開きます。

2.入力する項目の識別情報を確認する1

「Ctrl」+「Shift」+「C」を押します。

もしくは次のイメージにあるアイコン(Select an element in the page to inspect it)をクリックします。

2.入力する項目の識別情報を確認する2

お客さま番号の1つめの入力項目にカーソルを合わせます

カーソルは項目に合わせるだけでクリックなどはしないようにしてください

ページをクリックしてしまうと選択モードが解除されてしまいますので、解除された場合はもう一度「Ctrl」+「Shift」+「C」を押しましょう。

2.入力する項目の識別情報を確認する3

お客さま番号の1つめの入力項目にカーソルを合わせると、入力項目の情報が表示されます。

この表示された情報の中で一番上に表示されている色のついた文字列に注目します。

2.入力する項目の識別情報を確認する4

ここでは色のついた文字列は、

input#focus1.w15

となっています。

この色のついた文字列のうち、「#」(シャープ)と「.」(ドット)のあいだにある文字列を確認します。

ここでは「#」と「.」のあいだにあるのは、

focus1

ですね。

これが「入力項目を識別する情報(A)」です。

なお、サイトによっては「input#focus1」のように「.」が無い場合もあります。

その場合は、「#」より後ろの文字列すべてが入力項目を識別する文字列になります。

まずは1つめの入力項目を識別する情報として「focus1」をメモしておきましょう。

同様に、2つめと3つめの入力項目についても確認していきます。

2つめの項目で色のついた文字列は、

input#focus2.w15

となっていますので、「#」と「.」のあいだにある

focus2

が2つめの項目を識別する情報です。

2.入力する項目の識別情報を確認する5

3つめの項目で色のついた文字列は、

input#focus3.w15

となっていますので、「#」と「.」のあいだにある

focus3

が3つめの項目を識別する情報です。

2.入力する項目の識別情報を確認する6

以上で識別情報の確認は完了です。

3|カスタムフィールドを設定する

「入力項目を識別する情報(A)」が確認できましたので、あとはカスタムフィールドでAとBのペアを設定していきます。

「項目に入力する情報(B)」には自分がその項目に入力したいパスワードや、ゆうちょダイレクトのようにお客さま番号などを設定します。

Bitwardenのブラウザ拡張機能から対象サイトのアイテムを表示します。

例えば、ゆうちょダイレクトでパスワードだけを登録しているアイテムがあるとします。

ゆうちょダイレクトの場合、ユーザー名は使わないので、ユーザー名を登録している場合は削除しておいたほうがいいです。

3.カスタムフィールドを設定する1

当然、この状態ではお客さま番号の情報は登録していないので、ゆうちょダイレクトのログイン画面にアクセスしてもBitwardenによる入力は行われません。

ここからお客さま番号の情報をカスタムフィールで設定していきたいと思います。

アイテムを表示している状態で右上の「編集」をクリックします。

3.カスタムフィールドを設定する2

下のほうにカスタムフィールドという項目があるので、プルダウンで「テキスト」が選択されていることを確認し、「新規カスタムフィールド」をクリックします。

3.カスタムフィールドを設定する3

“名前”“値” という項目が表示されるので、お客さま番号の1つめの入力項目の情報を設定します。

3.カスタムフィールドを設定する4

“名前” には「入力項目を識別する情報(A)」を、“値” には「項目に入力する情報(B)」を入力します。

1つめの入力項目なので、“名前” には「focus1」を、“値” にはお客さま番号の最初の4桁(仮に1111とします)を入力します。

※ゆうちょダイレクトのお客さま番号は「4桁-4桁-5桁」の数字で構成されています。

3.カスタムフィールドを設定する5

もう一度「新規カスタムフィールド」をクリックして、同様に2つめと3つめの入力項目についても入力します。

3.カスタムフィールドを設定する6

右上の「保存」をクリックします。

3.カスタムフィールドを設定する7

すると次のイメージのようにカスタムフィールドが3つ作成できたと思います。

3.カスタムフィールドを設定する8

これでゆうちょダイレクトのログインページをリロード(再読み込み)すると、お客さま番号の3つの項目に指定した情報が入力されると思います。

3.カスタムフィールドを設定する9

うまく入力されない場合は、カスタムフィールドの “名前” に「入力項目を識別する情報(A)」が正しく登録されているかなどの確認をしてみましょう。

カスタムフィールドを使うときの注意点

カスタムフィールドがうまく動作するためには、Bitwardenが「入力項目を識別する情報(A)」に基づいて、指定した項目を正しく特定できるかどうかが重要です

上で紹介した手順で多くのサイトはカスタムフィールドがうまく動作すると思いますが、サイトの作りや構成はサイトごとに異なるため、カスタムフィールドがうまく動作しないサイトもあります

その場合はBitwardenでの自動入力ができないので、コピー&ペーストなど手作業での入力が必要です

また、カスタムフィールドを登録してスマホ(iOS/Android)での自動入力を試してみましたが、スマホではカスタムフィールドの情報を自動で入力することはできないようです

ですので、スマホではカスタムフィールドの情報を入力したい項目にコピー&ペーストするしかなさそうです。

カスタムフィールドが対応しているHTML属性

HTMLの知識が少し必要ですが、Bitwardenのカスタムフィールドが対応しているHTML属性について解説しておきます。

上で書かれた手順で設定したけどうまく自動入力ができないというときは、これから説明する内容を確認してみてください。

今回、「入力項目を識別する情報(A)」としてHTMLのid属性を使った方法をご紹介しました。

ただ、入力項目にidが設定されていないサイトもあるので、その場合は他の属性を使って入力項目を識別することができます。

Bitwardenのカスタムフィールドが対応しているHTML属性は次の通りです。

対応しているHTML属性
  • 1|id属性
  • 2|name属性
  • 3|label
  • 4|aria-label属性
  • 5|placeholder属性

Bitwardenはここに書かれている順番で属性値を検索していきます。

ですので、まずは入力させたい項目のid属性を探して、無いようであればname属性、無ければlabel値、…、という順番で項目に設定されている属性値を探していけば、優先順位が高い順に「入力項目を識別する情報(A)」を探していくことができるはずです。

まとめ

Bitwardenのカスタムフィールドを使って複数のログイン項目に入力する方法を説明しました。

カスタムフィールドを使えば簡単に複数のログイン項目に入力することができるようになります。

タイトルとURLをコピーしました