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


Организационные данные: создание регистрации приложения Microsoft Entra ID

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

В этом упражнении вы выполните следующие действия.

  • Создайте регистрацию приложения идентификатора Microsoft Entra, чтобы Microsoft Graph смог получить доступ к данным организации и перенести его в приложение.
  • Поиск team и channel идентификаторы из Microsoft Teams, необходимые для отправки сообщений чата в определенный канал.
  • Обновите env-файл проекта со значениями из регистрации приложения идентификатора Microsoft Entra.

Обзор сценария Microsoft Cloud

Создание регистрации приложений идентификатора записи Майкрософт

  1. Перейдите на портал Azure и выберите идентификатор Microsoft Entra.

  2. Выберите "Управление>App", а затем + Новая регистрация.

  3. Введите сведения о новой форме регистрации приложения, как показано ниже, и нажмите кнопку "Зарегистрировать".

    • Имя: microsoft-graph-app
    • Поддерживаемые типы учетных записей: учетные записи в любом каталоге организации (любой клиент идентификатора Microsoft Entra — Multitenant)
    • URI перенаправления:
      • Выберите одностраничные приложения (SPA) и введите http://localhost:4200 в поле URI перенаправления .
    • Щелкните Зарегистрировать, чтобы создать регистрацию приложения.

    Форма регистрации приложения идентификатора Microsoft Entra

  1. Выберите "Обзор" в меню ресурсов и скопируйте Application (client) ID значение в буфер обмена.

    Идентификатор клиента приложения Microsoft Entra ID

Обновление env-файла проекта

  1. Откройте env-файл в редакторе и присвойте ему Application (client) ID значение ENTRAID_CLIENT_ID.

    ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
    
  2. Если вы хотите включить возможность отправки сообщения из приложения в канал Teams, войдите в Microsoft Teams с помощью учетной записи клиента разработки Microsoft 365 (это упоминается в предварительном запросе для руководства).

  3. После входа разверните команду и найдите канал, в который нужно отправить сообщения из приложения. Например, можно выбрать команду компании и канал "Общие " (или любой другой командой или каналом, который вы хотите использовать).

    Получение ссылки на канал Teams

  4. В заголовке команды щелкните три точки (...) и выберите "Получить ссылку на команду".

  5. В появившемся окне ссылки идентификатор команды — это строка букв и чисел после team/. Например, в ссылке "https://teams.microsoft.com/l/team/19%3ae9b9.../"идентификатор команды равен 19%3ae9b9... до следующего / символа.

  6. Скопируйте идентификатор команды и назначьте его TEAM_ID в env-файле .

  7. В заголовке канала щелкните три точки (...) и выберите "Получить ссылку на канал".

  8. В всплывающем окне отображается ссылка, идентификатор канала — это строка букв и чисел после channel/. Например, в ссылке "https://teams.microsoft.com/l/channel/19%3aQK02.../"идентификатор канала равен 19%3aQK02... до следующего / символа.

  9. Скопируйте идентификатор канала и назначьте его CHANNEL_ID в env-файле .

  10. Сохраните env-файл перед продолжением.

Запуск и перезапуск серверов приложений и API

Выполните одно из следующих действий на основе упражнений, которые вы выполнили до этой точки:

  • Если вы запустили базу данных, сервер API и веб-сервер в предыдущем упражнении, необходимо остановить сервер API и веб-сервер и перезапустить их, чтобы получить изменения в env-файле . Базу данных можно оставить запущенной.

    Найдите окна терминала с сервером API и веб-сервером и нажмите клавиши CTRL+C , чтобы остановить их. Запустите их снова, введя npm start в каждом окне терминала и нажав клавишу ВВОД. Перейдите к следующему упражнению.

  • Если вы еще не запустили базу данных, сервер API и веб-сервер, выполните следующие действия.

    1. В следующих шагах вы создадите три окна терминала в Visual Studio Code.

      Три окна терминала в Visual Studio Code

    2. Щелкните правой кнопкой мыши env-файл в списке файлов Visual Studio Code и выберите "Открыть в интегрированном терминале". Перед продолжением убедитесь, что терминал находится в корне проекта — openai-acs-msgraph .

    3. Выберите один из следующих параметров, чтобы запустить базу данных PostgreSQL:

      • Если установлен и запущен Docker Desktop , запустите docker-compose up в окне терминала и нажмите клавишу ВВОД.

      • Если у вас есть Podman с установленным и запущенным podman-compose , запустите podman-compose up в окне терминала и нажмите клавишу ВВОД.

      • Чтобы запустить контейнер PostgreSQL непосредственно с помощью Docker Desktop, Podman, nerdctl или другой установленной среды выполнения контейнера, выполните следующую команду в окне терминала:

        • Mac, Linux или подсистема Windows для Linux (WSL):

          [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
          
        • Windows с PowerShell:

          [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
          
    4. После запуска контейнера базы данных нажмите + значок на панели инструментов терминала Visual Studio Code, чтобы создать второе окно терминала.

      Значок Visual Studio Code + на панели инструментов терминала.

    5. cd в папку server/typescript и выполните следующие команды, чтобы установить зависимости и запустить сервер API.

      • npm install
      • npm start
    6. + Нажмите значок еще раз на панели инструментов терминала Visual Studio Code, чтобы создать третье окно терминала.

    7. cd в папку клиента и выполните следующие команды, чтобы установить зависимости и запустить веб-сервер.

      • npm install
      • npm start
    8. Откроется браузер, в который вы http://localhost:4200перейдете.

      Снимок экрана приложения с включенным Azure OpenAI

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