bitwardenの複数項目自動入力、カスタムフィールド設定

カスタムフィールド設定

普通に使うと「ユーザー名」・「パスワード」しか項目がないので、2つ以上は対応できない。

「カスタムフィールド」を使えば、銀行などの複数項目にいくつでも対応できたり、チェックボックスにチェックをしたり、より一層うまく使えるようになる。

5年前に紹介した設定方法は完璧ではなかったため、断念した方はもう一度確認してみよう。
複数項目自動入力

この記事は拡張機能(パソコン)で説明していき、「わかりづらいツール」を使い説明していくが、できるだけ専門知識を破壊し、わかりやすく案内する。

スマホでも登録は可能だが、名前登録しかないため「すべてのログイン画面に対応できない」かもしれない点も注意。

Androidはカスタムフィールドが発動しないらしく、iOSは持っていないのでわからない。基本的にはパソコンで使うものだと割り切り、スマホでは手動コピペしよう。

まだ使用していなければ、先にダウンロードだ。基礎的な使い方も紹介している。

【SSS】Bitwardenのダウンロードと自動入力の使い方
【SSS】Bitwardenスマホアプリのダウンロードと自動入力の使い方
スポンサーリンク

カスタムフィールドの仕様

理解しないと設定方法に迷うので、軽く説明していく。

カスタムフィールドは「アイテムの追加・編集(情報を登録する場所)」の一番下にある。

カスタムフィールドは情報を入力する場所の一番下

bitwardenは「Webページの情報」から、ユーザー名やパスワードを入れる場所を識別している。

カスタムフィールドも同じ仕様なので、「入力させたい項目の情報」を設定し、一致したら自動入力させるよう設定していく。

テキスト

カスタムフィールドテキスト

名前と値を入力できる。

名前には項目名、値には自動入力させたい文字列を入れよう。基本はこの項目しか使わないぞ。

ここの設定した名前で反応しなければ、「項目名で反応しない場合」の章を参考にしよう。

非表示

カスタムフィールド非表示

テキストと違い値を隠せるだけの機能?

この機能は私が理解していないので、わかりやすく説明できない。

コメント欄の情報提供によると、hidden(隠された)という意味のもので、Webページに表示されない情報に対して使うものらしい。

ただ、「テキスト」と同じように私は使えてしまっており、どっちを使っても困らないかもしれないが、通常は「テキスト」を使っておこう。

真偽値

カスタムフィールド真偽値

「ログイン情報を保持する」などの項目をチェック、またはチェックを外す機能。

チェックを入れるとチェックが外され、チェックを入れないとチェックを入れられるといったよくわからない動作をするので、「設定したらチェックあり・なし両方」を試そう。

名前の欄に表示されていない「隠された情報」を入れなければならないので、次の章参照。

項目名で反応しない場合(idとnameで自動入力)

まだ設定していない方や、項目名だけでも入力できる方はカスタムフィールド設定の章まで読み飛ばそう。

入力したい項目に設定した文字列を入力できなかったり、チェックボックスが反応しないなら隠された情報で入力させる。

ここで説明する情報とは、

  • 項目名(ラベル名)
  • nameの中の文字列
  • idの中の文字列
  • 項目の意味を案内する文字列(placeholder名)
  • チェックボックス(checkbox名)

のことで、基本的にWebログイン画面に表示されているのは項目名(文字列)のため、それができなければ残りの3つで対処することになる。

パソコンがない方は項目名しか確認できないので、勘で入れるか項目名で入力できるか運任せだ。

とりあえず、「ジャパンネット銀行ログイン画面」で説明していく。口座を持っていなくても、意味を理解するために確認だけしよう。

HTMLタグという専門知識を無視して進めるので、若干やりにくいが初心者でもできるようにわかりやすく砕いておいた。

ジャパンネット銀行ログイン画面にたどり着いたら、さっそく「F12」を押そう。キーボードの上にある「Fの大群ゾーン」一番右にあるはずだ。

もしなければ、

  • Chrome:ログイン画面の適当なところを「右クリック」→「検証」
  • Firefox:ログイン画面の適当なところを「右クリック」→「要素を調査」
  • Edge: ログイン画面の適当なところを「右クリック」→「要素の検査」
  • それ以外のブラウザ: ログイン画面の適当なところを「右クリック」→それっぽい項目をすべてクリックして探す

すると、コードらしき文字列を召喚でき、これらは「実際のページの裏の部分を文字化させたもの」だと思ってもらってよく、何の害もないので安心して良い。

とりあえず、表示されたボタン(だいたい左上に表示)をクリックして「青い状態」にしよう。

要素選択ボタンをクリック

