Настройка проверки подлинности в примере веб-API Node.js с помощью Azure Active Directory B2C

Это важно

Начиная с 1 мая 2025 г. Azure AD B2C больше не будет доступен для приобретения для новых клиентов. Дополнительные сведения см. в разделе "Вопросы и ответы".

В этой статье вы узнаете, как настроить пример веб-приложения Node.js для вызова примера веб-API Node.js. Веб-API должен быть защищен самим Azure AD B2C. В этой настройке веб-приложение, например идентификатор приложения: 1 вызывает веб-API, например идентификатор приложения: 2. Пользователи проходят аутентификацию в веб-приложении для получения токена доступа, который затем используется для вызова защищенного API в интернете.

Обзор

Аутентификация на основе токенов гарантирует, что запросы к веб-API сопровождаются действительным токеном доступа.

Веб-приложение завершает следующие события:

• Он выполняет аутентификацию пользователей с помощью Azure AD B2C.

• Оно получает токен доступа с необходимыми разрешениями (областями) для конечной точки веб-API.

• Он передает маркер доступа в качестве маркера типа Bearer в заголовке аутентификации HTTP-запроса. В нем используется формат:

Authorization: Bearer <token>

Веб-API завершает следующие события:

• Он считывает токен носителя из заголовка авторизации в HTTP запросе.

• Оно проверяет токен.

• Он проверяет разрешения (области) в токене.

• Он отвечает на HTTP-запрос. Если маркер недействителен, конечная точка веб-API отвечает с ошибкой 401 Unauthorized HTTP.

Обзор регистрации приложения

Чтобы включить вход приложения в Azure AD B2C и вызвать веб-API, необходимо зарегистрировать два приложения в каталоге Azure AD B2C.

• Регистрация веб-приложения позволяет приложению выполнять вход с помощью Azure AD B2C. Во время регистрации укажите URI перенаправления. URI перенаправления — это конечная точка, в которую пользователи перенаправляются Azure AD B2C после завершения проверки подлинности. В процессе регистрации приложения создается идентификатор приложения, который также называется идентификатором клиента. Он однозначно идентифицирует ваше приложение. Вы также создадите секрет клиента для приложения. Ваше приложение использует клиентский секрет для обмена кода авторизации на токен доступа.

• Регистрация веб-API позволяет приложению вызывать безопасный веб-API. Регистрация включает области веб-API. Области предоставляют возможностью управления разрешениями для защищенных ресурсов, например веб-API. Вы предоставляете веб-приложению разрешения для областей веб-API. При запросе маркера доступа приложению необходимо указать нужные разрешения в параметре scope запроса.

Регистрации приложения и архитектура приложения описаны на следующем диаграмме.

Предпосылки

• Node.js.

• Visual Studio Code или другой редактор кода.

Шаг 1. Настройка потока пользователя

Если пользователи пытаются войти в приложение, оно инициирует запрос проверки подлинности к конечной точке авторизации через поток пользователя. Соответствующий поток пользователя определяет и контролирует взаимодействие с пользователем. Когда пользователи завершают пользовательский поток, Azure AD B2C создает токен и перенаправляет пользователей обратно в ваше приложение.

Создайте поток пользователя или пользовательскую политику, если вы еще не сделали этого. Повторите эти шаги, чтобы создать три отдельных пользовательских потока:

• Объединенный пользовательский поток входа и регистрации, например susi. Этот пользовательский поток также поддерживает функцию Забыли пароль?.
• Последовательность действий пользователя для редактирования профиля, например edit_profile.
• Процесс сброса пароля, например reset_password.

Azure AD B2C добавляет B2C_1_ в начало имени пользовательского потока. Например, susi преобразуется в B2C_1_susi.

Шаг 2. Регистрация веб-приложения и API

На этом шаге вы создадите регистрацию веб-приложений и веб-API и укажите области веб-API.

Шаг 2.1. Регистрация приложения веб-API

