验证

身份验证和授权是管理对你的网站或应用的访问的两个安全过程。身份验证验证访问者的身份，而授权授予对受保护区域和资源的访问权限。

¥Authentication and authorization are two security processes that manage access to your website or app. Authentication verifies a visitor’s identity, while authorization grants access to protected areas and resources.

身份验证允许你为登录的个人自定义站点区域，并为个人或私有信息提供最大程度的保护。身份验证库（例如 Lucia Auth、Auth.js、店员）为多种身份验证方法（例如电子邮件登录和 OAuth 提供程序）提供实用程序。

¥Authentication allows you to customize areas of your site for logged-in individuals and provides the greatest protection for personal or private information. Authentication libraries (e.g. Lucia Auth, Auth.js, Clerk) provide utilities for multiple authentication methods such as email sign-in and OAuth providers.

Tip

There is no official authentication solution for Astro, but you can find community “auth” integrations in the integrations directory.

See how to add authentication with Supabase or add authentication with Firebase in our dedicated guides for these backend services.

Lucia

Section titled Lucia

Lucia 是一个与框架无关的基于会话的身份验证库，具有出色的 Astro 支持。

¥Lucia is a framework-agnostic, session-based authentication library with great Astro support.

安装

Section titled 安装

¥Installation

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

¥Install Lucia using the package manager of your choice.

npm

npm install lucia

pnpm

pnpm add lucia

Yarn

yarn add lucia

配置

Section titled 配置

¥Configuration

使用 Lucia 的 “在 Astro 中开始使用” 指南通过适配器初始化 Lucia 并设置数据库来存储用户和会话。

¥Use Lucia’s “Getting started in Astro” guide to initialize Lucia with an adapter and set up a database to store users and sessions.

用法

Section titled 用法

¥Usage

Tip

Follow one of Lucia’s complete Astro tutorials to add username and password authentication or GitHub OAuth to your Astro project.

下一步

Section titled 下一步

¥Next Steps

• 示例 Astro + Lucia OAuth 项目

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

Auth.js

Section titled Auth.js

Auth.js 是一种与框架无关的身份验证解决方案。Astro 提供社区框架适配器 auth-astro。

¥Auth.js is a framework agnostic solution for authentication. A community framework adapter auth-astro is available for Astro.

安装

Section titled 安装

¥Installation

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

¥Use the astro add command for your preferred package manager to add the auth-astro integration.

npm

npx astro add auth-astro

pnpm

pnpm astro add auth-astro

Yarn

yarn astro add auth-astro

手动安装

Section titled 手动安装

¥Manual installation

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

¥To install auth-astro manually, install the required package for your package manager:

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.* 文件：

¥Then, apply the integration to your astro.config.* file using the integrations property:

astro.config.mjs

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

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

配置

Section titled 配置

¥Configuration

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

¥Create an auth.config.mjs file in your project’s root directory. Add any auth providers or methods you wish to support, along with any environment variables they require.

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

¥Create a .env file in the root of your project if it does not already exist. Add the following two environment variables. AUTH_SECRET should be a private string with a minimum of 32 characters.

.env

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

用法

Section titled 用法

¥Usage

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

¥You can add sign-in and sign-out buttons using the auth-astro/client module in a script tag or client-side framework component.

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

¥You can fetch the user’s session using the getSession method.

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>Welcome {session.user?.name}</p>
    ) : (
      <p>Not logged in</p>
    )
  }
</Layout>

下一步

Section titled 下一步

¥Next Steps

• GitHub 上的 auth-astro

• Auth.js 文档

店员

Section titled 店员

¥Clerk

Clerk 是一套完整的可嵌入 UI、灵活的 API 和管理仪表板，用于对你的用户进行身份验证和管理。Astro 官方 Clerk SDK 可用。

¥Clerk is a complete suite of embeddable UIs, flexible APIs, and admin dashboards to authenticate and manage your users. An official Clerk SDK for Astro is available.

安装

Section titled 安装

¥Installation

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

¥Install @clerk/astro using the package manager of your choice.

npm

npm install @clerk/astro

pnpm

pnpm add @clerk/astro

Yarn

yarn add @clerk/astro

配置

Section titled 配置

¥Configuration

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

¥Follow Clerk’s own Astro Quickstart guide to set up Clerk integration and middleware in your Astro project.

用法

Section titled 用法

¥Usage

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

¥Clerk provides components that allow you to control the visibility of pages based on your user’s authentication state. Show logged out users a sign in button instead of the content available to users who are logged in:

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 还允许你使用中间件保护服务器上的路由。指定哪些路由受到保护，并提示​​未经身份验证的用户登录：

¥Clerk also allows you to protect routes on the server using middleware. Specify which routes are protected, and prompt unauthenticated users to sign in:

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();
  }
});

下一步

Section titled 下一步

¥Next Steps

• 读取 官方 @clerk/astro 文档

• 从带有 Clerk + Astro 快速入门项目 的模板开始

社区资源

Section titled 社区资源

¥Community Resources

• 将 Microsoft Entra Id EasyAuth 与 Astro 和 Azure 静态 Web 应用结合使用