連線到 Firebase

Firebase 是 Google 開發的平台，用於建立行動和網路應用程式。它的功能包括用於登入的驗證原語和 NoSQL 資料儲存庫 Firestore，你可以將資料持續儲存在其中。

本教學課程涵蓋如何從部署在 Deno Deploy 上的應用程式連線到 Firebase。

你可以在此找到更全面的教學課程，說明如何建立建立在 Firebase 上的範例應用程式。

從 Firebase 取得認證

本教學課程假設你已在 Firebase 中建立專案，並將網路應用程式新增到專案中。

在 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 多重載入，以及 localStorage 的多重載入，讓 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 整合

deployctl

deployctl deploy --project=<project-name> <application-file-name>

除非您想要新增建置步驟，否則我們建議您選擇 Github 整合。

如需有關在 Deno Deploy 上部署的不同方法和不同組態選項的詳細資訊，請閱讀此處。

連線到 Firebase

從 Firebase 取得認證​

在 Deno Deploy 中建立專案​

撰寫連線到 Firebase 的程式碼​

將應用程式部署到 Deno Deploy​

從 Firebase 取得認證

在 Deno Deploy 中建立專案

撰寫連線到 Firebase 的程式碼

將應用程式部署到 Deno Deploy