Firebase 和 Astro

Firebase 是一个应用开发平台，提供 NoSQL 数据库、身份验证、实时订阅、功能和存储。

¥Firebase is an app development platform that provides a NoSQL database, authentication, realtime subscriptions, functions, and storage.

请参阅我们单独的 部署到 Firebase 托管 指南。

¥See our separate guide for deploying to Firebase hosting.

在 Astro 中初始化 Firebase

标题部分 在 Astro 中初始化 Firebase

¥Initializing Firebase in Astro

先决条件

标题部分 先决条件

¥Prerequisites

• 一个 配置了 Web 应用的 Firebase 项目。

• 启用了 用于按需渲染的 output: 'server' 的 Astro 项目。

• Firebase 凭据：你需要两组凭据才能将 Astro 连接到 Firebase：

  • Web 应用凭据：这些凭据将由你的应用的客户端使用。你可以在 Firebase 控制台的“项目设置”>“常规”下找到它们。向下滚动到你的应用部分并单击 Web 应用图标。

  • 项目资质：这些凭据将由你的应用的服务器端使用。你可以在 Firebase 控制台中的“项目设置”>“服务账户”>“Firebase Admin SDK”>“生成新私钥”下生成它们。

添加 Firebase 凭据

标题部分 添加 Firebase 凭据

¥Adding Firebase credentials

要将 Firebase 凭据添加到 Astro，请使用以下变量在项目的根目录中创建 .env 文件：

¥To add your Firebase credentials to Astro, create an .env file in the root of your project with the following variables:

.env

FIREBASE_PRIVATE_KEY_ID=YOUR_PRIVATE_KEY_ID
FIREBASE_PRIVATE_KEY=YOUR_PRIVATE_KEY
FIREBASE_PROJECT_ID=YOUR_PROJECT_ID
FIREBASE_CLIENT_EMAIL=YOUR_CLIENT_EMAIL
FIREBASE_CLIENT_ID=YOUR_CLIENT_ID
FIREBASE_AUTH_URI=YOUR_AUTH_URI
FIREBASE_TOKEN_URI=YOUR_TOKEN_URI
FIREBASE_AUTH_CERT_URL=YOUR_AUTH_CERT_URL
FIREBASE_CLIENT_CERT_URL=YOUR_CLIENT_CERT_URL

现在，这些环境变量可以在你的项目中使用。

¥Now, these environment variables are available for use in your project.

如果你希望 Firebase 环境变量具有 IntelliSense，请在 src/ 目录中编辑或创建文件 env.d.ts 并配置你的类型：

¥If you would like to have IntelliSense for your Firebase environment variables, edit or create the file env.d.ts in your src/ directory and configure your types:

src/env.d.ts

interface ImportMetaEnv {
  readonly FIREBASE_PRIVATE_KEY_ID: string;
  readonly FIREBASE_PRIVATE_KEY: string;
  readonly FIREBASE_PROJECT_ID: string;
  readonly FIREBASE_CLIENT_EMAIL: string;
  readonly FIREBASE_CLIENT_ID: string;
  readonly FIREBASE_AUTH_URI: string;
  readonly FIREBASE_TOKEN_URI: string;
  readonly FIREBASE_AUTH_CERT_URL: string
  readonly FIREBASE_CLIENT_CERT_URL: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Tip

Read more about environment variables and .env files in Astro.

你的项目现在应该包含这些新文件：

¥Your project should now include these new files:

• Directorysrc/