ボタンをクリックした状態で入力したい項目、ここでは「店番号(3桁)」・「口座番号(7桁)」にカーソルを合わせよう。

クリックするとさっきの状態が解けてしまうので、解けてしまったらまたボタンを押した状態を維持しよう。

カーソルを合わせて中の文字列を確認
#以降の文字列を覚える

入れるのは「#(シャープ)」を除いた後ろの文字だけだ。ちなみに、TenNo=店ナンバーのこと。

ジャパンネット銀行はラベルに囲まれている「店番号(3桁)」・「口座番号(7桁)」でも反応するが、「idTenNo」、または上記画像では表示されていないが「TenNo」でも反応するため、他の会社のログイン画面でidを入れても反応しないなら、idを取ってみるのもいいだろう。

ちなみに、大文字小文字の区別はされないので、「tenno」でOK。

カーソルを合わせているあいだしか表示されないので(本当はコードの中にも表示されてるが説明が難しいので省く)、頭で記憶するかメモか画像で一時的に保存しよう。

口座番号も同じやり方で項目の名前を抽出してとりあえず保存しておこう。

項目の意味を説明している案内文字で自動入力

例をエバーノート画面にするが、このようなうっすらと書かれた「項目の意味を説明している案内文字(placeholder名)」を「テキスト」の名前に入れても自動入力として使える。

項目に表示された案内文字でも自動入力として反応する

チェックを入れるための真偽値の抽出

上記手順と同じように、チェック項目を抽出する必要がある。

checkbox(チェックボックス)という隠されたものが存在するのだが、そのチェックボックスに書かれている名前を真偽値の名前に設定することで、チェックをあり・なしの動作にすることができる。

エバーノートのログイン画面でチェックボックスにカーソルを合わせるとこんな感じ。

チェックボックスにカーソルを合わせて抽出

エバーノートは「rememberMe」が名前なので、これを「真偽値」に入れるだけだ。

こちらも頭の「#(シャープ)」を除いた文字列を入れよう。

違う項目に入力されてしまう場合の対策

こちらもコメント欄で情報提供を受けたものなのだが、「ワンタイムパスワード入力欄にもパスワードが入ってしまい、パスワードを毎度消す」といったような、毎回違う項目にユーザー名、またはパスワードが入っている人はこの設定で対策可能。

上記で説明してきた方法で、この例だとワンタイムパスワードの項目から名前を抽出し、値を空欄にすれば「間違っていた情報の後に空欄が上書き」される。

これで「あたかも最初から空欄でした状態」を装うことができるので、是非試してみよう。

スポンサーリンク

カスタムフィールド設定

それでは、例として優れている「ジャパンネット銀行ログイン画面」を参考にし、設定していく。

ジャパンネット銀行ログインページ例

利用していないなら適当に入力して進めるか、想像で理解しよう。その後にゆうちょダイレクトバージョンも説明する。

公式ログインページログイン – ジャパンネット銀行 

「https://login.japannetbank.co.jp/wctx/LoginAction.do?loginIdFlg=1」

拡張機能なら「タブ」からの登録、その他の端末は上記リンクをコピペしておき、ログイン情報にURLを登録しておこう。

ジャパンネット銀行のURLを入れて下へ進む

ジャパンネット銀行は「ログインID」にユーザー名、「ログインパスワード」にパスワードを入力される。

もちろん例なので、適当に入力して構わない。

上記2つ以外のカスタムフィールドを追加すればいいので、「店番号(3桁)」と「口座番号(7桁)」という名前のものを作ろう。

店番号・口座番号の名前を一致させよう。特に大文字・小文字・全角・半角などに注意し、コピペが確実だ! それでも自動入力されないなら、確実に入力できる「項目名で反応しない場合」の章まで戻って、正式名を抽出しよう。
入力例

あとは登録したURL、もしくはブックマークか上記リンクにアクセスすれば、このようになっているはずだ。

複数項目自動入力

ゆうちょダイレクトの場合は、コメント欄でtanukiさんに教えてもらったので参考にされたし。

ゆうちょダイレクトは、カスタムフィールドの名前をfocus1, focus2, focus3とし、値にお客様番号を入れる。
横浜銀行の確認パスワードをブランクにしたい場合は、カスタムフィールドの名前にBPW0010とし、値を空欄(“”)にする。

引用:tanukiさんのコメント

自動入力が発動しない

設定を有効化させていない可能性が高いので、以下のリンクを参照。2段階認証のやり方も紹介しているぞ。

拡張機能簡単な使い方・自動入力
スマホ簡単な使い方・自動入力

実は「登録情報を保存していなかっただけ」の場合もあるので、カスタムフィールド欄をもう一度確認してみよう。
スポンサーリンク

