iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 21
1

從第 13 ~ 20 天,將部落格所需要的所有元件開發完畢,
這便簡單複習一下目前有的元件:

接著會用三天的篇幅完成 firebase 的登入與資料庫(firestore)串接。

步驟

npm 安裝 firebase

npm i firebase

申請 firebase

首先要申請個 firebase 帳號,這邊就直接略過啦。
接著新增專案成功後會進入這裡:

點選左側欄 Authentication:

021-001

點選 設定登入方式

021-002

點選 電子郵件/密碼

021-003

啟用並儲存:

021-004

返回 Authentication 使用者:

021-005

點選新增 新增使用者

021-006

輸入 admin 帳號密碼:

這邊用 test@test.com/test123 作為測試帳號密碼。

021-007

接著點選左側欄 Database,並點選 建立資料庫

021-008

選擇以測試模式啟動,當然部署上線後寫入的權限要改成登入後才能寫入。

021-009

Database 建立完成:

021-010

回到專案設定

做完以上 firebase 基礎設定後,要在專案中使用 firebase 還有兩個最重要的步驟:

  • 寫一個引入 firebase 的 plugin 提供 nuxt 應用和 storybook 可以共用。
  • 將 firebase config 獨立為一個檔案。

firebase plugin in Nuxt and Storybook

這邊自己寫一個 plugin 來滿足 Nuxt 與 Storybook 可以共用的套件。

建立檔案 /services/fireinit.js

因為此專案只會用到 firebase 的 auth 和 firestore,
所以可以看到下面只有 export firebase.auth() 和 firestore。

const firebase = require('firebase/app')
require('firebase/auth')
require('firebase/firestore')

const config = require('../firebase.config.js')

!firebase.apps.length ? firebase.initializeApp(config) : ''

const firestore = firebase.firestore()

const settings = {
  timestampsInSnapshots: true
}

firestore.settings(settings)

module.exports = {
  auth: firebase.auth(),
  db: firestore
}

firebase & config

可以看到上面程式碼中引入了 config
require('../firebase.config.js')

點選右上角網路設定:

021-013

複製 var config 後整個物件:

021-014

回到 Nuxt 專案建立檔案 ./firebase.config.js,並貼上如下。

module.exports = {
	apiKey: "AIzaSyBn1kAP-yzMT4DdncJXsNm75hYZgCWCkXU",
	authDomain: "blog-8787c.firebaseapp.com",
	databaseURL: "https://blog-8787c.firebaseio.com",
	projectId: "blog-8787c",
	storageBucket: "blog-8787c.appspot.com",
	messagingSenderId: "872777000678"
}

對了也要記得將 apiKey 收好不要露出來了,直接複製上面這段是沒用的哦~。

這樣就搞定啦,明天會接 Email 登入的部分。

最後老樣子附上程式碼放在以下 branch:

021-FormAddPost

指令:

git clone -b 021-FormAddPost --single-branch https://github.com/hunterliu1003/blog.git
cd blog
npm install

上一篇
#20 元件開發: FormAddPost (使用 simple-vue-validator)
下一篇
#22 Vuex Module Registration & Firebase 登入功能
系列文
用 Nuxt.js 2.0, Vuetify, Storybook, Firebase 建一個 Blog30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言