"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-sdk", "hProperties": { "id": "интеграция-с-logto-sdk" } }, "depth": 2, "value": "Интеграция с Logto SDK" }, { "data": { "id": "установка", "hProperties": { "id": "установка" } }, "depth": 3, "value": "Установка" }, { "data": { "id": "инициализация-logto-провайдера", "hProperties": { "id": "инициализация-logto-провайдера" } }, "depth": 3, "value": "Инициализация Logto провайдера" }, { "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": "Дополнительное чтение" }]; const readingTime = { "minutes": 1, "words": 189, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", ul: "ul", ..._provideComponents(), ...props.components }, {Checkpoint, GetStarted, LogtoCloudButton, Note} = _components; if (!Checkpoint) _missingMdxReference("Checkpoint", true); if (!GetStarted) _missingMdxReference("GetStarted", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsxs(_components.h2, { id: "начните", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#начните", children: _jsx(_components.span, { children: "#" }) }), "Начните"] }), "\n", _jsx(GetStarted, { framework: { name: 'Expo (React Native)', url: 'https://expo.dev/', description: 'является экосистемой инструментов, которые помогают создавать универсальные нативные приложения на React, работающие на Android, iOS и в вебе.' }, programmingLanguage: "TypeScript", applicationType: "Native" }), "\n", _jsxs(_components.h2, { id: "интеграция-с-logto-sdk", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#интеграция-с-logto-sdk", children: _jsx(_components.span, { children: "#" }) }), "Интеграция с Logto SDK"] }), "\n", _jsxs(_components.h3, { id: "установка", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#установка", children: _jsx(_components.span, { children: "#" }) }), "Установка"] }), "\n", _jsx(_components.p, { children: "Установите Logto SDK и его пира зависимость через ваш любимый менеджер пакетов:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# или pnpm, yarn, и т. д.\nnpm i @logto/rn\nnpm i expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage\n" }) }), "\n", _jsxs(_components.p, { children: ["Пакет ", _jsx(_components.code, { children: "@logto/rn" }), " является SDK для Logto. Остальные пакеты являются его пировыми зависимостями. Они не могут быть перечислены как прямые зависимости, потому что Expo CLI требует, чтобы все зависимости для нативных модулей были установлены непосредственно в корневом проекте ", _jsx(_components.code, { children: "package.json" }), "."] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Если вы устанавливаете это в ", _jsx(_components.a, { href: "https://docs.expo.dev/bare/overview", children: "голом приложении React Native" }), ", вам\nследует также выполнить ", _jsx(_components.a, { href: "https://docs.expo.dev/bare/installing-expo-modules/", children: "дополнительные\nинструкции по установке" }), "."] }) }), "\n", _jsxs(_components.h3, { 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: "LogtoProvider" }), ", чтобы обеспечить контекст Logto:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { LogtoProvider, LogtoConfig } from '@logto/rn';\n\nconst config: LogtoConfig = {\n endpoint: '',\n appId: '',\n};\n\nconst App = () => (\n \n \n \n);\n" }) }), "\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: ["Перейдите на страницу деталей приложений в Logto Console. Добавьте URI перенаправления для нативных приложений (например, ", _jsx(_components.code, { children: "io.logto://callback" }), "), затем нажмите «Сохранить»."] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Для iOS схема URI перенаправления по сути не важна, так как класс ", _jsx(_components.code, { children: "ASWebAuthenticationSession" }), " будет отслеживать URI перенаправления, независимо от того, зарегистрирован он или нет."] }), "\n"] }), "\n", _jsxs(_components.li, { children: ["\n", _jsxs(_components.p, { children: ["Для Android схема URI перенаправления должна быть указана в файле ", _jsx(_components.code, { children: "app.json" }), " Expo, например:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"expo\": {\n \"scheme\": \"io.logto\"\n }\n}\n" }) }), "\n"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Теперь вернитесь в ваше приложение, вы можете использовать хук ", _jsx(_components.code, { children: "useLogto" }), " для входа и выхода:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useLogto } from '@logto/rn';\nimport { Button } from 'react-native';\n\nconst Content = () => {\n const { signIn, signOut, isAuthenticated } = useLogto();\n\n return (\n

\n {isAuthenticated ? (\n

\n );\n};\n" }) }), "\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: "getIdTokenClaims()" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-tsx", children: "import { useLogto } from '@logto/rn';\nimport { Button, Text } from 'react-native';\n\nconst Content = () => {\n const { getIdTokenClaims, isAuthenticated } = useLogto();\n const [user, setUser] = useState(null);\n\n useEffect(() => {\n if (isAuthenticated) {\n getIdTokenClaims().then((claims) => {\n setUser(claims);\n });\n }\n }, [isAuthenticated]);\n\n return (\n

\n {isAuthenticated ? (\n <>\n {user?.name}\n {user?.email}\n

\n );\n};\n" }) }), "\n", _jsxs(_components.h2, { id: "контрольная-точка-запуск-приложения", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#контрольная-точка-запуск-приложения", children: _jsx(_components.span, { children: "#" }) }), "Контрольная точка: Запуск приложения"] }), "\n", _jsx(Checkpoint, {}), "\n", _jsxs(_components.h2, { id: "дополнительное-чтение", children: [_jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#дополнительное-чтение", children: _jsx(_components.span, { children: "#" }) }), "Дополнительное чтение"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/customize-sie/", children: "Настройка входа" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/configure-connectors/", children: "Настройка соединителей" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.a, { href: "https://docs.logto.io/docs/recipes/protect-your-api/", children: "Защита вашего API" }) }), "\n"] }), "\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."); }