Hinzufügen der Benutzerauthentifizierung zu JavaScript-Apps für Microsoft Graph

In diesem Artikel fügen Sie der Anwendung, die Sie unter Erstellen von JavaScript-Apps mit Microsoft Graph erstellt haben, die Benutzerauthentifizierung hinzu. Anschließend verwenden Sie die Microsoft Graph-Benutzer-API, um den authentifizierten Benutzer abzurufen.

Hinzufügen der Benutzerauthentifizierung

Die Azure Identity-Clientbibliothek für JavaScript bietet viele TokenCredential Klassen, die OAuth2-Tokenflows implementieren. Die Microsoft Graph-JavaScript-Clientbibliothek verwendet diese Klassen, um Aufrufe von Microsoft Graph zu authentifizieren.

Konfigurieren des Graph-Clients für die Benutzerauthentifizierung

Verwenden Sie zunächst die DeviceCodeCredential -Klasse, um mithilfe des Gerätecodeflows ein Zugriffstoken anzufordern.

Öffnen Sie graphHelper.js , und ersetzen Sie den Inhalt durch Folgendes.

import 'isomorphic-fetch';
import { DeviceCodeCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';

let _settings = undefined;
let _deviceCodeCredential = undefined;
let _userClient = undefined;

export function initializeGraphForUserAuth(settings, deviceCodePrompt) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  _deviceCodeCredential = new DeviceCodeCredential({
    clientId: settings.clientId,
    tenantId: settings.tenantId,
    userPromptCallback: deviceCodePrompt,
  });

  const authProvider = new TokenCredentialAuthenticationProvider(
    _deviceCodeCredential,
    {
      scopes: settings.graphUserScopes,
    },
  );

  _userClient = Client.initWithMiddleware({
    authProvider: authProvider,
  });
}

Ersetzen Sie die leere initializeGraph Funktion in index.js durch Folgendes.

function initializeGraph(settings) {
  initializeGraphForUserAuth(settings, (info) => {
    // Display the device code message to
    // the user. This tells them
    // where to go to sign in and provides the
    // code to use.
    console.log(info.message);
  });
}

Dieser Code deklariert zwei private Eigenschaften, ein DeviceCodeCredential -Objekt und ein Client -Objekt. Die initializeGraphForUserAuth Funktion erstellt eine neue instance von DeviceCodeCredentialund verwendet dann diesen instance, um eine neue instance von Clientzu erstellen. Jedes Mal, wenn ein API-Aufruf an Microsoft Graph über _userClienterfolgt, werden die bereitgestellten Anmeldeinformationen verwendet, um ein Zugriffstoken abzurufen.

Testen von DeviceCodeCredential

Fügen Sie als Nächstes Code hinzu, um ein Zugriffstoken DeviceCodeCredentialvon abzurufen.

Fügen Sie graphHelper.jsdie folgende Funktion hinzu.

export async function getUserTokenAsync() {
  // Ensure credential isn't undefined
  if (!_deviceCodeCredential) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Ensure scopes isn't undefined
  if (!_settings?.graphUserScopes) {
    throw new Error('Setting "scopes" cannot be undefined');
  }

  // Request token with given scopes
  const response = await _deviceCodeCredential.getToken(
    _settings?.graphUserScopes,
  );
  return response.token;
}

Ersetzen Sie die leere displayAccessTokenAsync Funktion in index.js durch Folgendes.

async function displayAccessTokenAsync() {
  try {
    const userToken = await getUserTokenAsync();
    console.log(`User token: ${userToken}`);
  } catch (err) {
    console.log(`Error getting user access token: ${err}`);
  }
}

Führen Sie den folgenden Befehl in Ihrer CLI im Stammverzeichnis Ihres Projekts aus.
```
node index.js
```

Geben Sie ein 1 , wenn Sie zur Eingabe einer Option aufgefordert werden. Die Anwendung zeigt eine URL und den Gerätecode an.

JavaScript Graph Tutorial

