运用Firebase构建云端运用:建立项目和用户治理

2024年4月6日 103次阅读 来源: 张伦

在构建本身的在线云东西运用时，我运用 Firebase 为本身的“无后端项目”供应效劳，把在开辟时期接触到的一些内容整顿在一起，制成系列笔记。这个历程有两个优点：稳固知识点，整顿开辟历程的思绪。因为前端开辟是本身所熟习的范畴，所以先从 Firebase 入手，将后端的一些知识点提早梳理理顺，防止后续的进修历程当中的卡壳而致使没法对峙。本日第一期：竖立项目和用户治理。

什么是 Firebase

Firebase 原本是一家及时后端数据库创业公司，为供应一个及时响应的数据效劳。后被 Google 收买，该平台适用在IOS、Android、web前端等种种跨平台上，关于没有数据库处置惩罚履历的开辟者，只需运用本身熟习的言语将数据放在Firebase上，再经由过程Firebase供应的API即可完成及时数据同步。同时 Google 在新版的 Firebase 中包括开辟、生长与营收三阶段，并整合剖析东西，不过剖析东西如今只针对挪动 App，网页的话能够继承运用 Google Analytics。

何谓“及时数据库”？简朴粗犷的明白就是，数据库中数据的变动会互动关照到客户端。统一账号在客户端 A出操纵，客户端 B 会收到响应的关照。依据我在浏览器中的调试，发如今 Web 端 原来是用的 WebSocket。考虑到写数据时碰到的无收集衔接题目，Firebase的数据库API运用了当地缓存，使得在离线状况下也能坚持读写不失利，而且会在收集恢复衔接时和效劳器举行同步。

Firebase 供应了四种 SDK: Android，IOS, Web 和 C++。我将运用 Web 端 SDK 开辟一个无后端的笔记运用。

关联运用

在运用 Firebase 作为后端数据库之前，须要登录 Firebase 的掌握台，增加一个 Firebase 的收集运用。你可挑选新建一个运用，或许导入一个现有的 Google 项目。

竖立完运用以后，进入运用的掌握面板，在 ‘https://console.firebase.goog…’ 中能够看到巨大的绑定进口“将 Firebase 增加到您的网页运用”，点击以后，将给处的 JavaScript 增加到 HTML 文件中。

 <script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
  <script>
    // Initialize Firebase
    let config = {
      apiKey: '<your-api-key>',
      authDomain: '<your-auth-domain>',
      databaseURL: '<your-database-url>',
      storageBucket: '<your-storage-bucket>'
    };
    firebase.initializeApp(config);
  </script>

固然也可经由过程 npm 装置 Firebase 的 SDK npm link，然后经由过程 Webpack 等东西打包。

npm install --save firebase

引入 Firebase

let firebase = require('firebase');
let app = firebase.initializeApp({ ... });

完全的 Firebase 客户端包包括了Firebase 的 Authentication, Realtime Database, Storage 和 Cloud Messaging。上面的代码将会把这些功用悉数引入。能够将这些功用以自力组件的情势引入，削减代码量。

  • firebase-app 中心代码（必需）

  • firebase-auth Authentication（可选）

  • firebase-database Realtime Database（可选）

  • firebase-storage Storage（可选）

  • firebase-messaging Cloud Messagin（可选）

在这个案例中如今 Storage临时没有运用的设想，Cloud Messaging 针对的是挪动端，所以这两个组件不引入。

let firebase = require('firebase/app');
require('firebase/auth');
require('firebase/database');
 
let app = firebase.initializeApp({ ... });
// ...

完成上述步骤以后，你已能够在环境中运用 firebase 供应的种种接口了。

用户

大多数运用都须要相识用户的身份。晓得用户的身份能够让运用将用户数据平安地保存在云中并跨一切用户装备供应雷同的个性化体验。
Firebase Authentication 供应后端效劳、易用 SDK 和现成 UI 库来向运用考证用户的身份。它支撑运用暗码、深受迎接的团结用户身份供应商（如 Google、Facebook 和 Twitter）等要领举行身份考证。

