Создание аутентификации CapacitorJS с помощью Logto
В этом уроке мы покажем, как создать процесс аутентификации с помощью Logto в Capacitor. Это позволит вам легко создавать кроссплатформенные процессы входа и регистрации.
Founder
Введение
- Logto — это современная альтернативная платформа Auth0 для построения клиентской идентификационной инфраструктуры с минимальными усилиями. Она поддерживает различные методы входа, включая имя пользователя, электронную почту, номер телефона и популярные социальные входы, такие как Google и GitHub.
- Capacitor — это с открытым исходным кодом нативное окружение для создания Web Native приложений.
В этом уроке мы покажем, как создать процесс аутентификации с помощью Logto в Capacitor. Это позволит вам легко создавать кроссплатформенные процессы входа и регистрации.
Предварительные требования
Перед началом убедитесь, что у вас есть следующее:
- Учетная запись Logto. Если у вас её нет, вы можете зарегистрироваться бесплатно.
- Проект на Capacitor. Вы можете следовать официальному руководству для его создания.
Создание приложения Logto
Для начала создайте приложение Logto с типом "Native". Приложения Logto служат клиентскими приложениями в процессе OAuth 2.0 и OpenID Connect (OIDC). Следуйте этим шагам, чтобы создать приложение Logto:
- Войдите в Logto Cloud Console.
- В левой навигационной панели нажмите на Приложения.
- Щелкните на Создать приложение.
- Выберите Native как тип приложения и введите название приложения.
- Нажмите на Создать.
После создания приложения Logto настройте URI переадресации. URI переадресации используется для возврата пользователя в ваше приложение после завершения процесса аутентификации.
Убедитесь, что URI перенаправляет на приложение Capacitor, например, com.example.app://callback. Значение может изменяться в зависимости от конфигурации вашего приложения Capacitor. Для получения дополнительной информации смотрите Capacitor Deep Links.
Не забудьте нажать на Сохранить изменения после обновления URI переадресации.
Если вы не уверены в URI переадресации, вы можете оставить его пустым и обновить позже.
Настройка Capacitor
Предполагается, что у вас уже есть проект на Capacitor, это руководство независимо от фреймворков, поэтому вы можете использовать любой предпочитаемый вами UI фреймворк и обновить код соответственно.
Установка зависимостей
Инициализация клиента Logto
endpoint— это API-адрес Logto. Вы можете найти его в встроенном руководстве или в разделе Доменов в настройках арендатора.appId— это ID приложения Logto. Вы можете найти его на странице деталей приложения.
Реализация кнопки входа
Добавьте следующий код в обработчик onClick кнопки входа:
Замените com.example.app://callback на URI переадресации, который вы настроили в приложении Logto.
Проверка: Запуск процесса аутентификации
Запустите приложение Capacitor и нажмите кнопку входа. Откроется окно браузера, перенаправляющее на страницу входа Logto.
Выход из системы
Так как Capacitor использует Safari View Controller на iOS и Chrome Custom Tabs на Android, состояние аутентификации может сохраняться некоторое время. Однако иногда пользователь может захотеть немедленно выйти из приложения. В этом случае мы можем использовать метод signOut, чтобы выполнить выход:
Метод signOut имеет необязательный параметр для URI переадресации после выхода. Если он не предоставлен, пользователь будет перенаправлен на страницу выхода Logto:
Пользователю нужно нажать "Готово", чтобы закрыть веб-представление и вернуться в приложение Capacitor. Если вы хотите автоматически перенаправить пользователя обратно в приложение Capacitor, вы можете указать URI переадресации после выхода:
Убедитесь, что URI переадресации после выхода перенаправляет на приложение Capacitor, и не забудьте добавить URI переадресации после выхода в Logto Console:
Проверка: Завершение процесса аутентификаци и
Снова запустите приложение Capacitor и нажмите кнопку входа. Если все прошло хорошо, когда процесс аутентификации будет завершен, приложение Capacitor получит результат входа и напечатает в консоли данные пользователя.
Затем нажмите кнопку выхода, и приложение Capacitor будет перенаправлено на страницу выхода Logto. Оно автоматически перенаправится обратно в приложение Capacitor, если URI переадресации после выхода настроен.
Теперь вы можете настроить процесс аутентификации в Logto Cloud Console, не написав сложного кода. Настройка будет применяться ко всем клиентским приложениям, обеспечивая согласованность пользовательского опыта.
Если у вас возникнут какие-либо проблемы во время интеграции, пожалуйста, не стесняйтесь обращаться к нам по электронной почте на [email protected] или присоединяйтесь к нашему серверу в Discord!