Краткое руководство. Начало работы с расширением Внешняя идентификация Microsoft Entra для Visual Studio Code

Область применения: клиенты рабочей силы внешние клиенты (дополнительные сведения)

Интеграция проверки подлинности в клиентские и бизнес-приложения важны для защиты ресурсов и данных клиентов. Расширение Внешняя идентификация Microsoft Entra для Visual Studio Code позволяет быстро создавать внешние клиенты, настраивать возможности входа для внешних пользователей и настраивать пример внешнего идентификатора непосредственно в Visual Studio Code. В пошаговом руководстве по расширению вы можете узнать, как настроить настраиваемый, фирменный интерфейс входа для внешних пользователей приложения и загрузить проекты с предварительно настроенными примерами приложений.

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

Внешний идентификатор — это служба, которую можно добавить в подписку Azure. Если у вас уже есть идентификатор, можно легко включить внешний идентификатор. В противном случае настройте бесплатную пробную версию Внешняя идентификация Microsoft Entra в Visual Studio Code и начните с настройки примера приложения.

Установка расширения

Расширение Внешняя идентификация Microsoft Entra доступно в Visual Studio Code Marketplace.

1. Если у вас еще нет Visual Studio Code, скачайте Visual Studio Code и выполните действия по установке.
2. Установите расширение Внешняя идентификация Microsoft Entra для Visual Studio Code изhttps://aka.ms/vscodequickstart/marketplace.

После установки расширения его можно получить с помощью значка на панели действий.

Вы также можете открыть расширение на странице приветствия Visual Studio Code: выберите "Приветствие справки>", а затем в разделе "Пошаговое руководство" выберите "Начать работу с Внешняя идентификация Microsoft Entra". Чтобы развернуть список расширений, может потребоваться выбрать дополнительно ...

Начало работы с настройкой внешнего идентификатора

Расширение Внешняя идентификация Microsoft Entra создает клиент во внешней конфигурации, которая содержит приложение и каталог внешних пользователей. Вы можете добавить этот новый клиент в существующую подписку Azure. Или если у вас нет подписки Azure, создайте пробный клиент, который не требует одного (подробнее).

• На странице приветствия Внешняя идентификация Microsoft Entra выберите вариант:

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

  

Настройка бесплатной пробной версии (предварительная версия)

1. Выберите "Настроить бесплатную пробную версию".

2. В сообщении подтверждения входа нажмите кнопку "Разрешить".

3. Откроется новое окно браузера. Войдите с помощью личная учетная запись, учетной записи Майкрософт (MSA) или учетной записи GitHub. После входа закройте окно браузера.

4. Верните в Visual Studio Code. В меню " Где должен находиться клиент?" , выберите расположение для данных клиента. Этот вариант нельзя изменить позже.

5. Введите уникальное имя клиента.

   

6. Расширение создает клиент пробной версии. Вы можете просмотреть ход выполнения, открыв окно вывода представления>. По завершении процесса создается клиент.

Использование подписки

1. Выберите "Использовать мою подписку".

2. Если с вашей учетной записью связано несколько клиентов, откроется меню "Выбрать каталог ". Выберите каталог (клиент), связанный с подпиской, которую вы хотите использовать.

   

   Примечание.

   Если появится сообщение "Нет доступных подписок", можно настроить бесплатную пробную версию.

3. Откроется страница браузера, в которой можно войти в учетную запись. После входа вернитесь в Visual Studio Code.

4. В меню "Добавить подписку" выберите свою подписку.

5. В меню "Выбор группы ресурсов" выберите группу ресурсов.

6. В меню " Где должен находиться клиент?" , выберите расположение для данных клиента. Этот вариант нельзя изменить позже.

7. Введите имя клиента и нажмите клавишу ВВОД , чтобы создать клиент.

   

   Примечание.

   На создание арендатора может потребоваться до 30 минут. После создания клиента вы можете получить доступ к нему как в Центре администрирования Microsoft Entra, так и в портал Azure.

Настройка входа для пользователей

Приложение можно настроить, чтобы пользователи могли войти с помощью электронной почты и пароля или одноразовый секретный код. Вы также можете разработать внешний вид и чувствовать себя пользователем, добавив логотип компании, изменив цвет фона или изменив макет входа. Эти изменения применяются к виду и интерфейсу всех приложений в этом новом клиенте.

1. В разделе "Настройка входа для пользователей" выберите "Настройка входа и фирменной символики".

   

2. Вам будет предложено войти в новый клиент. Выберите "Разрешить" и в открывшемся окне браузера выберите учетную запись, которую вы используете и войдите. Верните в Visual Studio Code.

3. В меню "Как вы хотите, чтобы пользователи входить в систему" вверху выберите метод входа, который вы хотите сделать доступным для пользователей: электронная почта и пароль или электронная почта и одноразовый секретный код.

   

4. Нажмите ОК.

5. Выберите место, где вы хотите, чтобы страница входа отображалась в окне браузера, выровненная по центру или выровненная по правому краю.

   

