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'
],
...
以下の通り日本語化されていれば成功です！
次回は、細かいオプションの設定などを行う予定です。