简单页面密码保护：如何？

Question

我想使用密码保护页面。没有用户注册或电子邮件要求，我只是想确保只有拥有密码的个人才能访问该页面。只有一个密码，我将向授权用户提供该密码。这是一个小型网站，因此不需要额外的安全措施。我知道用户可能会共享密码，但这不是问题。本质上，当有人导航到该页面时，他们会遇到密码输入字段。输入正确的密码后，他们将获得该页面的访问权限。实现这一目标的最简单方法是什么？我正在使用 React、Nextjs 和 Typescript。

我正在寻找一种仅使用一个密码来保护网页的简单方法。我想避免让人们注册或验证他们的电子邮件。我的目标是限制只有知道密码的人才能访问。由于我的网站很基础，不需要很高的安全措施，所以我的主要重点是添加一个密码字段，让输入正确密码的用户进入。

Answer 1

您需要为您的数据库安装 next-auth 和适配器（例如，如果您使用 Prisma，则为 @next-auth/prisma-adapter）。使用yarn安装这些依赖项：

yarn add next-auth @prisma/client
yarn add @next-auth/prisma-adapter

在Next.js项目的pages/api/auth目录中创建一个[...nextauth].js文件。该文件将配置 NextAuth.js 的行为，包括如何连接到数据库以及如何处理登录。

import NextAuth from "next-auth"
import Providers from "next-auth/providers"
import Adapters from "@next-auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"

const prisma = new PrismaClient()

export default NextAuth({
  providers: [
    Providers.Credentials({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: { label: "Password", type: "password" }
      },
      authorize: async (credentials) => {
        const user = await prisma.user.findUnique({
          where: { username: credentials.username }
        })
        // Add password verification logic here, e.g., using bcrypt to compare passwords
        if (user && bcrypt.compareSync(credentials.password, user.password)) {
          return { id: user.id, name: user.name, email: user.email }
        } else {
          return null
        }
      }
    })
  ],
  adapter: Adapters.Prisma.Adapter({ prisma }),
  // Add more configurations here, such as session and page redirects
})