连接到 Firebase
Firebase 是 Google 开发的用于创建移动和 Web 应用程序的平台。其功能包括用于登录的身份验证原语和一个 NoSQL 数据存储 Firestore,您可以将数据持久化到其中。
本教程介绍如何从部署在 Deno Deploy 上的应用程序连接到 Firebase。
您可以在此处找到一个更全面的教程,该教程在 Firebase 之上构建一个示例应用程序:此处.
从 Firebase 获取凭据
本教程假设您已在 Firebase 中创建了一个项目,并将 Web 应用程序添加到您的项目中。
-
在 Firebase 中导航到您的项目,然后单击 **项目设置**
-
向下滚动,直到您看到一张带有您的应用程序名称的卡片,以及一个包含
firebaseConfig
对象的代码示例。它应该类似于以下内容。请将其保留好。我们稍后会用到它。var firebaseConfig = {
apiKey: "APIKEY",
authDomain: "example-12345.firebaseapp.com",
projectId: "example-12345",
storageBucket: "example-12345.appspot.com",
messagingSenderId: "1234567890",
appId: "APPID",
};
在 Deno Deploy 中创建一个项目
-
转到 https://dash.deno.com/new(如果您还没有,请使用 GitHub 登录)并单击 **+ 空项目**(位于 **从命令行部署** 下)。
-
现在单击项目页面上可用的 **设置** 按钮。
-
导航到**环境变量**部分并添加以下内容
FIREBASE_USERNAME
- 上面添加的 Firebase 用户(电子邮件地址)。
FIREBASE_PASSWORD
- 上面添加的 Firebase 用户密码。
FIREBASE_CONFIG
- Firebase 应用程序的配置,以 JSON 字符串形式表示。
配置需要是一个有效的 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/[email protected]/mod.ts";
import { installGlobals } from "https://deno.land/x/[email protected]/mod.ts";
installGlobals();
ℹ️ 我们正在使用本教程编写时当前版本的软件包。它们可能不是最新的,您可能需要仔细检查当前版本。
由于 Deploy 具有许多 Web 标准 API,因此最好在部署下使用 Firebase 的 Web 库。目前 v9 仍处于 Firebase 的测试阶段,因此我们将使用 v8
import firebase from "https://esm.sh/[email protected]/app";
import "https://esm.sh/[email protected]/auth";
import "https://esm.sh/[email protected]/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 上部署的不同方式以及不同配置选项的更多详细信息,请阅读 此处。