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のコンソールからプロジェクトを作成します

画面の指示に従って、プロジェクトを作成します。今回は本番環境ではないので、アナリティクスは無効でOKです。
Authenticationの設定をします。ここでは、「メール／パスワード」と「Google」を設定します。
テンプレートのタブで、「テンプレート言語」を日本語設定にします。

ウェブアプリを追加して、必要な情報をコピペしておきます。あとで使います。

ウェブアプリを追加ボタンをクリックします。
適当なニックネームをつけてウェブアプリにfirebaseを追加するために必要なデータを表示させます。
登録したあとに、表示されるコードをコピペしておきます。

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

Firebase, FirebaseUIをインストール・設定

まず、firebase, firebaseui を追加します。

$ yarn add firebase firebaseui firebaseui-ja

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

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


<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ファイルを読み込ませる必要があります。

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

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

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'
],
...

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

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

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

参考

環境