logoNext.js Русский
ДокументацияБлогИзучение
Введение/Создание приложения/Аутентификация

Аутентификация

Для реализации аутентификации в Next.js необходимо понимать три ключевых концепции:

  • Аутентификация подтверждает, что пользователь является тем, за кого себя выдает. Пользователь должен подтвердить свою личность, например, с помощью имени пользователя и пароля.
  • Управление сеансами отслеживает состояние пользователя (например, вход в систему) между несколькими запросами.
  • Авторизация определяет, к каким частям приложения пользователь имеет доступ.

На этой странице показано, как использовать возможности Next.js для реализации распространенных шаблонов аутентификации, авторизации и управления сеансами, чтобы вы могли выбрать оптимальные решения для вашего приложения.

Аутентификация

Аутентификация подтверждает личность пользователя. Это происходит, когда пользователь входит в систему с помощью имени пользователя и пароля или через сервис, например Google. Цель — убедиться, что пользователи действительно те, за кого себя выдают, защищая как данные пользователя, так и приложение от несанкционированного доступа или мошенничества.

Стратегии аутентификации

Современные веб-приложения обычно используют несколько стратегий аутентификации:

  1. OAuth/OpenID Connect (OIDC): Позволяют доступ через третьи стороны без передачи учетных данных пользователя. Идеально подходят для входа через социальные сети и решений Single Sign-On (SSO). OpenID Connect добавляет уровень идентификации.
  2. Вход по учетным данным (Email + Пароль): Стандартный выбор для веб-приложений, где пользователи входят с помощью email и пароля. Простота реализации требует надежных мер защиты от угроз, таких как фишинг.
  3. Беспарольная/Токеновая аутентификация: Использует "волшебные" ссылки по email или одноразовые коды SMS для безопасного доступа без пароля. Популярна благодаря удобству и повышенной безопасности, уменьшая усталость от паролей. Ограничение — зависимость от доступности email или телефона пользователя.
  4. Ключи доступа/WebAuthn: Используют криптографические учетные данные, уникальные для каждого сайта, обеспечивая высокую защиту от фишинга. Надежна, но сложна в реализации.

Выбор стратегии аутентификации должен соответствовать требованиям вашего приложения, особенностям пользовательского интерфейса и целям безопасности.

Реализация аутентификации

В этом разделе мы рассмотрим процесс добавления базовой аутентификации по email и паролю в веб-приложение. Хотя этот метод обеспечивает базовый уровень безопасности, стоит рассмотреть более продвинутые варианты, такие как OAuth или беспарольный вход, для лучшей защиты от распространенных угроз. Процесс аутентификации выглядит следующим образом:

  1. Пользователь отправляет свои учетные данные через форму входа.
  2. Форма отправляет запрос, который обрабатывается API-маршрутом.
  3. При успешной проверке процесс завершается, указывая на успешную аутентификацию пользователя.
  4. Если проверка не удалась, отображается сообщение об ошибке.

Рассмотрим форму входа, где пользователи могут ввести свои учетные данные:

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 {
      // Обработка ошибок
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Войти</button>
    </form>
  )
}
import { FormEvent } from 'react'
import { useRouter } from 'next/router'

export default function LoginPage() {
  const router = useRouter()

  async function handleSubmit(event) {
    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 {
      // Обработка ошибок
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type="email" name="email" placeholder="Email" required />
      <input type="password" name="password" placeholder="Password" required />
      <button type="submit">Войти</button>
    </form>
  )
}

Форма выше содержит два поля ввода для email и пароля пользователя. При отправке она вызывает функцию, которая отправляет POST-запрос к API-маршруту (/api/auth/login).

Затем вы можете вызвать API вашего провайдера аутентификации в API-маршруте для обработки аутентификации:

import { 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: 'Неверные учетные данные.' })
    } else {
      res.status(500).json({ error: 'Что-то пошло не так.' })
    }
  }
}
import { signIn } from '@/auth'

export default async function handler(req, res) {
  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: 'Неверные учетные данные.' })
    } else {
      res.status(500).json({ error: 'Что-то пошло не так.' })
    }
  }
}

В этом коде метод signIn проверяет учетные данные по сохраненным данным пользователя. После обработки учетных данных провайдером аутентификации возможны два исхода:

  • Успешная аутентификация: Вход выполнен успешно. Можно инициировать дальнейшие действия, такие как доступ к защищенным маршрутам и получение информации о пользователе.
  • Неудачная аутентификация: Если учетные данные неверны или произошла ошибка, функция возвращает соответствующее сообщение об ошибке.

Для более удобной настройки аутентификации в проектах Next.js, особенно при использовании нескольких методов входа, рассмотрите комплексное решение для аутентификации.

Авторизация

После аутентификации пользователя необходимо убедиться, что он имеет доступ к определенным маршрутам и может выполнять операции, такие как изменение данных с помощью Server Actions и вызов Route Handlers.

