Создание веб-SDK для Logto за несколько минут

Logto, открытая платформа аутентификации, предлагает множество официальных SDK, разработанных для упрощения интеграции для различных фреймворков и платформ. Однако есть еще много платформ, для которых нет официальных SDK.

Чтобы восполнить этот пробел, Logto предоставляет основной пакет @logto/browser, разработанный, чтобы помочь разработчикам создавать собственные SDK, адаптированные под конкретные требования. Этот пакет реализует основные функции Logto, отдельно от любого конкретного фреймворка или платформы, если только он поддерживает JavaScript и работает в браузерном окружении.

В этом руководстве мы покажем вам шаги по созданию SDK для React с использованием @logto/browser, этот SDK реализует процесс входа в систему. Вы можете следовать тем же шагам, чтобы создать SDK для любой другой платформы на базе JavaScript, которая работает в браузере.

Процесс входа в систему#

Прежде чем начать, давайте разберемся в процессе входа в Logto. Процесс входа состоит из следующих шагов:

1. Перенаправление в Logto: Пользователь перенаправляется на страницу входа в Logto.
2. Аутентификация: Пользователь вводит свои учетные данные и проходит аутентификацию в Logto.
3. Возврат обратно в ваше приложение: После успешной аутентификации пользователя возвращают обратно в ваше приложение с кодом аутентификации.
4. Обмен кода: Ваше приложение обменивает код аутентификации на токены.

Краткое введение в @logto/browser#

Пакет @logto/browser предоставляет класс LogtoClient, который предоставляет основные функции Logto, включая методы для процесса входа в систему:

1. signIn(): Генерирует OIDC URL для авторизации и перенаправляет на него.
2. handleSignInCallback(): Проверяет и анализирует обратный URL, извлекает код авторизации и затем обменивает код на токены, вызывая конечную точку токена.
3. isAuthenticated(): Проверяет, был ли произведен вход в систему пользователем.

Создание SDK для React#

В SDK мы предоставим 2 хука: useLogto и useHandleSignInCallback, а также компонент LogtoProvider:

1. useLogto: Хук, который предоставляет метод signIn для инициации процесса входа, и состояние 'isAuthenticated' для проверки, был ли произведен вход в систему.
2. useHandleSignInCallback: Хук, который обрабатывает обратный URL и обменивает код аутентификации на токены, завершает процесс входа.

Чтобы использовать SDK, вы можете просто обернуть свое приложение компонентом LogtoProvider и использовать хуки для проверки состояния авторизации, входа в систему и обработки обратного вызова.

Шаг 1: Установка пакета#

Сначала установите пакет @logto/browser с помощью npm или другого менеджера пакетов:

Шаг 2: Определите контекст React#

Определите контекст провайдера, который будет содержать 3 части:

1. Существующий экземпляр LogtoClient, который будет инициализирован в провайдере и используется в хуках.
2. Состояние аутентификации.
3. Метод установки состояния аутентификации.

Создайте новый файл context.tsx и напишите следующий код:

Шаг 3: Реализация провайдера#

С готовым контекстом давайте реализуем провайдера. Провайдер инициализирует экземпляр LogtoClient, проверяет, аутентифицирован ли пользователь, и предоставляет контекст для его дочерних элементов.

Создать новый файл provider.tsx:

Шаг 4: Реализация хуков#

Теперь давайте реализуем хуки.

• useLogto: В этом хуке мы используем контекст, чтобы получить экземпляр LogtoClient, и предоставляем метод signIn и состояние isAuthenticated. Вы можете продолжать добавлять больше методов в этот хук.
• useHandleSignInCallback: Этот хук считывает обратный URL из браузера, извлекает код авторизации и обменивает его на токены. Он также устанавливает состояние аутентификации в true, после того как пользователь прошел аутентификацию.

Создайте новый файл hooks.ts и напишите следующий код:

Контрольная точка: использование SDK#

Теперь вы создали SDK для React для Logto. Вы можете использовать его в своем приложении, обернув его компонентом LogtoProvider и используя хуки для проверки состояния аутентификации, входа в систему и обработки обратного вызова. Вы можете проверить официальный пример проекта на React здесь.

Заключение#

В этом руководстве мы прошли через шаги создания SDK для React для Logto, реализуя базовый процесс аутентификации. Представленное здесь SDK - это основной пример. Вы можете расширить его, добавив больше методов и функций, чтобы удовлетворить нужды вашего приложения.

Вы можете следовать тем же шагам, чтобы создать SDK для любой другой платформы на базе JavaScript, которая работает в браузере.

Ресурсы:

1. Logto Browser SDK
2. Logto React SDK