为 Astro 网站添加身份验证鉴权功能
Clerk 号称是最开箱即用的登录鉴权 serverless 服务，确实可以帮助开发者避免前期重复无聊的鉴权逻辑从而快速开发一些小玩具。
Astro 是一个用于构建快速、轻量级网站的现代前端框架，特别适合静态网站生成和内容丰富的网站，如博客、文档站点等。
今天我们要讲解的是在基于 Astro 框架构建的网站中，如何使用 Clerk 快速地为网站添加用户身份鉴证和鉴权功能。
首先创建 Astro website
这部分可以参考我之前的博客 使用 Astro 快速搭建自己的博客系统，里面介绍了多种构建 Astro website 的方法。
准备 Clerk 开发环境
配置环境变量的步骤如下，也可以直接参考官方文档：
- 浏览器访问Clerk，注册 Clerk 账号
- 点击 Create application 创建一个应用，也就是我们现在开发的这个项目。
- 配置鉴权选项，例如第三方登录提供商。这里需要事先声明的是，第三方登录提供商在开发环境是可以随意增加的，但是在生产环境每一个都需要额外的配置。所以这边量力而行。
- 进入 Clerk 控制台 找到 API keys，分别是一个公钥和私钥，将这个配置复制到我们项目中的环境变量里。
在项目中引入 Clerk
这里的 npm 包管理以 pnpm 包管理器为例，其他包管理器可以自行调整。
1 |
|
设置环境变量
将在 clerk 开发环境准备阶段获得的公钥和私钥以环境变量的形式提供给 clerk SDK。
这些密钥始终可以从 Clerk Dashboard 的 API 密钥页面中找到。
1 | PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c2F2ZWQtbWFsbGFyZC04LmNsZXJrLmFjY291bnRzLmRldiQ |
更新 astro.config.mjs
要在您的 Astro 应用程序中配置 Clerk，您需要修改 astro.config.mjs。
- 将 Clerk integration 添加到 integrations 列表中。
- 安装 SSR 适配器 。对于此快速入门，我们选择了 @astrojs/node 适配器。您可以使用任何您想要的基于 Node 的适配器。
- 设置 output 为 server。部署到支持 SSR 的主机时这是必需的。
1 | import { defineConfig } from "astro/config"; |
将中间件添加到您的应用程序
clerkMiddleware() 授予您访问整个应用程序、任何路由或页面上的用户身份验证状态的权限。它还允许您保护特定路由免受未经身份验证的用户的侵害。要添加 clerkMiddleware() 到您的应用程序，请按照以下步骤操作：
在您的目录中创建一个 middleware.ts 文件 src/。
在您的 middleware.ts 文件中，导出一个 onRequest 常量并将函数的结果分配 clerkMiddleware 给它。
1 |
|
默认情况下，clerkMiddleware()不会保护任何路由。所有路由都是公开的，您必须选择加入路由保护。请参阅参考 clerkMiddleware() 以了解如何要求对特定路由进行身份验证。
即使没有路由也需要配置clerkMiddleware，他是初始化过程的重要一步，否则的话在访问clerk组件的时候会出现类似Astro2.locals.auth is not a function的错误。
添加 TypeScript 声明
更新目录 src/中的 env.d.ts 文件。
1 | /// <reference types="astro/client" /> |
向您的应用添加验证鉴权相关组件
1 | --- import { SignedIn, SignedOut, UserButton, SignInButton } from |
创建你的第一个用户
现在访问您的应用主页 http://localhost:4321。注册以创建您的第一个用户。
参考文档
为 Astro 网站添加身份验证鉴权功能