跳转到内容

身份认证

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

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

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

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

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

Terminal window
npm install lucia

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

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

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

Terminal window
npx astro add auth-astro

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

Terminal window
npm install 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>

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

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

Terminal window
npm install @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();
}
});
贡献

你有什么想法?

社区