Русский

социальный
коннектор
без пароля
вход
oauth
авторизация
интеграция

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

Узнайте, как создать собственный социальный коннектор для Logto всего за несколько шагов.

Charles

Developer

6/18/2024

Хватит тратить недели на аутентификацию пользователей

Запускайте безопасные приложения быстрее с 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.

Попробуйте Logto Cloud бесплатно

Введение#

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

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

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

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

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

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

Unit тест#

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

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

Резюме#

Введение#

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

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

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

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

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

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

Unit тест#

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

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

Резюме#

Введение

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

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

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

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

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

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

Unit тест

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

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

Резюме

Введение

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

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

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

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

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

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

Unit тест

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

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

Резюме