"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; const headings = [{ "data": { "id": "предварительные-требования", "hProperties": { "id": "предварительные-требования" } }, "depth": 2, "value": "Предварительные требования" }, { "data": { "id": "настройка-logto", "hProperties": { "id": "настройка-logto" } }, "depth": 2, "value": "Настройка Logto" }, { "data": { "id": "настройка-приложения-nextjs", "hProperties": { "id": "настройка-приложения-nextjs" } }, "depth": 2, "value": "Настройка приложения Next.js" }, { "data": { "id": "определение-библиотеки-logto", "hProperties": { "id": "определение-библиотеки-logto" } }, "depth": 2, "value": "Определение библиотеки Logto" }, { "data": { "id": "реализация-кнопок-входа-и-выхода", "hProperties": { "id": "реализация-кнопок-входа-и-выхода" } }, "depth": 2, "value": "Реализация кнопок входа и выхода" }, { "data": { "id": "вход", "hProperties": { "id": "вход" } }, "depth": 3, "value": "Вход" }, { "data": { "id": "выход", "hProperties": { "id": "выход" } }, "depth": 3, "value": "Выход" }, { "data": { "id": "подготовка-страницы-обратного-вызова", "hProperties": { "id": "подготовка-страницы-обратного-вызова" } }, "depth": 2, "value": "Подготовка страницы обратного вызова" }, { "data": { "id": "отображение-контекста-пользователя-и-защищённой-страницы", "hProperties": { "id": "отображение-контекста-пользователя-и-защищённой-страницы" } }, "depth": 2, "value": "Отображение контекста пользователя и защищённой страницы" }, { "data": { "id": "заключение", "hProperties": { "id": "заключение" } }, "depth": 2, "value": "Заключение" }]; const readingTime = { "minutes": 2, "words": 545, "text": "2 min read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {LogtoCloudButton} = _components; if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); return _jsxs(_Fragment, { children: [_jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://nextjs.org/docs/app/api-reference/functions/server-actions", children: "Server Actions" }), " предлагает обновлённый подход к созданию надёжных веб-приложений без необходимости использования традиционных REST API. Ранее мы обсуждали это в ", _jsx(_components.a, { href: "https://blog.logto.io/nextjs-server-actions-stateless-session/", children: "нашей статье" }), "."] }), "\n", _jsxs(_components.p, { children: ["Сегодня мы рады сообщить об официальной поддержке Server Actions в нашем ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next", children: "Next.js SDK" }), ", несмотря на то, что это экспериментальная функция."] }), "\n", _jsxs(_components.p, { children: ["Для быстрого обзора ознакомьтесь с ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "этим примером" }), " и следуйте за нами, чтобы узнать, как интегрировать Logto с Server Actions в этом руководстве."] }), "\n", _jsxs(_components.h2, { id: "предварительные-требования", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#предварительные-требования", children: _jsx(_components.span, { children: "#" }) }), "Предварительные требования"] }), "\n", _jsx(_components.p, { children: "Чтобы начать, убедитесь, что у вас есть следующее:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "Рабочая инстанция Logto или доступ к облачному аккаунту Logto." }), "\n", _jsx(_components.li, { children: "Проект Next.js с включённой функцией Server Actions." }), "\n"] }), "\n", _jsxs(_components.h2, { id: "настройка-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#настройка-logto", children: _jsx(_components.span, { children: "#" }) }), "Настройка Logto"] }), "\n", _jsxs(_components.p, { children: ["Если вы используете самохостинг Logto, обратитесь к документации Logto \"", _jsx(_components.a, { href: "https://docs.logto.io/docs/tutorials/get-started/", children: "Начать работу" }), "\", чтобы настроить вашу инстанцию Logto."] }), "\n", _jsxs(_components.p, { children: ["Откройте консоль Logto, введя URL ", _jsx(_components.code, { children: "https://cloud.logto.io/" }), ", если вы используете Logto Cloud, или конечную точку, которую вы настроили для самохостинга."] }), "\n", _jsx(LogtoCloudButton, { children: "Откройте Logto Cloud и легко завершите настройку" }), "\n", _jsx(_components.p, { children: "Далее перейдите на вкладку \"Приложения\" и нажмите на \"Создать приложение\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/applications_tab_67594608b6.png", alt: "Вкладка приложений" }) }), "\n", _jsx(_components.p, { children: "В появившемся модальном окне выберите \"Next.js (App Router)\" и укажите имя приложения, например, \"Next.js App\". Затем нажмите \"Создать приложение\"." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/create_application_73ae186100.webp", alt: "Создать приложение" }) }), "\n", _jsx(_components.p, { children: "Вы будете перенаправлены на страницу руководства в Logto. Нажмите \"Завершить и готово\", чтобы перейти на страницу сведений о приложении." }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/application_details_e27b24d4a0.webp", alt: "Сведения о приложении" }) }), "\n", _jsx(_components.p, { children: "В разделе \"URI перенаправлений\" введите следующее значение:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "[your-nextjs-base-url]/callback\n" }) }), "\n", _jsxs(_components.p, { children: ["Например, если вы размещаете Next.js на ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "http://localhost:3000" }) }), ", значение должно быть:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { children: "http://localhost:3000/callback\n" }) }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/save_changes_2314e02212.webp", alt: "Сохранить изменения" }) }), "\n", _jsx(_components.p, { children: "Нажмите на кнопку \"Сохранить изменения\" внизу. После успешного сохранения оставьте эту страницу открытой, так как она будет полезна для конфигурации Next.js." }), "\n", _jsxs(_components.h2, { id: "настройка-приложения-nextjs", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#настройка-приложения-nextjs", children: _jsx(_components.span, { children: "#" }) }), "Настройка приложения Next.js"] }), "\n", _jsxs(_components.p, { children: ["Убедитесь, что у вас есть проект с последней версией Next.js. Если у вас ещё нет, вы можете следовать ", _jsx(_components.a, { href: "https://nextjs.org/docs/getting-started/installation", children: "официальному руководству по установке" }), " для создания."] }), "\n", _jsxs(_components.p, { children: ["На момент написания этого руководства функция является экспериментальной и требует активации в ", _jsx(_components.code, { children: "next.config.js" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "module.exports = {\n experimental: {\n serverActions: true,\n },\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "определение-библиотеки-logto", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#определение-библиотеки-logto", children: _jsx(_components.span, { children: "#" }) }), "Определение библиотеки Logto"] }), "\n", _jsxs(_components.p, { children: ["Начнем с установки модуля ", _jsx(_components.code, { children: "@logto/next" }), " с помощью ", _jsx(_components.code, { children: "npm" }), " следующим образом:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "npm i @logto/next\n" }) }), "\n", _jsxs(_components.p, { children: ["Вы также можете использовать ", _jsx(_components.code, { children: "yarn" }), " или ", _jsx(_components.code, { children: "pnpm" }), "."] }), "\n", _jsxs(_components.p, { children: ["Затем создадим некоторые функции как \"server actions\", создайте новый файл ", _jsx(_components.code, { children: "libraries/logto.ts:" })] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use server';\n\nimport LogtoClient from '@logto/next/server-actions';\nimport { cookies } from 'next/headers';\n\nconst config = {\n appId: process.env.APP_ID ?? '', // Вы можете найти это на странице сведений.\n appSecret: process.env.APP_SECRET ?? '', // Вы можете найти это на странице сведений.\n endpoint: process.env.ENDPOINT ?? 'http://localhost:3001', // Вы можете найти это на странице сведений.\n baseUrl: process.env.BASE_URL ?? 'http://localhost:3000',\n cookieSecret: process.env.COOKIE_SECRET ?? 'сложный_пароль_минимум_32_символа',\n cookieSecure: process.env.NODE_ENV === 'production',\n};\n\nconst logtoClient = new LogtoClient(config);\n\nconst cookieName = `logto:${config.appId}`;\n\nconst setCookies = (value?: string) => {\n if (value === undefined) {\n return;\n }\n\n cookies().set(cookieName, value, {\n maxAge: 14 * 3600 * 24,\n secure: config.cookieSecure,\n });\n};\n\nconst getCookie = () => {\n return cookies().get(cookieName)?.value ?? '';\n};\n\nexport const signIn = async () => {\n const { url, newCookie } = await logtoClient.handleSignIn(\n getCookie(),\n `${config.baseUrl}/callback`\n );\n\n setCookies(newCookie);\n\n return url;\n};\n\nexport const handleSignIn = async (searchParams: Record) => {\n // Конвертируем объект searchParams в строку запроса.\n const search = new URLSearchParams(searchParams).toString();\n\n const newCookie = await logtoClient.handleSignInCallback(\n getCookie(),\n `${config.baseUrl}/callback?${search}`\n );\n\n setCookies(newCookie);\n};\n\nexport const signOut = async () => {\n const url = await logtoClient.handleSignOut(getCookie(), `${config.baseUrl}/callback`);\n\n setCookies('');\n\n return url;\n};\n\nexport const getLogtoContext = async () => {\n return await logtoClient.getLogtoContext(getCookie());\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["В этом файле мы экспортируем четыре функции для аутентификации. Обратите внимание на первую строку, ", _jsx(_components.code, { children: "\"use server\"" }), ", которая указывает, что код в файле может выполняться только на стороне сервера. Мы используем ", _jsx(_components.code, { children: "\"next/headers\"" }), ", чтобы управлять сессиями на основе файлов cookie."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Ссылка на ", _jsx(_components.code, { children: "\"use server\"" }), ": ", _jsx(_components.a, { href: "https://react.dev/reference/react/use-server", children: "https://react.dev/reference/react/use-server" })] }), "\n", _jsxs(_components.li, { children: ["Ссылка на использование ", _jsx(_components.code, { children: "\"next/headers\"" }), " для управления файлами cookie: ", _jsx(_components.a, { href: "https://nextjs.org/docs/api-reference/next/headers", children: "https://nextjs.org/docs/api-reference/next/headers" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "Вышеописанные функции, которые мы экспортировали, могут вызываться напрямую из компонента клиента React. Это главное преимущество использования Server Actions. Давайте перейдём к следующей главе, чтобы увидеть, как использовать эти функции." }), "\n", _jsxs(_components.h2, { id: "реализация-кнопок-входа-и-выхода", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#реализация-кнопок-входа-и-выхода", children: _jsx(_components.span, { children: "#" }) }), "Реализация кнопок входа и выхода"] }), "\n", _jsx(_components.p, { children: "С созданием функций аутентификации давайте создадим страницу. Мы создадим два клиентских компонента для инициирования действий входа и выхода." }), "\n", _jsxs(_components.h3, { id: "вход", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#вход", children: _jsx(_components.span, { children: "#" }) }), "Вход"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "/app/sign-in.tsx" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { signIn } from '../libraries/logto';\n\nconst SignIn = () => {\n const router = useRouter();\n\n const handleClick = async () => {\n const redirectUrl = await signIn();\n\n router.push(redirectUrl);\n };\n\n return ;\n};\n\nexport default SignIn;\n" }) }), "\n", _jsxs(_components.p, { children: ["Здесь мы импортируем функцию ", _jsx(_components.code, { children: "signIn" }), ", которая была определена только что в предыдущей главе. Хотя код выполняется на стороне сервера, эта функция всё же может вызываться напрямую компонентом ", _jsx(_components.code, { children: ";\n};\n\nexport default SignOut;\n" }) }), "\n", _jsx(_components.p, { children: "Процесс выхода аналогичен процессу входа." }), "\n", _jsxs(_components.h2, { id: "подготовка-страницы-обратного-вызова", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#подготовка-страницы-обратного-вызова", children: _jsx(_components.span, { children: "#" }) }), "Подготовка страницы обратного вызова"] }), "\n", _jsx(_components.p, { children: "Как стандартный поставщик идентификации OIDC, Logto перенаправляет пользователей на URL обратного вызова после аутентификации. Поэтому мы должны подготовить страницу обратного вызова для обработки результата входа." }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "/app/callback/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "'use client';\n\nimport { useRouter } from 'next/navigation';\nimport { handleSignIn } from '../../libraries/logto';\nimport { useEffect } from 'react';\n\ntype Props = {\n searchParams: Record;\n};\n\nexport default function Callback({ searchParams }: Props) {\n const router = useRouter();\n\n useEffect(() => {\n handleSignIn(searchParams).then(() => {\n router.push('/');\n });\n }, [router, searchParams]);\n\n return

Вход...

;\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Здесь мы используем клиентский компонент с ", _jsx(_components.code, { children: "useEffect" }), ", что упрощает отображение страницы \"загрузки\" для улучшения пользовательского опыта."] }), "\n", _jsxs(_components.h2, { id: "отображение-контекста-пользователя-и-защищённой-страницы", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#отображение-контекста-пользователя-и-защищённой-страницы", children: _jsx(_components.span, { children: "#" }) }), "Отображение контекста пользователя и защищённой страницы"] }), "\n", _jsxs(_components.p, { children: ["Теперь давайте создадим минимальную домашнюю страницу, чтобы продемонстрировать полезность Logto SDK. При необходимости защитите любой ресурс от неизвестных пользователей, проверяя значение ", _jsx(_components.code, { children: "isAuthenticated" }), " и перенаправляя на страницу входа или показывая сообщения об ошибке."] }), "\n", _jsx(_components.p, { children: _jsx(_components.code, { children: "app/page.tsx" }) }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { getLogtoContext } from '../libraries/logto';\nimport styles from './page.module.css';\nimport SignIn from './sign-in';\nimport SignOut from './sign-out';\n\nexport default async function Home() {\n const { isAuthenticated, claims } = await getLogtoContext();\n return (\n

Здравствуйте, Logto.

{isAuthenticated ? : }

\n {claims && (\n

Претензии:

\n \n \n \n \n \n \n \n \n {Object.entries(claims).map(([key, value]) => (\n \n \n \n \n ))}\n \n

Имя	Значение
{key}	{value}

\n )}\n

\n );\n}\n" }) }), "\n", _jsxs(_components.p, { children: ["Как вы можете заметить, это ", _jsx(_components.a, { href: "https://nextjs.org/docs/app/building-your-application/rendering/server-components", children: "серверный компонент" }), ", который устраняет необходимость в ", _jsx(_components.code, { children: "useEffect" }), " и управлении сложными изменениями состояния."] }), "\n", _jsxs(_components.h2, { id: "заключение", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#заключение", children: _jsx(_components.span, { children: "#" }) }), "Заключение"] }), "\n", _jsx(_components.p, { children: "Server actions предлагают упрощённый и прямолинейный способ внедрения аутентификации по сравнению с традиционными приложениями Next.js, которые полагаются на REST API." }), "\n", _jsxs(_components.p, { children: ["Весь код можно найти в этом репозитории: ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample", children: "https://github.com/logto-io/js/tree/master/packages/next-server-actions-sample" })] }), "\n", _jsx(_components.p, { children: "Почему бы не попробовать Logto Cloud и не испытать простоту в действии?" }), "\n", _jsx(LogtoCloudButton, { children: "Попробуйте Logto сегодня" })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { headings, readingTime, frontmatter, default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }