Expo大作戰(十六)--expo結合firebase 一個nosql資料庫（本章令我驚訝但又失望！）

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732 ...

簡要：本系列文章講會對expo進行全面的介紹，本人從2017年6月份接觸expo以來，對expo的研究斷斷續續，一路走來將近10個月，廢話不多說，接下來你看到內容，講全部來與官網

我猜去全部機翻+個人修改補充+demo測試的形式，對expo進行一次大補血！歡迎加入expo興趣學習交流群：597732981

【之前我寫過一些列關於expo和rn入門配置的東i西，大家可以點擊這裡查看：從零學習rn開發】

相關文章：

Expo大作戰(一)--什麼是expo，如何安裝expo clinet和xde，xde如何使用

Expo大作戰(二)--expo的生命周期，expo社區交流方式，expo學習必備資源，開發使用expo時關註的一些問題

Expo大作戰(三)--針對已經開發過react native項目開發人員有針對性的介紹了expo，expo的局限性，開發時項目選型註意點等

Expo大作戰(四)--快速用expo構建一個app，expo中的關鍵術語

Expo大作戰(五)--expo中app.json 文件的配置信息

Expo大作戰(六)--expo開發模式，expo中exp命令行工具，expo中如何查看日誌log，expo中的調試方式

Expo大作戰(七)--expo如何使用Genymotion模擬器

Expo大作戰(八)--expo中的publish以及expo中的link，對link這塊東西沒有詳細看，大家可以來和我交流

更多>>

接下來就開始擼碼

使用Firebase

Firebase資料庫是一款流行的NoSQL雲資料庫，它允許開發人員實時同步實時數據。通過多平臺支持，在用戶和客戶端之間同步數據是非常無縫的，但如果您不關心實時更新，它也可以更普遍地用作通用持久性NoSQL數據支持。它具有非常靈活的規則語法，可以對數據訪問進行微小的控制。

幸運的是，從3.1+版本開始的Firebase JavaScript SDK幾乎全面支持React Native，因此將其添加到我們的expo應用程式中非常簡單。本指南後面介紹的一點是，通常由Firebase SDK提供的用戶登錄組件不適用於React Native，因此我們必須解決它。

有關更多一般信息，請參閱firebase.google.com/docs/database，並且官方Firebase博客文章宣佈React Native相容性

註意：本指南僅涵蓋Firebase實時資料庫，並不包含Google Firebase規模較大的其他服務。 Firebase雲存儲目前不受支持，但我們正在努力將Blob實現上行到React Native，從而使其成為可能。有關為什麼不支持其他Firebase服務的更多背景信息，請閱讀Brent Vatne對Canny的回覆

1. Firebase SDK設置

首先，我們需要設置Firebase帳戶並創建一個新項目。我們將使用Firebase提供的JavaScript SDK，將其納入您的expo項目。

npm install --save firebase

Firebase控制台會為您提供一個API密鑰以及您的項目初始化所需的其他標識符。 firebase-web-start詳細描述了每個欄位在控制臺中的含義以及在哪裡可以找到它們。
import * as firebase from 'firebase';

// Initialize Firebase
const firebaseConfig = {
  apiKey: "<YOUR-API-KEY>",
  authDomain: "<YOUR-AUTH-DOMAIN>",
  databaseURL: "<YOUR-DATABASE-URL>",
  storageBucket: "<YOUR-STORAGE-BUCKET>"
};

firebase.initializeApp(firebaseConfig);
臨時繞過預設安全規則（Temporarily Bypass Default Security Rules）

預設情況下，Firebase資料庫具有安全規則設置，以便所有訪問您數據的設備都必須通過身份驗證。我們顯然還沒有設置任何身份驗證，所以我們現在可以在我們設置應用程式的其餘部分時禁用它。

進入Firebase的資料庫控制台，在“規則”選項卡下，您應該看到已經為您提供的一組預設規則。將規則更改為：
{
  "rules": {
    ".read": true,
    ".write": true
  }
}
請參閱示例Firebase規則以獲取適用於您的數據的良好規則集，包括未經身份驗證的規則。

註意重要的是要註意，這對於開發來說是暫時的，在發佈應用程式之前應對這些規則進行徹底評估。

2.存儲數據和接收更新

