第3回「FirebaseAuthによるログイン・ログアウト導入」@FirebaseAuth＋Nuxt.js＋Go(v1.11)＋GAE開発シリーズ

# お題
[前回](https://qiita.com/sky0621/items/d885c52de0534560a10f)でFirebaseAuth導入前の準備が出来たので、今回からようやくFirebaseAuthを導入する。
今回は、ログイン・ログアウト。ただし、メールアドレスとパスワードでログインするパターンのみ。

# 前提
以下は他にいくらでもよい記事があるので省略。

- 開発環境の構築（GolangやらYarnやらのインストール等）
- Google Cloud Platform環境の取得（App Engine有効化）
- Firebase環境の取得
- Vue.jsやNuxt.jsのチュートリアル

# 開発環境
### # OS
```
$ cat /etc/os-release 
NAME="Ubuntu"
VERSION="18.04.1 LTS (Bionic Beaver)"
```

### # 依存モジュールのバージョン
`package.json`の内容より、以下の通り。

```
    "nuxt": "^2.3.4",
    "vuetify": "^1.3.14",
    "vuetify-loader": "^1.0.8",
    "@nuxtjs/axios": "^5.3.6"
```

### # Yarn
```
$ yarn -v
1.12.3
```

### # Golang
```
$ go version
go version go1.11.4 linux/amd64
```

# 実践

### ■FirebaseAuthをフロントエンドに導入
自作のWebサイトにFirebaseAuthの認証機能を使うにあたって、まず、Firebaseをフロントエンドのプロジェクトに導入する必要がある。
下記によると、FirebaseAPIを使うためのAPIキーやら認証ドメインやらの設定を書いて`firebase SDK`のアプリ初期化コードを実行するとよいらしい。
https://firebase.google.com/docs/web/setup?hl=ja

#### 導入コマンドと結果確認

```
$ yarn add firebase
　　〜〜省略〜〜

$ yarn add firebase-admin
　　〜〜省略〜〜
```

```[package.json]
$ cat package.json 
{
  "name": "frontend",
　　　〜〜省略〜〜
  "dependencies": {
　　　〜〜省略〜〜
    "firebase": "^5.8.0",
    "firebase-admin": "^6.5.0",
　　　〜〜省略〜〜
  },
　　　〜〜省略〜〜
}
```

#### プラグインとして初期化コードを実装

Firebaseアプリの初期化は１回きりでいいのでプラグインとして実装

```js:[frontend/plugins/firebase.js]
import firebase from 'firebase'

if (!firebase.apps.length) {
  firebase.initializeApp(
    {
      apiKey: process.env.apiKey,
      authDomain: process.env.authDomain,
      databaseURL: process.env.databaseURL,
      projectId: process.env.projectId,
      storageBucket: process.env.storageBucket,
      messagingSenderId: process.env.messagingSenderId
    }
  );
}

export default firebase
```

APIキー等の情報は`process.env`から取得
実際の値は下記の環境に応じて適用されるファイルに記載（間違ってもpublicなGitHubリポジトリにアップしてはならない・・・）
※このあたり、ローカルでだけ動作確認するレベルならローカルストレージに実値を持たせておけばいいのだけど、GAEデプロイするとなるとそうもいかない。。。

```
$ tree -L 1 frontend/
frontend/
├── README.md
├── assets
├── components
├── dist
├── env.development.js
├── env.production.js
├── jest.config.js
├── layouts
　〜〜省略〜〜
```

```js:[frontend/env.development.js]
module.exports = {
  apiBaseUrl: 'http://localhost:8080/api/v1',
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  projectId: "<PROJECT_ID>",
  storageBucket: "<BUCKET>.appspot.com",
  messagingSenderId: "<SENDER_ID>",
}
```

```js:[frontend/env.productio.js]
module.exports = {
  apiBaseUrl: 'https://<PROJECT_ID>.appspot.com/api/v1',
  apiKey: "<API_KEY>",
  authDomain: "<PROJECT_ID>.firebaseapp.com",
  databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
  projectId: "<PROJECT_ID>",
  storageBucket: "<BUCKET>.appspot.com",
  messagingSenderId: "<SENDER_ID>",
}
```

### ■メールアドレス・パスワードを用いたSignIn

#### FirebaseAuthコンソールで事前のユーザ作成

なにはともあれ、最初のユーザがいないとログインができないので作っておく。

![screenshot-console.firebase.google.com-2019-01-20-20-49-51-641.png](https://qiita-image-store.s3.amazonaws.com/0/180599/eac883fd-2f15-8dde-c989-ab4860a7c876.png)

![screenshot-console.firebase.google.com-2019-01-20-20-53-22-905.png](https://qiita-image-store.s3.amazonaws.com/0/180599/2c459c39-9c87-5627-b37f-7f82d13f39e1.png)

![screenshot-console.firebase.google.com-2019-01-20-20-54-01-738.png](https://qiita-image-store.s3.amazonaws.com/0/180599/4531d8ca-e56e-9c3f-3957-c884451ad643.png)

#### loginコンポーネントにFirebaseAuthのSignIn機能を実装

`frontend/components/login.vue`にSignInロジックを追加

```vuejs:[frontend/components/login.vue（&lt;template&gt;部分は省略）]
<script>
import firebase from '~/plugins/firebase'

export default {
  data() {
    return {
      email: '',
      password: '',
      errMsg: ''
    }
  },

  methods: {
    async login() {
      await firebase
        .auth()
        .signInWithEmailAndPassword(this.email, this.password)
        .then(res => {
          // ログイン正常終了時はログイン後の初期画面に遷移する。
          this.$router.push('/')
        })
        .catch(error => {
          this.errMsg = error.message
          console.log(
            'errorCode:' + error.code + ', errorMessage:' + error.message
          )
        })
    }
  }
}
</script>
```

#### 動作確認

FirebaseAuthコンソールで事前登録したユーザのメールアドレスとパスワードを入力して「LOGIN」ボタン押下すると

---
![screenshot-localhost-3000-2019-01-20-21-02-51-731.png](https://qiita-image-store.s3.amazonaws.com/0/180599/e16f06d6-7fb3-5cd2-98e5-a3d51248f1a5.png)

---

ログイン後トップ画面に遷移する。

---
![screenshot-localhost-3000-2019-01-20-21-03-34-380.png](https://qiita-image-store.s3.amazonaws.com/0/180599/4182f992-b51d-a578-f4aa-4f2acc0b60c9.png)

---

FirebaseAuthコンソールにて先ほど作成したユーザのログイン状況を見てみると

![screenshot-console.firebase.google.com-2019-01-20-21-04-01-901.png](https://qiita-image-store.s3.amazonaws.com/0/180599/5a0d8859-73a1-0a4e-be92-8e1149d98e34.png)

ちゃんとログイン日が記載されている。

試しにメールアドレスとパスワードなしでログインしてみると

---
![screenshot-localhost-3000-2019-01-20-21-09-21-755.png](https://qiita-image-store.s3.amazonaws.com/0/180599/5d8421f9-a420-ec07-b26c-640c82b36b5a.png)

---

ちゃんとFirebaseAuthのSDKからエラーメッセージが取得できる。

### ■SignOut

SignInが終わったら、今度は当然SignOut

#### defaultレイアウトにFirebaseAuthのSignOut機能を実装

`frontend/layouts/default.vue`にSignOutロジックを追加

```vuejs:[frontend/layouts/default.vue]
<template>
  <v-app light>
    <v-btn
      class="mx-1 my-2 px-3 py-2 lime"
      @click="logout"
    >
      LOGOUT
    </v-btn>
    <nuxt />
  </v-app>
</template>

<script>
import firebase from '~/plugins/firebase'

export default {
  methods: {
    async logout() {
      await firebase
        .auth()
        .signOut()
        .then(res => {
          // ログアウト正常終了時はログイン画面に遷移する。
          this.$router.push('/login')
        })
        .catch(error => {
          console.log(
            'errorCode:' + error.code + ', errorMessage:' + error.message
          )
        })
    }
  }
}
</script>
```

#### 動作確認

「LOGOUT」ボタンを押下すると

---
![screenshot-localhost-3000-2019-01-20-22-27-45-393.png](https://qiita-image-store.s3.amazonaws.com/0/180599/2f9f6999-0f6a-b22a-5771-6660562eaece.png)

---


SignOutが正常終了してログイン画面に遷移する。

---
![screenshot-localhost-3000-2019-01-20-22-29-51-058.png](https://qiita-image-store.s3.amazonaws.com/0/180599/0e5741e6-f58d-a7d4-90e4-9391f6e3828d.png)

---

### ■ここまでの全ソース
https://github.com/sky0621/Dotato-di-una-libreria/tree/f88a29e52e06a81665fc669eb9cf503322fa9555/frontend