6. Выберите цвет фона для страницы регистрации.

   

7. Затем откроется окно проводник, чтобы добавить логотип компании. Перейдите к файлу логотипа компании и нажмите кнопку "Отправить".

   Примечание.

   Требования к изображению приведены следующим образом:

   • Размер изображения 245 x 36 пикселей
   • Максимальный размер файла 50 КБ
   • Тип файла: прозрачный PNG или JPEG

8. Появится сообщение о настройке потока входа. Ход выполнения можно просмотреть в окне вывода. После завершения настройки появится настройка пользовательского потока сообщения.

Попробуйте использовать интерфейс входа

В пошаговом руководстве пошаговые инструкции вы можете просмотреть настроенный интерфейс входа .

1. Нажмите кнопку "Запустить сейчас ". Откроется новая вкладка браузера со страницей регистрации для клиента, которую можно использовать для создания и входа пользователей.

2. Выберите "Нет учетной записи"? Создайте его для создания нового пользователя в клиенте.

3. Добавьте адрес электронной почты нового пользователя и нажмите кнопку "Далее". Не используйте ту же электронную почту, которую вы использовали для создания пробной версии.

4. Выполните действия по регистрации на экране. Как правило, после входа пользователя они перенаправляются обратно в приложение. Однако, так как вы не настроили приложение на этом шаге, вы перенаправляетесь на JWT.ms вместо этого, где можно просмотреть содержимое маркера, выданного во время входа.

Чтобы найти пользователя, созданного на этом шаге, перейдите в Центр администрирования Microsoft Entra и найдите пользователя в списке пользователей.

Настройка и запуск примера приложения

Расширение содержит несколько примеров кода, демонстрирующих реализацию проверки подлинности на разных типах приложений и языках разработки. Примеры включаются для одностраничных приложений (JavaScript, React, Angular) и веб-приложений [Node.js (Express), ASP.NET Core, Python Django, Python Flask, Java Servlet]. Выберите пример из расширения, и расширение автоматически настраивает приложение с помощью интерфейса входа.

1. В разделе "Настройка и запуск примера приложения" нажмите кнопку "Настройка примера приложения".

   

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

   

3. Откроется окно проводник, чтобы выбрать место сохранения примера репозитория. Выберите папку и нажмите кнопку "Скачать репозиторий".

4. После завершения скачивания откроется новая рабочая область проекта Visual Studio Code с скачанным папкой приложения, отображаемой в обозревателе.

5. Откройте новый терминал в окне Visual Studio Code.

6. В верхнем меню выберите "Выполнить запуск>без отладки". В консоли отладки показан ход выполнения скрипта запуска. Существует небольшая задержка при настройке проекта и выполнении скрипта сборки.

Когда расширение загружает приложение, оно автоматически обновляет конфигурацию библиотеки проверки подлинности Майкрософт (MSAL), чтобы подключиться к новому клиенту и использовать настроенный интерфейс. Дополнительная конфигурация не требуется; приложение можно запустить сразу после создания проекта. Например, в файле authConfig идентификатор клиента задается идентификатором приложения, а центр имеет поддомен для нового клиента.

Запуск интерфейса

После завершения установки попробуйте выполнить вход, введя URI перенаправления локального узла для приложения в браузере. URL-адрес перенаправления доступен в файле README.md приложения.

Использование представления обозревателя

В представлении обозревателя отображаются разделы "Управление ресурсами", "Начало работы " и "Справка" и "Отзывы ". Чтобы открыть представление обозревателя, выберите значок расширения, отображаемый на панели действий Visual Studio Code.

Управление ресурсами

В разделе "Управление ресурсами" вы можете просматривать внешние клиенты, зарегистрированные приложения, потоки пользователей и фирменную символику компании и управлять ими. Чтобы просмотреть ресурсы проекта, разверните узлы на левой панели в разделе "Управление ресурсами".

В разделе "Управление ресурсами" можно выбрать ресурс и перейти непосредственно в Центр администрирования Microsoft Entra для управления или настройки. Например, щелкните правой кнопкой мыши приложение и выберите "Открыть" в центре администрирования. Вам будет предложено войти, а затем центр администрирования Microsoft Entra открывается непосредственно на странице регистрации приложения для этого приложения.

Действия по началу работы

В разделе "Начало работы" вы можете получить доступ к документации по бесплатной пробной версии или перейти непосредственно к конфигурации интерфейса входа или примера страниц скачивания приложения без открытия пошагового руководства по расширению.

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

• Чтобы дополнительно настроить клиент и просмотреть полный спектр параметров конфигурации, посетите Центр администрирования Microsoft Entra.
• Сведения о последнем содержимом и ресурсах разработчика см. в центре разработчика внешнего идентификатора.
• Сведения о настройке собственного приложения для проверки подлинности см. по ссылкам руководства . Эти учебники помогают создавать и интегрировать собственные приложения с Внешняя идентификация Microsoft Entra. Кроме того, можно добавлять пользовательские расширения проверки подлинности в определенных точках в потоке проверки подлинности.