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

Применяется: Внешние клиенты (дополнительные сведения)

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

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

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

Расширение Microsoft Entra External ID доступно в 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 External ID. Чтобы развернуть список расширений, может потребоваться выбрать дополнительно ...

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

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

• На странице приветствия "Начало работы с Microsoft Entra External ID" выберите опцию:

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

  

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

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

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

3. Откроется новое окно браузера. Войдите с помощью личной учетной записи, учетной записи Microsoft (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. Добавьте адрес электронной почты нового пользователя и нажмите кнопку "Далее".

Примечание.

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

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 clientId устанавливается как идентификатор вашего приложения, а authority устанавливается на поддомен для вашего нового клиента.

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

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

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

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

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

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

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

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

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

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

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