Авторизация

Для реализации авторизации в Next.js ознакомьтесь с тремя основополагающими понятиями:

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

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

Авторизация

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

Стратегии авторизации

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

OAuth/OpenID Connect (OIDC): Разрешает доступ сторонних сервисов без раскрытия учётных данных пользователя. Идеально подходит для входа через социальные сети и решений Single Sign-On (SSO). Они добавляют уровень идентификации с OpenID Connect.
Авторизация на основе учётных данных (Почта + Пароль): Стандартный выбор для веб-приложений, где пользователи входят в систему с помощью почты и пароля. Знакомо и легко реализуется, требует надёжных мер безопасности против угроз, таких как фишинг.
Беспарольная/Токен-ориентированная авторизация: Использует магические ссылки по почте или одноразовые коды по SMS для безопасного доступа без пароля. Популярно за удобство и повышенную безопасность, этот метод помогает уменьшить усталость от паролей. Его ограничение заключается в зависимости от доступности почты или телефона пользователя.
Passkeys/WebAuthn: Использует криптографические учётные данные, уникальные для каждого сайта, предлагая высокую безопасность против фишинга. Безопасно, но ново, эта стратегия может быть сложной в реализации.

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

Реализация авторизации

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

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

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

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>
  )
}

В форме выше есть два поля ввода для захвата почты и пароля пользователя. При отправке это запускает функцию, которая отправляет 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: 'Invalid credentials.' })
    } else {
      res.status(500).json({ error: 'Something went wrong.' })
    }
  }
}

В этом коде метод 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$).*)'],
}

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

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

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

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

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

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

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 с двухступенчатой проверкой безопасности для авторизации и аутентификации. Сначала проверяется активная сессия, а затем — является ли вошедший в систему пользователь администратором. Этот подход обеспечивает безопасный доступ, ограниченный авторизованными пользователями, сохраняя надёжную безопасность для обработки запросов.

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

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

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

🎥 Посмотреть: Узнайте больше о сессиях на основе cookie и авторизации с помощью Next.js → YouTube (11 минут).

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

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

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

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

Установка cookie на сервере:

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, // One week
    path: '/',
  })
  res.setHeader('Set-Cookie', cookie)
  res.status(200).json({ message: 'Successfully set cookie!' })
}

Сессии в базе данных

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

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

Вот упрощенный пример реализации сеансов базы данных в приложении 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: 'Internal Server Error' })
  }
}

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

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

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

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

Примеры

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

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

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

© 2024 Vercel, Inc.
Licensed under the MIT License.
https://nextjs.org/docs/pages/building-your-application/authentication

Авторизация

Авторизация

Стратегии авторизации

Реализация авторизации

Авторизация

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

Настройка Middleware

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

Логика Middleware

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

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

Рекомендации

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

Сессии на основе cookie

Сессии в базе данных

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

Примеры

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