  • env.d.ts
• .env
• astro.config.mjs
• package.json

安装依赖

标题部分 安装依赖

¥Installing dependencies

要将 Astro 与 Firebase 连接，请使用以下单个命令为你的首选软件包管理器安装以下软件包：

¥To connect Astro with Firebase, install the following packages using the single command below for your preferred package manager:

• firebase - 客户端的 Firebase SDK

• firebase-admin - 服务器端的 Firebase Admin SDK

npm

npm install firebase firebase-admin

pnpm

pnpm add firebase firebase-admin

Yarn

yarn add firebase firebase-admin

接下来，在 src/ 目录中创建一个名为 firebase 的文件夹，并向该文件夹添加两个新文件：client.ts 和 server.ts。

¥Next, create a folder named firebase in the src/ directory and add two new files to this folder: client.ts and server.ts.

在 client.ts 中，添加以下代码以使用你的 Web 应用凭据和 firebase 包在客户端中初始化 Firebase：

¥In client.ts, add the following code to initialize Firebase in the client using your web app credentials and the firebase package:

src/firebase/client.ts

import { initializeApp } from "firebase/app";

const firebaseConfig = {
  apiKey: "my-public-api-key",
  authDomain: "my-auth-domain",
  projectId: "my-project-id",
  storageBucket: "my-storage-bucket",
  messagingSenderId: "my-sender-id",
  appId: "my-app-id",
};

export const app = initializeApp(firebaseConfig);

Note

Remember to replace the firebaseConfig object with your own web app credentials.

在 server.ts 中，添加以下代码以使用你的项目凭据和 firebase-admin 包在服务器中初始化 Firebase：

¥In server.ts, add the following code to initialize Firebase in the server using your project credentials and the firebase-admin package:

src/firebase/server.ts

import type { ServiceAccount } from "firebase-admin";
import { initializeApp, cert, getApps } from "firebase-admin/app";

const activeApps = getApps();
const serviceAccount = {
  type: "service_account",
  project_id: import.meta.env.FIREBASE_PROJECT_ID,
  private_key_id: import.meta.env.FIREBASE_PRIVATE_KEY_ID,
  private_key: import.meta.env.FIREBASE_PRIVATE_KEY,
  client_email: import.meta.env.FIREBASE_CLIENT_EMAIL,
  client_id: import.meta.env.FIREBASE_CLIENT_ID,
  auth_uri: import.meta.env.FIREBASE_AUTH_URI,
  token_uri: import.meta.env.FIREBASE_TOKEN_URI,
  auth_provider_x509_cert_url: import.meta.env.FIREBASE_AUTH_CERT_URL,
  client_x509_cert_url: import.meta.env.FIREBASE_CLIENT_CERT_URL,
};

const initApp = () => {
  if (import.meta.env.PROD) {
    console.info('PROD env detected. Using default service account.')
    // Use default config in firebase functions. Should be already injected in the server by Firebase.
    return initializeApp()
  }
  console.info('Loading service account from env.')
  return initializeApp({
    credential: cert(serviceAccount as ServiceAccount)
  })
}

export const app = activeApps.length === 0 ? initApp() : activeApps[0];

Note

Remember to replace the serviceAccount object with your own project credentials.

最后，你的项目现在应该包含这些新文件：

¥Finally, your project should now include these new files:

• Directorysrc

  • env.d.ts
  • Directoryfirebase

