Пару месяцев назад я познакомился с миром ReactJS. Требование клиента для создания веб-интерфейса. Все мои дни разработчика были потрачены на разработку серверных систем с использованием Microsoft ASP.NET Web API и C #. И вы же не можете отказать своим клиентам, верно? если вам нужно это сделать, вы должны это сделать. Итак, шагните в новую сферу создания интерфейсных приложений.

У моего клиента уже был WEB API и веб-интерфейс. Это требование заключалось в создании другого отдельного подмодуля с использованием ReactJS для взаимодействия с этим веб-API. Как обычно, проблемы безопасности изложены в таблице, и да, у них уже есть настройка Azure AD B2C для управления пользователями. Задача заключалась в том, чтобы использовать ReactJS для взаимодействия с Azure AD B2C для проверки подлинности и авторизации.

Поверьте, было несколько руководств о том, как подключить Azure AD и Azure AD B2C с интерфейсными технологиями. Но все было здесь и там по частям. Мне не удалось найти полное пошаговое руководство, которое поможет вам. Так подумал, почему бы не написать один.

Я сделал несколько предположений, что вы уже:

  1. У вас есть опыт работы с ReactJS, и вы не знаете, как подключить Azure AD B2C.
  2. Иметь учетную запись Azure. Нет? Щелкните эту ссылку: https://azure.microsoft.com/en-us/ и нажмите большую жирную зеленую кнопку с надписью Начать бесплатно› .
  3. Иметь полнофункциональный каталог Azure AD B2C с пользователями. Если у вас есть учетная запись Azure и вам нужно создать учетную запись Azure AD B2C, перейдите по этой ссылке: Учебное пособие - Создание клиента Azure Active Directory B2C

Давайте начнем с создания нового проекта ReactJS.

  • Если вы работаете в Windows, запустите командную строку или терминал для других платформ, таких как Mac или Linux.
  • Войдите в свой рабочий каталог.
  • Введите следующую команду и нажмите ENTER, чтобы создать проект ReactJS.
$ create-react-app rjaadb2c
  • Теперь перейдите во вновь созданный каталог проекта, набрав,
$ cd rjaadb2c
  • Откройте ваш любимый редактор кода (я буду использовать VS Code) и откройте каталог, который вы создали на предыдущем шаге.
  • Ваш редактор должен выглядеть так

В VS Code есть небольшая приятная функция, называемая окном терминала. Это откроет терминал внутри редактора кода. Это очень удобная функция. Щелкните Terminal > New Terminal в строке меню.

  • Теперь в окне терминала введите
$ npm start

Это выполнит проект ReactJS. И это должно выглядеть так.

Готово, давайте сейчас подготовим нашу среду Azure AD B2C.

Подготовка среды Azure AD B2C

В этом разделе мы подготовим нашу среду Azure AD B2C для проверки подлинности и авторизации.

  • Теперь войдите на портал Azure, щелкнув эту ссылку: https://portal.azure.com.
  • Нажмите кнопку Фильтр в строке меню и перейдите в каталог B2C.

  • Теперь нажмите на ярлык Все службы в меню боковой панели.
  • Введите «Ad b2c» в поле поиска Все службы.
  • Нажмите на ярлык Azure AD B2C.

  • В колонке Azure AD B2C щелкните ярлык Приложения.
  • В колонке Приложения нажмите кнопку Добавить +.
  • Теперь введите информацию, необходимую для создания нового приложения Azure AD B2C, как показано ниже.

  1. Как видите, понятно. Дайте уникальное «Имя» своему приложению.
  2. Затем выберите Да для «Веб-приложение / веб-API», поскольку мы создаем веб-приложение.
  3. И оставьте значение по умолчанию Да для параметра «Разрешить неявный поток».
  4. Введите «URL-адрес ответа», в данном случае это адрес нашего локального хоста. Введите «api» или любой идентификатор по вашему выбору в «URI идентификатора приложения (необязательно)».

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

Я специально отметил это, потому что, если вы не указали идентификатор в этом месте, вы не увидите никаких областей в разделе «Опубликованные области». Я не уверен, что это ошибка или нет, но без нее вы не получите здесь области действия по умолчанию и не сможете создавать новые.

  • Теперь нажмите кнопку Создать, чтобы создать новое приложение.

  • Теперь нажмите на ярлык Пользовательские потоки (политики) в колонке Azure AD B2C - Приложения.
  • Нажмите кнопку + Новый поток пользователей.

  • В колонке Создать поток пользователей на вкладке Рекомендуемые нажмите ссылку «Зарегистрироваться и войти».

  • В колонке Создать убедитесь, что вы заполнили форму, как показано на рисунке ниже. Вы предоставили все необходимые инструкции и информацию в самом лезвии.

  • Теперь вы успешно создали поток пользователей Регистрация и вход. Нажав кнопку Запустить поток пользователя, вы сможете протестировать этот поток.

Это все, что вам нужно на стороне Azure AD B2C. Давайте составим контрольный список.

  1. Учетная запись Azure [✔️]
  2. Клиент Azure AD B2C [✔️]
  3. Приложение Azure AD B2C [✔️]
  4. Пользовательский поток для регистрации и входа [✔️]

