以前にも、M5StickCでパスワード入力装置を作成しました。一方で、以前パスワード管理アプリ・サーバをPWAで作成していました。
今回は、この2つを組み合わせて、より使いやすいパスワード入力装置を作ります。
以前の記事は以下にあります。
PWAを試してみよう
M5Stick-Cでパスワード記憶装置 兼 自動入力装置を作る
ソースコードもろもろは新たに以下のGitHubに上げています。
poruruba/PasswordReminder
パスワード管理用サーバ
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にファイル名の指定が必要です。
PWAアプリ
上記のエンドポイントを呼び出して、パスワード管理用サーバにパスワードを登録したり編集したりするWebアプリです。PWAとしているため、ネイティブアプリのように使うことができます。
パスワードを選択してボタンを押すと、パスワードがクリップボードにコピーされるので、入力したい場所で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が表示されます。
そして、表のボタンを押すことで、選択しているパスワードがキーボードから入力されたように振る舞います。
パスワードの同期は、横の電源ボタンを短めに押します。
以上
↧