    • client.ts
    • server.ts
• .env
• astro.config.mjs
• package.json

使用 Firebase 添加身份验证

标题部分 使用 Firebase 添加身份验证

¥Adding authentication with Firebase

先决条件

标题部分 先决条件

¥Prerequisites

• Astro 项目 使用 Firebase 初始化。

• 在 Firebase 控制台的“身份验证”>“登录方法”下启用了电子邮件/密码身份验证的 Firebase 项目。

创建身份验证服务器端点

标题部分 创建身份验证服务器端点

¥Creating auth server endpoints

Astro 中的 Firebase 身份验证需要以下三个 Astro 服务器端点：

¥Firebase authentication in Astro requires the following three Astro server endpoints:

• GET /api/auth/signin - 登录用户

• GET /api/auth/signout - 注销用户

• POST /api/auth/register - 注册用户

在新目录 src/pages/api/auth/ 中创建与身份验证相关的三个端点：signin.ts、signout.ts 和 register.ts。

¥Create three endpoints related to authentication in a new directory src/pages/api/auth/: signin.ts, signout.ts and register.ts.

signin.ts 包含使用 Firebase 登录用户的代码：

¥signin.ts contains the code to sign in a user using Firebase:

src/pages/api/auth/signin.ts

import type { APIRoute } from "astro";
import { app } from "../../../firebase/server";
import { getAuth } from "firebase-admin/auth";

export const GET: APIRoute = async ({ request, cookies, redirect }) => {
  const auth = getAuth(app);

  /* Get token from request headers */
  const idToken = request.headers.get("Authorization")?.split("Bearer ")[1];
  if (!idToken) {
    return new Response(
      "No token found",
      { status: 401 }
    );
  }

  /* Verify id token */
  try {
    await auth.verifyIdToken(idToken);
  } catch (error) {
    return new Response(
      "Invalid token",
      { status: 401 }
    );
  }

  /* Create and set session cookie */
  const fiveDays = 60 * 60 * 24 * 5 * 1000;
  const sessionCookie = await auth.createSessionCookie(idToken, {
    expiresIn: fiveDays,
  });

  cookies.set("__session", sessionCookie, {
    path: "/",
  });

  return redirect("/dashboard");
};

Caution

Firebase only allows the use of one cookie, and it must be named __session. Any other cookies the client sends will not be visible to your application.

Note

This is a basic implementation of the signin endpoint. You can add more logic to this endpoint to suit your needs.

signout.ts 包含通过删除会话 cookie 来注销用户的代码：

¥signout.ts contains the code to log out a user by deleting the session cookie:

src/pages/api/auth/signout.ts

import type { APIRoute } from "astro";

export const GET: APIRoute = async ({ redirect, cookies }) => {
  cookies.delete("__session", {
    path: "/",
  });
  return redirect("/signin");
};

Note

This is a basic implementation of the signout endpoint. You can add more logic to this endpoint to suit your needs.

register.ts 包含使用 Firebase 注册用户的代码：

¥register.ts contains the code to register a user using Firebase:

src/pages/api/auth/register.ts

import type { APIRoute } from "astro";
import { getAuth } from "firebase-admin/auth";
import { app } from "../../../firebase/server";

export const POST: APIRoute = async ({ request, redirect }) => {
  const auth = getAuth(app);

  /* Get form data */
  const formData = await request.formData();
  const email = formData.get("email")?.toString();
  const password = formData.get("password")?.toString();
  const name = formData.get("name")?.toString();

  if (!email || !password || !name) {
    return new Response(
      "Missing form data",
      { status: 400 }
    );
  }

  /* Create user */
  try {
    await auth.createUser({
      email,
      password,
      displayName: name,
    });
  } catch (error: any) {
    return new Response(
      "Something went wrong",
      { status: 400 }
    );
  }
  return redirect("/signin");
};

Note

This is a basic implementation of the register endpoint. You can add more logic to this endpoint to suit your needs.

创建用于身份验证的服务器端点后，你的项目目录现在应该包含以下新文件：

¥After creating server endpoints for authentication, your project directory should now include these new files:

• Directorysrc

  • env.d.ts
  • Directoryfirebase

    • client.ts
    • server.ts
  • Directorypages

    • Directoryapi

      • Directoryauth