Защита маршрутов с помощью Middleware

Middleware в Next.js помогает контролировать доступ к различным частям вашего сайта. Это важно для защиты таких областей, как панель управления пользователя, при оставлении других страниц, например маркетинговых, публичными. Рекомендуется применять Middleware ко всем маршрутам и указывать исключения для публичного доступа.

Вот как реализовать Middleware для аутентификации в Next.js:

Настройка Middleware:

  • Создайте файл middleware.ts или .js в корневой директории проекта.
  • Включите логику для авторизации доступа пользователя, например проверку токенов аутентификации.

Определение защищенных маршрутов:

  • Не все маршруты требуют авторизации. Используйте опцию matcher в Middleware для указания маршрутов, не требующих проверки авторизации.

Логика Middleware:

  • Напишите логику для проверки аутентификации пользователя. Проверяйте роли или разрешения пользователя для авторизации маршрутов.

Обработка несанкционированного доступа:

  • Перенаправляйте неавторизованных пользователей на страницу входа или ошибки, если необходимо.

Пример файла Middleware:

import type { NextRequest } from 'next/server'

export function middleware(request: NextRequest) {
  const currentUser = request.cookies.get('currentUser')?.value

  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/dashboard', request.url))
  }

  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
    return Response.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}
export function middleware(request) {
  const currentUser = request.cookies.get('currentUser')?.value

  if (currentUser && !request.nextUrl.pathname.startsWith('/dashboard')) {
    return Response.redirect(new URL('/dashboard', request.url))
  }

  if (!currentUser && !request.nextUrl.pathname.startsWith('/login')) {
    return Response.redirect(new URL('/login', request.url))
  }
}

export const config = {
  matcher: ['/((?!api|_next/static|_next/image|.*\\.png$).*)'],
}

Этот пример использует Response.redirect для обработки перенаправлений на раннем этапе конвейера запросов, что делает его эффективным и централизует контроль доступа.

После успешной аутентификации важно управлять навигацией пользователя на основе его ролей. Например, администратор может быть перенаправлен на панель администратора, а обычный пользователь — на другую страницу. Это важно для создания опыта, зависящего от роли, и условной навигации, например, предложения пользователям заполнить профиль, если это необходимо.

При настройке авторизации важно убедиться, что основные проверки безопасности выполняются там, где ваше приложение получает доступ или изменяет данные. Хотя Middleware может быть полезен для начальной проверки, он не должен быть единственной линией защиты ваших данных. Основные проверки безопасности должны выполняться в слое доступа к данным (DAL).

Защита API-маршрутов

API-маршруты (API Routes) в Next.js играют ключевую роль в обработке серверной логики и управлении данными. Крайне важно защищать эти маршруты, чтобы доступ к определенным функциям имели только авторизованные пользователи. Обычно это включает проверку статуса аутентификации пользователя и его прав на основе ролей.

Вот пример защиты API-маршрута:

import { NextApiRequest, NextApiResponse } from 'next'

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const session = await getSession(req)

  // Проверка аутентификации пользователя
  if (!session) {
    res.status(401).json({
      error: 'Пользователь не аутентифицирован',
    })
    return
  }

  // Проверка роли пользователя (должен быть 'admin')
  if (session.user.role !== 'admin') {
    res.status(401).json({
      error: 'Несанкционированный доступ: у пользователя нет прав администратора.',
    })
    return
  }

  // Продолжение выполнения маршрута для авторизованных пользователей
  // ... реализация API-маршрута
}
export default async function handler(req, res) {
  const session = await getSession(req)

  // Проверка аутентификации пользователя
  if (!session) {
    res.status(401).json({
      error: 'Пользователь не аутентифицирован',
    })
    return
  }

  // Проверка роли пользователя (должен быть 'admin')
  if (session.user.role !== 'admin') {
    res.status(401).json({
      error: 'Несанкционированный доступ: у пользователя нет прав администратора.',
    })
    return
  }

  // Продолжение выполнения маршрута для авторизованных пользователей
  // ... реализация API-маршрута
}

Этот пример демонстрирует API-маршрут с двухуровневой проверкой безопасности для аутентификации и авторизации. Сначала проверяется активная сессия, а затем подтверждается, что вошедший пользователь имеет роль 'admin'. Такой подход обеспечивает безопасный доступ, ограниченный только для аутентифицированных и авторизованных пользователей, поддерживая надежную безопасность при обработке запросов.

Лучшие практики

  • Безопасное управление сессиями: Приоритезируйте безопасность данных сессии для предотвращения несанкционированного доступа и утечек данных. Используйте шифрование и безопасные методы хранения.
  • Динамическое управление ролями: Используйте гибкую систему для ролей пользователей, чтобы легко адаптироваться к изменениям в правах и ролях, избегая жестко закодированных ролей.
  • Подход "безопасность прежде всего": Во всех аспектах логики авторизации приоритезируйте безопасность для защиты данных пользователей и поддержания целостности вашего приложения. Это включает тщательное тестирование и учет потенциальных уязвимостей безопасности.

