身份认证

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

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

提示

Astro 没有官方的认证解决方案，但你可以在集成目录中找到 社区的“auth”集成。

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

Lucia

段落标题 Lucia

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

安装

段落标题 安装

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

npm

npm install lucia

pnpm

pnpm add lucia

Yarn

yarn add lucia

配置

段落标题 配置

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

使用方法

段落标题 使用方法

提示

遵循 Lucia 的完整 Astro 教程之一，向你的 Astro 项目添加 用户名和密码认证 或 GitHub OAuth。

下一步

段落标题 下一步

• Astro + Lucia OAuth 项目示例
• Astro + Lucia 用户名和密码项目示例

Auth.js

段落标题 Auth.js

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

安装

段落标题 安装

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

npm

npx astro add auth-astro

pnpm

pnpm astro add auth-astro

Yarn

yarn astro add auth-astro

手动安装

段落标题 手动安装

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

npm

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

pnpm

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

Yarn

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

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

astro.config.mjs

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

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

配置

段落标题 配置

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

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 个字符的私有字符串。

.env

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

使用方法

段落标题 使用方法

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

src/pages/index.astro

---
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 方法获取用户的会话信息。

src/pages/index.astro

---
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>

下一步

段落标题 下一步

• GitHub 上的 auth-astro
• Auth.js 文档

Clerk

段落标题 Clerk

Clerk 是一套完整的系统，它拥有嵌入式 UI、灵活的 API 以及用于验证和管理用户的仪表盘。Clerk 的官方 Astro SDK 现已推出。

安装

段落标题 安装

使用你选择的包管理器安装 @clerk/astro。

npm

npm install @clerk/astro

pnpm

pnpm add @clerk/astro

Yarn

yarn add @clerk/astro

配置

段落标题 配置

按照 Clerk 自己的 Astro 快速入门指南 在你的 Astro 项目中设置 Clerk 集成和中间件。

使用方法

段落标题 使用方法

Clerk 提供的组件允许你根据用户的身份验证状态控制页面的可见性。向已注销的用户显示登录按钮，而不是向已登录的用户显示可用的内容：

src/pages/index.astro

---
import Layout from 'src/layouts/Base.astro';
import { SignedIn, SignedOut, UserButton, SignInButton } from '@clerk/astro/components';
---
<Layout>
    <SignedIn>
        <UserButton />
    </SignedIn>
    <SignedOut>
        <SignInButton />
    </SignedOut>
</Layout>

Clerk 还允许你使用中间件以保护服务器上的路由。指定受保护的路由，并提示未经身份验证的用户登录：

src/middleware.ts

import { clerkMiddleware, createRouteMatcher } from '@clerk/astro/server';

const isProtectedRoute = createRouteMatcher([
  '/dashboard(.*)',
  '/forum(.*)',
]);

export const onRequest = clerkMiddleware((auth, context) => {
  if (!auth().userId && isProtectedRoute(context.request)) {
    return auth().redirectToSignIn();
  }
});

下一步

段落标题 下一步

• 阅读 官方 @clerk/astro 文档
• 从 Clerk + Astro 快速入门项目 的模板开始

社区资源

段落标题 社区资源

• 在 Astro 和 Azure 静态 Web 应用中使用 Microsoft Entra Id EasyAuth