        • signin.ts
        • signout.ts
        • register.ts
• .env
• astro.config.mjs
• package.json

创建页面

标题部分 创建页面

¥Creating pages

创建将使用 Firebase 端点的页面：

¥Create the pages that will use the Firebase endpoints:

• src/pages/register - 将包含一个用于注册用户的表格

• src/pages/signin - 将包含一个用于登录用户的表单

• src/pages/dashboard - 将包含一个只能由经过身份验证的用户访问的仪表板

下面的示例 src/pages/register.astro 包含一个将 POST 请求发送到 /api/auth/register 端点的表单。该端点将使用表单中的数据创建一个新用户，然后将用户重定向到 /signin 页面。

¥The example src/pages/register.astro below includes a form that will send a POST request to the /api/auth/register endpoint. This endpoint will create a new user using the data from the form and then will redirect the user to the /signin page.

src/pages/register.astro

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Register">
  <h1>Register</h1>
  <p>Already have an account? <a href="/signin">Sign in</a></p>
  <form action="/api/auth/register" method="post">
    <label for="name">Name</label>
    <input type="text" name="name" id="name" />
    <label for="email" for="email">Email</label>
    <input type="email" name="email" id="email" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
    <button type="submit">Login</button>
  </form>
</Layout>

src/pages/signin.astro 使用 Firebase 服务器应用来验证用户的会话 cookie。如果用户通过身份验证，页面会将用户重定向到 /dashboard 页面。

¥src/pages/signin.astro uses the Firebase server app to verify the user’s session cookie. If the user is authenticated, the page will redirect the user to the /dashboard page.

下面的示例页面包含一个表单，该表单将使用 Firebase 客户端应用生成的 ID 令牌向 /api/auth/signin 端点发送 POST 请求。

¥The example page below contains a form that will send a POST request to the /api/auth/signin endpoint with the ID token generated by the Firebase client app.

端点将验证 ID 令牌并为用户创建新的会话 cookie。然后，终端会将用户重定向到 /dashboard 页面。

¥The endpoint will verify the ID token and create a new session cookie for the user. Then, the endpoint will redirect the user to the /dashboard page.

src/pages/signin.astro

---
import { app } from "../firebase/server";
import { getAuth } from "firebase-admin/auth";
import Layout from "../layouts/Layout.astro";

/* Check if the user is authenticated */
const auth = getAuth(app);
if (Astro.cookies.has("__session")) {
  const sessionCookie = Astro.cookies.get("__session").value;
  const decodedCookie = await auth.verifySessionCookie(sessionCookie);
  if (decodedCookie) {
    return Astro.redirect("/dashboard");
  }
}
---

<Layout title="Sign in">
  <h1>Sign in</h1>
  <p>New here? <a href="/register">Create an account</a></p>
  <form action="/api/auth/signin" method="post">
    <label for="email" for="email">Email</label>
    <input type="email" name="email" id="email" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
    <button type="submit">Login</button>
  </form>
</Layout>
<script>
  import {
    getAuth,
    inMemoryPersistence,
    signInWithEmailAndPassword,
  } from "firebase/auth";
  import { app } from "../firebase/client";

  const auth = getAuth(app);
  // This will prevent the browser from storing session data
  auth.setPersistence(inMemoryPersistence);

  const form = document.querySelector("form") as HTMLFormElement;
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const email = formData.get("email")?.toString();
    const password = formData.get("password")?.toString();

    if (!email || !password) {
      return;
    }
    const userCredential = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    const idToken = await userCredential.user.getIdToken();
    const response = await fetch("/api/auth/signin", {
      method: "GET",
      headers: {
        Authorization: `Bearer ${idToken}`,
      },
    });

    if (response.redirected) {
      window.location.assign(response.url);
    }
  });
</script>

src/pages/dashboard.astro 将使用 Firebase 服务器应用验证用户的会话 cookie。如果用户未通过身份验证，页面会将用户重定向到 /signin 页面。

¥src/pages/dashboard.astro will verify the user’s session cookie using the Firebase server app. If the user is not authenticated, the page will redirect the user to the /signin page.

下面的示例页面显示用户的名称和注销按钮。单击该按钮将向 /api/auth/signout 端点发送 GET 请求。

¥The example page below display the user’s name and a button to sign out. Clicking the button will send a GET request to the /api/auth/signout endpoint.

终端将删除用户的会话 cookie 并将用户重定向到 /signin 页面。

¥The endpoint will delete the user’s session cookie and redirect the user to the /signin page.

src/pages/dashboard.astro

---
import { app } from "../firebase/server";
import { getAuth } from "firebase-admin/auth";
import Layout from "../layouts/Layout.astro";

const auth = getAuth(app);

