Предисловие

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

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

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

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

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

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

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

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

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

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

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

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

НО

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

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

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

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

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

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

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

Шаги по кастомизации базового потока (нужно только если вы не хотите делать кастомный)

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

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

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

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

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

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

IdentityExperienceFramework
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

Заключение

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

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

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