Webブラウザでする設定

アカウント情報変更や意図的に負荷をかけることができる設定が存在するので、まだしていなければ強化してくるといい。

意図的に負荷をかけたり、Webブラウザでするbitwarden設定まとめ

コメント

  1. イルカ より:

    「非表示」は、記事主様の推測で合っていると思います。
    HTML の とは無関係で、Bitwarden のパネル上に表示するか否かの設定かと。

  2. Koya より:

    いつも大変参考にさせていただいております。

    当サイトを拝見し Bitwarden を使ってみたのですが、以下の点などを鑑みると、LastPass に断然軍配が上がるように見受けられます。
    – 二段階認証の際、スマホに届く通知をタップするだけで承認できる
    – 複数の項目を2クリックで保存できる
    – 同一のウェブサイトでも、それぞれの認証情報によって自動入力の可否を指定できる

    これらの機能を満足に揃えることのできていない時点で、サーバーの場所がどこであるかなど取るに足らない要素であると考えてしまいます。
    筆者の方は、どのような点を踏まえて Bitwarden を推していらっしゃるのでしょうか。

    • ぷっぷ より:

      オープンソースだからです∩(・∀・∩
      参考【SSS】将来を考えたパスワード管理ソフト・アプリの選択
      細かい利便性はやはり1Password・LastPassの方が上回っているとは思います。
      とくに1PasswordはFaceID対応が早かったり、いつも利便性の実装が速いです。
      ですが、Bitwardenと比べるとそれほど利便性は落ちませんし、少しの利便性よりオープンソースをやりすぎセキュリティでは重視しています。
      パスワード管理業界はオープンソースがブイブイ言わせているので(゚~゚o)

      といっても、色々あったとはいえLastPassはちゃんとやっていますし、脆弱性を放置しているわけではありません。オープンソースでなくてもきちんと厳重です。
      • Koya より:

        オープンソースであるとはいえ、その安全性と利便性を天秤にかけたとき、Bitwarden はあまりにも偏っているように見えます。特に、複数の項目を保存するときの手順は、あまりにも高度です。
        これは私の主観に過ぎませんが、そのような受け止めが一般的であるように感じますから、それであってもなおオープンソースのものを選ぶべきである理由があれば説得力を増すのではないかと思います。
        何かの参考にしていただければ幸いです。

        • ぷっぷ より:

          (゚~゚o)ウゥーン「オープンソースかつ生体認証が使えてクロスプラットフォーム」がかなりの魅力かと思いましたが、利便性にそれほどの差があったとは知りませんでした。
          現状説得力を増せる情報はこれ以上ないですが、記憶にとどめておきます。

  3. おっさん より:

    同じwebサイトに名前を変えて2種類登録しました。
    当然、IDもパスワードも別の設定にしてあります。
    この状態で、パスワードの自動入力を行うと、うまく使い分けができないようです。
    なにか、良い方法はありませんか?

    • ぷっぷ より:

      以前も似たような質問をされたのですが、現在も「自動入力オプション」を有効化している状態で同じサイトの別アカウントを登録していると、直近で入力した情報が一番上に移動して入力される仕様から変わっていないようです。

      In the case of multiple logins matching the current website, the last used login will be used for the auto-fill operation. If the wrong login is auto-filled, you can auto-fill again using the popup window and reset the last used login.

      現在のWebサイトに一致する複数のログインの場合は、最後に使用されたログインが自動入力操作に使用されます。誤ったログインが自動入力された場合は、ポップアップウィンドウを使用して再度自動入力し、最後に使用したログインをリセットできます。

      引用Auto-fill logins using the browser extension | Bitwarden Help & Support
      ということなので、基本的にそのサービスにログインするときにログインしたくない別の情報を入力されるのは仕方なく、ブラウザ右上にある拡張機能アイコンのポップアップから手動で選択する必要があります(´ε`;)
      確かに手間ですけど、ギリギリ自動入力……(一応自動入力はまだ実験段階)
      ショートカットも上記に記載されているので、

      • Windows: Ctrl + Shift + Y
      • Linux: Ctrl + Shift + U
      • macOS: Cmd + Shift + Y

      を押してポップアップ表示 → Tabを何回か押して該当のログインを選択 → ENTER
      が高速でできるようなので、何回か反復して体に染み付かせるのが一番理想かも。

      フォーラムの方でもおっさんさんと同様の質問っぽいものがありましたが、2018年9月から進展している雰囲気がないというより、そもそも求められていないかもしれないので、今後もこの部分は諦め濃厚説でています( Ꙭ)
      参考Support for Multiple Sign-ins / Logins / Accounts on One Web Site – User-to-User Support – Bitwarden Community Forums