/* Check current session */
if (!Astro.cookies.has("__session")) {
  return Astro.redirect("/signin");
}
const sessionCookie = Astro.cookies.get("__session").value;
const decodedCookie = await auth.verifySessionCookie(sessionCookie);
const user = await auth.getUser(decodedCookie.uid);

if (!user) {
  return Astro.redirect("/signin");
}
---

<Layout title="dashboard">
  <h1>Welcome {user.displayName}</h1>
  <p>We are happy to see you here</p>
  <form action="/api/auth/signout">
    <button type="submit">Sign out</button>
  </form>
</Layout>

添加 OAuth 提供商

标题部分 添加 OAuth 提供商

¥Adding OAuth providers

要将 OAuth 提供程序添加到你的应用中，你需要在 Firebase 控制台中启用它们。

¥To add OAuth providers to your app, you need to enable them in the Firebase console.

在 Firebase 控制台中，转到身份验证部分，然后单击登录方法选项卡。然后，单击“添加新提供程序”按钮并启用你要使用的提供程序。

¥In the Firebase console, go to the Authentication section and click on the Sign-in method tab. Then, click on the Add a new provider button and enable the providers you want to use.

以下示例使用 Google 提供程序。

¥The example below uses the Google provider.

编辑 signin.astro 页面添加：

¥Edit the signin.astro page to add:

• 现有表单下方用于登录 Google 的按钮

• 按钮上的事件监听器，用于处理现有 <script> 中的登录过程。

src/pages/signin.astro

---
import { app } from "../firebase/server";
import { getAuth } from "firebase-admin/auth";
import Layout from "../layouts/Layout.astro";

/* Check if the user is authenticated */
const auth = getAuth(app);
if (Astro.cookies.has("__session")) {
  const sessionCookie = Astro.cookies.get("__session").value;
  const decodedCookie = await auth.verifySessionCookie(sessionCookie);
  if (decodedCookie) {
    return Astro.redirect("/dashboard");
  }
}
---

<Layout title="Sign in">
  <h1>Sign in</h1>
  <p>New here? <a href="/register">Create an account</a></p>
  <form action="/api/auth/signin" method="post">
    <label for="email" for="email">Email</label>
    <input type="email" name="email" id="email" />
    <label for="password">Password</label>
    <input type="password" name="password" id="password" />
    <button type="submit">Login</button>
  </form>
  <button id="google">Sign in with Google</button>
</Layout>
<script>
  import {
    getAuth,
    inMemoryPersistence,
    signInWithEmailAndPassword,
    GoogleAuthProvider,
    signInWithPopup,
  } from "firebase/auth";
  import { app } from "../firebase/client";

  const auth = getAuth(app);
  auth.setPersistence(inMemoryPersistence);

  const form = document.querySelector("form") as HTMLFormElement;
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    const email = formData.get("email")?.toString();
    const password = formData.get("password")?.toString();

    if (!email || !password) {
      return;
    }
    const userCredential = await signInWithEmailAndPassword(
      auth,
      email,
      password
    );
    const idToken = await userCredential.user.getIdToken();
    const response = await fetch("/api/auth/signin", {
      headers: {
        Authorization: `Bearer ${idToken}`,
      },
    });

    if (response.redirected) {
      window.location.assign(response.url);
    }
  });

  const googleSignin = document.querySelector("#google") as HTMLButtonElement;
  googleSignin.addEventListener("click", async () => {
    const provider = new GoogleAuthProvider();
    const userCredential = await signInWithPopup(auth, provider);
    const idToken = await userCredential.user.getIdToken();
    const res = await fetch("/api/auth/signin", {
      headers: {
        Authorization: `Bearer ${idToken}`,
      },
    });

    if (res.redirected) {
      window.location.assign(res.url);
    }
  });
</script>

单击后，Google 登录按钮将打开一个弹出窗口以使用 Google 登录。用户登录后，它将使用 OAuth 提供程序生成的 ID 令牌向 /api/auth/signin 端点发送 POST 请求。

¥When clicked, the Google sign in button will open a popup window to sign in with Google. Once the user signs in, it will send a POST request to the /api/auth/signin endpoint with the ID token generated by OAuth provider.

