nuxt.js+Firebaseで認証ページを作る①

Firebase準備編

今回は、nuxt.jsとFirebaseのAuthenticationを利用して
WordPress的なCMSを想定した、認証画面を作っていこうかと思います。

nuxt.js初心者、Firebase初心者にも手順が分かりやすいように
4回に分けてやっていこうと思います。

nuxt.js+Firebaseで認証ページを作る① (Firebase準備編)
nuxt.js+Firebaseで認証ページを作る② (nuxt.jsインストール編)
nuxt.js+Firebaseで認証ページを作る③ (pages&layouts準備編)
nuxt.js+Firebaseで認証ページを作る④ (認証機能実装編)

以上の4回です。
それでは早速、第一回目という事で
Firebase準備編からやっていきましょう。

Firebaseプロジェクトを立ち上げよう。

それではまずは、こちらのFirebaseのコンソールにアクセスして
Firebaseの新規プロジェクト立ち上げをやっていきましょう。

ちなみにFirebaseを利用する為にはGoogleアカウントが必要です。
Googleアカウントが無いという人はアカウントを用意してください。


はじめて、Firebaseのコンソールにアクセスした場合だと
画像のように
「Firebaseへようこそ」と書かれたページが表示されると思います。
画像に示す通り「プロジェクトを作成」というボタンがあるかと思いますので
クリックします。
https://i.imgur.com/r2lmh2e.png


すると、プロジェクトの作成画面が表示されると思います。
この画面では、任意のプロジェクト名を入力しましょう。
今回は「test」としておきました。
「test」みたいな簡単な名前だと、既に使われている名前だったりしそうですが
その辺は、「test-a2b3c」のような感じで、Firebase側が自動で適当なIDを振ってくれるので
気にせず好きな名前で登録してください。

プロジェクト名が入力できたら
続行ボタンをクリックします。
https://i.imgur.com/CaedDvW.png


次に、Googleアナリティクスをプロジェクトに追加するかですが
今回は、WordPressのようなCMSの認証画面を想定しているので
「プロジェクト用にGoogleアナリティクスを設定する」という方を選択して
「続行」をクリックしましょう。
https://i.imgur.com/fbzypGg.png


続いて、Googleアナリティクスの構成との事ですが
この辺は、どういう設定でもとりあえずは
今回作る、認証機能とはあまり関係ないので
デフォルトを選択しておきましょう。
「Default Account for Firebase」という項目が選択されていることだけ確認して
「プロジェクトを作成」をクリックしましょう。

すると、プロジェクト準備中のローディング画面が表示されます。
10秒〜20秒ほど待つと
「プロジェクトの準備ができました」と表示されます。
以上でプロジェクトの立ち上げは完了です。
https://i.imgur.com/fFuzT4v.png

Firebaseプロジェクトにアプリを追加しよう。

それでは、続いてFirebaseにアプリを追加していきましょう。
「Firebaseにアプリを追加ってどういう事？」という人の為に軽くだけ
Firebaseは、BaaS(Backend as a Service)というクラウドサービスです。

簡単に言うとアプリを開発する際、本来自分で開発しなければならない
アプリのバックエンド部分の代わりをしてくれるもの

そんなところです。

アプリを追加と言うのは
このFirebase上に作ったバックエンドを利用するアプリを登録するというような感じです。

この辺については、別の機会、
Firebaseの主機能「Firestore」の使い方など書く機会があれば
詳しく書こうと思いますが

認証画面を作る上では
幾つもあるFirebaseの機能のうち
「Firebase Authentication」という機能しか使わないです。
なので、Firebaseについては今回は作業の手順だけ頭に入れるくらいのつもりで
サラッと先に進むことにしましょう。

それでは、閑話休題ということで
続き進めていきます。


改めてFirebaseコンソールにアクセスすると
画像のように「プロジェクトを追加」という項目の隣に先ほど作成した
プロジェクトがあると思いますので
そちらをクリックしましょう。
https://i.imgur.com/kUWjAhz.png



