0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

M5StickCでまたパスワード入力装置を作った

Last updated at Posted at 2021-08-07

以前にも、M5StickCでパスワード入力装置を作成しました。一方で、以前パスワード管理アプリ・サーバをPWAで作成していました。
今回は、この2つを組み合わせて、より使いやすいパスワード入力装置を作ります。

以前の記事は以下にあります。

ソースコードもろもろは新たに以下のGitHubに上げています。

poruruba/PasswordReminder
※当然ですが、自己責任でお願いします。

image.png

#パスワード管理用サーバ

PWAアプリやM5StickCからのリクエストをHTTP POST(Json)として受け取り、レスポンスをJSONとして返します。
誰でもアクセスできては困るので、ファイル名を秘匿の名前にし、API Keyとしてそのファイル名を指定しないとアクセスできないようにして保護しています。

以下のエンドポイントを用意しています。

・/pwd-insert : パスワード情報を登録します。
・/pwd-update : パスワード情報を更新します。
・/pwd-delete : パスワード情報を削除します。
・/pwd-get : パスワード情報を取得します。
・/pwd-list : パスワード情報のリスト(パスワードを含まない)を取得します。
・/pwd-allpasswd : パスワード情報のリスト(パスワードを含む)を取得します。

以下は、PWAの通知用です。必須ではないです。

・/pwd-get-pubkey : 通知の購読に必要なVapidKeyのうちの公開鍵vapidkey.publicKeyをクライアントに渡します
・/pwd-put-object : 通知の購読に必要なクライアント側のオブジェクトをサーバ側に登録します。
・/pwd-delete-object : サーバ側に登録しておいたクライアント側のオブジェクトを削除します。

すべてにおいて、HTTP HeaderのX-API-KEYにファイル名の指定が必要です。

node/data/passwordフォルダに、パスワードを管理するファイルを配置しますが、RAID化されたフォルダに置くのが安心です。

#PWAアプリ

上記のエンドポイントを呼び出して、パスワード管理用サーバにパスワードを登録したり編集したりするWebアプリです。PWAとしているため、AndroidやiPhoneなど機種を問わずネイティブアプリのように使うことができます。
パスワードを選択してアプリ上のボタンを押すと、パスワードがクリップボードにコピーされるので、入力したい場所でCtrl-Vを入力すればよいです。

このアプリが結構便利でいつも自分用に使っています。

#M5StickC

パスワード管理用サーバとPWAアプリだけでも、かなり使えるアプリですが、M5StickCを使ってもっと手軽に使えるようにします。
M5StickCをBLEのHIDデバイス(キーボード)としてふるまうようにすることで、M5StickCにある物理ボタンを押すだけで、素早くパスワード入力できるようになります。

以前もこのM5StickCで作っていましたが、パスワードの登録のために、USB仮想COMポートを使っていて、管理が面倒でした。パスワードの管理はPWAに任せることで、今回はM5StickC側の実装がシンプルになりました。

通常は、BLEが有効となって、HIDとして機能していますが、PWAを使って更新したパスワードファイルをM5StickCに持ってきたい時だけ、WiFi接続して、HTTP POST(Json)呼び出ししています。
複数のパスワードを管理していますが、横のボタンで対象のパスワードを選択することができます。M5StickCのLCDディスプレイに選択中のパスワードのタイトルとユーザIDが表示されます。
そして、表のボタンを押すことで、選択しているパスワードがキーボードから入力されたように振る舞います。
パスワードの同期は、横の電源ボタンを短めに押します。

以上

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?