Создание социального коннектора для Logto

Введение#

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

Что такое «коннектор»?#

Коннектор — это мини-программа, которая связывает Logto со сторонним сервисом. Он отвечает за обработку потока авторизации, обмен токенами и получение информации о пользователе из стороннего сервиса.

Logto предлагает широкий набор официальных коннекторов, разработанных для упрощения интеграции с различными социальными платформами. На сегодняшний день существует уже более 30 коннекторов, из которых более 10 были представлены нашим сообществом с открытым исходным кодом. И мы ожидаем, что это количество будет быстро расти в будущем.

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

Процесс авторизации#

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

Теперь давайте начнем#

Самый быстрый способ начать — скопировать код из существующего официального коннектора и изменить его в соответствии с вашими потребностями. Возьмем коннектор для GitHub в качестве примера.

Шаг 1: Клонирование существующего пакета коннектора#

В папке с исходным кодом коннектора вы найдете следующие файлы:

• index.ts: Главный файл входа коннектора.
• constant.ts: Константы, используемые в коннекторе.
• types.ts: Типы TypeScript, используемые в коннекторе.
• index.test.ts: Тестовые кейсы для коннектора.
• mock.ts: Тестовые данные, используемые в тестовых кейсах коннектора.

Помимо этих файлов вам также нужно будет предоставить файл README.md для описания коннектора, logo.svg (опционально logo-dark.svg для лучшего пользовательского интерфейса в темном режиме) и файл package.json для определения информации npm-пакета.

Шаг 2: Изменение главного файла входа (index.ts)#

В файле index.ts вы найдете большую часть логики коннектора. Обычно вам нужно реализовать 4 функции:

• getAuthorizationUri: Генерация URI авторизации для сторонней социальной платформы. Для GitHub это будет: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Обратитесь к документации разработчика вашей целевой социальной платформы, чтобы узнать правильный URI.
• authorizationCallbackHandler: Обработка возвращаемых значений параметров в URI callback, извлечение кода авторизации и обработка потенциальных ошибок.
• getAccessToken: Обмен кода авторизации на access token.
• getUserInfo: Получение информации о пользователе из сторонней платформы с использованием access token.

Большинство другой общей логики уже реализовано в комплекте Logto connector kit, что должно значительно облегчить вашу работу.

Наконец, в конце файла вам нужно будет просто экспортировать объект коннектора, следуя той же структуре кода, что и в коннекторе GitHub.

Шаг 3: Тестирование коннектора#

Unit тест#

Сначала напишите несколько unit тестов и убедитесь, что основные функции работают как ожидалось.

Локальное тестирование#

• Установите Logto в вашем локальном окружении: Logto предлагает несколько способов локальной установки, вы можете использовать CLI, Docker или даже собрать из исходного кода. Ознакомьтесь с документацией для более подробной информации.

• Свяжите свой пользовательский коннектор с вашим экземпляром Logto: используйте CLI, чтобы создать символическую ссылку вашего коннектора на экземпляр Logto. Более подробная информация.

• После связывания коннектора, вы должны увидеть его в папке <logto-root-path>/packages/core/connectors.

• Перезапустите ваш экземпляр Logto, перейдите в Logto Admin Console, и вы должны увидеть его в списке социальных коннекторов.

• Настройте ваш коннектор в разделе "Опыт входа" -> "Регистрация и вход" -> "Социальный вход". И попробуйте его в нашем демо-приложении с функцией "Live preview".

  

Шаг 4 (опционально): Публикация коннектора#

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

Резюме#

Создание собственного социального коннектора для Logto не так сложно, как может показаться. С помощью комплекта инструментов Logto connector kit и хороших примеров кода, вы сможете легко создать коннектор всего за несколько шагов.

И, добавляя свой коннектор, вы можете помочь большему количеству пользователей насладиться социальной платформой, которую вы добавили в семью Logto.