Чтобы создать регистрацию приложения веб-API (идентификатор приложения: 2), выполните следующие действия.

1. Войдите на портал Azure.

2. Убедитесь, что вы используете каталог, содержащий арендатора Azure AD B2C. На панели инструментов портала выберите значок Каталоги и подписки.

3. В настройках портала на странице Каталоги и подписки найдите свой каталог Azure AD B2C в списке Имя каталога и выберите Переключить.

4. В портале Azure найдите и выберите Azure AD B2C.

5. Выберите регистрации приложений и нажмите кнопку "Создать регистрацию".

6. В поле Имя введите имя приложения (например, my-api1). Оставьте значения по умолчанию для URI перенаправления и поддерживаемых типов учетных записей.

7. Выберите Зарегистрировать.

8. Когда регистрация приложения завершится, выберите Обзор.

9. Запишите значение идентификатора приложения (клиента) для дальнейшего использования при настройке веб-приложения.

   

Шаг 2.2. Настройка областей

1. Выберите созданное приложение my-api1 (идентификатор приложения: 2), чтобы открыть страницу Обзор.

2. В разделе "Управление" выберите "Предоставить API".

3. Рядом с полем URI идентификатора приложения щелкните ссылку Задать. Замените значение по умолчанию (уникальный идентификатор) уникальным именем (например, tasks-api), а затем нажмите Сохранить.

   Когда веб-приложение запрашивает маркер доступа для веб-API, оно должно добавить этот URI в качестве префикса для каждой области, определяемой для API.

4. В разделе "Области", определенные этим API, выберите "Добавить область".

5. Чтобы создать область, определяющую доступ для чтения к API, сделайте следующее.

   1. В поле Имя области введите tasks.read.
   2. В качестве отображаемого имени согласия администратора укажите Доступ на чтение к API задач.
   3. В качестве описания согласия администратора введите Предоставляет доступ на чтение к API задач.

6. Выберите "Добавить область".

7. Выберите Добавить область и добавьте область, определяющую доступ для записи к API:

   1. В поле Имя области введите tasks.write.
   2. В качестве отображаемого имени согласия администратора укажите Право записи для API задач.
   3. В качестве описания согласия администратора введите Предоставляет доступ для записи к API задач.

8. Выберите "Добавить область".

Шаг 2.3. Регистрация веб-приложения

Чтобы создать регистрацию SPA, сделайте следующее:

1. Войдите на портал Azure.
2. Если у вас есть доступ к нескольким клиентам, щелкните значок Настройки в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню Каталоги и подписки.
3. Найдите и выберите Azure AD B2C.
4. Выберите регистрации приложений и нажмите кнопку "Создать регистрацию".
5. Введите имя приложения (например, идентификатор приложения: 1).
6. В разделе "Поддерживаемые типы учетных записей" выберите "Учетные записи" в любом поставщике удостоверений или каталоге организации (для проверки подлинности пользователей с помощью потоков пользователей).
7. В разделе URI перенаправления выберите Web и введите в поле текста URL http://localhost:3000/redirect
8. В разделе Разрешения установите флажок Предоставьте согласие администратора для разрешений openid и offline_access.
9. Выберите Зарегистрировать.

Шаг 2.4. Создание секрета клиента

1. На странице регистрации приложений Azure AD B2C выберите созданное приложение, например идентификатор приложения: 1.
2. В меню слева в разделе Управлениевыберите Сертификаты, секреты &.
3. Выберите новый секрет клиента.
4. Введите описание секрета клиента в поле Описание. Например, clientsecret1.
5. В разделе Истекает выберите срок действия секрета, а затем выберите Добавить.
6. Запишите значение секрета, чтобы затем использовать его в коде клиентского приложения. Это значение секрета больше нигде не отображается после закрытия страницы. Это значение используется в качестве секрета приложения в коде приложения.

Шаг 2.5. Предоставление разрешений API веб-приложению

