~ 4 мин
Узнайте о лучших стратегиях аутентификации в Next.js и примерах их реализации. Мы рассмотрим различные подходы к аутентификации, включая JWT, сессии, OAuth и многое другое, а также подробно разберем, как реализовать их в ваших проектах. Следуйте лучшим практикам и обеспечьте безопасность своего приложения
Вадим Пашаев
4/23/2023
Перевод документации
Процесс аутентификации - это процесс проверки, кем является пользователь, а процесс авторизации контролирует, к чему пользователь может получить доступ. Next.js поддерживает несколько шаблонов аутентификации, каждый из которых предназначен для совершенно разных вариантов использования. На этой странице будет рассмотрен каждый случай, чтобы вы могли выбрать для своего проекта подходящий исходя из своих ограничений.
Для справки
Первый шаг к тому, чтобы определить, какой шаблон аутентификации вам нужен, — это понять, какую стратегию выборки данных вы хотите использовать. Затем мы можем определить, какие поставщики аутентификации поддерживают эту стратегию. Существует два основных шаблона:
Next.js автоматически определяет, что страница является статической, если нет требований к блокирующим данным. Об этом говорит отсутствие на странице функций getServerSideProps и getInitialProps. Вместо этого ваша страница может отображать состояние загрузки данных на пришедшей с сервера странице, а затем получать данные пользователя на стороне клиента.
Одним из преимуществ этого паттерна является то, что он позволяет обслуживать страницы из глобальной CDN и предварительно загружать их с помощью next/link. На практике это приводит к более быстрому TTI (Time to Interactive).
Давайте рассмотрим пример страницы профиля. Он изначальное отобразит загрузочный скелет и как только запрос пользователя будет завершен, он покажет имя пользователя:
// pages/profile.js import useUser from '../lib/useUser' import Layout from '../components/Layout' const Profile = () => { // Получение пользовательских данных на клиенте const { user } = useUser({ redirectTo: '/login' }) // То, что будет рендериться на сервере if (!user || user.isLoggedIn === false) { return <Layout>Загрузка...</Layout> } // После того, как данные пользователя будут загружены, отобразится содержимое страницы ниже return ( <Layout> <h1>Ваш профиль</h1> <pre>{JSON.stringify(user, null, 2)}</pre> </Layout> ) } export default Profile
Посмотреть этот пример в действии вы можете на странице.
Если вы экспортируете асинхронную функцию getServerSideProps со страницы, Next.js будет предварительно рендерить эту страницу при каждом запросе, используя данные, возвращаемые getServerSideProps.
export async function getServerSideProps(context) { return { props: {}, // Будут переданы в компонент страницы через props } }
Давайте преобразуем пример загрузки данных пользователя, чтобы использовать рендеринг на стороне сервера. Если есть сеанс, верните пользователя в качестве опоры для компонента «Профиль» на странице. Обратите внимание, что в этом примере нет скелета загрузки.
// pages/profile.js import withSession from '../lib/session' import Layout from '../components/Layout' export const getServerSideProps = withSession(async function ({ req, res }) { const { user } = req.session if (!user) { return { redirect: { destination: '/login', permanent: false, }, } } return { props: { user }, } }) const Profile = ({ user }) => { // Показываем данные пользователя. Обработка состояния загрузки не требуется! return ( <Layout> <h1>Ваш профиль</h1> <pre>{JSON.stringify(user, null, 2)}</pre> </Layout> ) } export default Profile
Преимуществом этого шаблона является предотвращение появления неаутентифицированного контента перед тем как поступят пользовательские данные. Важно отметить, что получение пользовательских данных в getServerSideProps блокирует рендеринг до тех пор, пока не будет разрешен запрос к вашему поставщику аутентификации. Чтобы предотвратить создание узкого места и увеличение вашего TTFB (время до первого байта), вы должны обеспечить быстрый запрос аутентификации. В противном случае рассмотрите статическую генерацию.
Теперь, когда мы обсудили паттерны аутентификации, давайте рассмотрим конкретных поставщиков и рассмотрим, как они используются с Next.js.
Если у вас есть существующая база данных с пользовательскими данными, вы, вероятно, захотите использовать решение с открытым исходным кодом, которое не зависит от поставщика.
Обе эти библиотеки поддерживают любой шаблон аутентификации. Если вы заинтересованы в Passport, у нас также есть примеры для него с использованием безопасных и зашифрованных файлов cookie:
Чтобы увидеть примеры с другими поставщиками аутентификации, проверьте папку примеров.
Оценка проекта
Хотите быструю оценку Вашего проекта?
Есть интересная идея?
И вы очень хотите ее реализовать, пишите нам и получите подробное коммерческое предложение и быструю реализацию