Skip to content

验证

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

¥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 AuthAuth.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.

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

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

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

¥Installation

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

¥Install Lucia using the package manager of your choice.

Terminal window
npm install lucia

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

¥Usage

¥Next Steps

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

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

¥Installation

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

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

Terminal window
npx astro add auth-astro

¥Manual installation

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

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

Terminal window
npm install 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()],
});

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

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

¥Next Steps

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

¥Installation

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

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

Terminal window
npm install @clerk/astro

¥Configuration

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

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

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

¥Next Steps

¥Community Resources

Astro 中文网 - 粤ICP备13048890号