Узнайте, как создать собственный SDK для Logto с использованием `@logto/browser`.
Logto, открытая платформа аутентификации, предлагает множество официальных SDK, разработанных для упрощения интеграции для различных фреймворков и платформ. Однако есть еще много платформ, для которых нет официальных SDK.
Чтобы восполнить этот пробел, Logto предоставляет основной пакет @logto/browser, разработанный, чтобы помочь разработчикам создавать собственные SDK, адаптированные под конкретные требования. Этот пакет реализует основные функции Logto, отдельно от любого конкретного фреймворка или платформы, если только он поддерживает JavaScript и работает в браузерном окружении.
В этом руководстве мы покажем вам шаги по созданию SDK для React с использованием @logto/browser, этот SDK реализует процесс входа в систему. Вы можете следовать тем же шагам, чтобы создать SDK для любой другой платформы на базе JavaScript, которая работает в браузере.
Прежде чем начать, давайте разберемся в процессе входа в Logto. Процесс входа состоит из следующих шагов:
@logto/browserПакет @logto/browser предоставляет класс LogtoClient, который предоставляет основные функции Logto, включая методы для процесса входа в систему:
signIn(): Генерирует OIDC URL для авторизации и перенаправляет на него.handleSignInCallback(): Проверяет и анализирует обратный URL, извлекает код авторизации и затем обменивает код на токены, вызывая конечную точку токена.isAuthenticated(): Проверяет, был ли произведен вход в систему пользователем.В SDK мы предоставим 2 хука: useLogto и useHandleSignInCallback, а также компонент LogtoProvider:
useLogto: Хук, который предоставляет метод signIn для инициации процесса входа, и состояние 'isAuthenticated' для проверки, был ли произведен вход в систему.useHandleSignInCallback: Хук, который обрабатывает обратный URL и обменивает код аутентификации на токены, завершает процесс входа.Чтобы использовать SDK, вы можете просто обернуть свое приложение компонентом LogtoProvider и использовать хуки для проверки состояния авторизации, входа в систему и обработки обратного вызова.
Сначала установите пакет @logto/browser с помощью npm или другого менеджера пакетов:
Определите контекст провайдера, который будет содержать 3 части:
LogtoClient, который будет инициализирован в провайдере и используется в хуках.Создайте новый файл context.tsx и напишите следующий код:
С готовым контекстом давайте реализуем провайдера. Провайдер инициализирует экземпляр LogtoClient, проверяет, аутентифицирован ли пользователь, и предоставляет контекст для его дочерних элементов.
Создать новый файл provider.tsx:
Теперь давайте реализуем хуки.
useLogto: В этом хуке мы используем контекст, чтобы получить экземпляр LogtoClient, и предоставляем метод signIn и состояние isAuthenticated. Вы можете продолжать добавлять больше методов в этот хук.useHandleSignInCallback: Этот хук считывает обратный URL из браузера, извлекает код авторизации и обменивает его на токены. Он также устанавливает состояние аутентификации в true, после того как пользователь прошел аутентификацию.Создайте новый файл hooks.ts и напишите следующий код:
Теперь вы создали SDK для React для Logto. Вы можете использовать его в своем приложении, обернув его компонентом LogtoProvider и используя хуки для проверки состояния аутентификации, входа в систему и обработки обратного вызова. Вы можете проверить официальный пример проекта на React здесь.
В этом руководстве мы прошли через шаги создания SDK для React для Logto, реализуя базовый процесс аутентификации. Представленное здесь SDK - это основной пример. Вы можете расширить его, добавив больше методов и функций, чтобы удовлетворить нужды вашего приложения.
Вы можете следовать тем же шагам, чтобы создать SDK для любой другой платформы на базе JavaScript, которая работает в браузере.
Ресурсы: