Nuxt.jsとFirebase Authenticationでログイン認証を作る

こんにちは、エンジニアの高崎です。
Nuxt.jsとFirebaseを使って簡単なメモを取るWEBサービスを作るこの特集、前回は導入のためのセットアップをしました。今回はNuxt.jsとFirebase Authentication(ログイン認証)を使ってGoogleアカウントでログインする機能を実装します。

Googleのログイン認証を有効にする

1.Firebaseのコンソールにログインします。
2.プロジェクトを選択し、表示されるトップページの赤枠をクリックします。

3.Nuxt.jsのプロジェクトをフォルダに戻って/pluginsフォルダの中に下記のようなfirebase.jsを作ります。

4.2の画面で表示される画面を参考にapiKey〜messagingSenderIdまでをご自身のプロジェクトのものに変更します。


    apiKey: "ここにAPIキーが入ります",
    authDomain: "nuxt-js-firebase-studies.firebaseapp.com",
    databaseURL: "https://nuxt-js-firebase-studies.firebaseio.com",
    projectId: "nuxt-js-firebase-studies",
    storageBucket: "nuxt-js-firebase-studies.appspot.com",
    messagingSenderId: "296913232266"

*APIキーはご自身のものに置き換えてください。
5.ターミナルを開き、Nuxt.jsのプロジェクトを展開します。

cd プロジェクトフォルダまでのパス

6.firebaseのパッケージをインストールします。

npm install --save firebase

7./pages/index.vueを開き、11行目の.linksを以下のように差し替えます。

8.27行目にfirebaseを使用するためのパッケージをインポートするためのコードを追加します。

import AppLogo from '~/components/AppLogo.vue'

の下に、

import firebase from '@/plugins/firebase'

を追加。
9.31行目のcomponentsの下に7で追加したボタンと紐付けるための関数を追加します。

10.index.vueファイルが以下のようになれば完成です。

ここでのポイントは以下です。

  • 12行目の @click=”googleLogin” で、ボタンがクリックされた際、「googleLogin」という関数を呼び出すという意味で、27行目に登録された関数を呼び出しています。
  • 28行目、firebase.auth().signInWithRedirect〜がGoogle Firebaseでもともと用意されている認証機能を呼び出す関数です。このようにFirebaseであらかじめ用意されている機能をJSで呼び出します。Nuxt.jsだけでなく一般的なWebサイトでも使用可能なので、Webサイトに必要に応じて機能を組み込むことが簡単にできます。

11.Firebaseのコンソールにアクセスし、プロジェクトを選択し、赤枠の箇所をクリックします。

12.「ログイン方法」をクリックした後、Googleを有効にします。

また、Googleアカウントによる認証の他に、メール、電話番号、Facebook、Twitter、GitHubアカウントなどによる認証機能が用意されています。
13.ターミナルに戻り、プロジェクトフォルダを展開した上で、以下コマンドで開発サーバーを起動します。

npm run dev

14.以下のような画面が現れ、画面下部の「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.ターミナルに戻り、プロジェクトフォルダを展開した上で、以下コマンドで開発サーバーを起動します。

npm run dev

14.以下のような画面が現れ、「Googleでログイン」ボタンを押すとGoogleのログイン認証画面が表示され、ログインすると以下のような画面が表示されたら完成です!

いかがでしたでしょうか?
また、ここまでのファイルを弊社のGitHubに公開してますので、ご不明な点がある方はこちらも御覧ください。
次は、Nuxt.js+Firebaseを組みあわせてデータベースを使う方法について、記事を公開したいと思います。
どうぞ宜しくお願いします!

つづく