---
tags: firebase,
disqus: hackmd
---

###### tags: `firebase`

# firebase

參考文章
[Day26 前端福音(1/4): Firebase-介紹 & 建立專案](https://ithelp.ithome.com.tw/articles/10205404)
[Day27 前端福音(2/4): Firebase-寫入&刪除資料](https://ithelp.ithome.com.tw/articles/10205765)
[Day28 前端福音(3/4): Firebase-讀取資料](https://ithelp.ithome.com.tw/articles/10205961)
[Day29 前端福音(4/4): Firebase-帳號系統&資料讀寫規則](https://ithelp.ithome.com.tw/articles/10206354)

[[教學] Firebase Hosting 免費1G/10G靜態網頁空間架設，與綁定網域名稱](https://www.minwt.com/website/server/21596.html)

[Firebase Cloud Firestore 基礎入門 Part.1 - 簡介](https://ithelp.ithome.com.tw/articles/10223256?sc=rss.iron)
[Firebase Cloud Firestore 基礎入門 Part.2 - 建置 Firebase 專案及資料庫](https://ithelp.ithome.com.tw/articles/10223615)

[在 Firebase 中管理用户](https://firebase.google.com/docs/auth/web/manage-users)

---

firebase代管 ==> Firebase Hosting

Cloud Firestore 資料的儲存位置 ==> 選擇離台灣比較近的 asia-east2

firestore要使用必須要有引入`firebase-firestore.js`

const db = firebase.firestore();

* 設定：set()
* 更新：update()
* 添加：add()
* 刪除：delete()

一個簡單的新增範例

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-firestore.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
 https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-analytics.js"></script>

<!-- firebase的js必須放在所有js之前 -->
<script src="./index.js"></script>

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: 'AIzaSyAncpQXcc6UAlllACYvqDzrpQnemgsDKbk',
    authDomain: 'member-database-fdf1e.firebaseapp.com',
    databaseURL: 'https://member-database-fdf1e.firebaseio.com',
    projectId: 'member-database-fdf1e',
    storageBucket: 'member-database-fdf1e.appspot.com',
    messagingSenderId: '398211092204',
    appId: '1:398211092204:web:e56a27f2a566c36e69dfc9',
    measurementId: 'G-19CNHH96GK'
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

const db = firebase.firestore();

//新增會員資料
db.collection('users').add({
    userAccount: 'chris',
    userPassword: '000000',
})
    .then(function (docRef) {
        console.log('Document written with ID: ', docRef.id);
    })
    .catch(function (error) {
        console.error('Error adding document: ', error);
    });

---

## 註冊與驗證

需要引入firebase-auth.js才能使用auth();

<script src="https://www.gstatic.com/firebasejs/7.15.5/firebase-auth.js"></script>

firebase.auth().createUserWithEmailAndPassword(email, password)
.then(() => {
    ...
})
.catch((error) => {
    console.log(error.message);
});

[在网站上开始使用 Firebase 身份验证](https://firebase.google.com/docs/auth/web/start)

## 登入

firebase.auth().signInWithEmailAndPassword(email, password)
.then(() => {
    ...
})
.catch((error) => {
  console.log(error.message);
});

var user = firebase.auth().currentUser;

if (user) {
  // User is signed in.
} else {
  // No user is signed in.
}

但是 firebase.auth().currentUser 只會取得當前的登入狀態，也就是如果登出後，它也不會改變。

如果想要即時收到使用者當前的登入狀態，可以使用這個方法:

它會在登入狀態變動時執行 callback function，有點像是 Realtime database 的 on 功能。

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

## 讀寫權限

權限規則主要使用這三個:

* read: 限制讀取的權限
* write 限制寫入的權限
* validate: 資料驗證(ex: 要寫入的成績是不是在 0~100 之間)

## 小工具

接下來測試讀寫規則時，不用辛苦地來回網頁與 JS，可以使用規則頁面的模擬工具