通過Firebase存儲數據可能非常簡單。想象一下，我們正在創建一個高分存儲在Firebase中供所有人查看的游戲。我們可以在每個用戶引用的數據中創建一個用戶存儲桶。設置他們的高分將是直截了當的。
function storeHighScore(userId, score) {
  firebase.database().ref('users/' + userId).set({
    highscore: score
  });
}
現在讓我們假設我們希望另一個客戶端收聽特定用戶的高分的更新。藉助Firebase，我們可以針對特定的數據引用設置偵聽器，併在每次更新數據時收到通知。在下麵的示例中，每次為給定用戶更新高分時，它都會將其列印到控制台。
setupHighscoreListener(userId) {
  firebase.database().ref('users/' + userId).on('value', (snapshot) => {
    const highscore = snapshot.val().highscore;
    console.log("New high score: " + highscore);
  });
}
用戶認證

這非常簡單，而且Firebase JavaScript SDK提供的功能相當不錯。但有一點需要註意。我們在開始時簡化了驗證規則。 Firebase SDK為開發人員提供了身份驗證方法，因此他們不必重新實現通用登錄系統，例如Google或Facebook登錄。

這包括Firebase的Web，Android和iOS SDK版本中的UI元素，但是，這些UI組件不適用於React Native，因此不應調用。值得慶幸的是，由於我們自己提供用戶身份驗證，Firebase為我們提供了驗證數據訪問的方法。

登錄方法

我們可以選擇對我們的應用程式有意義的不同登錄方法。登錄方法選擇與Firebase資料庫訪問許可權正交，但是，我們需要讓Firebase知道我們如何設置我們的登錄系統，以便它可以正確分配與我們的用戶帳戶匹配的身份驗證令牌以進行數據訪問控制。你可以使用任何你想要的東西，推出你自己的定製登錄系統，或者如果你的所有用戶都可以不受限制的訪問，甚至可以放棄它。

Facebook登入

許多開發人員選擇的通用登錄系統是用戶已熟悉的簡單Facebook登錄。expo已經提供了一個偉大的Facebook登錄組件，所以我們只需要插入即可。

有關如何設置這些信息，請參閱我們文檔的Facebook部分。這與Google和其他人一樣合適。

將登錄提供商與Firebase綁定

一旦您將Facebook登錄添加到您的expo用程式中，我們需要調整Firebase控制台進行檢查。在登錄方法選項卡中的控制台的身份驗證部分下，啟用Facebook作為登錄提供程式。
{
  "rules": {
    "users": {
      "$uid": {
        ".read": true,
        ".write": "$uid === auth.uid"
      }
    }
  }
}
監聽身份驗證
我們現在準備將Facebook登錄代碼與我們的Firebase資料庫實現連接起來。
firebase.initializeApp(config);

// Listen for authentication state to change.
firebase.auth().onAuthStateChanged((user) => {
  if (user != null) {
    console.log("We are authenticated now!");
  }

  // Do other things
});

async function loginWithFacebook() {
  const { type, token } = await Expo.Facebook.logInWithReadPermissionsAsync(
    '<APP_ID>',
    { permissions: ['public_profile'] }
  );

  if (type === 'success') {
    // Build Firebase credential with the Facebook access token.
    const credential = firebase.auth.FacebookAuthProvider.credential(token);

    // Sign in with credential from the Facebook user.
    firebase.auth().signInWithCredential(credential).catch((error) => {
      // Handle Errors here.
    });
  }
}
Facebook登錄方法與您在Facebook登錄指南中看到的方法類似，但是，我們從成功登錄中收到的令牌可以傳遞給Firebase SDK，以通過firebase.auth.FacebookAuthProvider.credential向我們提供Firebase憑據。然後，我們可以通過firebase.auth（）。signInWithCredential使用此憑據進行登錄。

firebase.auth()。onAuthStateChanged事件允許我們在認證狀態發生變化時設置監聽器，因此在我們的情況下，當使用Facebook憑證成功登錄Firebase時，我們會得到一個可以使用的用戶對象用於驗證數據訪問。

經過身份驗證的數據更新

既然我們有一個用於我們認證用戶的用戶對象，我們可以調整我們以前的storeHighScore（）方法來使用用戶對象的uid作為我們的用戶參考。由於user.uid是由Firebase自動為經過身份驗證的用戶生成的，因此這是引用用戶存儲區的好方法。
function storeHighScore(user, score) {
  if (user != null) {
    firebase.database().ref('users/' + user.uid).set({
      highscore: score
    });
  }
}
下一張繼續介紹，這一篇主要介紹了：expo結合firebase 一個nosql資料庫（本章令我驚訝但又失望！）， 歡迎大家關註我的微信公眾號，這篇文章是否被大家認可，我的衡量標準就是公眾號粉絲增長人數。歡迎大家轉載，但必須保留本人博客鏈接！