Управление сессиями

Управление сессиями включает отслеживание и управление взаимодействием пользователя с приложением во времени, обеспечивая сохранение его аутентифицированного состояния в разных частях приложения.

Это исключает необходимость повторных входов в систему, повышая как безопасность, так и удобство пользователя. Существует два основных метода управления сессиями: сессии на основе куки и сессии в базе данных.

🎥 Смотрите: Узнайте больше о сессиях на основе куки и аутентификации в Next.js → YouTube (11 минут).

Сессии на основе куки управляют данными пользователя, храня зашифрованную информацию о сессии непосредственно в куки браузера. После входа пользователя эти зашифрованные данные сохраняются в куки. Каждый последующий запрос к серверу включает эту куки, минимизируя необходимость повторных запросов к серверу и повышая эффективность на стороне клиента.

Однако этот метод требует тщательного шифрования для защиты чувствительных данных, так как куки уязвимы для клиентских угроз безопасности. Шифрование данных сессии в куки является ключевым для защиты информации пользователя от несанкционированного доступа. Это гарантирует, что даже если куки будет украдена, данные внутри останутся нечитаемыми.

Кроме того, хотя размер отдельных куки ограничен (обычно около 4 КБ), такие техники, как разделение куки (cookie-chunking), могут преодолеть это ограничение, разделяя большие данные сессии на несколько куки.

Установка куки в проекте Next.js может выглядеть следующим образом:

Установка куки на сервере:

import { serialize } from 'cookie'
import type { NextApiRequest, NextApiResponse } from 'next'

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, // Одна неделя
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Куки успешно установлены!' })
}
import { serialize } from 'cookie'

export default function handler(req, res) {
  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, // Одна неделя
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Куки успешно установлены!' })
}

Сессии в базе данных (Database Sessions)

Управление сессиями в базе данных предполагает хранение данных сессии на сервере, при этом браузер пользователя получает только идентификатор сессии. Этот идентификатор ссылается на данные сессии, хранящиеся на сервере, не содержа самих данных. Этот метод повышает безопасность, так как держит чувствительные данные сессии вдали от клиентской среды, снижая риск их раскрытия при клиентских атаках. Сессии в базе данных также более масштабируемы, позволяя хранить большие объемы данных.

Однако у этого подхода есть свои компромиссы. Он может увеличить нагрузку на производительность из-за необходимости обращений к базе данных при каждом взаимодействии пользователя. Стратегии, такие как кэширование данных сессии, могут помочь смягчить это. Кроме того, зависимость от базы данных означает, что управление сессиями так же надежно, как и производительность и доступность базы данных.

Вот упрощенный пример реализации сессий в базе данных в приложении Next.js:

Создание сессии на сервере:

import db from '../../lib/db'
import { 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: 'Внутренняя ошибка сервера' })
  }
}
import db from '../../lib/db'

export default async function handler(req, res) {
  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: 'Внутренняя ошибка сервера' })
  }
}

Выбор способа управления сессиями в Next.js

Выбор между cookie-сессиями и сессиями, хранящимися в базе данных, в Next.js зависит от потребностей вашего приложения. Cookie-сессии проще в реализации и лучше подходят для небольших приложений с низкой нагрузкой на сервер, но могут быть менее безопасными. Сессии в базе данных, хотя и сложнее в настройке, обеспечивают лучшую безопасность и масштабируемость, что идеально подходит для крупных приложений, работающих с конфиденциальными данными.

С решениями для аутентификации, такими как NextAuth.js, управление сессиями становится более эффективным, используя либо cookies, либо хранение в базе данных. Это автоматизирует процесс разработки, но важно понимать метод управления сессиями, используемый выбранным решением. Убедитесь, что он соответствует требованиям безопасности и производительности вашего приложения.

Независимо от выбора, уделите приоритетное внимание безопасности в вашей стратегии управления сессиями. Для cookie-сессий критически важно использовать защищённые (secure) и HTTP-only cookies для защиты данных сессии. Для сессий в базе данных необходимы регулярное резервное копирование и безопасное хранение данных сессий. Реализация механизмов истечения срока действия и очистки сессий важна в обоих подходах для предотвращения несанкционированного доступа и поддержания производительности и надёжности приложения.

Примеры

Вот решения для аутентификации, совместимые с Next.js. Обратитесь к руководствам по быстрому старту ниже, чтобы узнать, как настроить их в вашем приложении Next.js:

Дополнительные материалы

Чтобы продолжить изучение темы аутентификации и безопасности, ознакомьтесь со следующими ресурсами:

Cypress

Узнайте, как настроить Next.js с Cypress для сквозного (E2E) тестирования и тестирования компонентов.

Развертывание

Узнайте, как развернуть ваше Next.js приложение в продакшене, используя управляемый или самостоятельный хостинг.