端点将验证 ID 令牌并为用户创建新的会话 cookie。然后，终端会将用户重定向到 /dashboard 页面。

¥The endpoint will verify the ID token and create a new session cookie for the user. Then, the endpoint will redirect the user to the /dashboard page.

连接到 Firestore 数据库

标题部分 连接到 Firestore 数据库

¥Connecting to Firestore database

先决条件

标题部分 先决条件

¥Prerequisites

• 使用 Firebase 初始化的 Astro 项目，如 在 Astro 中初始化 Firebase 部分所述。

• 具有 Firestore 数据库的 Firebase 项目。你可以关注 用于创建新项目并设置 Firestore 数据库的 Firebase 文档。

在本秘诀中，Firestore 集合将被称为 friends，并将包含具有以下字段的文档：

¥In this recipe, the Firestore collection will be called friends and will contain documents with the following fields:

• id：由 Firestore 自动生成

• name：字符串字段

• age：数字字段

• isBestFriend：布尔字段

创建服务器端点

标题部分 创建服务器端点

¥Creating the server endpoints

在新目录 src/pages/api/friends/ 中创建两个新文件：index.ts 和 [id].ts。这些将创建两个服务器端点以通过以下方式与 Firestore 数据库交互：

¥Create two new files in a new directory src/pages/api/friends/: index.ts and [id].ts. These will create two server endpoints to interact with the Firestore database in the following ways:

• POST /api/friends：在朋友集合中创建一个新文档。

• POST /api/friends/:id：更新朋友集合中的文档。

• DELETE /api/friends/:id：删除朋友集合中的文档。

index.ts 将包含在朋友集合中创建新文档的代码：

¥index.ts will contain the code to create a new document in the friends collection:

src/pages/api/friends/index.ts

import type { APIRoute } from "astro";
import { app } from "../../../firebase/server";
import { getFirestore } from "firebase-admin/firestore";

export const POST: APIRoute = async ({ request, redirect }) => {
  const formData = await request.formData();
  const name = formData.get("name")?.toString();
  const age = formData.get("age")?.toString();
  const isBestFriend = formData.get("isBestFriend") === "on";

  if (!name || !age) {
    return new Response("Missing required fields", {
      status: 400,
    });
  }
  try {
    const db = getFirestore(app);
    const friendsRef = db.collection("friends");
    await friendsRef.add({
      name,
      age: parseInt(age),
      isBestFriend,
    });
  } catch (error) {
    return new Response("Something went wrong", {
      status: 500,
    });
  }
  return redirect("/dashboard");
};

Note

This is a basic implementation of the friends endpoint. You can add more logic to this endpoint to suit your needs.

[id].ts 将包含更新和删除朋友集合中文档的代码：

¥[id].ts will contain the code to update and delete a document in the friends collection:

src/pages/api/friends/[id].ts

import type { APIRoute } from "astro";
import { app } from "../../../firebase/server";
import { getFirestore } from "firebase-admin/firestore";

const db = getFirestore(app);
const friendsRef = db.collection("friends");

export const POST: APIRoute = async ({ params, redirect, request }) => {
  const formData = await request.formData();
  const name = formData.get("name")?.toString();
  const age = formData.get("age")?.toString();
  const isBestFriend = formData.get("isBestFriend") === "on";

  if (!name || !age) {
    return new Response("Missing required fields", {
      status: 400,
    });
  }

  if (!params.id) {
    return new Response("Cannot find friend", {
      status: 404,
    });
  }

  try {
    await friendsRef.doc(params.id).update({
      name,
      age: parseInt(age),
      isBestFriend,
    });
  } catch (error) {
    return new Response("Something went wrong", {
      status: 500,
    });
  }
  return redirect("/dashboard");
};

export const DELETE: APIRoute = async ({ params, redirect }) => {
  if (!params.id) {
    return new Response("Cannot find friend", {
      status: 404,
    });
  }

  try {
    await friendsRef.doc(params.id).delete();
  } catch (error) {
    return new Response("Something went wrong", {
      status: 500,
    });
  }
  return redirect("/dashboard");
};

