Сказ о том, как я настраивал Azure AD B2C на React и React Native Часть 1 (Туториал)

image

Предисловие


Мы разрабатываем кросс платформенное ПО и перед нами возникла задача — «Сделать общую систему авторизации».

Нужно было сделать общую БД пользователей для трех приложений, но при этом у каждого приложения была какая-то своя отличительная черта. Так же у нас есть общие микросервисы и нам хотелось бы, чтобы токен генерировался и проверялся из одного источника. Т.к. мы пользуемся сервисами Azure выбор пал на Azure AD B2C. По мере настройки всего этого добра была выявлена куча подводных камней. Всю историю я поделю на несколько частей:


Создание и настройка приложений на Azure AD B2C


Для создания Azure B2C:

1. на портале Azure в поисковую строку ввести “Azure B2C”

image

2. сделать все шаги из этого туториала

Далее у пользователя есть два варианта:

  1. Использовать базовые пользовательские потоки
  2. Создать кастомный пользовательский поток.

Даже при желании использовать кастомный пользовательский поток — все равно нужно создать приложение на базовом пользовательском потоке


Из моего опыта — в базовых потоках можно сделать большую часть необходимого функционала, а именно:

  1. Кастомную страницу для авторизации.
  2. Выбрать какие данные собирать о пользователе
  3. Какие данные отправлять в токене.

НО

  1. Нельзя отправлять кастомное письмо для подтверждения почты
  2. Нельзя создать поле со своими значениями

Базовые пользовательские потоки


Для создания базового пользовательского потока:

1. перейти в раздел регистрация приложения (предварительный просмотр)

2. Нажать Новая регистрация
Там мы увидим следующую картину:

image

3. Выбрать галочку
Учетные записи в любом каталоге организации или поставщике удостоверений. Выберите этот вариант для проверки подлинности в Azure AD B2C.

Шаги по кастомизации базового потока (нужно только если вы не хотите делать кастомный)
Далее переходим в раздел «Пользовательские потоки» и нажать «Создать поток пользователя». Таким образом мы попадаем на эту страницу:

image

На данной странице выбираем сценарий, по которому Azure будет вести пользователя во время входа \ регистрации и т.д. Далее попадем на эту страницу:

image

О том как работать с базовым потоком можно почитать:

  1. Создание пользовательского потока
  2. Добавление поставщиков удостоверений
  3. Настройка пользовательского интерфейса

Кастомные пользовательские потоки


Для создания кастомных пользовательских потоков нужно перейти в созданный каталог и создать два приложения:

  1. IdentityExperienceFramework
  2. ProxyIdentityExperienceFramework

image

О том как их создать тут.

Я делал все как указано в инструкции «Регистрация приложений (предварительная версия)».

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

В одном из шагов инструкции сказано:
В разделе “Дополнительные параметры” включите “рассматривать приложение как общедоступный клиент (выберите Да)”.

И в приложении ProxyIdentityExperienceFramework должна появиться следующая кнопка:

image


Но она не появится (без нее, к слову, ничего не заработает). Для того, чтобы она появилась нужно выполнить два шага из инструкции для IdentityExperienceFramework в ProxyIdentityExperienceFramework, а именно
1. В разделе Управление выберите Предоставление API.

2. Выберите Добавить область, а затем выберите сохранить и продолжить, чтобы принять идентификатор URI идентификатора приложения по умолчанию.

Далее нужно скачать репозиторий.

Открыть вкладку Identity Experience Framework и загрузить файлы из одной из папок в корне (кроме scenarios) в следующем порядке:
a.TrustFrameworkBase.xml
b.TrustFrameworkExtensions.xml
c.SignUpOrSignin. XML
d.ProfileEdit. XML
e.PasswordReset. XML

Заключение


В результате проделанной работы вы получите подготовленный сервис для удобной работы с вашими пользователями.

Спасибо за внимание!
AdBlock похитил этот баннер, но баннеры не зубы — отрастут

Подробнее
Реклама

Комментарии 0

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

Самое читаемое