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

Użytkownicy muszą uwierzytelniać się przy użyciu identyfikatora Entra firmy Microsoft, aby program Microsoft Graph uzyskiwał dostęp do danych organizacji. W tym ćwiczeniu zobaczysz, jak składnik zestawu narzędzi Microsoft Graph Toolkit mgt-login może służyć do uwierzytelniania użytkowników i pobierania tokenu dostępu. Token dostępu może następnie służyć do nawiązywania wywołań do programu Microsoft Graph.

Uwaga / Notatka

Jeśli dopiero zaczynasz korzystać z programu Microsoft Graph, możesz dowiedzieć się więcej o nim w ścieżce szkoleniowej Podstawy programu Microsoft Graph .

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

Dowiedz się, jak skojarzyć aplikację Microsoft Entra ID z zestawem narzędzi Microsoft Graph Toolkit w celu uwierzytelniania użytkowników i pobierania danych organizacji.
Dowiedz się więcej o znaczeniu zakresów.
Dowiedz się, jak składnik mgt-login zestawu narzędzi microsoft Graph może służyć do uwierzytelniania użytkowników i pobierania tokenu dostępu.

W poprzednim ćwiczeniu utworzono rejestrację aplikacji w usłudze Microsoft Entra ID i uruchomiono serwer aplikacji i serwer interfejsu API. Zaktualizowano również następujące wartości w .env pliku (TEAM_ID i CHANNEL_ID są opcjonalne):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Przed kontynuowaniem upewnij się, że wykonano poprzednie ćwiczenie .
Wróć do przeglądarki (http://localhost:4200), wybierz pozycję Zaloguj się w nagłówku i zaloguj się przy użyciu konta użytkownika administratora z dzierżawy deweloperów platformy Microsoft 365.

Wskazówka

Zaloguj się przy użyciu konta administratora dzierżawy dewelopera platformy Microsoft 365. Możesz wyświetlić innych użytkowników w dzierżawie deweloperów, przechodząc do centrum administracyjnego platformy Microsoft 365.
Jeśli logujesz się do aplikacji po raz pierwszy, zostanie wyświetlony monit o wyrażenie zgody na uprawnienia żądane przez aplikację. Więcej informacji na temat tych uprawnień (nazywanych również "zakresami") znajdziesz w następnej sekcji podczas eksplorowania kodu. Wybierz pozycję Akceptuj , aby kontynuować.
Po zalogowaniu powinna zostać wyświetlona nazwa użytkownika wyświetlana w nagłówku.

Po zalogowaniu przyjrzyjmy się kodowi użytemu do zalogowania użytkownika i pobraniu tokenu dostępu i profilu użytkownika. Poznasz składnik internetowy mgt-login , który jest częścią zestawu narzędzi Microsoft Graph Toolkit.

Wskazówka

Jeśli używasz programu Visual Studio Code, możesz otwierać pliki bezpośrednio, wybierając pozycję:

Windows/Linux: Ctrl + P
Mac: Cmd + P

Następnie wpisz nazwę pliku, który chcesz otworzyć.

Otwórz klienta/package.json i zwróć uwagę, że @microsoft/mgt pakiety i @microsoft/mgt-components są uwzględnione w zależnościach. Pakiet @microsoft/mgt zawiera funkcje dostawcy biblioteki MSAL (Microsoft Authentication Library) i składniki internetowe, takie jak mgt-login i inne, które mogą służyć do logowania użytkowników i pobierania i wyświetlania danych organizacji.
Otwórz klienta/src/main.ts i zwróć uwagę na następujące importy z @microsoft/mgt-components pakietu. Zaimportowane symbole służą do rejestrowania składników zestawu narzędzi Microsoft Graph Toolkit używanych w aplikacji.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Przewiń do dołu pliku i zanotuj następujący kod:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Ten kod rejestruje mgt-loginskładniki , mgt-search-resultsi mgt-person sieci Web i umożliwia ich używanie w aplikacji.
Aby użyć składnika mgt-login do logowania użytkowników, należy odwołać się i użyć identyfikatora klienta aplikacji Microsoft Entra ID (przechowywanego w pliku env jako ENTRAID_CLIENT_ID).
Otwórz graph.service.ts i znajdź init() funkcję . Pełna ścieżka do pliku to client/src/app/core/graph.service.ts. Zobaczysz następujący import i kod:
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Ten kod tworzy nowy Msal2Provider obiekt, przekazując identyfikator klienta Microsoft Entra ID z rejestracji aplikacji oraz identyfikator scopes , dla którego aplikacja będzie żądać dostępu. Są scopes one używane do żądania dostępu do zasobów programu Microsoft Graph, do których aplikacja będzie uzyskiwać dostęp. Po utworzeniu Msal2Provider obiektu zostanie on przypisany do Providers.globalProvider obiektu, który jest używany przez składniki zestawu narzędzi Microsoft Graph do pobierania danych z programu Microsoft Graph.
Otwórz header.component.html w edytorze i znajdź składnik mgt-login . Pełna ścieżka do pliku to client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Składnik mgt-login umożliwia logowanie użytkownika i zapewnia dostęp do tokenu używanego w programie Microsoft Graph. Po pomyślnym zalogowaniu loginCompleted zdarzenie jest wyzwalane, co wywołuje loginCompleted() funkcję. Mimo że mgt-login jest używany w składniku Angular w tym przykładzie, jest zgodny z dowolną aplikacją internetową.

Wyświetlanie składnika mgt-login zależy od wartości ustawionej featureFlags.microsoft365Enabled na true. Ta niestandardowa flaga sprawdza obecność zmiennej środowiskowej ENTRAID_CLIENT_ID , aby potwierdzić, że aplikacja jest prawidłowo skonfigurowana i może uwierzytelniać się względem identyfikatora Entra firmy Microsoft. Flaga jest dodawana w celu uwzględnienia przypadków, w których użytkownicy zdecydują się wykonać tylko ćwiczenia dotyczące sztucznej inteligencji lub komunikacji w ramach samouczka, zamiast wykonywać całą sekwencję ćwiczeń.
Otwórz header.component.ts i znajdź loginCompleted funkcję. Ta funkcja jest wywoływana, loginCompleted gdy zdarzenie jest emitowane i obsługuje pobieranie profilu zalogowanych użytkowników przy użyciu polecenia Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
W tym przykładzie wykonywane jest wywołanie interfejsu API programu Microsoft Graph me w celu pobrania profilu użytkownika (me reprezentuje bieżącego zalogowanego użytkownika). Instrukcja this.userLoggedIn.emit(me) kodu emituje zdarzenie ze składnika w celu przekazania danych profilu do składnika nadrzędnego. W tym przypadku składnik nadrzędny jest app.component.ts pliku, który jest składnikiem głównym aplikacji.

Aby dowiedzieć się więcej na temat składnika mgt-login , odwiedź dokumentację zestawu narzędzi Microsoft Graph Toolkit .
Po zalogowaniu się do aplikacji przyjrzyjmy się sposobowi pobierania danych organizacji.

Następny krok

Dane organizacyjne: pobieranie plików, czatów i wysyłanie wiadomości do usługi Teams

Sprzężenie zwrotne

Czy ta strona była pomocna?

Last updated on 2025-06-13

Udostępnij za pomocą

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

Korzystanie z funkcji logowania

Eksplorowanie kodu logowania

Następny krok

Sprzężenie zwrotne

Dodatkowe zasoby