Узнайте, как создать поток аутентификации пользователей с Angular, интегрируя библиотеку клиента OIDC для Angular.
В этом руководстве мы покажем вам, как создать поток аутентификации пользователей с помощью Angular, интегрируя Logto SDK. В руководстве используется TypeScript в качестве языка программирования.
Перед началом убедитесь, что у вас есть следующее:
Чтобы начать, создайте приложение Logto с типом "Одностраничное приложение". Следуйте этим шагам для создания приложения Logto:
Затем вы увидите интерактивное руководство, которое проведет вас через процесс интеграции Logto SDK с вашим приложением Angular. Следующее содержание может служить справочным материалом для будущего использования.
Установите Logto JS core SDK и библиотеку клиента OIDC для Angular:
В вашем проекте Angular добавьте провайдера аутентификации в ваш app.config.ts:
Переключитесь на страницу деталей приложения в Консоли Logto. Добавьте URI перенаправления http://localhost:3000/callback.
URI перенаправления - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после аутентификации.
Аналогично, добавьте http://localhost:3000/ в раздел "URI перенаправления после выхода".
URI перенаправления после выхода - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после выхода.
Затем нажмите "Сохранить", чтобы сохранить изменения.
В компоненте, где вы хотите реализовать вход и выход (например, app.component.ts), внедрите OidcSecurityService и используйте его для выполнения входа и выхода.
Затем в шаблоне добавьте кнопки для входа и выхода:
OidcSecurityService предоставляет удобный способ подписки на состояние аутентификации:
И используйте это в шаблоне:
Теперь вы можете запустить приложение и попробовать войти/выйти с помощью Logto:
Если у вас возникнут какие-либо проблемы во время интеграции, не стесняйтесь присоединиться к нашему серверу Discord, чтобы пообщаться с сообществом и командой Logto!