Русский
  • аутентификация
  • интеграция
  • logto
  • защищённое-приложение

Самый быстрый способ создать систему аутентификации

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

Ran
Ran
Product & Design

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

Как быстро это можно сделать? Ну, давайте посмотрим. Существует сверхбыстрое решение с минимальным кодированием для веб-приложений, идеально подходящее для быстрого тестирования или развертывания сразу в продакшн. Включая регистрацию на платформе, всё можно сделать за всего 1 час или даже быстрее. Не верите? Попробуйте сами.

Как компания по разработке инструментов ИИ, время — это деньги, и мне нужно быстро выйти на рынок. Вот что мне нужно для аутентификации:

  • Регистрация: Email + Подтверждение email + Установить пароль
  • Вход: Email + Пароль
  • Забыли пароль?: Подтвердить email + Сбросить пароль
  • Социальный вход: Давайте выберем самый популярный, вход через Google.

Хорошо, начнем.

Шаг 1: Создать учетную запись и арендатора Logto

  1. Посетите cloud.logto.io и зарегистрируйтесь для создания учетной записи Logto.
  2. Сразу создайте Production арендатора. Бесплатного плана (50,000 MAU) достаточно для наших стартаповских нужд.

Создать учетную запись и арендатора

Шаг 2: Настроить почтовое соединение

Подключение к стороннему почтовому провайдеру и создание шаблонов писем? О, подождите! У Logto есть предустановленная почтовая служба, для которой не требуется никакой настройки.

  1. Введите основную информацию: Имя отправителя, информация о компании и загрузите логотип электронной почты (все опционально).
  2. Протестируйте: Отправьте себе письмо. Придёт стильное письмо для подтверждения.

Настроить почтовое соединение

Верно, вся настройка и тестирование занимают меньше 5 минут! Если вас устраивает отправитель в виде “[email protected]”, вы можете использовать эту бесплатную услугу и забыть о создании шаблонов писем для разных сценариев. В противном случае вы можете выбрать настраиваемого почтового провайдера.

Шаг 3: Настройка социальной связи

Для разных продуктов требуются разные client ID от Google, поэтому мне нужно самому связать Google connector. Но это несложно.

  1. Заполните Client ID и Client secret в Logto, затем включите Google One Tap.

Настройка социальной связи

  1. Введите Callback URL. Выберите ../auth/userinfo.email, ../auth/userinfo.profile и openid в Google API консоли.

Настройка консоли API Google

Благодаря пошаговому руководству Logto я завершил настройку менее чем за 10 минут.

Шаг 4: Настройка процесса входа в систему

Сконфигурировав провайдеры, пора настроить процесс входа и регистрации.

  1. Перейдите в раздел “Опыт входа в систему”:
    • Загрузите логотип приложения и Favicon.
    • Замените цвет бренда.
    • Включите тёмный режим одним кликом и введите те же поля.
  2. Перейдите на вкладку “Регистрация и вход” для изменения методов аутентификации:
    • Установите “Адрес электронной почты” в качестве идентификатора регистрации и отметьте “Создать пароль” и “Подтвердить при регистрации”.
    • Установите “Адрес электронной почты” и “Пароль” в качестве идентификатора и фактора аутентификации при входе.
    • Добавьте “Google” для социальной аутентификации.

Настройка опыта входа

К счастью, настройки по умолчанию оказались именно тем, что мне нужно, так что это заняло совсем немного времени.

Шаг 5: Интеграция веб-приложений без SDK

Зачем тратить время на интеграцию сервисов? Используйте защищенное приложение Logto для проксирования моих запросов.

  1. Создайте Защищенное приложение: Введите оригинальный URL моего приложения (тот, который без защиты аутентификации, может быть доступен любому). Установите домен приложения с суффиксом “.protected.app” для тестирования (этот адрес сайта предоставляется пользователям для посещения вашего сайта, но он уже настроен с потоками аутентификации, отсюда и название «Защищенное приложение».)

    Создать защищенное приложение

  2. После создания приложения посетите этот тестовый адрес acme.protected.app (👈 также можете попробовать!). Для доступа к этому сайту требуется аутентификация. Тест успешен.

    опыт входа

  3. Настройте реальный домен этого веб-сайта для продакшена вместо стандартного .protected.app.

  4. Опционально: Если вы хотите использовать аутентификацию только для определенных путей, вы можете добавить “Custom authentication rules”. По умолчанию вся веб-страница защищена.

  5. Маршруты аутентификации /register, /sign-in, /sign-in-callback и /sign-out можно напрямую добавить на кнопки, такие как Начать, Войти и Выйти.

  6. И наконец, защитите исходный сервер с помощью HTTP Basic Authentication для завершения интеграции прокси. Каждый запрос от Защищенного приложения включает следующий заголовок: Authorization: Basic base64(appId:appSecret).

Вот и всё! Всего за один час мой сайт защищен аутентификацией.

Заключение

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

Я приглашаю вас испытать это на себе и быстро оснастить ваш сайт защитой аутентификации.

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

Счастливой интеграции!