Поделиться через

Регистрация одностраничного приложения в Azure Active Directory B2C

  • Статья

Чтобы приложения могли взаимодействовать с Azure Active Directory B2C (Azure AD B2C), их нужно зарегистрировать в клиенте, которым вы управляете. В этом руководстве показано, как зарегистрировать одностраничное приложение (SPA) с помощью портала Azure.

Общие сведения о способах проверки подлинности

Многие современные веб-приложения создаются как клиентские одностраничные приложения. Разработчики пишут их с помощью JavaScript или платформы одностраничных приложений, например, Angular, Vue и React. Эти приложения работают в веб-браузере и имеют характеристики проверки подлинности, отличные от традиционных серверных веб-приложений.

Azure AD B2C предоставляет два способа входа одностраничных приложений в систему пользователей и получать маркеры для доступа к серверным службам или веб-API:

Поток кода авторизации (с PKCE)

Поток кода авторизации OAuth 2.0 (с PKCE) позволяет приложению обмениваться кодом авторизации для маркеров идентификации, представляющих пользователей, прошедших проверку подлинности, и маркеров доступа, необходимых для вызова защищенных интерфейсов API. Кроме того, он возвращает маркеры обновления, которые предоставляют долгосрочный доступ к ресурсам от имени пользователей без необходимости взаимодействия с этими пользователями.

Рекомендуем использовать этот подход. Наличие маркеров обновления с ограниченным сроком действия позволяет приложению учитывать современные ограничения браузеров в отношении конфиденциальности файлов cookie, например Safari ITP.

Чтобы воспользоваться преимуществами этого потока, приложение может использовать библиотеку проверки подлинности, которая поддерживает его, например MSAL.js.

Single-page applications-auth

Поток неявного предоставления

Некоторые библиотеки, например, MSAL.js 1. x, поддерживают только поток неявного предоставления разрешения. Поддержка потока неявного предоставления разрешения также может быть реализована в вашем приложении. В этих случаях Azure AD B2C поддерживает поток неявного предоставления разрешения OAuth 2.0. Поток неявного предоставления позволяет приложению получать маркеры ID и Доступа. В отличие от потока кода авторизации, поток неявного предоставления разрешения не возвращает маркер обновления.

Single-page applications-implicit

Этот поток проверки подлинности не содержит сценарии приложений, в которых используются кроссплатформенные среды JavaScript, такие как Electron и React-Native. В этих сценариях требуются дополнительные возможности для взаимодействия с собственными платформами.

Необходимые компоненты

  • Если у вас нет подписки Azure, создайте бесплатную учетную запись, прежде чем приступить к работе.

  • Если у вас нет клиента Azure AD B2C, создайте его. Вы можете использовать имеющийся клиент Azure Active Directory B2C.

Регистрация одностраничного приложения

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

  2. Если у вас есть доступ к нескольким клиентам, выберите значок Параметры в верхнем меню, чтобы переключиться на клиент Azure AD B2C из меню каталогов и подписок.

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

  4. Щелкните Регистрация приложений и выберите Новая регистрация.

  5. Введите имя приложения. Например, spaapp1.

  6. В разделе Поддерживаемые типы учетных записей выберите элемент Accounts in any identity provider or organizational directory (for authenticating users with user flows) (Учетные записи в любом поставщике удостоверений или каталоге организации (для аутентификации пользователей с использованием сведений о маршрутах пользователей)).

  7. В разделе URI перенаправления выберите Одностраничное приложение (SPA), а затем введите https://jwt.ms в текстовом поле URL-адреса.

    URI перенаправления — это конечная точка, в которой сервер авторизации (Azure AD B2C, в данном случае) отправляет пользователю после завершения взаимодействия с пользователем. Кроме того, после успешной авторизации в конечную точку URI перенаправления отправляются маркер доступа или код авторизации. В рабочем приложении обычно это общедоступная конечная точка, в которой работает приложение, например https://contoso.com/auth-response. При тестировании (например, в рамках этого руководства) можно задать для него значение https://jwt.ms. Это веб-приложение Майкрософт, которое отображает декодированное содержимое маркера (содержимое маркера никогда не покидает браузер). Во время разработки приложения можно добавить конечную точку, в которой приложение будет ожидать передачи данных локально, например http://localhost:5000. URI перенаправления в зарегистрированных приложениях можно добавлять и изменять в любое время.

    На URI перенаправления налагаются следующие ограничения.

    • URL-адрес ответа должен начинаться со схемы https, если не используется localhost.
    • В URL-адресе ответа учитывается регистр. Его регистр должен соответствовать регистру URL-пути выполняющегося приложения. Например, если в состав пути приложения входит .../abc/response-oidc, не указывайте .../ABC/response-oidc в URL-адресе ответа. Так как веб-браузер обрабатывает пути с учетом регистра, файлы cookie, связанные с .../abc/response-oidc, могут быть исключены при перенаправлении на не совпадающий по регистру знаков URL-адрес .../ABC/response-oidc.

  8. В разделе Разрешения установите флажок Предоставьте согласие администратора для разрешений openid и offline_access.

  9. Выберите Регистр.

Включение потока неявного предоставления

Если вы используете MSAL.js 1.3 или более раннюю версию с неявным потоком предоставления в приложении SPA или настраиваете https://jwt.ms/ приложение для тестирования потока пользователя или настраиваемой политики, необходимо включить неявный поток предоставления в регистрации приложения:

  1. В меню слева в разделе Управлениевыберите Проверка подлинности.

  2. В разделе Потоки неявного предоставления разрешений и гибридные потоки установите флажки Маркеры доступа (используемые для потоков неявного предоставления разрешений) и Маркеры идентификатора (используемые для потоков неявного предоставления разрешений и гибридных потоков).

  3. Выберите Сохранить.

Если приложение использует MSAL.js 2.0 или более поздней версии, не включайте поток неявного предоставления разрешения, так как MSAL.js 2.0 и более поздней версии поддерживает поток кода авторизации с использованием PKCE.

Перенос из потока неявного предоставления

Если у вас есть приложение, использующее поток неявного предоставления разрешения, мы рекомендуем перейти на использование потока кода авторизации с помощью поддерживающей его платформы, например, MSAL.js 2.0 и более поздней версии.

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

  1. В меню слева в разделе Управлениевыберите Проверка подлинности.
  2. В разделе "Неявное предоставление" отмените выбор маркеров доступа и маркеров идентификатора проверка поля.
  3. Выберите Сохранить.

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

Следующие шаги

Узнайте, как создать потоки пользователей в Azure Active Directory B2C.