world株式会社つくろう、ともに。CEOCTOこんにちは、エンジニアの高崎です。Nuxt.jsとFirebaseを使って簡単なメモを取るWEBサービスを作るこの特集、前回は導入のためのセットアップをしました。Authentication(ログイン認証)を使ってGoogleアカウントでログインする機能を実装します。Googleのログイン認証を有効にする1.Firebaseのコンソールにログインします。2.プロジェクトを選択し、表示されるトップページの赤枠をクリックします。3.Nuxt.jsのプロジェクトをフォルダに戻って/pluginsフォルダの中に下記のようなfirebase.jsを作ります。4.2の画面で表示される画面を参考にapiKey〜messagingSenderIdまでをご自身のプロジェクトのものに変更します。"296913232266"*APIキーはご自身のものに置き換えてください。5.ターミナルを開き、Nuxt.jsのプロジェクトを展開します。プロジェクトフォルダまでのパス6.firebaseのパッケージをインストールします。firebase7./pages/index.vueを開き、11行目の.linksを以下のように差し替えます。8.27行目にfirebaseを使用するためのパッケージをインポートするためのコードを追加します。'@/plugins/firebase'を追加。9.31行目のcomponentsの下に7で追加したボタンと紐付けるための関数を追加します。10.index.vueファイルが以下のようになれば完成です。ここでのポイントは以下です。ボタンがクリックされた際、「googleLogin」という関数を呼び出すという意味で、27行目に登録された関数を呼び出しています。Firebaseでもともと用意されている認証機能を呼び出す関数です。このようにFirebaseであらかじめ用意されている機能をJSで呼び出します。Nuxt.jsだけでなく一般的なWebサイトでも使用可能なので、Webサイトに必要に応じて機能を組み込むことが簡単にできます。11.Firebaseのコンソールにアクセスし、プロジェクトを選択し、赤枠の箇所をクリックします。12.「ログイン方法」をクリックした後、Googleを有効にします。Googleアカウントによる認証の他に、メール、電話番号、Facebook、Twitter、GitHubアカウントなどによる認証機能が用意されています。13.ターミナルに戻り、プロジェクトフォルダを展開した上で、以下コマンドで開発サーバーを起動します。dev14.以下のような画面が現れ、画面下部の「Googleでログイン」ボタンを押すとGoogleのログイン認証画面が表示されます。ログイン中とそうでない場合で、画面を出し分けるこのままですと、ログイン前と後で画面が変わらないので、ログインした状態とそうでない状態で、画面を出し分けたいと思います。Nuxt.jsではコンポーネント指向といって、Webサイトのパーツごとにパーツを出し分けることができるので、そのパーツを作成したいと思います。1./componentsフォルダの中にHome.vueという名前で以下のようにログイン前のトップページ用の画面を準備します。2.今度は同じく/componentsフォルダの中にMypage.vueという名前で以下のようにログイン後のトップページ用の画面を準備します。3./pages/index.vueを開き、11行目の.linksを以下のように差し替えます。4./pages/index.vueの21行目に、ログイン前と後のコンポーネントを読み込みのための準備をします。5.完成した/pages/index.vueは以下のようになります。ここでのポイントは以下です。24〜25、30〜31行目、自分で作ったコンポーネントを呼び出してます。PHPやSSIのインクルードに近いイメージですが、変数などの受け渡すこともできるので、同じパーツの中身が違うものをたくさん作らなければいけない、Webサービス、Webサイトに便利です。13行目、14行目のように<コンポーネント名></コンポーネント名>で登録したコンポーネントを呼び出せます。13行目、14行目、v-ifというテンプレート内でif文を使う機能で、login判定をしています14行目、:user=>〜、という箇所で41行目で取得したユーザーのログインデータをMypageコンポーネントへ受け渡してます。Nuxt.js、そのもとになっているVue.jsではデフォルトで設定されているイベントがあり、33行目のasyncDataはレンダリング前にかならず発生するイベントなので、ここでログイン状況フラグや、ユーザーデータなどの変数を予め登録してます。41行目でFirebaseで提供している機能である、ログイン状況の監視する関数を呼び出しています。13.ターミナルに戻り、プロジェクトフォルダを展開した上で、以下コマンドで開発サーバーを起動します。dev14.以下のような画面が現れ、「Googleでログイン」ボタンを押すとGoogleのログイン認証画面が表示され、ログインすると以下のような画面が表示されたら完成です!いかがでしたでしょうか?また、ここまでのファイルを弊社のGitHubに公開してますので、ご不明な点がある方はこちらも御覧ください。次は、Nuxt.js+Firebaseを組みあわせてデータベースを使う方法について、記事を公開したいと思います。送信フォーム記事についてのご意見やご感想、ご質問をお気軽にお寄せください。※なお、ご質問については回答できない場合と、当ブログの記事にて個人情報を伏せたうえで回答させていただく場合がございます。Databaseを使ってデータを保存する記事を読む私たちは、D2Cブランドを中心に採用が広がるECプラットフォーム「Shopify」で作るネットショップのコンサルティングと構築を行っています。デザイン思考に基づくワークショップ(デザインスプリント)でスタッフが「自分ごと」と思えるサービスを作ります。詳しくはこちらをご覧ください。私たちは、毎週火曜日にオフィスの入っているカフェ兼シェアオフィスのメンバーで北欧式おやつの時間「フィーカ」を設けており、どなたでもお気軽に参加いただけます!詳しくはこちらをご覧ください。ソフトバンク(株)にて4年半、コーポレートサイトのWeb担当者として従事。2009年にフリーランスとして独立。Zone大好きな代表。policyContact。