Organisationsdaten: Anmelden eines Benutzers und Abrufen eines Zugriffstokens

Benutzer müssen sich mit der Microsoft Entra-ID authentifizieren, damit Microsoft Graph auf Organisationsdaten zugreifen kann. In dieser Übung erfahren Sie, wie die Komponente des Microsoft Graph-Toolkits mgt-login verwendet werden kann, um Benutzer zu authentifizieren und ein Zugriffstoken abzurufen. Das Zugriffstoken kann dann verwendet werden, um Aufrufe an Microsoft Graph zu tätigen.

Hinweis

Wenn Sie noch nicht mit Microsoft Graph arbeiten, erfahren Sie mehr darüber im Lernpfad "Grundlagen von Microsoft Graph" .

In dieser Übung führen Sie die folgenden Schritte aus:

Erfahren Sie, wie Sie eine Microsoft Entra-ID-App dem Microsoft Graph-Toolkit zuordnen, um Benutzer zu authentifizieren und Organisationsdaten abzurufen.
Erfahren Sie mehr über die Bedeutung von Bereichen.
Erfahren Sie, wie die mgt-login-Komponente des Microsoft Graph-Toolkits verwendet werden kann, um Benutzer zu authentifizieren und ein Zugriffstoken abzurufen.

In der vorherigen Übung haben Sie eine App-Registrierung in Microsoft Entra ID erstellt und den Anwendungsserver und den API-Server gestartet. Sie haben auch die folgenden Werte in der .env Datei aktualisiert (TEAM_ID und CHANNEL_ID sind optional):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Stellen Sie sicher, dass Sie die vorherige Übung abgeschlossen haben, bevor Sie fortfahren.
Wechseln Sie zurück zum Browser (http://localhost:4200), wählen Sie " Anmelden in der Kopfzeile" aus, und melden Sie sich mit einem Administratorbenutzerkonto von Ihrem Microsoft 365-Entwicklermandanten an.

Tipp

Melden Sie sich mit Ihrem Microsoft 365-Entwicklermandantenadministratorkonto an. Sie können andere Benutzer in Ihrem Entwicklermandanten anzeigen, indem Sie zum Microsoft 365 Admin Center wechseln.
Wenn Sie sich zum ersten Mal bei der Anwendung anmelden, werden Sie aufgefordert, den von der Anwendung angeforderten Berechtigungen zuzustimmen. Sie erfahren mehr über diese Berechtigungen (auch als "Bereiche" bezeichnet) im nächsten Abschnitt, während Sie den Code erkunden. Wählen Sie "Annehmen" aus, um den Vorgang fortzusetzen.
Nachdem Sie angemeldet sind, sollte der Name des Benutzers angezeigt werden, der in der Kopfzeile angezeigt wird.

Nachdem Sie sich angemeldet haben, sehen wir uns den Code an, mit dem sich der Benutzer anmelden und ein Zugriffstoken und Benutzerprofil abrufen kann. Sie erfahren mehr über die mgt-login-Webkomponente , die Teil des Microsoft Graph-Toolkits ist.

Tipp

Wenn Sie Visual Studio Code verwenden, können Sie Dateien direkt öffnen, indem Sie Folgendes auswählen:

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

Geben Sie dann den Namen der Datei ein, die Sie öffnen möchten.

Öffnen Sie client/package.json, und beachten Sie, dass die und @microsoft/mgt die @microsoft/mgt-components Pakete in den Abhängigkeiten enthalten sind. Das @microsoft/mgt Paket enthält MSAL-Anbieterfeatures (Microsoft Authentication Library) und Webkomponenten wie mgt-login und andere, die zum Anmelden von Benutzern verwendet und Organisationsdaten abgerufen und angezeigt werden können.
Öffnen Sie client/src/main.ts , und beachten Sie die folgenden Importe aus dem @microsoft/mgt-components Paket. Die importierten Symbole werden verwendet, um die Microsoft Graph-Toolkit-Komponenten zu registrieren, die in der Anwendung verwendet werden.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Scrollen Sie zum Ende der Datei, und notieren Sie sich den folgenden Code:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Dieser Code registriert die mgt-loginKomponenten mgt-search-resultsund Webkomponenten und mgt-person ermöglicht sie für die Verwendung in der Anwendung.
Um die mgt-login-Komponente zum Anmelden von Benutzern zu verwenden, muss auf die Client-ID der Microsoft Entra-ID (die in der env-DateiENTRAID_CLIENT_IDgespeichert ist) verwiesen und verwendet werden.
Öffnen Sie graph.service.ts , und suchen Sie die init() Funktion. Der vollständige Pfad zur Datei ist client/src/app/core/graph.service.ts. Der folgende Import und Code werden angezeigt:
```
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');
    }
}
```
Mit diesem Code wird ein neues Msal2Provider Objekt erstellt, das die Microsoft Entra ID-Client-ID aus ihrer App-Registrierung übergibt und für scopes die die App Zugriff anfordert. Sie scopes werden verwendet, um den Zugriff auf Microsoft Graph-Ressourcen anzufordern, auf die die App zugreifen wird. Nachdem das Msal2Provider Objekt erstellt wurde, wird es dem Providers.globalProvider Objekt zugewiesen, das von Microsoft Graph-Toolkit-Komponenten zum Abrufen von Daten aus Microsoft Graph verwendet wird.
Öffnen Sie header.component.html in Ihrem Editor, und suchen Sie die mgt-login-Komponente . Der vollständige Pfad zur Datei ist client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Die mgt-Login-Komponente ermöglicht die Benutzeranmeldung und bietet Zugriff auf ein Token, das mit Microsoft Graph verwendet wird. Bei erfolgreicher Anmeldung wird das loginCompleted Ereignis ausgelöst, das die loginCompleted() Funktion aufruft. Obwohl mgt-login in einer Angular-Komponente in diesem Beispiel verwendet wird, ist sie mit jeder Beliebigen Webanwendung kompatibel.

Die Anzeige der mgt-login-Komponente hängt von dem Wert ab, auf featureFlags.microsoft365Enabledden true festgelegt wird. Mit diesem benutzerdefinierten Flag wird überprüft, ob die ENTRAID_CLIENT_ID Umgebungsvariable vorhanden ist, um zu bestätigen, dass die Anwendung ordnungsgemäß konfiguriert ist und sich bei Microsoft Entra-ID authentifizieren kann. Die Kennzeichnung wird hinzugefügt, um Fälle zu berücksichtigen, in denen Benutzer nur die KI- oder Kommunikationsübungen innerhalb des Lernprogramms durchführen möchten, anstatt die gesamte Abfolge der Übungen zu verfolgen.
Öffnen Sie header.component.ts , und suchen Sie die loginCompleted Funktion. Diese Funktion wird aufgerufen, wenn das loginCompleted Ereignis ausgegeben wird und das Abrufen des Profils des angemeldeten Benutzers mithilfe Providers.globalProvidervon .
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
In diesem Beispiel wird ein Aufruf der Microsoft Graph-API me ausgeführt, um das Profil des Benutzers abzurufen (me stellt den aktuellen angemeldeten Benutzer dar). Die this.userLoggedIn.emit(me) Code-Anweisung gibt ein Ereignis aus der Komponente aus, um die Profildaten an die übergeordnete Komponente zu übergeben. Die übergeordnete Komponente ist in diesem Fall app.component.ts Datei, die die Stammkomponente für die Anwendung ist.

Weitere Informationen zur mgt-login-Komponente finden Sie in der Dokumentation zum Microsoft Graph-Toolkit .
Nachdem Sie sich nun bei der Anwendung angemeldet haben, sehen wir uns an, wie Organisationsdaten abgerufen werden können.

Nächster Schritt

Organisationsdaten: Abrufen von Dateien, Chats und Senden von Nachrichten an Teams

Feedback

War diese Seite hilfreich?

Last updated on 2025-06-13

Freigeben über

Organisationsdaten: Anmelden eines Benutzers und Abrufen eines Zugriffstokens

Verwenden der Anmeldefunktion

Erkunden des Anmeldecodes

Nächster Schritt

Feedback

Zusätzliche Ressourcen