Note

This is a basic implementation of the friends/:id endpoint. You can add more logic to this endpoint to suit your needs.

为 Firestore 创建服务器端点后，你的项目目录现在应包含以下新文件：

¥After creating server endpoints for Firestore, your project directory should now include these new files:

• Directorysrc

  • env.d.ts
  • Directoryfirebase

    • client.ts
    • server.ts
  • Directorypages

    • Directoryapi

      • Directoryfriends

        • index.ts
        • [id].ts
• .env
• astro.config.mjs
• package.json

创建页面

标题部分 创建页面

¥Creating pages

创建将使用 Firestore 端点的页面：

¥Create the pages that will use the Firestore endpoints:

• src/pages/add.astro - 将包含一个用于添加新朋友的表单。

• src/pages/edit/[id].astro - 将包含一个用于编辑朋友的表单和一个用于删除朋友的按钮。

• src/pages/friend/[id].astro - 将包含朋友的详细信息。

• src/pages/dashboard.astro - 将显示好友列表。

添加新记录

标题部分 添加新记录

¥Add a new record

下面的示例 src/pages/add.astro 包含一个将 POST 请求发送到 /api/friends 端点的表单。该端点将使用表单中的数据创建一个新朋友，然后将用户重定向到 /dashboard 页面。

¥The example src/pages/add.astro below includes a form that will send a POST request to the /api/friends endpoint. This endpoint will create a new friend using the data from the form and then will redirect the user to the /dashboard page.

src/pages/add.astro

---
import Layout from "../layouts/Layout.astro";
---

<Layout title="Add a new friend">
  <h1>Add a new friend</h1>
  <form method="post" action="/api/friends">
    <label for="name">Name</label>
    <input type="text" id="name" name="name" />
    <label for="age">Age</label>
    <input type="number" id="age" name="age" />
    <label for="isBestFriend">Is best friend?</label>
    <input type="checkbox" id="isBestFriend" name="isBestFriend" />
    <button type="submit">Add friend</button>
  </form>
</Layout>

编辑或删除记录

标题部分 编辑或删除记录

¥Edit or Delete a record

src/pages/edit/[id].astro 将包含一个用于编辑好友数据的表单和一个用于删除好友的按钮。提交后，此页面将向 /api/friends/:id 端点发送 POST 请求以更新好友数据。

¥src/pages/edit/[id].astro will contain a form to edit a friend data and a button to delete a friend. On submit, this page will send a POST request to the /api/friends/:id endpoint to update a friend data.

如果用户点击删除按钮，该页面将向 /api/friends/:id 端点发送 DELETE 请求以删除好友。

¥If the user clicks the delete button, this page will send a DELETE request to the /api/friends/:id endpoint to delete a friend.

src/pages/edit/[id].astro

---
import Layout from "../../layouts/Layout.astro";
import { app } from "../../firebase/server";
import { getFirestore } from "firebase-admin/firestore";

interface Friend {
  name: string;
  age: number;
  isBestFriend: boolean;
}

const { id } = Astro.params;

if (!id) {
  return Astro.redirect("/404");
}

const db = getFirestore(app);
const friendsRef = db.collection("friends");
const friendSnapshot = await friendsRef.doc(id).get();

if (!friendSnapshot.exists) {
  return Astro.redirect("/404");
}

const friend = friendSnapshot.data() as Friend;
---

<Layout title="Edit {friend.name}">
  <h1>Edit {friend.name}</h1>
  <p>Here you can edit or delete your friend's data.</p>
  <form method="post" action={`/api/friends/${id}`}>
    <label for="name">Name</label>
    <input type="text" id="name" name="name" value={friend.name} />
    <label for="age">Age</label>
    <input type="number" id="age" name="age" value={friend.age} />
    <label for="isBestFriend">Is best friend?</label>
    <input
      type="checkbox"
      id="isBestFriend"
      name="isBestFriend"
      checked={friend.isBestFriend}
    />
    <button type="submit">Edit friend</button>
  </form>
  <button type="button" id="delete-document">Delete</button>
