Udostępnij za pomocą

Dane organizacyjne: tworzenie rejestracji aplikacji Microsoft Entra ID

Zwiększ produktywność użytkowników, integrując dane organizacyjne (wiadomości e-mail, pliki, czaty i zdarzenia kalendarza) bezpośrednio z aplikacjami niestandardowymi. Korzystając z interfejsów API programu Microsoft Graph i identyfikatora Entra firmy Microsoft, można bezproblemowo pobierać i wyświetlać odpowiednie dane w aplikacjach, co zmniejsza potrzebę przełączania kontekstu przez użytkowników. Niezależnie od tego, czy odwołuje się ona do wiadomości e-mail wysłanej do klienta, przeglądania wiadomości usługi Teams, czy uzyskiwania dostępu do pliku, użytkownicy mogą szybko znaleźć potrzebne informacje bez opuszczania aplikacji, usprawniając proces podejmowania decyzji.

W tym ćwiczeniu wykonasz następujące czynności:

  • Utwórz rejestrację aplikacji Microsoft Entra ID, aby program Microsoft Graph mógł uzyskiwać dostęp do danych organizacji i wprowadzać je do aplikacji.
  • Znajdź team i channel identyfikatory z usługi Microsoft Teams, które są potrzebne do wysyłania wiadomości czatu do określonego kanału.
  • Zaktualizuj plik env projektu przy użyciu wartości z rejestracji aplikacji Microsoft Entra ID.

Omówienie scenariusza chmury firmy Microsoft

Tworzenie rejestracji aplikacji Microsoft Entra ID

  1. Przejdź do witryny Azure Portal i wybierz pozycję Microsoft Entra ID.

  2. Wybierz pozycję Zarządzaj rejestracjami aplikacji,> a następnie pozycję + Nowa rejestracja.

  3. Wypełnij szczegóły nowego formularza rejestracji aplikacji, jak pokazano poniżej, a następnie wybierz pozycję Zarejestruj:

    • Nazwa: microsoft-graph-app
    • Obsługiwane typy kont: konta w dowolnym katalogu organizacyjnym (dowolna dzierżawa identyfikatora entra firmy Microsoft — wielodostępna)
    • Adres URI przekierowania:
      • Wybierz pozycję Aplikacja jednostronicowa (SPA) i wprowadź http://localhost:4200 wartość w polu Identyfikator URI przekierowania .
    • Wybierz pozycję Zarejestruj, aby utworzyć rejestrację aplikacji.

    Formularz rejestracji aplikacji Microsoft Entra ID

  1. Wybierz pozycję Przegląd w menu zasobów i skopiuj Application (client) ID wartość do schowka.

    Identyfikator klienta aplikacji Microsoft Entra ID

Aktualizowanie pliku env projektu

  1. Otwórz plik env w edytorze i przypisz Application (client) ID wartość do ENTRAID_CLIENT_ID.

    ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>

  2. Jeśli chcesz włączyć możliwość wysyłania komunikatu z aplikacji do kanału usługi Teams, zaloguj się do usługi Microsoft Teams przy użyciu konta dzierżawy usługi Microsoft 365 (jest to wymienione w sekcji przed ponownymi pytaniami dotyczącymi tego samouczka).

  3. Po zalogowaniu rozwiń zespół i znajdź kanał, do którego chcesz wysyłać komunikaty z aplikacji. Możesz na przykład wybrać zespół firmy i kanał Ogólny (lub dowolny zespół/kanał, którego chcesz użyć).

    Uzyskiwanie linku do kanału usługi Teams

  4. W nagłówku zespołu kliknij trzy kropki (...) i wybierz pozycję Pobierz link do zespołu.

  5. W linku wyświetlanym w oknie podręcznym identyfikator zespołu to ciąg liter i cyfr po team/. Na przykład w linku "https://teams.microsoft.com/l/team/19%3ae9b9.../"identyfikator zespołu to 19%3ae9b9... maksymalnie do następującego / znaku.

  6. Skopiuj identyfikator zespołu i przypisz go do TEAM_ID pliku env .

  7. W nagłówku kanału kliknij trzy kropki (...) i wybierz pozycję Pobierz link do kanału.

  8. W linku wyświetlanym w oknie podręcznym identyfikator kanału jest ciągiem liter i cyfr po channel/. Na przykład w linku "https://teams.microsoft.com/l/channel/19%3aQK02.../"identyfikator kanału to 19%3aQK02... maksymalnie do następującego / znaku.

  9. Skopiuj identyfikator kanału i przypisz go do CHANNEL_ID pliku env .

  10. Zapisz plik env przed kontynuowaniem.

