Интеграция аутентификации Logto в ваше приложение Next.js с использованием Server Actions.
Server Actions предлагает обновлённый подход к созданию надёжных веб-приложений без необходимости использования традиционных REST API. Ранее мы обсуждали это в нашей статье.
Сегодня мы рады сообщить об официальной поддержке Server Actions в нашем Next.js SDK, несмотря на то, что это экспериментальная функция.
Для быстрого обзора ознакомьтесь с этим примером и следуйте за нами, чтобы узнать, как интегрировать Logto с Server Actions в этом руководстве.
Чтобы начать, убедитесь, что у вас есть следующее:
Если вы используете самохостинг Logto, обратитесь к документации Logto "Начать работу", чтобы настроить вашу инстанцию Logto.
Откройте консоль Logto, введя URL https://cloud.logto.io/, если вы используете Logto Cloud, или конечную точку, которую вы настроили для самохостинга.
Далее перейдите на вкладку "Приложения" и нажмите на "Создать приложение".
В появившемся модальном окне выберите "Next.js (App Router)" и укажите имя приложения, например, "Next.js App". Затем нажмите "Создать приложение".
Вы будете перенаправлены на страницу руководства в Logto. Нажмите "Завершить и готово", чтобы перейти на страницу сведений о приложении.
В разделе "URI перенаправлений" введите следующее значение:
Например, если вы размещаете Next.js на http://localhost:3000, значение должно быть:
Нажмите на кнопку "Сохранить изменения" внизу. После успешного сохранения оставьте эту страницу открытой, так как она будет полезна для конфигурации Next.js.
Убедитесь, что у вас есть проект с последней версией Next.js. Если у вас ещё нет, вы можете следовать официальному руководству по установке для создания.
На момент написания этого руководства функция является экспериментальной и требует активации в next.config.js
Начнем с установки модуля @logto/next с помощью npm следующим образом:
Вы также можете использовать yarn или pnpm.
Затем создадим некоторые функции как "server actions", создайте новый файл libraries/logto.ts:
В этом файле мы экспортируем четыре функции для аутентификации. Обратите внимание на первую строку, "use server", которая указывает, что код в файле может выполняться только на стороне сервера. Мы используем "next/headers", чтобы управлять сессиями на основе файлов cookie.
"use server": https://react.dev/reference/react/use-server"next/headers" для управления файлами cookie: https://nextjs.org/docs/api-reference/next/headersВышеописанные функции, которые мы экспортировали, могут вызываться напрямую из компонента клиента React. Это главное преимущество использования Server Actions. Давайте перейдём к следующей главе, чтобы увидеть, как использовать эти функции.
С созданием функций аутентификации давайте создадим страницу. Мы создадим два клиентских компонента для инициирования действий входа и выхода.
/app/sign-in.tsx:
Здесь мы импортируем функцию signIn, которая была определена только что в предыдущей главе. Хотя код выполняется на стороне сервера, эта функция всё же может вызываться напрямую компонентом <button>, когда пользователь нажимает на кнопку входа. Таким образом, мы устраняем необходимость писать какой-либо REST API для обработки процесса входа. На самом деле, Next.js обрабатывает детали диспатчера запроса "POST" за нас. Получив redirectUrl, мы можем вызвать router.push, чтобы перенаправить на страницу входа Logto.
/app/sign-out.tsx:
Процесс выхода аналогичен процессу входа.
Как стандартный поставщик идентификации OIDC, Logto перенаправляет пользователей на URL обратного вызова после аутентификации. Поэтому мы должны подготовить страницу обратного вызова для обработки результата входа.
/app/callback/page.tsx
Здесь мы используем клиентский компонент с useEffect, что упрощает отображение страницы "загрузки" для улучшения пользовательского опыта.
Теперь давайте создадим минимальную домашнюю страницу, чтобы продемонстрировать полезность Logto SDK. При необходимости защитите любой ресурс от неизвестных пользователей, проверяя значение isAuthenticated и перенаправляя на страницу входа или показывая сообщения об ошибке.
app/page.tsx
Как вы можете заметить, это серверный компонент, который устраняет необходимость в useEffect и управлении сложными изменениями состояния.
Server actions предлагают упрощённый и прямолинейный способ внедрения аутентификации по сравнению с традиционными приложениями Next.js, которые полагаются на REST API.
Весь код можно найти в этом репозитории: https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample
Почему бы не попробовать Logto Cloud и не испытать простоту в действии?