本次案例运用第三方登录，不运用 Firebase 供应的 UI库，有兴致的朋侪能够本身去尝尝 https://github.com/firebase/FirebaseUI-Web。

在增加了 Firebase运用以后，翻开console的 Authentication，在登录要领中开启须要的登录供应商。这里我挑选了“电子邮件地点/暗码”和“Github“两种体式格局。

竖立基于暗码的帐户

在用户填写表单注册时，完成所需的任何新帐户考证步骤，比方考证新帐号暗码键入准确，或许搜检账号是不是已存在。然后
将邮件地点和暗码通报到 createUserWithEmailAndPassword 要领中来竖立新帐户：

firebase.auth().signInWithEmailAndPassword(email, password).catch((error) => {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // ...
});

用户初次登录后，便会竖立一个新用户帐户并链接至该用户登录时运用的凭证，即用户名和暗码，或身份考证供应顺序信息。此新帐户存储在 Firebase 项目中，可用于跨项目中的每一个运用辨认用户，不管该用户怎样登录。

运用 Github 账号登录

在console 中的登录体式格局中启用 github 登录以后，须要增加从 GitHub 取得的 OAuth 2.0 客户端 ID 和客户端密钥。同时将你的 Github 运用的受权回调地点设置为 Firebase OAuth 重定向 URI（比方 my-app-12345.firebaseapp.com/__/auth/handler）。Github 的运用设置

上述前期工作准备就绪以后，能够开始运用 Firebase SDK 来运用登录流程。

先竖立一个 GitHub 供应顺序对象的实例：

let provider = new firebase.auth.GithubAuthProvider();

然后是一个可选的步骤：从身份考证供应顺序中指定您想要求的其他 OAuth 2.0 局限。挪用 Provider 实例的 addScope要领来增加局限。比方：

provider.addScope('repo');

细致参数能够参考身份考证供应顺序文档。

接下来，运用 GitHub 供应顺序对象举行 Firebase 身份考证。能够提醒用户，让其经由过程翻开弹出式窗口或重定向登录页面的要领以本身的 GitHub account 登录。挪动装备最好运用重定向要领。要用弹出式窗口的要领登录，挪用 signInWithPopup：

firebase.auth().signInWithPopup(provider).then(function(result) {
  // This gives you a GitHub Access Token. You can use it to access the GitHub API.
  let token = result.credential.accessToken;
  // The signed-in user info.
  let user = result.user;
  // ...
}).catch(function(error) {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // The email of the user's account used.
  let email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  let credential = error.credential;
  // ...
});

你能够检索 GitHub 供应顺序的 OAuth 令牌，运用该令牌可经由过程 GitHub API 提取分外数据。
还能够经由过程这类要领捕捉并处置惩罚毛病。猎取毛病代码列表。

假如要用重定向登录页面的要领登录，则挪用 signInWithRedirect：

firebase.auth().signInWithRedirect(provider);

不仅如此，你还能够在页面加载时经由过程挪用 getRedirectResult 检索 GitHub 供应顺序的 OAuth 令牌：

firebase.auth().getRedirectResult().then(function(result) {
  if (result.credential) {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    let token = result.credential.accessToken;
    // ...
  }
  // The signed-in user info.
  let user = result.user;
}).catch(function(error) {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // The email of the user's account used.
  let email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  let credential = error.credential;
  // ...
});

固然，你也能够手动处置惩罚登录流程。 在 GitHub 登录流程完毕后，你会收到一个 OAuth 2.0 接见令牌。在用户运用 GitHub 胜利登录以后，先运用 OAuth 2.0 接见令牌调换 Firebase 凭证：

let credential = firebase.auth.GithubAuthProvider.credential(token);

然后运用 Firebase 凭证举行 Firebase 身份考证：

firebase.auth().signInWithCredential(credential).catch(function(error) {
  // Handle Errors here.
  let errorCode = error.code;
  let errorMessage = error.message;
  // The email of the user's account used.
  let email = error.email;
  // The firebase.auth.AuthCredential type that was used.
  let credential = error.credential;
  // ...
});