するとFirebaseの管理画面に入れます。
はじめて管理画面に入ると
ホーム画面に親切に「アプリにFirebaseを追加しましょう」と案内してくれているので
その下の「< / >」アイコンをクリックしましょう。
https://i.imgur.com/IL01vxU.png


アプリの登録画面が開いたので
先ほどのプロジェクト立ち上げの時同様、任意のアプリ名を入力しましょう。
プロジェクト名と違う名前でも同じ名前でも良いでしょう。
ここでは、プロジェクト名と同じ「test」としておきます。
アプリ名が入力できたら「アプリを登録」をクリックします。
https://i.imgur.com/UHS3l6g.png


アプリの登録ができたので
アプリの「APIキー」等が表示されました。
これらは、次回「nuxt.jsインストール編」の最後に
nuxtのプラグイン導入の際に使用します。
今回は、そのまま「コンソールに進む」ボタンをクリックしましょう。
https://i.imgur.com/XqnNHCM.png

認証機能の為のFirebaseログインプロバイダを追加しよう。

続いて、認証機能実装の為に
Firebase側でも、認証ユーザーの登録など
いくつか設定や登録の作業が必要なので
そちらを進めていきましょう。

Firebaseの管理画面のホームに
「Authentication」という項目があります。
こちらをクリックしてFirebase認証の設定画面へアクセスしましょう。
https://i.imgur.com/esd5wnH.png


Firebase認証の設定画面が開いたら
まずは、「ログイン方法」の設定をしていきましょう。
左上に「Authentication」という見出しがあります。
その下のナビゲーションの内の「ログイン方法」をクリックします。
すると、画像のように
「メール/パスワード」「電話番号」「Google」「Facebook」「Twitter」と
色々な、ログインプロバイダの一覧が表示されたと思います。

この中から、今回使うのは「メール/パスワード」なので
こちらをクリックしましょう。
https://i.imgur.com/wEgarC2.png


色々とログインプロバイダがある中でも
メールログインは、かなり設定が簡単な方です。
画像のように「有効にする」スイッチをオンにしてやるだけです。
これだけでログインプロバイダの準備は終わりです。

しかし、これだけではまだ
ログイン可能なユーザーが誰もいない状態となってしまっているので
ログインできるユーザーを登録する必要があります。
https://i.imgur.com/FrxKjjW.png

認証ユーザーを登録しよう

それでは、最後にログインユーザーの登録を行っていきましょう。
と言っても
もう残りの作業は、ものの数秒で終わってしまう程度です。
サラッと終わらせてしまいましょう。

左上の見出し「Authentication」の下のナビゲーションの内の「ユーザー」をクリックします。
続いて「ユーザーを追加」ボタンをクリックしましょう。
ちなみに、ログインプロバイダを一つも有効にしていない状態でこのページを開くと
「ユーザーを追加」ボタンはグレーアウトされた状態になっているので
先に、ログインプロバイダを有効にするようにしましょう。
https://i.imgur.com/ebrxYs2.png


さて、これが「Firebase準備編」最後の作業です。
「ユーザーを追加」ボタンをクリックすると
画像のようなウィンドウが開くので
メールアドレスと任意のパスワードを設定して
ウィンドウ右下の「ユーザーを追加」をクリックしましょう。
これで、今回作成する認証画面にログインできるユーザーを
登録することができました。
https://i.imgur.com/wppT7Vz.png

まとめ

以上で「Firebaseの準備編」は終わりです。
次回は、nuxt.jsのインストールと
今回、Firebaseのプロジェクト立ち上げができてるので
nuxt.jsにFirebaseと通信するためのplugin導入まで
やっていきましょう！

plugin導入の際には、今回の作業の途中で軽く紹介した「APIキー」の
組み込みもやっていきます。

それでは、また次回！