跳转到内容

身份认证

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

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

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

Lucia

段落标题 Lucia

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

安装

段落标题 安装

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

Terminal window
npm install lucia

配置

段落标题 配置

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

使用方法

段落标题 使用方法

下一步

段落标题 下一步

Auth.js

段落标题 Auth.js

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>

下一步

段落标题 下一步

社区资源

段落标题 社区资源