deno.com
本页内容

连接到 Firebase

Firebase 是一个由 Google 开发的平台，用于创建移动和 Web 应用程序。其功能包括用于登录的身份验证原语，以及一个可以持久化数据的 NoSQL 数据存储 Firestore。

本教程介绍如何从部署在 Deno Deploy 上的应用程序连接到 Firebase。

你可以在此处找到一个更全面的教程，它基于 Firebase 构建了一个示例应用程序。

从 Firebase 获取凭据 跳转到标题

本教程假设你已在 Firebase 中创建了一个项目，并已将 Web 应用程序添加到你的项目中。

  1. 导航到你在 Firebase 中的项目，然后点击项目设置

  2. 向下滚动，直到看到包含你的应用名称的卡片，以及一个包含 firebaseConfig 对象的代码示例。它应该看起来像下面这样。请妥善保管此信息。我们稍后会用到它

    var firebaseConfig = {
  apiKey: "APIKEY",
  authDomain: "example-12345.firebaseapp.com",
  projectId: "example-12345",
  storageBucket: "example-12345.appspot.com",
  messagingSenderId: "1234567890",
  appId: "APPID",
};

在 Deno Deploy 中创建项目 跳转到标题

  1. 前往 https://dash.deno.com/new（如果尚未登录，请使用 GitHub 登录），然后在从命令行部署下方点击+ 空项目。

  2. 现在点击项目页面上的设置按钮。

  3. 导航到环境变量部分并添加以下内容

    FIREBASE_USERNAME
    上面添加的 Firebase 用户（电子邮件地址）。
    FIREBASE_PASSWORD
    上面添加的 Firebase 用户密码。
    FIREBASE_CONFIG
    作为 JSON 字符串的 Firebase 应用程序配置。

    配置需要是一个有效的 JSON 字符串，以便应用程序可读。如果在设置时给出的代码片段如下所示

    var firebaseConfig = {
  apiKey: "APIKEY",
  authDomain: "example-12345.firebaseapp.com",
  projectId: "example-12345",
  storageBucket: "example-12345.appspot.com",
  messagingSenderId: "1234567890",
  appId: "APPID",
};

    你需要将字符串的值设置为此（注意不需要空格和换行符）

    {
  "apiKey": "APIKEY",
  "authDomain": "example-12345.firebaseapp.com",
  "projectId": "example-12345",
  "storageBucket": "example-12345.appspot.com",
  "messagingSenderId": "1234567890",
  "appId": "APPID"
}

编写连接到 Firebase 的代码 跳转到标题

我们要做的第一件事是导入 Firebase 在 Deploy 下工作所需的 XMLHttpRequest polyfill，以及一个用于 localStorage 的 polyfill，以允许 Firebase 身份验证持久化已登录用户。

import "https://deno.land/x/xhr@0.1.1/mod.ts";
import { installGlobals } from "https://deno.land/x/virtualstorage@0.1.0/mod.ts";
installGlobals();

ℹ️ 在编写本教程时，我们使用的是当前版本的软件包。它们可能不是最新的，你可能需要仔细检查当前版本。

因为 Deploy 拥有许多 Web 标准 API，所以在 Deploy 下使用 Firebase 的 Web 库是最佳选择。目前 Firebase v9 仍处于测试阶段，因此我们将使用 v8。

import firebase from "https://esm.sh/firebase@9.17.0/app";
import "https://esm.sh/firebase@9.17.0/auth";
import "https://esm.sh/firebase@9.17.0/firestore";

现在我们需要设置我们的 Firebase 应用程序。我们将从之前设置的环境变量中获取配置，并获取我们将要使用的 Firebase 部分的引用。

const firebaseConfig = JSON.parse(Deno.env.get("FIREBASE_CONFIG"));
const firebaseApp = firebase.initializeApp(firebaseConfig, "example");
const auth = firebase.auth(firebaseApp);
const db = firebase.firestore(firebaseApp);

好了，我们快完成了。我们只需要创建我们的中间件应用程序并添加我们导入的 localStorage 中间件。

const app = new Application();
app.use(virtualStorage());

然后我们需要添加中间件来验证用户。在本教程中，我们只是从我们将要设置的环境变量中获取用户名和密码，但这可以很容易地调整为如果用户未登录则将其重定向到登录页面。

app.use(async (ctx, next) => {
  const signedInUid = ctx.cookies.get("LOGGED_IN_UID");
  const signedInUser = signedInUid != null ? users.get(signedInUid) : undefined;
  if (!signedInUid || !signedInUser || !auth.currentUser) {
    const creds = await auth.signInWithEmailAndPassword(
      Deno.env.get("FIREBASE_USERNAME"),
      Deno.env.get("FIREBASE_PASSWORD"),
    );
    const { user } = creds;
    if (user) {
      users.set(user.uid, user);
      ctx.cookies.set("LOGGED_IN_UID", user.uid);
    } else if (signedInUser && signedInUid.uid !== auth.currentUser?.uid) {
      await auth.updateCurrentUser(signedInUser);
    }
  }
  return next();
});

将应用程序部署到 Deno Deploy 跳转到标题

完成应用程序编写后，你可以将其部署到 Deno Deploy。

为此，请返回你的项目页面：https://dash.deno.com/projects/<project-name>。

您应该会看到几个部署选项

除非你想添加构建步骤，否则我们建议你选择 GitHub 集成。

有关在 Deno Deploy 上部署的不同方式和不同配置选项的更多详细信息，请参阅此处。

您找到所需内容了吗？

编辑此页面
隐私政策