🔰【初心者】Nuxt.js とFirebaseを使ってログイン機能を実装する。 その２

前回に引き続き`Nuxt.js`を用いて、アプリケーションを作っていきたいと思います。
今回は、タイトル通り`Firebase`を導入してログイン機能を実装する準備をしていきたいと思います。

前回の記事を読まれていない方は[こちら](https://qiita.com/sychocola1/items/6aa185960a9f4e40d3d0)からどうぞ。


##Firebase側の準備
`Firebase`はGoogleが運用しているサービスになるため、必ずGoogleアカウントが必要になります。
Googleアカウントはすぐにできるので、そこは割愛させていただきます。


###Firebaseの機能
まずはじめに、今回使っていく機能を簡単に紹介していきます。

#### Authentication

まず、ログイン機能を司っている`Firebase Authentication`です。
こちらでログインする際に使う、アカウント・パスワードの情報を扱います。
今回の記事のメインになるやつです。

<img width="1380" alt="スクリーンショット 2020-01-21 14.51.29.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/8829f90f-0151-2c41-fc54-c433639ac68a.png">

#### Firestore

こちらがアプリケーションで扱うデータを保管するデータベース（DB）です。
管理者画面などを作る際にはここにユーザー情報を格納するのがいいと思います。

<img width="1380" alt="スクリーンショット 2020-01-21 14.55.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/6ccb1c0c-491e-005f-4ddd-c1fccbf6f0e5.png">

今回主に使っていくのはこの２つのサービスだけです。
他のサービスが気になる方がいれば、[ここ](https://qiita.com/dogwood008/items/fa95b62ad151f823af70)に`Firebase`が提供しているサービスを詳しく説明してくれている記事があったので、チェックしてみてください。

###Firebaseプロジェクトを作る
では以上に説明した機能を実際にアプリケーションに落とし込んでいく準備をしていきましょう。
[ここ](https://firebase.google.com/?hl=ja)から、`fifebase`のトップページに移動して、「使ってみる」をクリックしてください。
<img width="1382" alt="スクリーンショット 2020-01-21 14.25.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/cfb413c0-406f-4acf-2fd6-0dbdd1c708c3.png">

すると、「プロジェクトを追加」するボタンがあると思うのでそこをクリック。

<img width="503" alt="スクリーンショット 2020-01-21 14.26.32.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/d6f6480f-5082-3618-581d-79529f54a1d3.png">


そこで、今回の`Firebase`のプロジェクト名を決めてください。

<img width="1440" alt="スクリーンショット 2020-01-21 14.18.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/1f9a695e-c998-8e95-571e-1bf4669f7d2b.png">

次に、`Googleアナリティクス`の使用の有無を聞かれるので、有効にしましょう。
`Googleアナリティクス`とは、そのサービスのアクセス数・使用デバイス・閲覧時間などを統計してくれるサービスです。
これらは基本無料なので、とりあえず有効にしておきましょう。
<img width="1440" alt="スクリーンショット 2020-01-21 14.28.01.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/b4ba9556-1bce-3969-9e4c-7b6ddb4ecdc1.png">

ここで、`Googleアナリティクス`のアカウントが必要になります。
折角ですので、「新しいアカウントを作成」してみましょう。
<img width="1440" alt="スクリーンショット 2020-01-21 14.35.55.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/78d3fc13-79f4-d451-3ed3-e9d597c5485a.png">

アカウント名を入力した後に、アナリティクスの対象地域を選択します。
この記事をみている時点で、日本在住だと思うので「日本」を選択してください。
<img width="1440" alt="スクリーンショット 2020-01-21 14.38.05.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/62bc0bd1-990c-144b-930a-b138af7a91de.png">

ではプロジェクトを作成してみましょう！

はい、以下のようになればプロジェクトは出来ています。
<img width="1380" alt="スクリーンショット 2020-01-21 14.45.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/1fca3105-d5f9-d7fa-bb99-82dbee95ebb5.png">

###Firebaseの基本情報を表示させる
ここで、後に記述する必要が出てくるこのプロジェクトの情報をみてみましょう。

`Firebase`のトップページ左上にある歯車ボタンを押して、「プロジェクトの設定」をクリック。
<img width="414" alt="スクリーンショット 2020-01-21 16.24.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/54f9c68e-56f7-0bf3-f903-ba6fdb33c4bf.png">

一番下に、以下のような欄があるので今回は</>のアイコンをクリック。
<img width="940" alt="スクリーンショット 2020-01-21 16.24.27.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/f3f67446-b12a-fec0-95f1-c42e3d73b6c7.png">

すると、`Firebase`を追加するアプリのニックネームを入力するページに飛ぶので、適当に名前をつけてあげてください。
今回は`Firebasse Hosting`の設定をしないので、下のチェックボックスは無視でいいです。
ちなみに`Firebase Hosting`とは、アプリケーションの公開時に安全に配信できるようにする機能のようです。

`Firebase Hosting`の公式は[こちら](https://firebase.google.com/docs/hosting?hl=ja)。
<img width="1440" alt="スクリーンショット 2020-01-21 16.31.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/d2c5318f-6c97-25d1-dcf3-c29fe18219f3.png">

すると今回の`Firebase`の情報を見ることができます。
このまま「コンソールに進む」を押してください。

<img width="1440" alt="スクリーンショット 2020-01-21 16.31.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/b37140bd-d78f-f3a8-14ab-894eaa88c619.png">

以降この情報は先ほどの「プロジェクトの設定」から簡単に見ることができます。

###Firestoreの設定

次に、`Firestore`の設定を行います。
`Firebase`トップページの右にある「開発」の「Database」の「データベースの作成」をクリック。
<img width="1385" alt="スクリーンショット 2020-01-21 19.38.38.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/cca195d3-5525-05aa-d27d-8aaf09dfd0f5.png">

すると、以下の画面になるので、今回は「テストモード」で行います。
<img width="814" alt="スクリーンショット 2020-01-21 19.39.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/b621eb2d-4e70-e8ad-e17f-9a679085d048.png">

ここが重要なのですが、「Cloud Firestoreのロケーション」は必ず`Googleアナリティクス`のロケーションに合わせてください。
ここで合わせないと、`Firestore`が機能しません。
さらにタチの悪いことに、これは一回決めてしまうと、以降変更することができません。
必ず、「asia-northeast1」（東京）もしくは「asia-northeast2」（大阪）に設定してください。
<img width="814" alt="スクリーンショット 2020-01-21 19.39.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/1c0c88d5-1741-c0d2-ca2c-fd432a66cc55.png">

###Firebase Authentication
次に、`Firebase Authentication`の設定を行います。
`Firebase`トップページの右にある「開発」の「Authentication」をクリック。
今回はメールアドレスとパスワードでログイン認証を行なっていきたいので、「ログイン方法」の「メール/パスワード」をクリック。
<img width="1382" alt="スクリーンショット 2020-01-21 22.48.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/dfdef558-5674-7e83-6bd9-a04c6073bc46.png">

１つ目のバーを有効にして保存してください。
<img width="968" alt="スクリーンショット 2020-01-21 22.49.07.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/0e7752fc-79ca-25bb-9274-6c1b2d837ccd.png">

これで、メールアドレス/パスワードでのログインが可能になりました。

では早速、ログインアカウントのサンプルを作成してみましょう。
「ユーザー」から「ユーザーの追加」をクリックしてください。
<img width="1383" alt="スクリーンショット 2020-01-21 22.49.40.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/cc5fde4f-487f-5f2f-0961-a26de7c8bfd8.png">
ここで、実際に使うアカウントの設定ができるので、適当に作ってしまいましょう。
<img width="1384" alt="スクリーンショット 2020-01-21 22.50.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/cdd489d3-33c5-67f3-d247-67e65694e791.png">
これは後に使っていくので、記憶しておいてください。


以上で、`Firebase`側の下準備は全て終了です。



##アプリケーション側の準備
(2020/3/29修正)

次は、`Firebase`を導入できるようにアプリケーション側の準備をします。

まずは今回のアプリケーションに`Firebase`を導入します。
以下のうち（npm, yarn）前回の質問で答えた方を実行してください。

```
npm install firebase --save
```
```
yarn add firebase --save
```
以上のコマンドを終えると、`/package.json`に`firebase`の記述が加わり、導入できていることが確認できます。
<img width="1380" alt="スクリーンショット 2020-01-21 15.53.52.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/e17dc683-b1a8-9b1a-c74e-1d9d7975b8ff.png">
ここでさらに、`firebase`の`CLI`を導入します。（`CLI(Command Line Interface)`はコマンド操作のことです。）

```
npm install -g firebase-tools
```

```
yarn global add -g firebase-tools
```
さらに`Firebase`にログインします。

```
firebase login
```
飛ばされた先で支持通りに進み、
<img width="537" alt="スクリーンショット 2020-01-21 17.21.14.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/f015127a-464c-a09c-97ee-55a1e18a67ed.png">
この画面が表示されると、ログイン完了です。


###Firebaseディレクトリの導入
次に、`Firebaseディレクトリ`をインストールします。

```
firebase init
```

ここでも前回みたいに、めちゃくちゃ質問されます。

####サービスの選択

```
? Which Firebase CLI features do you want to set up for this folder? Press Space
 to select features, then Enter to confirm your choices. (Press <space> to selec
t, <a> to toggle all, <i> to invert selection)
❯◯ Database: Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
 ◯ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage: Deploy Cloud Storage security rules
 ◯ Emulators: Set up local emulators for Firebase features

```
ここでは`Firebase`のどのサービスを使うかを選択します。
今回は`Firestore`を選択します。

####プロジェクトの選択

```
? Please select an option: (Use arrow keys)
❯ Use an existing project 
  Create a new project 
  Add Firebase to an existing Google Cloud Platform project 
  Don't set up a default project 
```
先ほどプロジェクトは作っているので、`Use an existing project`を選択します。

```
? Select a default Firebase project for this directory: 
❯ qiita-example-d1ffc (Qiita-Example) 
```
さらに、先ほど作った自分のプロジェクトを選択します。

####Firestoreのルールの記述

```
? What file should be used for Firestore Rules? (firestore.rules) 

```

```
? File firestore.rules already exists. Do you want to overwrite it with the Fire
store Rules from the Firebase Console? 
```

```
? What file should be used for Firestore indexes? (firestore.indexes.json) 

```
これらはそのままEnterで大丈夫です。


```
✔  Firebase initialization complete!
```
最後にこの一文が表示されたら、`Firebaseディレクトリ`の初期設定は完了です！

###Firebaseをプラグインする
次に`firebase`は外部モジュールの扱いになるので、前回述べた`plugins`にも記述していきます。
まずは、`/plugins`のなかに`index.js`を新しく作ってください。

```/plugins/firebase.js
import firebase from "firebase";

const config = {
  apiKey: process.env.VUE_APP_apiKey,
  authDomain: process.env.VUE_APP_authDomain,
  databaseURL: process.env.VUE_APP_databaseURL,
  projectId: process.env.VUE_APP_projectId,
  storageBucket: process.env.VUE_APP_storageBucket,
  messagingSenderId: process.env.VUE_APP_messagingSenderId,
  appId: process.env.VUE_APP_appId,
  measurementId: process.env.VUE_APP_measurementId
};
if (!firebase.apps.length) {
  firebase.initializeApp(config);
}

export default firebase;
```
この`process.env`は、
「`.env`のファイルの中身の値を持ってくる」
という意味です。
そのため、`.env`ファイルに今回の`Firebaseプロジェクト`に必要な情報を記述していきます。

なぜこのようなめんどくさい事をするのかというと、アプリケーションを公開した際に、`Firebase`の情報が漏れる事を阻止するためです。
`plugins/index.js`に情報をベタ打ちしているとすぐに`Firebase`の特定ができますが、公開されることがない`.env`に情報を記述する事で、それを阻止することができます。

では、`.env`に先ほど確認した情報を記述していきましょう。
「プロジェクトの設定」の一番下にある、`Firebase SDK snippet`の「構成」を選択し、ここに書いてある情報を記述していきます。
<img width="1379" alt="スクリーンショット 2020-01-21 16.51.00.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/412378/b1388abe-7b22-74a7-8883-9f96bdafbe54.png">

```/.env
VUE_APP_apiKey　= "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_authDomain = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_databaseURL = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_projectId = "xxxxxxxxxxxxxxxxx",
VUE_APP_storageBucket = "xxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_messagingSenderId = "xxxxxxxxxxxxxx",
VUE_APP_appId = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
VUE_APP_measurementId = "xxxxxxxxxxxxxxx"
```
こんな感じになると思います。
xxxの部分は自分の`Firebase`の情報を書いてください。
またここで`VUE_APP_`を頭につける必要があります。（これがないと読み込まれません。）

また`plugins`を使っているので、`nuxt.config.js`に「`plugins`に`Firebase`を使います！」と宣言しないといけません。

```/nuxt.config.js
import colors from 'vuetify/es5/util/colors'

export default {
...
plugins: [
    '~/plugins/firebase',
  ],
...
}
```
こんな感じです。

以上で`Firebase`の導入は完了です。

##まとめ
下準備だけでもかなり時間がかかってしまいました。

次回からは、ようやくレイアウトの実装を行なっていきたいと思います。
また間違えている点などがあれば教えていただけると助かります！！
↓↓↓↓↓↓↓ あなたの記事の内容

##追記
(2020/3/29)
**アプリケーション側の準備**のセクションで

```
yarn add -g firebase-tools
```
の部分が、

```
yarn global add -g firebase-tools
```
であるという指摘をいただきました。
間違えている点を指摘していただきありがとうございました！
───────
その３は[こちら](https://qiita.com/sychocola1/items/d3f41ac0fdf19c1a4764)からどうぞ！
↑↑↑↑↑↑↑ 編集リクエストの内容