Чтобы предоставить своему приложению (идентификатор приложения: 1) разрешения, выполните следующие действия.

1. Выберите Регистрация приложений, а затем выберите созданное вами приложение (идентификатор приложения: 1).

2. В разделе Управление выберите Разрешения API.

3. В разделе Настроенные разрешения выберите Добавить разрешение.

4. Выберите вкладку Мои API.

5. Выберите API (идентификатор приложения: 2), к которому веб-приложению должен быть предоставлен доступ. Например, введите my-api1.

6. Под Разрешение разверните tasks, а затем выберите ранее определенные области (например, tasks.read и tasks.write).

7. Выберите Добавить разрешения.

8. Выберите Предоставить согласие администратора для <имя арендатора>.

9. Выберите Да.

10. Выберите Обновить, а затем убедитесь, что Разрешено для... отображается в разделе Состояние для обеих областей.

11. В списке настроенных разрешений выберите свою область, а затем скопируйте полное имя области.

    

Шаг 3. Получение примера кода веб-приложения

В этом примере показано, как веб-приложение может использовать Azure AD B2C для регистрации и входа пользователей. Затем приложение получает маркер доступа и выполняет вызов к защищенному веб-API.

Чтобы получить пример кода веб-приложения, можно выполнить одно из следующих действий:

• Скачайте ZIP-файл. Вы извлеките ZIP-файл, чтобы получить пример веб-приложения.

• Клонируйте пример из GitHub, выполнив следующую команду:

  git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git
  

Шаг 3.1. Установка зависимостей приложений

1. Откройте окно консоли и перейдите в каталог, содержащий пример приложения Node.js. Рассмотрим пример.

       cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
   

2. Выполните следующие команды, чтобы установить зависимости приложений:

       npm install && npm update
   

Шаг 3.2. Настройка примера веб-приложения

Откройте веб-приложение в редакторе кода, например Visual Studio Code. Откройте файл call-protected-api в папке .env. Этот файл содержит сведения о поставщике удостоверений Azure AD B2C. Обновите следующие параметры приложения:

Ключ	Ценность
APP_CLIENT_ID	Идентификатор приложения (клиента) для веб-приложения, зарегистрированного на шаге 2.3.
APP_CLIENT_SECRET	Значение секрета клиента для веб-приложения, созданного на шаге 2.4
SIGN_UP_SIGN_IN_POLICY_AUTHORITY	Поток пользователя для входа и регистрации, права которого вы настроили на шаге 1, такой как https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>. Замените <your-tenant-name> именем клиента и <sign-in-sign-up-user-flow-name> именем потока входа и регистрации пользователя, например B2C_1_susi. Узнайте, как получить имя арендатора.
AUTHORITY_DOMAIN	Домен Azure AD B2C, например https://<your-tenant-name>.b2clogin.com. Замените <your-tenant-name> именем клиента.
APP_REDIRECT_URI	URI перенаправления приложения, в котором Azure AD B2C вернет ответы проверки подлинности (маркеры). Он соответствует заданному URI перенаправления при регистрации приложения на портале Azure. Этот URL-адрес должен быть общедоступным. Оставьте значение как есть.
LOGOUT_ENDPOINT	Конечная точка выхода Azure AD B2C, например https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000. Замените <your-tenant-name> именем клиента и <sign-in-sign-up-user-flow-name> именем потока входа и регистрации пользователя, например B2C_1_susi.

После обновления окончательный файл конфигурации должен выглядеть следующим образом:

SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

Шаг 4. Получение примера кода веб-API

Теперь, когда веб-API зарегистрирован и вы определили области действия, настройте код веб-API для интеграции с вашим клиентом Azure AD B2C.

Чтобы получить пример кода веб-API, выполните одно из следующих действий:

• Скачайте ZIP-архив.

• Клонируйте пример проекта веб-API из GitHub, выполнив следующую команду:

  git clone https://github.com/Azure-Samples/active-directory-b2c-javascript-nodejs-webapi.git
  

