Organisationsdata: Logga in en användare och hämta en åtkomsttoken

2025-06-13

Användarna måste autentisera med Microsoft Entra-ID för att Microsoft Graph ska få åtkomst till organisationsdata. I den här övningen får du se hur Komponenten för Microsoft Graph Toolkit mgt-login kan användas för att autentisera användare och hämta en åtkomsttoken. Åtkomsttoken kan sedan användas för att göra anrop till Microsoft Graph.

Anmärkning

Om du inte har använt Microsoft Graph tidigare kan du lära dig mer om det i utbildningsvägen Grunderna i Microsoft Graph .

I den här övningen ska du:

Lär dig hur du associerar en Microsoft Entra-ID-app med Microsoft Graph Toolkit för att autentisera användare och hämta organisationsdata.
Lär dig mer om omfattningens betydelse.
Lär dig hur Microsoft Graph Toolkits mgt-login-komponent kan användas för att autentisera användare och hämta en åtkomsttoken.

I föregående övning skapade du en appregistrering i Microsoft Entra-ID och startade programservern och API-servern. Du har också uppdaterat följande värden i .env filen (TEAM_ID och CHANNEL_ID är valfria):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Kontrollera att du har slutfört föregående övning innan du fortsätter.
Gå tillbaka till webbläsaren (http://localhost:4200), välj Logga in i rubriken och logga in med ett administratörsanvändarkonto från din Microsoft 365 Developer-klientorganisation.

Tips/Råd

Logga in med ditt administratörskonto för Microsoft 365-utvecklarens klientorganisation. Du kan visa andra användare i utvecklarklientorganisationen genom att gå till administrationscentret för Microsoft 365.
Om du loggar in på programmet för första gången uppmanas du att godkänna de behörigheter som begärs av programmet. Du får lära dig mer om dessa behörigheter (kallas även "omfång") i nästa avsnitt när du utforskar koden. Välj Acceptera för att fortsätta.
När du har loggat in bör du se namnet på användaren som visas i rubriken.

Nu när du har loggat in ska vi titta på koden som används för att logga in på användaren och hämta en åtkomsttoken och en användarprofil. Du får lära dig mer om webbkomponenten mgt-login som ingår i Microsoft Graph Toolkit.

Tips/Råd

Om du använder Visual Studio Code kan du öppna filer direkt genom att välja:

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

Skriv sedan namnet på den fil som du vill öppna.

Öppna klienten/package.json och observera att paketen @microsoft/mgt och @microsoft/mgt-components ingår i beroendena. Paketet @microsoft/mgt innehåller MSAL-providerfunktioner (Microsoft Authentication Library) och webbkomponenter som mgt-login och andra som kan användas för att logga in användare och hämta och visa organisationsdata.
Öppna klienten/src/main.ts och lägg märke till följande importer från @microsoft/mgt-components paketet. De importerade symbolerna används för att registrera de Microsoft Graph Toolkit-komponenter som används i programmet.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Rulla längst ned i filen och notera följande kod:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Den här koden registrerar webbkomponenterna mgt-login, mgt-search-resultsoch mgt-person och gör att de kan användas i programmet.
Om du vill använda komponenten mgt-login för att logga in användare måste Microsoft Entra ID-appens klient-ID (lagras i .env-filen som ENTRAID_CLIENT_ID) refereras till och användas.

Öppna graph.service.ts och leta upp init() funktionen. Den fullständiga sökvägen till filen är client/src/app/core/graph.service.ts. Följande import och kod visas:

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');
    }
}

Den här koden skapar ett nytt Msal2Provider objekt som skickar Microsoft Entra-ID-klient-ID:t från din appregistrering och scopes som appen begär åtkomst för. scopes Används för att begära åtkomst till Microsoft Graph-resurser som appen kommer åt. När objektet Msal2Provider har skapats tilldelas det objektet Providers.globalProvider , som används av Microsoft Graph Toolkit-komponenter för att hämta data från Microsoft Graph.

Öppna header.component.html i redigeringsprogrammet och leta upp komponenten mgt-login . Den fullständiga sökvägen till filen är client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Komponenten mgt-login aktiverar användarinloggning och ger åtkomst till en token som används med Microsoft Graph. Vid lyckad inloggning loginCompleted utlöses händelsen, som anropar loginCompleted() funktionen. Även om mgt-login används i en Angular-komponent i det här exemplet är den kompatibel med alla webbprogram.

Visningen av komponenten mgt-login beror på värdet featureFlags.microsoft365Enabled som anges till true. Den här anpassade flaggan söker efter förekomsten av ENTRAID_CLIENT_ID miljövariabeln för att bekräfta att programmet är korrekt konfigurerat och kan autentisera mot Microsoft Entra-ID. Flaggan läggs till för att hantera fall där användarna väljer att endast slutföra AI- eller kommunikationsövningarna i självstudien, i stället för att följa hela sekvensen med övningar.
Öppna header.component.ts och leta upp loginCompleted funktionen. Den här funktionen anropas när loginCompleted händelsen genereras och hanterar hämtning av den inloggade användarens profil med .Providers.globalProvider
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
I det här exemplet görs ett anrop till Microsoft Graph me API för att hämta användarens profil (me representerar den aktuella inloggade användaren). Kodsatsen this.userLoggedIn.emit(me) genererar en händelse från komponenten för att skicka profildata till den överordnade komponenten. Den överordnade komponenten är app.component.ts fil i det här fallet, som är rotkomponenten för programmet.

Mer information om komponenten mgt-login finns i dokumentationen för Microsoft Graph Toolkit .
Nu när du har loggat in på programmet ska vi titta på hur organisationsdata kan hämtas.

Nästa steg

Organisationsdata: Hämta filer, chattar och skicka meddelanden till Teams

Dela via

Organisationsdata: Logga in en användare och hämta en åtkomsttoken

Använda inloggningsfunktionen

Utforska inloggningskoden

Nästa steg

Feedback

Ytterligare resurser