身份验证

了解身份验证对于保护应用程序数据至关重要。本页将指导您了解如何使用 React 和 Next.js 功能来实现身份验证。

在开始之前，将流程分解成三个概念会有所帮助。

身份验证：验证用户是否为其声称的身份。它要求用户使用他们拥有的东西（例如用户名和密码）来证明其身份。
会话管理：跟踪用户在请求之间的身份验证状态。
授权：确定用户可以访问哪些路由和数据。

此图显示了使用 React 和 Next.js 功能的身份验证流程。

Diagram showing the authentication flow with React and Next.js features

本页上的示例出于教育目的介绍了基本的用户名和密码身份验证。虽然您可以实现自定义身份验证解决方案，但为了提高安全性并简化操作，我们建议使用身份验证库。它们提供了身份验证、会话管理和授权的内置解决方案，以及社交登录、多因素身份验证和基于角色的访问控制等其他功能。您可以在身份验证库部分找到列表。

身份验证

以下是实现注册和/或登录表单的步骤。

用户通过表单提交其凭据。
表单发送一个由 API 路由处理的请求。
成功验证后，流程完成，表明用户已成功通过身份验证。
如果验证不成功，则显示错误消息。

考虑一个用户可以输入其凭据的登录表单。

pages/login.tsx

import { FormEvent } from 'react'
import { useRouter } from 'next/router'
 
export default function LoginPage() {
  const router = useRouter()
 
  async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
 
    const formData = new FormData(event.currentTarget)
    const email = formData.get('email')
    const password = formData.get('password')
 
    const response = await fetch('/api/auth/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password }),
    })
 
    if (response.ok) {
      router.push('/profile')
    } else {
      // Handle errors
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Login</button>
    </form>
  )
}

上面的表单有两个输入字段，用于捕获用户的电子邮件和密码。提交时，它会触发一个函数，该函数会向 API 路由 (/api/auth/login) 发送 POST 请求。

然后，您可以在 API 路由中调用身份验证提供程序的 API 来处理身份验证。

pages/api/auth/login.ts

import type { NextApiRequest, NextApiResponse } from 'next'
import { signIn } from '@/auth'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const { email, password } = req.body
    await signIn('credentials', { email, password })
 
    res.status(200).json({ success: true })
  } catch (error) {
    if (error.type === 'CredentialsSignin') {
      res.status(401).json({ error: 'Invalid credentials.' })
    } else {
      res.status(500).json({ error: 'Something went wrong.' })
    }
  }
}

会话管理

会话管理确保用户的身份验证状态在请求之间保持不变。它涉及创建、存储、刷新和删除会话或令牌。

会话有两种类型。

无状态：会话数据（或令牌）存储在浏览器的 Cookie 中。Cookie 会随每个请求一起发送，允许在服务器上验证会话。此方法更简单，但如果实施不当，安全性可能会降低。
数据库：会话数据存储在数据库中，用户的浏览器仅接收加密的会话 ID。此方法更安全，但可能很复杂并使用更多服务器资源。

注意：虽然您可以使用任一方法或两者兼用，但我们建议使用会话管理库，例如iron-session或Jose。

无状态会话

设置和删除 Cookie

您可以使用 API 路由在服务器上将会话设置为 Cookie

pages/api/login.ts

import { serialize } from 'cookie'
import type { NextApiRequest, NextApiResponse } from 'next'
import { encrypt } from '@/app/lib/session'
 
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  const sessionData = req.body
  const encryptedSessionData = encrypt(sessionData)
 
  const cookie = serialize('session', encryptedSessionData, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production',
    maxAge: 60 * 60 * 24 * 7, // One week
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Successfully set cookie!' })
}

数据库会话

要创建和管理数据库会话，您需要按照以下步骤操作

在您的数据库中创建一个表以存储会话和数据（或检查您的身份验证库是否处理此操作）。
实现插入、更新和删除会话的功能
在将会话 ID 存储到用户的浏览器之前对其进行加密，并确保数据库和 Cookie 保持同步（这是可选的，但建议在中间件中进行乐观身份验证检查）。

在服务器上创建会话:

pages/api/create-session.ts

