Памятка о том, как реализовать аутентификацию Azure AD с помощью React и .NET Core

Нажмите здесь, чтобы опубликовать эту статью в LinkedIn »

Я нашел много способов реализовать аутентификацию Azure AD с помощью React и серверной части .NET Core 2.x. В этой статье я продемонстрирую, как реализовать этот тип аутентификации.

Зарегистрируйте ваше приложение

Первый шаг - зарегистрировать Azure AD. Как только вы это сделаете, вы можете использовать ключи, сгенерированные Azure, для реализации аутентификации в своем приложении.

Теперь мы настроим интерфейс для получения токена доступа Azure AD, а затем для использования этого токена в серверной части.
Если вы хотите увидеть код в деталях, проверьте следующий репозиторий: https: // github .com / Odonno / azuread-react-dotnet-core-example

Интерфейс

Для внешнего интерфейса существует множество реализаций, и наиболее часто используемой, безусловно, является библиотека angular-adal, что на самом деле не лучший выбор в нашем случае. Мы могли бы использовать простое adal.js, но зачем каждый раз изобретать велосипед?

К счастью, я нашел библиотеку на GitHub под названием react-adal, которая, похоже, неплохо справляется. Итак, давайте начнем с этого и посмотрим, насколько это просто.

npm install react-adal

Как только вы попадете туда, вам нужно будет написать две вещи:

• файл конфигурации с ключами, полученными от Azure на предыдущем шаге
• вызвать метод аутентификации

Как только вы закончите свой файл конфигурации, выполните эту функцию в своем index.jsx файле:

И вы готовы к работе. Теперь каждый раз, когда пользователь входит в эту функцию, будет отображаться новая страница, чтобы он мог установить свои учетные данные и подключиться. И в качестве бонуса я даю вам getToken() метод, с помощью которого можно легко получить токен аутентификации, который нам понадобится для обеспечения доступа пользователя к нашему бэкэнду.

Не забудьте установить заголовки как есть, чтобы выполнять HTTP-вызовы с токеном проверки подлинности Azure AD.

Следует отметить, что первый токен, который вы генерируете из URL-адреса обратного вызова, имеет время жизни 1 час. Итак, когда этот токен приближается к истечению срока, токен обновления будет получен библиотекой. По умолчанию библиотека react-adal попытается обновить токен как минимум за 5 минут до истечения срока действия текущего токена.

Бэкэнд

Теперь каждый раз, когда пользователь отправляет запрос на ваш сервер, вам нужно убедиться, что токен действителен. И этот токен также поможет вам определить, кто является пользователем.

Файл конфигурации

Вам нужно будет указать эту информацию в вашем appsettings.json в соответствии с вашими ключами.

Настроить сервисы

Начните добавлять несколько строк кода в метод ConfigureServices().

И убедитесь, что у вас есть эта строка кода в вашем Configure() методе.

О, и если вы используете генератор Swagger, вот код для добавления формы токена авторизации в Swagger.

Определить профиль пользователя

Итак, ваш бэкэнд безопасен, но как мы узнаем, кто вошел в систему.
Вот несколько основных методов, которые вы можете использовать в своем приложении:

Заключение

И вуаля, все готово.