跳转到内容

身份认证

认证和授权是两种安全过程，帮助你控制谁可以访问你的网站或应用的不同部分。认证是确认访客身份的过程，而授权是允许访客访问受保护的路由和资源的过程。

认证允许你为登录的个人定制你的网站的特定区域，并为个人或私人信息提供最大程度的保护。认证库（例如 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 命令来添加 astro-auth 集成。

Terminal window
npx astro add auth-astro

手动安装

段落标题 手动安装

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

Terminal window
npm install auth-astro

然后，使用 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>

下一步

段落标题 下一步