Uruchamianie/ponowne uruchamianie serwerów aplikacji i interfejsów API

Wykonaj jedną z następujących czynności na podstawie wykonanych ćwiczeń do tego momentu:

  • Jeśli uruchomiono bazę danych, serwer interfejsu API i serwer internetowy we wcześniejszym ćwiczeniu, musisz zatrzymać serwer interfejsu API i serwer internetowy i ponownie uruchomić je, aby pobrać zmiany w pliku env . Możesz pozostawić uruchomioną bazę danych.

    Znajdź okna terminalu z uruchomionym serwerem interfejsu API i serwerem internetowym, a następnie naciśnij CTRL + C , aby je zatrzymać. Uruchom je ponownie, wpisując npm start w każdym oknie terminalu i naciskając Enter. Przejdź do następnego ćwiczenia.

  • Jeśli baza danych, serwer interfejsu API i serwer internetowy nie zostały jeszcze uruchomione, wykonaj następujące kroki:

    1. W poniższych krokach utworzysz trzy okna terminalowe w programie Visual Studio Code.

      Trzy okna terminalowe w programie Visual Studio Code

    2. Kliknij prawym przyciskiem myszy plik env na liście plików programu Visual Studio Code i wybierz polecenie Otwórz w zintegrowanym terminalu. Przed kontynuowaniem upewnij się, że terminal znajduje się w katalogu głównym projektu — openai-acs-msgraph .

    3. Wybierz jedną z następujących opcji, aby uruchomić bazę danych PostgreSQL:

      • Jeśli masz zainstalowany i uruchomiony program Docker Desktop , uruchom polecenie docker-compose up w oknie terminalu i naciśnij Enter.

      • Jeśli masz zainstalowaną i uruchomioną aplikację Podman-compose , uruchom polecenie podman-compose up w oknie terminalu i naciśnij Enter.

      • Aby uruchomić kontener PostgreSQL bezpośrednio przy użyciu programu Docker Desktop, Podman, nerdctl lub innego zainstalowanego środowiska uruchomieniowego kontenera, uruchom następujące polecenie w oknie terminalu:

        • Komputery Mac, Linux lub Podsystem Windows dla systemu 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 z programem 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. Po uruchomieniu kontenera bazy danych naciśnij ikonę + na pasku narzędzi terminalu programu Visual Studio Code, aby utworzyć drugie okno terminalu.

      Visual Studio Code + ikona na pasku narzędzi terminalu.

    5. cd w folderze server/typescript uruchom następujące polecenia, aby zainstalować zależności i uruchomić serwer interfejsu API.

      • npm install
      • npm start

    6. Naciśnij ponownie ikonę + na pasku narzędzi terminalu programu Visual Studio Code, aby utworzyć trzecie okno terminalu.

    7. cd w folderze klienta i uruchom następujące polecenia, aby zainstalować zależności i uruchomić serwer internetowy.

      • npm install
      • npm start

    8. Zostanie uruchomiona przeglądarka i nastąpi przekierowanie do http://localhost:4200.

      Zrzut ekranu aplikacji z włączoną usługą Azure OpenAI

Następny krok

Dane organizacyjne: logowanie użytkownika i uzyskiwanie tokenu dostępu

  • Last updated on