• Вы также можете перейти непосредственно к проекту Azure-Samples/active-directory-b2c-javascript-nodejs-webapi на сайте GitHub.

Шаг 4.1. Обновление веб-API

1. В вашем редакторе кода откройте файл config.json.

2. Измените значения переменных с помощью потока пользователя и регистрации приложения, созданной ранее:

   • Для tenantName используйте название вашего арендатора, например fabrikamb2c.

   • Для clientIDэтого используйте идентификатор приложения (клиента) для веб-API, созданного на шаге 2.1.

   • Для policyName, используйте имя потока пользователя "Вход и регистрация", который вы создали на шаге 1, например B2C_1_susi.

   После обновления код должен выглядеть примерно так:

   config.json:

   {
       "credentials": {
           "tenantName": "fabrikamb2c",
           "clientID": "Enter_the_Application_Id_Here"
       },
       "policies": {
           "policyName": "B2C_1_susi"
       },
       "resource": {
           "scope": ["tasks.read"]
       },
       "metadata": {
           "authority": "login.microsoftonline.com",
           "discovery": ".well-known/openid-configuration",
           "version": "v2.0"
       },
       "settings": {
           "isB2C": true,
           "validateIssuer": true,
           "passReqToCallback": false,
           "loggingLevel": "info"
       }
   }
   

Шаг 4.2. Установка зависимостей приложений

1. Откройте окно консоли и перейдите в каталог, содержащий пример веб-API Node.js. Рассмотрим пример.

   cd active-directory-b2c-javascript-nodejs-webapi
   

2. Выполните следующие команды:

   npm install && npm update
   

Шаг 5. Запуск веб-приложения и API

Теперь вы готовы протестировать ограниченный доступ веб-приложения к веб-API. Запустите веб-API Node.js и пример веб-приложения на локальном компьютере.

1. В терминале перейдите к примеру веб-API и запустите сервер веб-API Node.js. Например: '

   cd active-directory-b2c-javascript-nodejs-webapi
   node index.js
   

   В окне консоли отобразится номер порта, связанный с размещаемым приложением.

   Listening on port 5000...
   

2. В другом экземпляре терминала перейдите к образцу веб-приложения и запустите сервер веб-приложений Node.js. Рассмотрим пример.

       cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
       node index.js
   

   В окне консоли отобразится номер порта, связанный с размещаемым приложением.

   Msal Node Auth Code Sample app listening on port !3000
   

3. В браузере перейдите к http://localhost:3000. Вы увидите страницу с двумя кнопками, войдите, чтобы вызвать ЗАЩИЩЕННЫЙ API и вызвать АНОНИМНЫЙ API.

   

4. Чтобы вызвать анонимный API, выберите " Или вызвать анонимный API". API отвечает с помощью объекта JSON с date таким ключом, как:

       {"date":"2022-01-27T14:21:22.681Z"}
   

   Анонимный API — это незащищенная конечная точка в веб-API. Для доступа к нему не нужен маркер доступа.

5. Чтобы вызвать защищенную конечную точку API, выберите кнопку Войти для вызова ЗАЩИЩЕННОГО API. Вам будет предложено войти.

6. Введите учетные данные входа, например адрес электронной почты и пароль. Если у вас нет учетной записи, нажмите кнопку "Зарегистрироваться ", чтобы создать учетную запись. После успешного входа или регистрации вы увидите следующую страницу с кнопкой "Вызов ЗАЩИЩЕННОГО API ".

   

7. Чтобы вызвать защищенный API, нажмите кнопку "Вызов защищенного API ". API отвечает с помощью объекта JSON с ключом name, значение которого - ваша фамилия аккаунта, например:

       {"name": "User 1"} 
   

Дальнейшие шаги

Узнайте, как включить проверку подлинности в собственном веб-API с помощью Azure AD B2C