Русский
  • angular
  • frontend
  • tutorial
  • auth
  • authentication
  • oauth
  • oidc
  • identity

Создание аутентификации в Angular с помощью Logto

Узнайте, как создать поток аутентификации пользователей с Angular, интегрируя библиотеку клиента OIDC для Angular.

Gao
Gao
Founder

Начало работы

Введение

  • Logto - это открытая альтернатива Auth0 для создания инфраструктур идентификации. Он поддерживает различные методы входа, включая имя пользователя, электронную почту, номер телефона и популярные социальные входы, такие как Google и GitHub.
  • Angular это фреймворк для веб-разработки, созданный и поддерживаемый Google.

В этом руководстве мы покажем вам, как создать поток аутентификации пользователей с помощью Angular, интегрируя Logto SDK. В руководстве используется TypeScript в качестве языка программирования.

Предварительные условия

Перед началом убедитесь, что у вас есть следующее:

Создание приложения Logto

Чтобы начать, создайте приложение Logto с типом "Одностраничное приложение". Следуйте этим шагам для создания приложения Logto:

  1. Войдите в Консоль Logto.
  2. В левой панели навигации нажмите на Приложения.
  3. Нажмите на Создать приложение.
  4. На открывшейся странице найдите раздел "Одностраничное приложение" и выберите карточку "Angular".
  5. Нажмите на Начать создание и введите имя вашего приложения.
  6. Нажмите на Создать.

Затем вы увидите интерактивное руководство, которое проведет вас через процесс интеграции Logto SDK с вашим приложением Angular. Следующее содержание может служить справочным материалом для будущего использования.

Попробуйте интерактивное руководство Logto Cloud

Интеграция Logto в ваш проект

Установка

Установите Logto JS core SDK и библиотеку клиента OIDC для Angular:

Настройка приложения

В вашем проекте Angular добавьте провайдера аутентификации в ваш app.config.ts:

Реализация входа и выхода

Настройка URI перенаправления

Переключитесь на страницу деталей приложения в Консоли Logto. Добавьте URI перенаправления http://localhost:3000/callback.

URI перенаправления - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после аутентификации.

Аналогично, добавьте http://localhost:3000/ в раздел "URI перенаправления после выхода".

URI перенаправления после выхода - это концепция OAuth 2.0, которая подразумевает местоположение, куда следует перенаправить после выхода.

Затем нажмите "Сохранить", чтобы сохранить изменения.

В компоненте, где вы хотите реализовать вход и выход (например, app.component.ts), внедрите OidcSecurityService и используйте его для выполнения входа и выхода.

Затем в шаблоне добавьте кнопки для входа и выхода:

Подписка на состояние аутентификации и отображение информации о пользователе

OidcSecurityService предоставляет удобный способ подписки на состояние аутентификации:

И используйте это в шаблоне:

Контрольная точка: Запуск приложения

Теперь вы можете запустить приложение и попробовать войти/выйти с помощью Logto:

  1. Откройте приложение в своем браузере, вы должны увидеть кнопку "Войти".
  2. Нажмите кнопку "Войти", и вы должны быть перенаправлены на страницу входа Logto.
  3. После входа вы должны быть перенаправлены обратно в приложение, и вы должны увидеть данные пользователя и кнопку "Выйти".
  4. Нажмите кнопку "Выйти", и вы должны быть перенаправлены на страницу выхода Logto, а затем обратно в приложение в состоянии без входа.

Если у вас возникнут какие-либо проблемы во время интеграции, не стесняйтесь присоединиться к нашему серверу Discord, чтобы пообщаться с сообществом и командой Logto!

Дополнительные материалы

Попробуйте Logto сегодня