Отлично, настройка завершена. Вернемся к нашему приложению для реагирования и немного кодируем.

Установка библиотеки

Теперь вернитесь в свое приложение ReactJS. В терминале введите следующую команду для установки библиотеки. Помните, что мы использовали окно терминала VSCode.

$ npm install react-azure-adb2c --save

React-azure-adb2c - это библиотека, которая поможет вам добавить функциональность или Azure AD B2C в ваше приложение ReactJS. Нажав здесь, вы получите краткую документацию о том, как использовать его в своем приложении ReactJS.

Теперь вы успешно установили библиотеку. В приложении ReactJS щелкните файл index.js, в верхней части файла добавьте следующую строку кода.

Добавьте эту строку кода после импорта для инициализации.

Теперь вам нужно заменить элементы, отмеченные знаком «‹ ›», из значений в вашем приложении Azure AD B2C.

Теперь вернитесь на портал Azure и возьмите следующую информацию.

Чтобы получить значение для клиента, вернитесь в каталог Azure AD B2C. Под обзором скопируйте значение в поле «Доменное имя».

Теперь, чтобы получить applicationId, нажмите на ярлык Applications и скопируйте идентификатор из вновь созданного приложения, в данном случае «ReactJS AADB2C», и замените значение на Поле applicationatoinId.

Теперь нажмите на ярлык Пользовательские потоки (политики), скопируйте имя политики и замените значение в поле signInPolicy.

Теперь поле массива scopes. Этот массив предоставит вашему приложению необходимые разрешения. Эти разрешения позволят вашему приложению ReactJS получить доступ к функциям в Azure AD B2C.

Чтобы получить эту информацию:

  1. Нажмите на ярлык Приложения.
  2. Щелкните свое приложение «ReactJS AADB2C».
  3. Нажмите на ярлык Опубликованные области.
  4. Возьмите значение в столбце FULL SCOPE VALUE для области user_impersonation.
  5. Замените значение в массиве scopes (помните, что это массив, для каждой области вам нужно добавить элемент в этот массив)

Посетите эту ссылку, чтобы получить полную подробную документацию по прицелам.

Отлично, мы почти закончили. Теперь ваш код инициализации должен выглядеть так.

Еще кое-что нужно добавить. Давайте заменим код ReactDOM.render () по умолчанию на этот.

После всех этих изменений ваш файл index.js должен выглядеть так.

Почти готово. Сделаем пробный запуск. В окне терминала введите и выполните следующую команду.

$ npm start

Вы должны увидеть этот экран.

Теперь используйте свои данные для входа на портал Azure или вы можете создать новую учетную запись, нажав «Зарегистрироваться сейчас». Помнить? мы создали поток пользователей как для входа, так и для регистрации. Круто, не правда ли.

После создания новой учетной записи или использования существующей учетной записи вы можете войти в приложение. Но вы можете не увидеть страницу ReactJS по умолчанию. Это могло произойти из-за недостаточных разрешений приложения.

Чтобы исправить это,

  1. Вернитесь на портал Azure
  2. Перейдите в каталог Azure AD B2C.
  3. Нажмите на ярлык Приложения
  4. Щелкните приложение («ReactJS AADB2C»), которое вы только что создали.
  5. Нажмите на ярлык Доступ к API.
  6. Нажмите + Добавить.
  7. Выберите приложение на шаге 4 из раскрывающегося списка Выбрать API.
  8. Выберите «Доступ к этому приложению от имени вошедшего в систему пользователя…»
  9. Нажмите ОК.

Давайте вернемся к нашему приложению ReactJS и обновим или перезапустим его.

Поздравляем !!! Вы сделали.

Давайте возьмем некоторую информацию из Azure AD B2C и отобразим ее под логотипом React.

Вернитесь в терминал и установите следующий пакет.

$ npm install jwt-decode --save

Этот пакет позволит вам декодировать токен JWT из Azure AD B2C и получать информацию внутри него.

Теперь вам нужно вернуться на портал Azure и позволить Azure AD B2C отправить вам эту информацию. Сделать это,

  1. Вернитесь на портал Azure.
  2. Перейдите в свой каталог Azure B2C.
  3. Нажмите на ярлык Пользовательские потоки (политики).
  4. Щелкните по созданной вами политике входа.
  5. Нажмите ссылку Заявки.
  6. Выберите нужные поля, в данном случае я выбрал Город, Страна / Регион, Адреса электронной почты, Отображаемое имя, Имя (это будет Имя), Фамилия (это будет Фамилия).
  7. Нажмите Сохранить.

Вернитесь в приложение ReactJS и щелкните каталог src. Добавьте новый файл. Назовите его Auth.js. Скопируйте и вставьте в файл следующий код.

Теперь откройте App.js и замените этим кодом.

Мы все закончили. Давайте перезапустим наше приложение ReactJS.

$ npm start

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

И возьмите код отсюда.



fiqriismail / tutorialcode
Здесь находится весь код руководства. Участвуйте в разработке fiqriismail / tutorialcode, создав учетную запись на GitHub. github.com



Хорошего дня.