</Layout>
<script>
  const deleteButton = document.getElementById(
    "delete-document"
  ) as HTMLButtonElement;
  const url = document.querySelector("form")?.getAttribute("action") as string;
  deleteButton.addEventListener("click", async () => {
    const response = await fetch(url, {
      method: "DELETE",
    });
    if (response.redirected) {
      window.location.assign(response.url);
    }
  });
</script>

显示单个记录

标题部分 显示单个记录

¥Display an individual record

src/pages/friend/[id].astro 将显示好友的详细信息。

¥src/pages/friend/[id].astro will display the details of a friend.

src/pages/friend/[id].astro

---
import Layout from "../../layouts/Layout.astro";
import { app } from "../../firebase/server";
import { getFirestore } from "firebase-admin/firestore";

interface Friend {
  name: string;
  age: number;
  isBestFriend: boolean;
}

const { id } = Astro.params;

if (!id) {
  return Astro.redirect("/404");
}

const db = getFirestore(app);
const friendsRef = db.collection("friends");
const friendSnapshot = await friendsRef.doc(id).get();

if (!friendSnapshot.exists) {
  return Astro.redirect("/404");
}

const friend = friendSnapshot.data() as Friend;
---

<Layout title={friend.name}>
  <h1>{friend.name}</h1>
  <p>Age: {friend.age}</p>
  <p>Is best friend: {friend.isBestFriend ? "Yes" : "No"}</p>
</Layout>

显示带有编辑按钮的记录列表

标题部分 显示带有编辑按钮的记录列表

¥Display a list of records with an edit button

最后，src/pages/dashboard.astro 会显示好友列表。每个朋友都会有一个指向其详细信息页面的链接和一个编辑按钮，该按钮会将用户重定向到编辑页面。

¥Finally, src/pages/dashboard.astro will display a list of friends. Each friend will have a link to their details page and an edit button that will redirect the user to the edit page.

src/pages/dashboard.astro

---
import { app } from "../firebase/server";
import { getFirestore } from "firebase-admin/firestore";
import Layout from "../layouts/Layout.astro";

interface Friend {
  id: string;
  name: string;
  age: number;
  isBestFriend: boolean;
}

const db = getFirestore(app);
const friendsRef = db.collection("friends");
const friendsSnapshot = await friendsRef.get();
const friends = friendsSnapshot.docs.map((doc) => ({
  id: doc.id,
  ...doc.data(),
})) as Friend[];
---

<Layout title="My friends">
  <h1>Friends</h1>
  <ul>
    {
      friends.map((friend) => (
        <li>
          <a href={`/friend/${friend.id}`}>{friend.name}</a>
          <span>({friend.age})</span>
          <strong>{friend.isBestFriend ? "Bestie" : "Friend"}</strong>
          <a href={`/edit/${friend.id}`}>Edit</a>
        </li>
      ))
    }
  </ul>
</Layout>

创建所有页面后，你应该具有以下文件结构：

¥After creating all the pages, you should have the following file structure:

• Directorysrc

  • env.d.ts
  • Directoryfirebase

    • client.ts
    • server.ts
  • Directorypages

    • dashboard.astro
    • add.astro
    • Directoryedit

      • [id].astro
    • Directoryfriend

      • [id].astro
    • Directoryapi

      • Directoryfriends

        • index.ts
        • [id].ts
• .env
• astro.config.mjs
• package.json

社区资源

标题部分 社区资源

¥Community Resources

• Astro 和 Firebase SSR 应用示例

• 在 Astro 中使用 Firebase 实时数据库和 Vue：分步指南

更多后端服务指南

• 

  Appwrite

• 

  Firebase

• 

  Neon

• 

  Sentry

• 

  Supabase

• 

  Turso

• 

  Xata