Firebase与Web的集成

简介

Firebase是谷歌旗下的移动端开发平台，提供多种服务，包括实时数据库、身份验证、云存储等。在Google在2016年I/O大会后，Firebase的服务变得更加强大，支持多种平台。其中，Web平台在支持端口上得到了充分的提升。

Firebase的特性在Web平台上同样可以得到充分发挥。Firebase提供了若干JavaScript库，可以方便地集成到Web应用程序中。

本文章将通过下面的示例代码，介绍如何通过Firebase与Web进行集成。

创建Firebase账户

首先需要在Firebase上注册账户，使用Gmail或Google账户即可登录Firebase。

进入Firebase官网（https://firebase.google.com/），单击“立即开始”。

单击“使用Google账户登录”。如果您无法使用Google账户进行登录，可以使用其他电子邮件和密码进行注册。

创建新项目。输入项目名称和国家。可以选择Firebase Analytics，Https和Cloud Messaging。这些在后续过程中可以设置。单击“创建项目”。

添加Firebase的SDK

添加Firebase JavaScript SDK：

1.在Firebase Console的项目页面上，单击“添加应用”。在“平台”选择Web，输入应用程序的名称，然后单击“注册应用程序”。

2.注册成功后，将提供SDK片段。点击“配置”。

3.下载Firebase.js库。将Firebase.js库加入到项目的根目录下。

<!-- 如果Firbase不是本地的可下载，请替换成网络的 -->
<script src="firebase.js"></script>

实现Firebase的身份验证

Firebase Auth提供了简单易懂的方法来集成身份验证功能。它支持多种身份验证方式，如电子邮件，匿名和手机号码。在下面的示例中，我们将使用户通过邮箱和密码进行身份验证。

在Firebase Console的项目页面上，单击“身份验证” > “启用身份验证”。

在Web SDK中初始化Firebase。这将设置Firebase Auth SDK。

firebase.initializeApp(config);

配置Firebase。我们需要实现Firebase Auth，所以配置需要包括以下信息：

var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};

下面是实际的实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<h1> Firebase 的身份验证 </h1>
<div class="form-group" id="loginstatus">
  <label for="email">电子邮箱：</label>
  <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
</div>
<div class="form-group">
  <label for="pwd">密码：</label>
  <input type="password" class="form-control" id="pwd" placeholder="请输入密码">
</div>
<button onclick="login()">登录</button>
<script>
function login(){
  var email = document.getElementById('email').value;
  var password = document.getElementById('pwd').value;
  firebase.auth().signInWithEmailAndPassword(email, password)
  .then(user => {
    console.log(user)
    document.getElementById('loginstatus').innerHTML = "您已登录。";
  })
  .catch(err => {
    console.log(err);
    document.getElementById('loginstatus').innerHTML = "用户名或密码错误。";
  });
}
</script>
</body>
</html>

实现Firebase实时数据库

Firebase的实时数据库是一个存储和同步数据的云服务。在下面的示例中，我们将展示如何进行Firebase实时数据库集成。

在Firebase Console的项目页面上，单击“实时数据库”。通过单击“创建数据库”来设置数据库规则。

我们的数据将存储在/users路径中。

{
  "rules": {
    "users": {
      ".read": "true",
      "UID": {
        ".write": "UID === auth.uid",
        ".read": "$UID === auth.uid",
        ".validate": "newData.hasChildren(['email', 'age', 'gender'])",
        "age": {
          ".validate": "newData.isNumber() && newData.val() >= 16 && newData.val() <= 100"
        },
        "gender": {
          ".validate": "newData.isString() && newData.val() == 'male' || newData.val() == 'female'"
        }
      }
    }
  }
}

下面是实际的实现代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.6.5/firebase-database.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "PROJECT_ID.firebaseapp.com",
    databaseURL: "https://PROJECT_ID.firebaseio.com",
    projectId: "PROJECT_ID",
    storageBucket: "PROJECT_ID.appspot.com",
    messagingSenderId: "SENDER_ID",
    appId: "APP_ID",
    measurementId: "G-MEASUREMENT_ID",
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  var database = firebase.database();
</script>
</head>
<body>
  <h1> Firebase的实时数据库+身份验证 </h1>
  <h2>添加用户</h2>
  <div class="form-group">
    <label for="email">电子邮箱：</label>
    <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
  </div>
  <div class="form-group">
    <label for="age">年龄：</label>
    <input type="number" class="form-control" id="age" placeholder="请输入年龄">
  </div>
  <div class="form-group">
    <label for="gender">性别：</label>
    <select class="form-control" id="gender">
      <option value="">请选择性别</option>
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
  </div>
  <button onclick="addUser()">创建用户</button>

  <h2>查看用户列表</h2>
  <table class="table table-bordered table-striped table-hover">
    <thead>
      <tr>
        <th>电子邮件</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <tbody id="user-list"></tbody>
  </table>

  <script>
    function addUser(){
      var email = document.getElementById('email').value;
      var age = document.getElementById('age').value;
      var gender = document.getElementById('gender').value;
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          firebase.database().ref('users/' + user.uid).set({
            email: email,
            age: age,
            gender: gender
          }).then(() => {
            console.log("User data has been stored");
            document.getElementById('email').value = "";
            document.getElementById('age').value = "";
            document.getElementById('gender').value = "";
          })
          .catch(err => {
            console.log(err);
          });
        } else {
          console.log("You need to login first.");
        }
      });
    }

    function loadUser(){
      firebase.auth().onAuthStateChanged(function(user) {
        if (user) {
          var userList = document.getElementById('user-list');
          userList.innerHTML = "";
          firebase.database().ref('users/').once('value').then(function(snapshot) {
            snapshot.forEach(function(childSnapshot) {
              var childKey = childSnapshot.key;
              var docSnapshot = childSnapshot.val();
              var row = userList.insertRow(-1);
              var emailCell = row.insertCell(0);
              var ageCell = row.insertCell(1);
              var genderCell = row.insertCell(2);
              emailCell.innerHTML = docSnapshot.email;
              ageCell.innerHTML = docSnapshot.age;
              genderCell.innerHTML = docSnapshot.gender;
            });
          });
        } else {
          console.log("You need to login first.");
        }
      });
    }

    loadUser();
    setInterval(loadUser, 2000);
  </script>
</body>
</html>

在这个示例中，loadUser()函数将从Firebase实时数据库中获取数据。根据firebase.database().ref(‘users/’).once(‘value’)获得所有“users”节点下的数据。使用forEach()方法遍历snapshot中的数据。snapshot提供了获得Firebase实时数据的方法。在这个示例中，我们使用的是once()。因此，我们可以获得所有的数据，而不是像on()一样知道有新数据可用。对于每项数据，forEach()都会生成一个数据项。这些项的内容可以在childSnapshot.val()和childSnapshot.key中获得。每次loadUser()函数被调用时，它将首先清除表格的内容（使用userList.innerHTML=””;）并重新获取数据（使用setInterval()，每2秒钟更新）。