contentvue.jsとfirebaseを使って、パスワードマネージャを作った話CSSHTML5Vue.jsFirebasevuetifyjs今回は、いつものGASと違って、firebaseを利用してパスワードマネージャのアプリケーションを作成しました。きっかけきっかけは、自分が利用しているサービスのパスワードが同じパスワードで管理しているのに、こののままやったら危ないなー。思ったのがきっかけです。1passwordやトレンドマイクロ等がパスワードマネージャのアプリを提供しているのですが、せっかくなら、firebaseの勉強を兼ねて作ってみようと思いました。完成している画面はこのようになっています。白枠で塗りつぶしている部分は、アカウントIDを表示しています。下記のようなイメージで今回は作成を行いました。1:firebaseのgoogle認証機能を利用してログイン処理を行う。2:ログインしていきたアカウントがfirebaseのユーザデータベースに登録しているアカウントか?の確認を行う。3:登録されていないアカウントの場合、ログイン画面にエラーメッセージを表示する。4:登録されているアカウントの場合、パスワードデータからアクセストークンが一致するコレクションからデータを抽出し、一覧で表示する。5:登録しているデータは編集削除が可能であり、また新規で登録も可能。6:ログアウトを行うと、ログイン画面に移動する。実際のデータ保持や、画面ここからは、上記のイメージフローの実際の画面やデータベースの中身を説明したいと思います。ログイン画面ログイン画面はとてもシンプルになっています。google」のボタンをタップすると、googleアカウント選択ポップアップ画面が表示されます。firebaseのgoogle認証の使い方は以下の通りになります。(公式サイトに詳細に記載されていますので、詳しく知りたい方は、公式サイトを参考にすると良いと思います。//認証に失敗した場合の処理...});認証後、firebaseのデータベースに作成したユーザデータに登録しているアカウントかの確認を行います。登録されていない場合は下記のようなメッセージが表示されてログイン画面から動かない状態です。firebaseのデータベースの一覧データの取得方法は以下の通りとなります。snippetから取得してください。firebase.firestore(firebase_app);//アクセスしたいコレクションを指定する。//[data].オブジェクトキーで保存しているデータの取得できます。登録しているアカウントからアクセスした場合、データ一覧の画面に移動します。移動した際に、データをパスワードを保持しているデータにアクセスを行い、アクセストークンが同じコレクションの中に保持しているデータを一覧で表示します。nosqlでこういうデータの持ち方が良いのかわからないのですが、今回はこのようにデータを保持しています。一覧画面は下記のようになります。(最初に紹介した画像と同じになります。)詳細を表示したいアカウントをタップすると詳細内容を表示します。ピンクのボタンをタップするとコピーを行うことができます。パスワードをコピーして使用することが多いです。編集タブをオンにすると登録している内容の編集を行うことが可能です。登録しているデータの更新の方法は以下の通りになります。//更新したいドキュメントまでアクセスし、[set]で更新することができる。//キーと内容を全て記載する。更新したい内容だけ記載した場合、記載してない内容は消えるので注意です。//データ更新に失敗した場合の処理});データ登録ヘッダーにある「+」ボタンからパスワードの新規登録が可能です。「+」の左にあるボタンが一覧画面に移動、右側にあるボタンがログアウトボタンになります。入力する内容は入力欄に記載している通りとなります。「icon」は今回は、fontawesomeのフリーアイコンを表示できるようにしています。アイコンを使用するには、使用したい、classを検索して貼り付ける必要があるため少し面倒です。ここは改良する必要があるかなと考えています。パスワードは「CREATEPASS」をタップすることで自動で生成してくれるようになっています。パスワードの長さも大文字を含むのか、数字を含むのかも設定可能です。登録からデータを登録することができます。ランダム生成の一意キーで登録する方法は以下の通りです。//登録したい、コレクションまでアクセスを行い、[add]でランダムキーで登録することができます。今回、パスワードをデータベースに保存するので、「crypto-js」を利用して暗号化を行おうと試みました。実際に暗号化を行ってデータを新規登録を行おうとすると、ランダム生成されるキーがなぜか、毎回おんなじキーになってしまい、上手く利用することができずに課題になっているため、これは改善する必要があると考えています。PWA化GASのアプリケーションでは不可能だった、PWA化を今回実装を行いました。こちらのサイトを参考にさせて頂き、実装を行いました。最後に意説明は以上となります。firebaseのサービスは本当に便利だと感じ、もっとfirebaseFunctionsとかを学びたいと思いました。このアプリケーションの課題を克服したいと思います。requestStockLike2@rarara_x16システムエンジニアです。GoogleAppsScriptとJavaScriptを使用する事が多いです。僕が知っているvue.jsはまだ入り口に過ぎなかったため、更に勉強中。upLoginユーザーは見つかりませんでした。