身份认证

认证和授权是两种安全过程，用来管理对你的网站或应用的访问。身份认证用于验证访客的身份，而授权则允许访问受保护的区域和资源。

认证允许你为登录的个人定制你的网站的特定区域，并为个人或私人信息提供最大程度的保护。认证库（例如 Lucia Auth、Auth.js）为多种认证方法提供了实用工具，如电子邮件登录和 OAuth 提供商。

查看我们的专门指南，了解如何使用 Supabase 添加认证或使用 Firebase 添加认证，以获取这些后端服务的详细信息。

Lucia

Lucia 是一个与框架无关、基于会话的认证库，对 Astro 支持良好。

安装

使用你选择的包管理器安装 Lucia。

npm install lucia

pnpm add lucia

yarn add lucia

配置

使用 Lucia 的“Astro 入门” 指南来初始化 Lucia 并配置一个适配器，设置一个数据库来存储用户和会话信息。

使用方法

下一步

Auth.js

Auth.js 是一个与框架无关的认证解决方案。社区框架适配器 auth-astro 可用于 Astro。

安装

使用你偏好的包管理器的 astro add 命令来添加 auth-astro 集成。

npx astro add auth-astro

pnpm astro add auth-astro

yarn astro add auth-astro

手动安装

要手动安装 auth-astro，请为你的包管理器安装所需的包：

npm install auth-astro @auth/core@^0.18.6

pnpm add auth-astro @auth/core@^0.18.6

yarn add auth-astro @auth/core@^0.18.6

然后，使用 integrations 属性将集成应用到你的 astro.config.* 文件中：

import { defineConfig } from 'astro/config';
import auth from 'auth-astro';

export default defineConfig({
  // ...
  integrations: [auth()],
});

配置

在你的项目根目录中创建一个 auth.config.mjs 文件。添加你希望支持的任何认证提供商或方法，以及它们所需的任何环境变量。

import GitHub from '@auth/core/providers/github';
import { defineConfig } from 'auth-astro';

export default defineConfig({
  providers: [
    GitHub({
      clientId: import.meta.env.GITHUB_CLIENT_ID,
      clientSecret: import.meta.env.GITHUB_CLIENT_SECRET,
    }),
  ],
});

如果你的项目根目录中还没有 .env 文件，请创建一个。添加以下两个环境变量。AUTH_SECRET 应该是一个至少包含 32 个字符的私有字符串。

AUTH_TRUST_HOST=true
AUTH_SECRET=<my-auth-secret>

使用方法

你可以使用 auth-astro/client 模块，在脚本标签或客户端框架组件中添加登录和登出按钮。

---
import Layout from 'src/layouts/Base.astro';
---
<Layout>
  <button id="login">Login</button>
  <button id="logout">Logout</button>

  <script>
    const { signIn, signOut } = await import("auth-astro/client")
    document.querySelector("#login").onclick = () => signIn("github")
    document.querySelector("#logout").onclick = () => signOut()
  </script>
</Layout>

你可以使用 getSession 方法获取用户的会话信息。

---
import Layout from 'src/layouts/Base.astro';
import { getSession } from 'auth-astro/server';

const session = await getSession(Astro.request);
---
<Layout>
  {
    session ? (
      <p>欢迎 {session.user?.name}</p>
    ) : (
      <p>未登录</p>
    )
  }
</Layout>