Firebaseで、お酒の写真とコメントを管理するWebアプリをつくってる。作成中のWebアプリ使用ユーザーは奥さんの1名だけ。なにかしらWebアプリを完成させたい、という目標を達成するために必要最低限の機能は一通り実装できた。使用ユーザーは奥さん1名だけなので、ログイン機能なんかいらないんだけれども、FirebaseのRealtimeDatabseのルールが誰でも書き込める、だとさすがにどうなのかなという思いから認証機能を実装することにした。※認証機能よりも画像の表示をなんとかしたほうがいいのはわかってるんだ。APIの認証を行うユーザーの管理をFirebaseで行うFIrebaseでの認証は以前、Udemyの以下のNuxt.jsの講習でさわったことがあったので、以下の講習内容とhttps://www.udemy.com/nuxtjs-vuejs-on-steroids/Firebase公式の内容で復習を行うことにしました。FirebaseEメールとパスワードでユーザー管理するFirebaseの認証方法はいろいろあって、一番初歩的なログイン画面をつくって、Eメール、パスワードを入力させて認証するものから、Google認証のようにOAuth2をベースにした認証やらなんやらがいっぱいある。このWebアプリのために、ユーザーとパスワードを管理してもらうのは申し訳ないので、最終的にはGoogle認証等に移行するつもりですが、とりあえずは初歩的なEメールとパスワード認証を使ってみることにします。Firebaseの認証についてFirebaseのAuthenticationという機能で特段サーバ等を用意せずともユーザーの管理ができてしまう恐ろしい子。Firebaseのコンソールで「Authencication」⇒「ユーザー」を参照すると、後述する処理で登録したユーザーの一覧を参照することができる。登録済みのユーザーこちらのFirebaseのAuthenticationの機能と、データを管理するFirebaseのRealtimeDatabaseを組み合わせて、ログイン機能を実装していく。画面は、login.vueというVueコンポーネントで実装しました。認証を行うにあたっては、firebase.authという便利なパッケージがあるのでこちらを使うのが基本だ思う。前述のUdemyの講習ではfirebase.authを使っていなかったので、復習の意味を込めて一旦firebase.authを使わないでやってみます。いっても、firebase.authの内部でやっていることを、直接やるだけの話です。さきほどのlogin.vueについて、ログインボタンを押した場合の処理を追記します。ユーザーの認証のエンドポイントに対して、EメールとパスワードとfirebaseのAPIKeyをつけてなげるだけです。上記APIは以下のドキュメントを参考にしています。https://firebase.google.com/docs/reference/rest/authAPIのキーは、Firebaseのコンソール画面にある↓のような箇所に書いてあるやつですね。FirebaseのAPIキーさて、上記login.vueに記載されている処理を実行すると、以下のようなレスポンスが返ってきました。}}どうやらFirebaseのAuthenticationの設定でログイン方法の設定を行っておく必要があるみたいです。パスワードを有効にする上記設定を行った後に、再度適当なメールアドレス、パスワードを設定したところ、無事リクエストが通りました。"b7NUgSEZIZavcPVADGR27Fg0XgZ2"}リクエストの結果、idTokenなるものが返ってきたので、これをlocalstorageに保存しておくことにします。APIに渡して、tokenをもとに認証されたユーザーのみデータベースの内容を書き込むことができる、という設定に変更することで今回やりたいことが実現できそうです。firebase.authを使う方法さきほどは、https://www.googleapis.com/identitytoolkit/v3/relyingparty/verifyPassword等のAPIを直接叩いていましたが、通常はfirebase.authの機能を使えばよさそうです。firebaseのパッケージをインストールします。firebase今回はNuxt.jsを使用しているので、pluginとしてFirebaseの初期設定処理を行っています。追加で取得できる値を設定します。firebaseにはいろんなパッケージが含まれているので、必要最低限のものだけimportするようにします。ここではfirebaseのコアであるfirebase/appと認証のパッケージであるfirebase/authをimportします。firebaseあとは、さきほど同様にlogin.vueでfirebase.authの認証用のメソッドを呼ぶだけになります。}</script>一点、firebase.authを使わなかった場合、tokenの値は直接取得できていましたが、firebase.authではtokenを取得するためにfirebase.auth().currentUser.getIdToken()を使う必要があるみたいです。こちらですが、tokenの有効期限が切れた後に、もっかい呼ぶと、リフレッシュトークンをもとに、新しいtokenを返却してくれるという素晴らしいものになっているみたいです。当初はtokenの有効期限もクライアント側に保持して、意識する必要があるのかななんて思ってたんですが、getIdTokenを使えば、有効期限を気にしなくてもよくなるのかしら。APIの認証を行うさきほど取得したtokenを使って、RealtimeDatabaseの認証の設定を行ってみます。RealtimeDatabaseはデータを取ってくるだけであれば、KEY名に.jsonをつけてあげるだけで簡単に取得できますね。私の場合、articlesとうキーにオブジェクトをぶらさげているので、以下のような形になります。APIでデータを取得するhttps://自分のrealtimedatabaseのdomain/articles.json現状、上記にアクセスすると誰でもarticles.jsonの内容を参照することができます。これをログインしたユーザーのみ参照できる、という設定に変えてみます。Firebaseのコンソール画面より、「Database」⇒「RealtimeDatabase」⇒「ルール」を開き、以下のようにreadの設定にauth!=nullを設定しています。authは、認証されたユーザーの情報が設定されるみたいです。Deniedと言われます。APIが認証され、articles.jsonの内容を取得することができました。ものすごく簡単にできちゃいますね。この調子でGoogle認証もやってみたいと思います。FIrebaseのEメール+パスワード認証をためす関連記事2020-01-04ApacheでCGIを実行する仕組みをのぞいてみる過去にPHPで以下のコードを実行した場合、このprintの結果はど...2019-01-022018年の振り返りあけましておめでとうございます。つまみぐいをするような学習方法は螺旋階段のよ...2018-09-153連休だしDocker環境でNuxt.jsをさわってみよう久々の更新。最近、Nuxt.jsとFirebaseで遊んでます。»プロフィール30歳からWebやらなんやらを学び始めた人のブログです。(4)検索はてなブログをはじめよう!konoemarioさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。