当前位置：极客笔记 > JavaScript > JavaScript 教程 > Firebase与Web的集成

Firebase与Web的集成

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秒钟更新）。

结论

Firebase在Web中的使用非常方便。本文提供了Firebase身份验证和Firebase实时数据库在Web平台中的示例。我相信可以在开发Web应用程序时提供很好的帮助。对于有需要的人，建议多使用Firebase的其他API。

Camera课程

Camera API2 教程

API2 教程
Camera 性能教程

Perf 教程
Camera Native Framework 教程

Native FW 教程
Camera QCOM ISP 教程

ISP 教程
Camera QCOM Sensor 教程

Sensor 教程

Python教程

Python 教程

Python 教程
NumPy 教程

NumPy 教程
Django 教程

Django 教程

Java教程

Java 教程

Java 教程

Web教程

JavaScript 教程

JavaScript 教程
jQuery 教程

jQuery 教程
CSS 教程

CSS 教程
PHP 教程

PHP 教程
Laravel 教程

Laravel 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程

数据库教程

SQL 教程

SQL 教程
SQLite 教程

SQLite 教程
MySQL 教程

MySQL 教程
PL/SQL 教程

PL/SQL 教程
MongoDB 教程

MongoDB 教程

图形图像教程

OpenCV 教程

OpenCV 教程

办公软件教程

Excel 教程

Excel 教程

Linux教程

Linux命令全集

Linux命令全集
Linux内核API

Linux内核API
LVGL 教程

LVGL 教程

计算机教程

操作系统 教程

操作系统 教程
计算机网络 教程

计算机网络 教程
C语言 教程

C语言 教程
C++ 教程

C++ 教程
Swift 教程

Swift 教程

大数据教程

Hadoop 教程

Hadoop 教程
Spark 教程

Spark 教程
Scala 教程

Scala 教程

开发工具教程

Git 教程

Git 教程
Jenkins 教程

Jenkins 教程
ChatGPT 教程

ChatGPT 教程
IntelliJ 教程

IntelliJ 教程

JavaScript 教程