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

• TheTags (顯示標籤)
• TheMarkdown (預覽文章)
• ThePostPreview (預覽文章預覽)
• vue-codemirror (js 高亮編輯器)
• FormAddPost (新增/發布文章)

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

步驟

npm 安裝 firebase

npm i firebase

申請 firebase

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

點選左側欄 Authentication:

點選 設定登入方式

點選 電子郵件/密碼

啟用並儲存：

返回 Authentication 使用者:

點選新增 新增使用者

輸入 admin 帳號密碼：

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

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

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

Database 建立完成：

回到專案設定

做完以上 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')

點選右上角網路設定：

複製 var config 後整個物件：

回到 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