import db from '../../lib/db'
import type { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  try {
    const user = req.body
    const sessionId = generateSessionId()
    await db.insertSession({
      sessionId,
      userId: user.id,
      createdAt: new Date(),
    })
 
    res.status(200).json({ sessionId })
  } catch (error) {
    res.status(500).json({ error: 'Internal Server Error' })
  }
}

授权

一旦用户通过身份验证并创建会话，您就可以实现授权来控制用户可以在您的应用程序中访问和执行的操作。

授权检查主要有两种类型

乐观：使用存储在 Cookie 中的会话数据检查用户是否有权访问路由或执行操作。这些检查对于快速操作很有用，例如根据权限或角色显示/隐藏 UI 元素或重定向用户。
安全：使用存储在数据库中的会话数据检查用户是否有权访问路由或执行操作。这些检查更安全，用于需要访问敏感数据或操作的操作。

对于这两种情况，我们建议

创建数据访问层来集中您的授权逻辑
使用数据传输对象 (DTO) 仅返回必要的数据
可以选择使用中间件执行乐观检查。

使用中间件进行乐观检查（可选）

在某些情况下，您可能希望使用中间件并根据权限重定向用户

执行乐观检查。由于中间件在每个路由上运行，因此它是集中重定向逻辑和预过滤未授权用户的良好方法。
保护用户之间共享数据的静态路由（例如付费墙后面的内容）。

但是，由于中间件在每个路由上运行，包括预取路由，因此务必仅从 Cookie 中读取会话（乐观检查），并避免数据库检查以防止性能问题。

例如

middleware.ts

import { NextRequest, NextResponse } from 'next/server'
import { decrypt } from '@/app/lib/session'
import { cookies } from 'next/headers'
 
// 1. Specify protected and public routes
const protectedRoutes = ['/dashboard']
const publicRoutes = ['/login', '/signup', '/']
 
export default async function middleware(req: NextRequest) {
  // 2. Check if the current route is protected or public
  const path = req.nextUrl.pathname
  const isProtectedRoute = protectedRoutes.includes(path)
  const isPublicRoute = publicRoutes.includes(path)
 
  // 3. Decrypt the session from the cookie
  const cookie = (await cookies()).get('session')?.value
  const session = await decrypt(cookie)
 
  // 4. Redirect to /login if the user is not authenticated
  if (isProtectedRoute && !session?.userId) {
    return NextResponse.redirect(new URL('/login', req.nextUrl))
  }
 
  // 5. Redirect to /dashboard if the user is authenticated
  if (
    isPublicRoute &&
    session?.userId &&
    !req.nextUrl.pathname.startsWith('/dashboard')
  ) {
    return NextResponse.redirect(new URL('/dashboard', req.nextUrl))
  }
 
  return NextResponse.next()
}
 
// Routes Middleware should not run on
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

虽然中间件可用于初始检查，但它不应成为保护数据的唯一防线。大多数安全检查应尽可能靠近您的数据源执行，有关更多信息，请参阅数据访问层。

提示:

在中间件中，您还可以使用 req.cookies.get('session').value 读取 Cookie。

中间件使用边缘运行时，请检查您的身份验证库和会话管理库是否兼容。

您可以使用中间件中的 matcher 属性来指定中间件应在哪些路由上运行。尽管对于身份验证，建议中间件在所有路由上运行。

创建数据访问层 (DAL)

保护 API 路由

Next.js 中的 API 路由对于处理服务器端逻辑和数据管理至关重要。保护这些路由以确保只有授权用户才能访问特定功能至关重要。这通常涉及验证用户的身份验证状态及其基于角色的权限。

这是一个保护 API 路由的示例

pages/api/route.ts

import { NextApiRequest, NextApiResponse } from 'next'
 
export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession(req)
 
  // Check if the user is authenticated
  if (!session) {
    res.status(401).json({
      error: 'User is not authenticated',
    })
    return
  }
 
  // Check if the user has the 'admin' role
  if (session.user.role !== 'admin') {
    res.status(401).json({
      error: 'Unauthorized access: User does not have admin privileges.',
    })
    return
  }
 
  // Proceed with the route for authorized users
  // ... implementation of the API Route
}

此示例演示了一个具有两层安全检查（用于身份验证和授权）的 API 路由。它首先检查是否有活动的会话，然后验证登录用户是否为“管理员”。这种方法确保了安全访问，仅限于经过身份验证和授权的用户，从而为请求处理维护强大的安全性。