[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 1
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and
enter the code RK987NX32 to authenticate.

Öffnen Sie einen Browser, und navigieren Sie zu der angezeigten URL. Geben Sie den angegebenen Code ein, und melden Sie sich an.

Wichtig

Achten Sie auf vorhandene Microsoft 365-Konten, die bei Ihrem Browser angemeldet sind, wenn Sie zu https://microsoft.com/deviceloginnavigieren. Verwenden Sie Browserfeatures wie Profile, Gastmodus oder privaten Modus, um sicherzustellen, dass Sie sich als das Konto authentifizieren, das Sie zu Testzwecken verwenden möchten.
Kehren Sie nach Abschluss des Vorgangs zur Anwendung zurück, um das Zugriffstoken anzuzeigen.

Tipp

Nur zu Validierungs- und Debugzwecken können Sie Benutzerzugriffstoken (nur für Geschäfts-, Schul- oder Unikonten) decodieren, indem Sie den Onlinetokenparser von Microsoft unter verwendenhttps://jwt.ms. Die Analyse Ihres Tokens kann nützlich sein, wenn beim Aufrufen von Microsoft Graph Tokenfehler auftreten. Beispielsweise wird überprüft, ob der scp Anspruch im Token die erwarteten Microsoft Graph-Berechtigungsbereiche enthält.

Benutzer abrufen

Nachdem die Authentifizierung konfiguriert wurde, können Sie Ihren ersten Microsoft Graph-API-Aufruf durchführen. Fügen Sie Code hinzu, um den Namen und die E-Mail-Adresse des authentifizierten Benutzers abzurufen.

Öffnen Sie graphHelper.js , und fügen Sie die folgende Funktion hinzu.

export async function getUserAsync() {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Only request specific properties with .select()
  return _userClient
    .api('/me')
    .select(['displayName', 'mail', 'userPrincipalName'])
    .get();
}

Ersetzen Sie die leere greetUserAsync Funktion in index.js durch Folgendes.

async function greetUserAsync() {
  try {
    const user = await getUserAsync();
    console.log(`Hello, ${user?.displayName}!`);
    // For Work/school accounts, email is in mail property
    // Personal accounts, email is in userPrincipalName
    console.log(`Email: ${user?.mail ?? user?.userPrincipalName ?? ''}`);
  } catch (err) {
    console.log(`Error getting user: ${err}`);
  }
}

Wenn Sie die App jetzt ausführen, begrüßt Sie die App nach der Anmeldung mit dem Namen.

Hello, Megan Bowen!
Email: MeganB@contoso.com

Code erläutert

Betrachten Sie den Code in der getUserAsync Funktion. Es sind nur wenige Zeilen, aber es sind einige wichtige Details zu beachten.

Zugreifen auf "me"

Die Funktion wird an den Anforderungs-Generator _userClient.api übergeben/me, der eine Anforderung an die Get-Benutzer-API erstellt. Auf diese API kann auf zwei Arten zugegriffen werden:

GET /me
GET /users/{user-id}

In diesem Fall ruft der Code den GET /me API-Endpunkt auf. Dieser Endpunkt ist eine Verknüpfungsmethode, um den authentifizierten Benutzer abzurufen, ohne seine Benutzer-ID zu kennen.

Hinweis

Da der GET /me API-Endpunkt den authentifizierten Benutzer abruft, ist er nur für Apps verfügbar, die die Benutzerauthentifizierung verwenden. Reine App-Authentifizierungs-Apps können nicht auf diesen Endpunkt zugreifen.

Anfordern bestimmter Eigenschaften

Die Funktion verwendet die select -Methode für die Anforderung, um die benötigten Eigenschaften anzugeben. Diese Methode fügt dem API-Aufruf den Abfrageparameter $select hinzu.

Stark typisierter Rückgabetyp

Die Funktion gibt ein User Objekt zurück, das aus der JSON-Antwort der API deserialisiert wurde. Da der Code verwendet select, verfügen nur die angeforderten Eigenschaften über Werte im zurückgegebenen User Objekt. Alle anderen Eigenschaften verfügen über Standardwerte.

Nächster Schritt

Lesen und Senden von E-Mails

Feedback

War diese Seite hilfreich?

Last updated on 2025-06-12

Freigeben über

Hinzufügen der Benutzerauthentifizierung zu JavaScript-Apps für Microsoft Graph