В этом уроке мы покажем, как создать процесс аутентификации с помощью Logto в Capacitor. Это позволит вам легко создавать кроссплатформенные процессы входа и регистрации.
В этом уроке мы покажем, как создать процесс аутентификации с помощью Logto в Capacitor. Это позволит вам легко создавать кроссплатформенные процессы входа и регистрации.
Перед началом убедитесь, что у вас есть следующее:
Для начала создайте приложение Logto с типом "Native". Приложения Logto служат клиентскими приложениями в процессе OAuth 2.0 и OpenID Connect (OIDC). Следуйте этим шагам, чтобы создать приложение Logto:
После создания приложения Logto настройте URI переадресации. URI переадресации используется для возврата пользователя в ваше приложение после завершения процесса аутентификации.
Убедитесь, что URI перенаправляет на приложение Capacitor, например, com.example.app://callback. Значение может изменяться в зависимости от конфигурации вашего приложения Capacitor. Для получения дополнительной информации смотрите Capacitor Deep Links.
Не забудьте нажать на Сохранить изменения после обновления URI переадресации.
Если вы не уверены в URI переадресации, вы можете оставить его пустым и обновить позже.
Предполагается, что у вас уже есть проект на Capacitor, это руководство независимо от фреймворков, поэтому вы можете использовать любой предпочитаемый вами UI фреймворк и обновить код соответственно.
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!