QuasarFramework(Vue.js) に日本語化したFirebaseUIを導入する

Firebaseには、FirebaseUIという公式？のパッケージが存在します。これは、Google,Twitter,FACEBOOKなどのAuth認証が比較的簡単に実装できるというスグレモノです。QuasarFramework(Vue.js)でも使えそうなので、試しに実装してみました。

# 参考
https://firebase.google.com/docs/auth/web/firebaseui?hl=ja
https://medium.com/dailyjs/authenticating-a-vue-js-application-with-firebase-ui-8870a3a5cff8
https://qiita.com/okdyy75/items/24e78fdd0f12742b9e82

# 環境
- MacOS Catalina 10.15.1
- node v10.16.0
- npm 6.11.3
- Firebaseのアカウントを持っている

# Quasar Framework をインストール・設定

## quasar-cliと、vue-cliをinstallします。

```
# yarnを使う場合（推奨！）
$ yarn global add vue-cli
$ yarn global add quasar-cli

# or

# npmを使う場合
$ npm install -g quasar-cli
$ npm install -g vue-cli
```

## quasar-cli で、QuasarFrameworkの新規プロジェクトを作成します。

```
# 設定は公式サイトに従って適当に設定します。
$ quasar create <projectname>

# 設定例は以下のとおりです。
? Project name (internal usage for dev) quasar-firebaseui
? Project product name (must start with letter if building mobile apps) Quasar App
? Project description A Quasar Framework app
? Author xxxxxxxxxxxx <xxxxxxxxxxxx@xxxxxxxxxxxx.xxx>
? Pick your favorite CSS preprocessor: (can be changed later) Sass
? Pick a Quasar components & directives import strategy: (can be changed later) Auto import
? Check the features needed for your project: ESLint, Vuex, Axios, Vue-i18n, IE11 support
? Pick an ESLint preset: Standard
? Cordova/Capacitor id (disregard if not building mobile apps) org.cordova.quasar.app
? Should we run `npm install` for you after the project has been created? (recommended) yarn

$ cd <projectname>

# 開発環境で起動させてみます。
$ quasar dev

# オプションで、テーマをios風にできます。
$ quasar dev -t ios
```

localhost:8080 にアクセスして、quasar のデフォルトのページが表示されれば成功です。

# Firebaseのプロジェクト作成
* Firebaseのコンソールからプロジェクトを作成します

<img width="344" alt="スクリーンショット 2019-11-17 22.19.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/8d8e97c2-1fbc-dce8-ece6-86cf913cfd4c.png">

* 画面の指示に従って、プロジェクトを作成します。今回は本番環境ではないので、アナリティクスは無効でOKです。
<img width="734" alt="スクリーンショット 2019-11-17 22.20.44.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/90bd2f0a-ea04-3d29-7700-efd311ce16e3.png">

* Authenticationの設定をします。ここでは、「メール／パスワード」と「Google」を設定します。
<img width="930" alt="スクリーンショット 2019-11-17 22.25.03.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/cbf32a11-bec7-a532-720a-bd303aed9f78.png">

* テンプレートのタブで、「テンプレート言語」を日本語設定にします。
<img width="408" alt="スクリーンショット 2019-11-17 22.29.24.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/c89eb48a-856f-b9ec-fd34-16579ad3ff59.png">
<img width="395" alt="スクリーンショット 2019-11-17 22.29.51.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/5132522d-063e-39ce-24b8-4a6d9fa12376.png">

## ウェブアプリを追加して、必要な情報をコピペしておきます。あとで使います。
* ウェブアプリを追加ボタンをクリックします。
<img width="431" alt="スクリーンショット 2019-11-17 23.53.04.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/450d8883-cef0-fa81-0177-a9b27541cf4e.png">

* 適当なニックネームをつけてウェブアプリにfirebaseを追加するために必要なデータを表示させます。
<img width="635" alt="スクリーンショット 2019-11-17 23.53.26.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/22bfcd58-45c8-5b98-3bde-99f0aafaeef8.png">

* 登録したあとに、表示されるコードをコピペしておきます。

<img width="336" alt="スクリーンショット 2019-11-17 23.53.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/e9337a32-dbfd-3acd-3b35-d9d129d3710c.png">

これで、ひとまずコンソール側の設定は終わりです。

# Firebase, FirebaseUIをインストール・設定
## まず、firebase, firebaseui を追加します。

```
$ yarn add firebase firebaseui firebaseui-ja
```

## 最初に英語のままfirebaseUIを設定してみます。

`pages/Index.vue`を以下の通り公式サイトにしたがって編集します。
https://firebase.google.com/docs/auth/web/firebaseui?hl=ja

```vue

<template>
  <q-page class="flex flex-center">
    <!-- <img alt="Quasar logo" src="~assets/quasar-logo-full.svg"> -->
    <div id="firebaseui-auth-container"></div>
  </q-page>
</template>

<script>
var firebase = require('firebase')
var firebaseui = require('firebaseui')
// 先程コピペしたものです。
const config = {
  apiKey: 'xxxxxxxxxxxxxxxxx-xxxxxxxxxxxxxx',
  authDomain: 'xxxxxxxxxxxxxx.firebaseapp.com',
  databaseURL: 'https://xxxxxxxxxxxxxx.firebaseio.com',
  projectId: 'xxxxxxxxxxxxxx-xxxxxxxxxxxxxx',
  storageBucket: 'xxxxxxxxxxxxxx-xxxxxxxxxxxxxx.appspot.com',
  messagingSenderId: 'xxxxxxxxxxxxxx',
  appId: '1:xxxxxxxxxxxxxx:web:xxxxxxxxxxxxxx'
}

firebase.initializeApp(config)

const uiConfig = {
  signInSuccessUrl: '/',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ]
}
const ui = new firebaseui.auth.AuthUI(firebase.auth())
ui.start('#firebaseui-auth-container', uiConfig)

export default {
  name: 'PageIndex'
}
</script>
```

## quasar.conf.jsにfirebaseuiのcssファイルを読み込ませます。
Quasar Frameworkでは、基本的に、componentレベルでのcssの読み込みはできない仕様になってる（？）はずです。そのため、`quasar.conf.js`で、別途cssファイルを読み込ませる必要があります。

```js
...
css: [
      'app.sass',
      '../../node_modules/firebaseui/dist/firebaseui.css'
    ],
...
```

この時点で以下の通りに表示されていれば成功です！

<img width="362" alt="スクリーンショット 2019-11-17 23.27.47.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/4b0b68e6-5349-b3ee-8ed7-dfdc1aa9d527.png">


## FirebaseUIを日本語化します。

firebaseuiを、さきほどinstallした、firebaseui-jaに置き換えていきます。
まず、`pages/Index.vue`の一部を変更します。

```
...
// var firebaseui = require('firebaseui')を以下の通り変更します。
var firebaseui = require('firebaseui-ja')
...
```

また、quasar.conf.jsも変更します。

```
...
css: [
  'app.sass',
  '../../node_modules/firebaseui-ja/dist/firebaseui.css'
],
...
```

以下の通り日本語化されていれば成功です！

<img width="301" alt="スクリーンショット 2019-11-17 23.37.45.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/125574/e6325d7a-e242-705b-4255-53cea612b77d.png">


次回は、細かいオプションの設定などを行う予定です。