Organisatiegegevens: aanmelden bij een gebruiker en een toegangstoken ophalen

2025-06-13

Gebruikers moeten zich verifiëren met de Microsoft Entra-id, zodat Microsoft Graph toegang heeft tot organisatiegegevens. In deze oefening ziet u hoe het onderdeel van mgt-login de Microsoft Graph Toolkit kan worden gebruikt om gebruikers te verifiëren en een toegangstoken op te halen. Het toegangstoken kan vervolgens worden gebruikt om aanroepen te doen naar Microsoft Graph.

Opmerking

Als u geen kennis hebt met Microsoft Graph, kunt u er meer informatie over vinden in het leertraject Basisinformatie over Microsoft Graph .

In deze oefening gaat u het volgende doen:

Leer hoe u een Microsoft Entra ID-app koppelt aan de Microsoft Graph Toolkit om gebruikers te verifiëren en organisatiegegevens op te halen.
Meer informatie over het belang van bereiken.
Meer informatie over hoe het mgt-login-onderdeel van de Microsoft Graph Toolkit kan worden gebruikt om gebruikers te verifiëren en een toegangstoken op te halen.

In de vorige oefening hebt u een app-registratie gemaakt in Microsoft Entra ID en de toepassingsserver en API-server gestart. U hebt ook de volgende waarden in het .env bestand bijgewerkt (TEAM_ID en CHANNEL_ID zijn optioneel):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Zorg ervoor dat u de vorige oefening hebt voltooid voordat u doorgaat.
Ga terug naar de browser (http://localhost:4200), selecteer Aanmelden in de header en meld u aan met een beheerdersaccount van uw Microsoft 365 Developer-tenant.

Aanbeveling

Meld u aan met uw microsoft 365-tenantbeheerdersaccount voor ontwikkelaars. U kunt andere gebruikers in uw ontwikkelaarstenant bekijken door naar het Microsoft 365-beheercentrum te gaan.
Als u zich voor het eerst aanmeldt bij de toepassing, wordt u gevraagd toestemming te geven voor de machtigingen die door de toepassing zijn aangevraagd. In de volgende sectie leert u meer over deze machtigingen (ook wel 'bereiken' genoemd) terwijl u de code verkent. Selecteer Accepteren om door te gaan.
Zodra u bent aangemeld, ziet u de naam van de gebruiker die in de koptekst wordt weergegeven.

Nu u zich hebt aangemeld, gaan we kijken naar de code die wordt gebruikt om de gebruiker aan te melden en een toegangstoken en gebruikersprofiel op te halen. U vindt meer informatie over het webonderdeel mgt-login dat deel uitmaakt van de Microsoft Graph Toolkit.

Aanbeveling

Als u Visual Studio Code gebruikt, kunt u bestanden rechtstreeks openen door het volgende te selecteren:

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

Typ vervolgens de naam van het bestand dat u wilt openen.

Open de client/package.json en u ziet dat de @microsoft/mgt en @microsoft/mgt-components pakketten zijn opgenomen in de afhankelijkheden. Het @microsoft/mgt pakket bevat MSAL-providerfuncties (Microsoft Authentication Library) en webonderdelen, zoals mgt-login en anderen die kunnen worden gebruikt om gebruikers aan te melden en organisatiegegevens op te halen en weer te geven.
Open client/src/main.ts en let op de volgende importbewerkingen uit het @microsoft/mgt-components pakket. De geïmporteerde symbolen worden gebruikt om de Microsoft Graph Toolkit-onderdelen te registreren die in de toepassing worden gebruikt.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Schuif naar de onderkant van het bestand en noteer de volgende code:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Met deze code worden de mgt-login, mgt-search-resultsen mgt-person webonderdelen geregistreerd en ingeschakeld voor gebruik in de toepassing.
Als u het mgt-login-onderdeel wilt gebruiken om gebruikers aan te melden, moet naar de client-id van de Microsoft Entra ID-app (opgeslagen in het .env-bestand als ENTRAID_CLIENT_ID) worden verwezen en gebruikt.
Open graph.service.ts en zoek de init() functie. Het volledige pad naar het bestand is client/src/app/core/graph.service.ts. U ziet de volgende import en code:
```
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');
    }
}
```
Met deze code wordt een nieuw Msal2Provider object gemaakt, waarbij de Client-id van Microsoft Entra ID wordt doorgegeven vanuit uw app-registratie en waarvoor scopes de app toegang aanvraagt. Deze scopes worden gebruikt om toegang aan te vragen tot Microsoft Graph-resources waartoe de app toegang heeft. Nadat het Msal2Provider object is gemaakt, wordt het toegewezen aan het Providers.globalProvider object, dat wordt gebruikt door Microsoft Graph Toolkit-onderdelen om gegevens op te halen uit Microsoft Graph.
Open header.component.html in uw editor en zoek het onderdeel mgt-login . Het volledige pad naar het bestand is client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Met het mgt-login-onderdeel kunnen gebruikers zich aanmelden en toegang krijgen tot een token dat wordt gebruikt met Microsoft Graph. Wanneer u zich hebt aangemeld, wordt de loginCompleted gebeurtenis geactiveerd, waarmee de loginCompleted() functie wordt aangeroepen. Hoewel mgt-login wordt gebruikt in een Angular-onderdeel in dit voorbeeld, is deze compatibel met elke webtoepassing.

Weergave van het mgt-login-onderdeel is afhankelijk van de featureFlags.microsoft365Enabled waarde die wordt ingesteld op true. Met deze aangepaste vlag wordt gecontroleerd op de aanwezigheid van de ENTRAID_CLIENT_ID omgevingsvariabele om te bevestigen dat de toepassing correct is geconfigureerd en kan worden geverifieerd met Microsoft Entra ID. De vlag wordt toegevoegd voor gevallen waarin gebruikers ervoor kiezen om alleen de AI- of communicatieoefeningen in de zelfstudie te voltooien, in plaats van de hele reeks oefeningen te volgen.
Open header.component.ts en zoek de loginCompleted functie. Deze functie wordt aangeroepen wanneer de loginCompleted gebeurtenis wordt verzonden en verwerkt het ophalen van het profiel van de aangemelde gebruiker met behulp van Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
In dit voorbeeld wordt een aanroep uitgevoerd naar de Microsoft Graph me API om het profiel van de gebruiker op te halen (me vertegenwoordigt de huidige aangemelde gebruiker). De this.userLoggedIn.emit(me) code-instructie verzendt een gebeurtenis van het onderdeel om de profielgegevens door te geven aan het bovenliggende onderdeel. Het bovenliggende onderdeel is app.component.ts bestand in dit geval. Dit is het hoofdonderdeel voor de toepassing.

Ga naar de documentatie van Microsoft Graph Toolkit voor meer informatie over het mgt-login-onderdeel.
Nu u zich hebt aangemeld bij de toepassing, gaan we kijken hoe organisatorische gegevens kunnen worden opgehaald.

Volgende stap

Organisatiegegevens: Bestanden, chats ophalen en berichten verzenden naar Teams

Delen via

Organisatiegegevens: aanmelden bij een gebruiker en een toegangstoken ophalen

De aanmeldingsfunctie gebruiken

De aanmeldingscode verkennen

Volgende stap

Feedback

Aanvullende resources