除了前面提到的邮箱暗码考证，第三方 OAuth 考证以外，Firebase 还支撑自定义身份认证体系和匿名身份考证，这里不讲，有兴致和需求的朋侪能够本身去相识。

其他用户治理操纵的支撑

要注销用户，挪用 signOut：

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}, function(error) {
  // An error happened.
});

除此以外，SDK 还供应了一系列用户治理的要领。

  • 猎取当前登录的用户

猎取当前用户的引荐要领是在 Auth 对象上挪用onAuthStateChanged要领，这可确保在您猎取当前用户时，Auth 对象不会处于中间状况，比方初始化。既要么未登录，要么已登录。

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

也能够运用 currentUser 属性猎取当前已登录的用户。 假如用户没有登录，currentUser 则为 null：

let user = firebase.auth().currentUser;

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

不过有一点要注意，currentUser 还能够因为 auth 对象还没有完成初始化而为 null。 假如运用视察顺序跟踪用户登录状况，则无需处置惩罚该状况。
当猎取到用户对象的实例以后，能够接见实例上的一些属性，以及挪用实例上的一些要领对用户举行一些操纵，比方：

  • 要猎取用户的个人资料信息：

let user = firebase.auth().currentUser;
let name, email, photoUrl, uid;

if (user != null) {
  name = user.displayName;
  email = user.email;
  photoUrl = user.photoURL;
  uid = user.uid;  // The user's ID, unique to the Firebase project. Do NOT use
                   // this value to authenticate with your backend server, if
                   // you have one. Use User.getToken() instead.
}

  • 猎取用户的特定于供应顺序的个人资料信息(登录供应顺序中猎取检索到的个人资料信息)

let user = firebase.auth().currentUser;

if (user != null) {
  user.providerData.forEach(function (profile) {
    console.log("Sign-in provider: "+profile.providerId);
    console.log("  Provider-specific UID: "+profile.uid);
    console.log("  Name: "+profile.displayName);
    console.log("  Email: "+profile.email);
    console.log("  Photo URL: "+profile.photoURL);
  });
}

  • 更新用户个人资料(显现称号和头像地点)

let user = firebase.auth().currentUser;

user.updateProfile({
  displayName: "Jane Q. User",
  photoURL: "https://example.com/jane-q-user/profile.jpg"
}).then(function() {
  // Update successful.
}, function(error) {
  // An error happened.
});

  • 设置电子邮件地点

let user = firebase.auth().currentUser;

user.updateEmail("user@example.com").then(function() {
  // Update successful.
}, function(error) {
  // An error happened.
});

要设置用户的电子邮件地点，该用户必需近来登录过。在 Firebase 掌握台的”Authentication”的”Email Templates”页面中许可自定义运用的电子邮件模板。

  • 设置用户暗码

let user = firebase.auth().currentUser;
let newPassword = getASecureRandomPassword();

user.updatePassword(newPassword).then(function() {
  // Update successful.
}, function(error) {
  // An error happened.
});

  • 删除用户

也能够在掌握台中手动删除用户

let user = firebase.auth().currentUser;

user.delete().then(function() {
  // User deleted.
}, function(error) {
  // An error happened.
});

有些平安敏感性操纵，比方删除帐户、设置主电子邮件地点和变动暗码，须要用户近来登录过才实行。假如要实行这些操纵中的某一项，而用户只是在很久以前登录过，操纵便失足。发作这类毛病时，须要从用户猎取新登录凭证，将该凭证传给 reauthenticate ，对该用户从新举行身份考证。

let user = firebase.auth().currentUser;
let credential;

// Prompt the user to re-provide their sign-in credentials

user.reauthenticate(credential).then(function() {
  // User re-authenticated.
}, function(error) {
  // An error happened.
});

完毕

如此一来，我的运用已能够支撑邮箱暗码登录，github 账号登录。而且用户的治理操纵也有很直接清楚明了的要领。当用户增加以后，接下来就能够缭绕用户设想出须要的数据结构了。下回：数据结构的定义及数据的操纵，敬请期待

    原文作者：张伦
    原文地址: https://segmentfault.com/a/1190000007805111
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