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

Предисловие

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

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

• Часть 1: Создание и настройка приложений на Azure AD B2C
• Часть 2: Работа с Identity Framework Experience
• Часть 2.1 Базовая настройка
• Часть 2.2 Создание кастомизированного письма для регистрации
• Часть 3: Подключение приложения React
• Часть 4: Подключение приложения React Native
• Часть 5: Подключение и настройка бэкэнда на .NET Core 3

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

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

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

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

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

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

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

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

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

НО

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

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

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

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

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

3. Выбрать галочку

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

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

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

1. IdentityExperienceFramework
2. ProxyIdentityExperienceFramework

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

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

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

В одном из шагов инструкции сказано:

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

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

Но она не появится (без нее, к слову, ничего не заработает). Для того, чтобы она появилась нужно выполнить два шага из инструкции для 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

Заключение

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

Спасибо за внимание!