使用 Prisma 和 Planetscale 在 Astro 中设置身份验证

野性酷女 2024-03-16 21:01 46阅读 0赞

一段时间以来，我一直想为我的个人网站添加身份验证，以了解它在 Astro 中的工作原理。[由于 Prisma 和 PlanetScale 已经在我的博客上][Prisma _ PlanetScale]  
征求意见，我决定将我的帐户信息存储在 PlanetScale 中。 因为它只是用于我自己的帐户，并且我没有在我的数据库中存储任何其他敏感信息，所以我决定暂时以纯文本形式存储凭据。 我更改了我的 Prisma 模式以使其成为可能：

<code>// schema.prisma
 
 model Account {
 id Int @id @default(autoincrement())
 username String @unique
 password String
 }
 </code>

在代码中更新模型后，运行`npx prisma db push`会将更改传播到 PlanetScale，因此架构会在实际数据库中更新。

我使用一个现有的包`@astro-auth`来处理我网站上的所有身份验证。  
为此，我需要向我的应用程序添加 2 个环境变量：（`ASTROAUTH_URL`托管我网站的 URL）和`ASTROAUTH_SECRET`（一个自选密钥）。

因为我将凭据存储在 PlanetScale 中，所以我需要使用 来`CredentialProvider`启用使用用户名和密码登录。  
上还有许多其他提供程序可用`@astro-auth`，如果您有兴趣，请查看软件包。  
设置它所需的代码`@astro-auth`如下所示：

<code>// /pages/api/auth/[...astroauth].ts
 
 import AstroAuth from '@astro-auth/core';
 import { CredentialProvider } from '@astro-auth/providers';
 import { prisma } from '../../../lib/prisma';
 
 export const all = AstroAuth({
 authProviders: [
 CredentialProvider({
 authorize: async properties => {
 const account = await prisma?.account.findFirst({
 where: {
 username: properties.username,
 AND: {
 password: properties.password,
 },
 },
 select: {
 id: true,
 },
 });
 if (account?.id) {
 return properties.username;
 }
 return null;
 },
 }),
 ],
 });
 </code>

创建登录页面非常简单。  
我刚刚创建了一个表单，在提交时调用了该`signIn()`方法`@astro-auth`，然后 BOOM：已登录！  
登录页面的代码：

<code>// /pages/login.astro
 
 <html>
 <head>
 <title>Login</title>
 <script>
 import { signIn } from '@astro-auth/client';
 
 document.addEventListener('DOMContentLoaded', () => {
 document.querySelector('form')?.addEventListener('submit', async e => {
 e.preventDefault();
 const form = e.target;
 if (form) {
 const formData = new FormData(form as HTMLFormElement);
 const data = Object.fromEntries(formData);
 await signIn({
 provider: 'credential',
 login: data,
 });
 window.location.href = '/';
 }
 });
 });
 </script>
 </head>
 <body>
 <form>
 <label for="username">Name</label>
 <input type="text" name="username" />
 
 <label for="password">Password</label>
 <input type="password" name="password" />
 
 <input type="submit" value="Submit" />
 </form>
 </body>
 </html>
 </code>

提交表单后，用户登录并被重定向到主页。使用身份验证保护页面很容易，只需使用来自的函数  
检查登录用户即可。 这是我使用此检查的页面示例：`getUser()``@astro-auth`

<code>// /pages/comment-overview.astro
 
 ---
 import { getUser } from '@astro-auth/core';
 import Layout from '../layouts/Layout.astro';
 import { prisma } from '../lib/prisma';
 import CommentsOverviewWrapper from '../components/CommentOverviewWrapper';
 const user = getUser({ client: Astro });
 if (!user) {
 return Astro.redirect('/', 307);
 }
 const commentsWithPost = await prisma?.comment.findMany({
 include: {
 post: {
 select: {
 url: true,
 },
 },
 },
 });
 ---
 
 <Layout
 description="Overview of comments"
 title="Thomas Ledoux | Comment overview"
 >
 <CommentsOverviewWrapper commentsWithPost={commentsWithPost} client:load />
 </Layout>
 </code>

如果用户未登录，用户将被重定向到带有 [307][]状态代码的主页。  
我还有一个 API 路由来删除我的博客文章上的评论，我想将其隔离，以便只有经过身份验证的用户才能使用此 API。也可以为此  
使用`getUser()`函数 from ，但这次我们将传递而不是对象。 使用此代码的示例：`@astro-auth``request``Astro`

<code>// /pages/api/comments.ts
 
 export const del: APIRoute = async ({ request }) => {
 const user = getUser({ server: request });
 if (user) {
 const body = await request.json();
 const deleteComment = await prisma?.comment.delete({
 where: {
 id: body.id,
 },
 });
 return new Response(
 JSON.stringify({
 message: `Comment with id ${deleteComment?.id} deleted`,
 }),
 { status: 200 }
 );
 }
 return new Response(null, { status: 403 });
 };
 </code>

所以当用户未通过身份验证时，将返回 403 响应。

希望这对您有所帮助！源代码可以一如既往地在[我的 Github][Prisma _ PlanetScale]  
上找到。

[Prisma _ PlanetScale]: https://zhifj.com
[307]: http://telegeram1.com