"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": "настройка-вашего-chrome-расширения", "hProperties": { "id": "настройка-вашего-chrome-расширения" } }, "depth": 2, "value": "Настройка вашего Chrome расширения" }, { "data": { "id": "установка-logto-sdk", "hProperties": { "id": "установка-logto-sdk" } }, "depth": 3, "value": "Установка Logto SDK" }, { "data": { "id": "обновление-manifestjson", "hProperties": { "id": "обновление-manifestjson" } }, "depth": 3, "value": "Обновление manifest.json" }, { "data": { "id": "настройка-фонового-скрипта-сервисного-работника", "hProperties": { "id": "настройка-фонового-скрипта-сервисного-работника" } }, "depth": 3, "value": "Настройка фонового скрипта (сервисного работника)" }, { "data": { "id": "обновление-настроек-приложения-logto", "hProperties": { "id": "обновление-настроек-приложения-logto" } }, "depth": 2, "value": "Обновление настроек приложения Logto" }, { "data": { "id": "добавление-кнопок-входа-и-выхода-во-всплывающее-окно", "hProperties": { "id": "добавление-кнопок-входа-и-выхода-во-всплывающее-окно" } }, "depth": 2, "value": "Добавление кнопок входа и выхода во всплывающее окно" }, { "data": { "id": "контрольная-точка-тестирование-процесса-аутентификации", "hProperties": { "id": "контрольная-точка-тестирование-процесса-аутентификации" } }, "depth": 2, "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": 1, "words": 430, "text": "less than a minute read" }; const frontmatter = undefined; function _createMdxContent(props) { const _components = { a: "a", code: "code", h2: "h2", h3: "h3", img: "img", li: "li", ol: "ol", p: "p", pre: "pre", span: "span", strong: "strong", ul: "ul", ..._provideComponents(), ...props.components }, {Info, LogtoCloudButton, Note} = _components; if (!Info) _missingMdxReference("Info", true); if (!LogtoCloudButton) _missingMdxReference("LogtoCloudButton", true); if (!Note) _missingMdxReference("Note", true); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Расширения для Chrome - отличный способ расширить функциональность браузера Chrome. Когда у вас есть популярное расширение, вы можете захотеть монетизировать его, предложив пользователям платные функции. Для этой цели необходима аутентификация пользователей:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Идентификация пользователей" }), ": Вам нужно знать, кто пользователь, чтобы предоставлять персонализированные функции."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Контроль доступа" }), ": Вам нужно контролировать, кто может получить доступ к платным функциям."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Управление подписками" }), ": Вам нужно предоставить пользователям способ подписываться и управлять своими подписками."] }), "\n"] }), "\n", _jsx(_components.p, { children: "С другой стороны, мы не хотим привязываться к системе аккаунтов Google, так как ваши пользователи могут предпочесть использовать другие аккаунты, или у вас могут быть различные сервисы, которые вы бы хотели интегрировать с той же системой идентичности." }), "\n", _jsx(_components.p, { children: "Краткое резюме преимуществ использования OpenID Connect (OIDC) для аутентификации:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Нет привязки к вендору" }), ": Ваши пользователи могут использовать различные методы для входа, а не только через Google."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Единый вход (SSO)" }), ": Пользователи могут войти один раз и получить доступ к нескольким сервисам или приложениям."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Стандартизировано" }), ": OIDC - это открытый стандарт, который широко принят и поддерживается, также он безопасен."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["В этом учебнике мы будем использовать ", _jsx(_components.a, { href: "https://logto.io/", children: "Logto" }), " в качестве поставщика OIDC, который является альтернативой Auth0 для построения инфраструктур идентичности."] }), "\n", _jsx(_components.p, { children: "Давайте начнем!" }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Вы можете найти пример проекта для этого учебника в ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "нашем репозитории на GitHub\n" }), "."] }) }), "\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: "Предполагая, что вы добавили кнопку \"Войти\" во всплывающее окно вашего Chrome расширения, процесс аутентификации будет выглядеть следующим образом:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-mermaid", children: "sequenceDiagram\n participant A as Всплывающее окно расширения\n participant B as Сервисный работник расширения\n participant C as Опыт входа Logto\n\n A->>B: Запускает вход\n B->>C: Перенаправляет в Logto\n C->>C: Пользователь входит в систему\n C->>B: Перенаправляет обратно в расширение\n B->>A: Уведомляет всплывающее окно\n" }) }), "\n", _jsxs(_components.p, { children: ["Для других интерактивных страниц вашего расширения, вам нужно просто заменить участника ", _jsx(_components.code, { children: "Всплывающее окно расширения" }), " на имя страницы. В этом учебнике мы сфокусируемся на странице-окне."] }), "\n", _jsxs(_components.h2, { id: "создание-приложения-logto", children: ["Создание приложения Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#создание-приложения-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Чтобы начать, создайте приложение Logto с типом \"Одностраничное приложение\". Следуйте этим шагам для создания приложения Logto:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Войдите в ", _jsx(_components.a, { href: "https://cloud.logto.io/", children: "Консоль Logto" }), "."] }), "\n", _jsxs(_components.li, { children: ["Нажмите ", _jsx(_components.strong, { children: "Создать приложение" }), "."] }), "\n", _jsx(_components.li, { children: "На открывшейся странице найдите кнопку \"Создать приложение без фреймворка\" внизу и нажмите на неё." }), "\n", _jsx(_components.li, { children: "Выберите тип \"Одностраничное приложение\" и введите название вашего приложения." }), "\n", _jsxs(_components.li, { children: ["Нажмите ", _jsx(_components.strong, { children: "Создать" }), "."] }), "\n"] }), "\n", _jsxs(_components.h2, { id: "настройка-вашего-chrome-расширения", children: ["Настройка вашего Chrome расширения", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#настройка-вашего-chrome-расширения", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.h3, { id: "установка-logto-sdk", children: ["Установка Logto SDK", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#установка-logto-sdk", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Установите Logto SDK в ваш проект расширения для Chrome:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-bash", children: "# или pnpm, yarn и т.д.\nnpm i @logto/chrome-extension\n" }) }), "\n", _jsxs(_components.h3, { id: "обновление-manifestjson", children: ["Обновление ", _jsx(_components.code, { children: "manifest.json" }), _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#обновление-manifestjson", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsxs(_components.p, { children: ["Logto SDK требует следующих разрешений в ", _jsx(_components.code, { children: "manifest.json" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-json", children: "{\n \"permissions\": [\"identity\", \"storage\"],\n \"host_permissions\": [\"https://*.logto.app/*\"]\n}\n" }) }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.identity" }), ": Требуется для Chrome Identity API, который используется для входа и выхода из системы."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "permissions.storage" }), ": Требуется для хранения сессии пользователя."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "host_permissions" }), ": Требуется для Logto SDK для взаимодействия с Logto API."] }), "\n"] }), "\n", _jsx(Note, { children: _jsxs(_components.p, { children: ["Если вы используете пользовательский домен на Logto Cloud, вам нужно обновить ", _jsx(_components.code, { children: "host_permissions" }), " так, чтобы они соответствовали вашему домену."] }) }), "\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: "В фоновом скрипте вашего Chrome расширения инициализируйте Logto SDK:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nimport LogtoClient from '@logto/chrome-extension';\n\nexport const client = new LogtoClient({\n endpoint: '',\n appId: '',\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Замените ", _jsx(_components.code, { children: "" }), " и ", _jsx(_components.code, { children: "" }), " фактическими значениями. Вы можете найти эти значения на странице приложения, которую вы только что создали в Консоли Logto."] }), "\n", _jsxs(_components.p, { children: ["Если у вас нет фонового скрипта, вы можете следовать ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/develop/concepts/service-workers/basics", children: "официальному руководству" }), " для его создания."] }), "\n", _jsxs(Info, { children: [_jsx(_components.p, { children: _jsx(_components.strong, { children: "Зачем нам нужен фоновый скрипт?" }) }), _jsx(_components.p, { children: "Обычные страницы расширений, такие как всплывающее или опциональное окно, не могут работать в фоне и могут быть закрыты во время процесса аутентификации. Фоновый скрипт гарантирует корректную обработку процесса аутентификации." })] }), "\n", _jsx(_components.p, { children: "Затем нам нужно слушать сообщения от других страниц расширения и обрабатывать процесс аутентификации:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// service-worker.js\nchrome.runtime.onMessage.addListener((message, sender, sendResponse) => {\n // В приведённом коде, поскольку мы возвращаем `true` для каждого действия, мы должны вызвать `sendResponse`\n // чтобы уведомить отправителя. Также вы можете обрабатывать ошибки здесь или использовать другие способы уведомления отправителя.\n\n if (message.action === 'signIn') {\n const redirectUri = chrome.identity.getRedirectURL('/callback');\n client.signIn(redirectUri).finally(sendResponse);\n return true;\n }\n\n if (message.action === 'signOut') {\n const redirectUri = chrome.identity.getRedirectURL();\n client.signOut(redirectUri).finally(sendResponse);\n return true;\n }\n\n return false;\n});\n" }) }), "\n", _jsxs(_components.p, { children: ["Вы могли заметить, что в коде выше используются два URI перенаправления. Они создаются с помощью ", _jsx(_components.code, { children: "chrome.identity.getRedirectURL" }), ", который является ", _jsx(_components.a, { href: "https://developer.chrome.com/docs/extensions/reference/api/identity#method-getRedirectURL", children: "встроенным API Chrome" }), " для генерации URL перенаправления для аутентификационных потоков. Эти два URI будут:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), " для входа."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.code, { children: "https://.chromiumapp.org/" }), " для выхода."] }), "\n"] }), "\n", _jsx(_components.p, { children: "Обратите внимание, что эти URI недоступны, и они используются только для того, чтобы Chrome инициировал специфические действия для процесса аутентификации." }), "\n", _jsxs(_components.h2, { id: "обновление-настроек-приложения-logto", children: ["Обновление настроек приложения Logto", _jsx(_components.a, { "aria-hidden": "true", tabIndex: "-1", href: "#обновление-настроек-приложения-logto", children: _jsx(_components.span, { children: "#" }) })] }), "\n", _jsx(_components.p, { children: "Теперь нам нужно обновить настройки приложения Logto для разрешения URI перенаправлений, которые мы только что создали." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Перейдите на страницу приложения в Консоли Logto." }), "\n", _jsxs(_components.li, { children: ["В разделе \"Урлы перенаправления\" добавьте URI: ", _jsx(_components.code, { children: "https://.chromiumapp.org/callback" }), "."] }), "\n", _jsxs(_components.li, { children: ["В разделе \"URL перенаправлений после выхода из системы\" добавьте URI: ", _jsx(_components.code, { children: "https://.chromiumapp.org/" }), "."] }), "\n", _jsxs(_components.li, { children: ["В разделе \"Разрешённые источники CORS\" добавьте URI: ", _jsx(_components.code, { children: "chrome-extension://" }), ". SDK в Chrome расширении будет использовать этот источник для взаимодействия с Logto API."] }), "\n", _jsxs(_components.li, { children: ["Нажмите ", _jsx(_components.strong, { children: "Сохранить изменения" }), "."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Не забудьте заменить ", _jsx(_components.code, { children: "" }), " на фактический идентификатор вашего расширения. Вы можете найти идентификатор расширения на странице ", _jsx(_components.code, { children: "chrome://extensions" }), "."] }), "\n", _jsx(_components.p, { children: "После обновления настроек ваши настройки приложения Logto должны выглядеть следующим образом:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/app_settings_f30c24be38.webp", alt: "Настройки приложения" }) }), "\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.p, { children: ["В файле ", _jsx(_components.code, { children: "popup.html" }), ":"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-html", children: "\n\n\n" }) }), "\n", _jsxs(_components.p, { children: ["В файле ", _jsx(_components.code, { children: "popup.js" }), " (предполагая, что ", _jsx(_components.code, { children: "popup.js" }), " включен в ", _jsx(_components.code, { children: "popup.html" }), "):"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n // Вход завершён (или не удался), вы можете обновить UI здесь.\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n // Выход завершён (или не удался), вы можете обновить UI здесь.\n});\n" }) }), "\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: "Теперь вы можете протестировать процесс аутентификации в вашем Chrome расширении:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsx(_components.li, { children: "Откройте всплывающее окно расширения." }), "\n", _jsx(_components.li, { children: "Нажмите на кнопку \"Войти\"." }), "\n", _jsx(_components.li, { children: "Вы будете перенаправлены на страницу входа Logto." }), "\n", _jsx(_components.li, { children: "Войдите в систему с вашим аккаунтом Logto." }), "\n", _jsx(_components.li, { children: "Вы будете перенаправлены обратно в Chrome." }), "\n"] }), "\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: "Поскольку Chrome предоставляет единые API для хранилища, кроме потока входа и выхода, все другие методы SDK Logto можно использовать в странице-окне напрямую." }), "\n", _jsxs(_components.p, { children: ["В вашем ", _jsx(_components.code, { children: "popup.js" }), ", вы можете повторно использовать экземпляр ", _jsx(_components.code, { children: "LogtoClient" }), ", созданный в фоновом скрипте, или создать новый с той же конфигурацией:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nimport LogtoClient from '@logto/chrome-extension';\n\nconst client = new LogtoClient({\n endpoint: '',\n appId: '',\n});\n\n// Или повторно используйте экземпляр клиента, созданный в фоновом скрипте\nimport { client } from './service-worker.js';\n" }) }), "\n", _jsx(_components.p, { children: "Затем вы можете создать функцию для загрузки состояния аутентификации и профиля пользователя:" }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\nconst loadAuthenticationState = async () => {\n const isAuthenticated = await client.isAuthenticated();\n // Обновите UI на основе состояния аутентификации\n\n if (isAuthenticated) {\n const user = await client.getIdTokenClaims(); // { sub: '...', email: '...', ... }\n // Обновите UI профилем пользователя\n }\n};\n" }) }), "\n", _jsxs(_components.p, { children: ["Вы также можете объединить функцию ", _jsx(_components.code, { children: "loadAuthenticationState" }), " с логикой входа и выхода:"] }), "\n", _jsx(_components.pre, { children: _jsx(_components.code, { className: "language-js", children: "// popup.js\ndocument.getElementById('sign-in').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signIn' });\n await loadAuthenticationState();\n});\n\ndocument.getElementById('sign-out').addEventListener('click', async () => {\n await chrome.runtime.sendMessage({ action: 'signOut' });\n await loadAuthenticationState();\n});\n" }) }), "\n", _jsx(_components.p, { children: "Вот пример страницы всплывающего окна с состоянием аутентификации:" }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://uploads.strapi.logto.io/1/extension_popup_03b2ad10b2.webp", alt: "Страница всплывающего окна" }) }), "\n", _jsxs(_components.p, { children: ["Для получения более подробной информации о SDK, вы можете обратиться к ", _jsx(_components.a, { href: "https://docs.logto.io/sdk/vanilla-js/", children: "официальной документации browser SDK" }), ". Браузерный SDK имеет те же API, что и SDK для Chrome расширения."] }), "\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", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Сборка сервисных работников" }), ": Если вы используете сборщик типа Webpack или Rollup, вам нужно явно установить цель в ", _jsx(_components.code, { children: "browser" }), " или аналогично, чтобы избежать ненужной сборки модулей Node.js."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Разрешение модулей" }), ": Logto Chrome расширения SDK является только ESM модулем."] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["Смотрите наш ", _jsx(_components.a, { href: "https://github.com/logto-io/js/tree/HEAD/packages/chrome-extension-sample", children: "пример проекта" }), " для полного примера с TypeScript, Rollup и другими конфигурациями."] }), "\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: "С аутентифицированными пользователями, теперь вы можете безопасно предлагать платные функции в вашем Chrome расширении. Например, вы можете хранить статус подписки пользователя в профиле пользователя и проверять его, когда пользователь открывает расширение." }), "\n", _jsx(_components.p, { children: "Комбинируя возможности Chrome расширений и Logto, вы можете создать более гибкое и настраиваемое расширение, которое понравится и вам, и вашим пользователям." }), "\n", _jsx(LogtoCloudButton, {})] }); } 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."); }