Erstellen von TypeScript-Apps mit Microsoft Graph und nur app-Authentifizierung

In diesem Tutorial erfahren Sie, wie Sie eine TypeScript-Konsolen-App erstellen, die die Microsoft Graph-API verwendet, um mithilfe der reinen App-Authentifizierung auf Daten zuzugreifen. Die reine App-Authentifizierung ist eine gute Wahl für Hintergrunddienste oder Anwendungen, die auf Daten für alle Benutzer in einer Organisation zugreifen müssen.

In diesem Lernprogramm wird Folgendes vermittelt:

• Benutzer auflisten

Voraussetzungen

Bevor Sie mit diesem Tutorial beginnen, sollte Node.js auf Ihrem Entwicklungscomputer installiert sein.

Sie sollten auch über ein Microsoft-Geschäfts-, Schul- oder Unikonto mit der Rolle "Globaler Administrator" verfügen. Wenn Sie nicht über einen Microsoft 365-Mandanten verfügen, können Sie sich über das Microsoft 365-Entwicklerprogramm für einen mandantenfähigen Mandanten qualifizieren. Weitere Informationen finden Sie in den häufig gestellten Fragen. Alternativ können Sie sich für eine kostenlose 1-monatige Testversion registrieren oder einen Microsoft 365-Plan erwerben.

Registrieren der App im Portal

• 17 Minuten verbleibend

In dieser Übung registrieren Sie eine neue Anwendung in Azure Active Directory, um die reine App-Authentifizierung zu aktivieren. Sie können eine Anwendung über das Microsoft Entra Admin Center oder mithilfe des Microsoft Graph PowerShell SDK registrieren.

Registrieren der Anwendung für die reine App-Authentifizierung

In diesem Abschnitt registrieren Sie eine Anwendung, die die reine App-Authentifizierung mit Clientanmeldeinformationen unterstützt.

Erstellen einer TypeScript-Konsolen-App

• 14 Minuten verbleibend

Erstellen Sie zunächst ein neues Node.js-Projekt und konfigurieren Sie TypeScript.

1. Öffnen Sie Ihre Befehlszeilenschnittstelle (CLI) in einem Verzeichnis, in dem Sie das Projekt erstellen möchten. Führen Sie den folgenden Befehl aus.

   npm init
   

   Beantworten Sie die Eingabeaufforderungen, indem Sie entweder Ihre eigenen Werte angeben oder die Standardwerte akzeptieren.

2. Führen Sie den folgenden Befehl aus, um TypeScript zu installieren.

   npm install -D typescript ts-node
   

3. Führen Sie den folgenden Befehl aus, um TypeScript zu initialisieren.

   npx tsc --init
   

Installieren von Abhängigkeiten

Bevor Sie mit dem Vorgang fortfahren, fügen Sie einige zusätzliche Abhängigkeiten hinzu, die Sie später verwenden werden.

• Azure Identity-Clientbibliothek für JavaScript zum Authentifizieren des Benutzers und Abrufen von Zugriffstoken.
• Microsoft Graph JavaScript-Clientbibliothek , um Aufrufe an Microsoft Graph zu senden.
• isomorphic-fetch zum Hinzufügen fetch einer API zu Node.js. Dies ist eine Abhängigkeit für die JavaScript-Clientbibliothek von Microsoft Graph.
• readline-sync zum Auffordern des Benutzers zur Eingabe.

Führen Sie die folgenden Befehle in Ihrer CLI aus, um die Abhängigkeiten zu installieren.

npm install @azure/identity @microsoft/microsoft-graph-client isomorphic-fetch readline-sync
npm install -D @microsoft/microsoft-graph-types @types/node @types/readline-sync @types/isomorphic-fetch

Laden von Anwendungseinstellungen

In diesem Abschnitt fügen Sie dem Projekt die Details Ihrer App-Registrierung hinzu.

1. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen appSettings.ts , und fügen Sie den folgenden Code hinzu.

   const settings: AppSettings = {
     clientId: 'YOUR_CLIENT_ID_HERE',
     clientSecret: 'YOUR_CLIENT_SECRET_HERE',
     tenantId: 'YOUR_TENANT_ID_HERE',
   };
   
   export interface AppSettings {
     clientId: string;
     clientSecret: string;
     tenantId: string;
   }
   
   export default settings;
   

2. Aktualisieren Sie die Werte in settings gemäß der folgenden Tabelle.

   Einstellung	Wert
   clientId	Die Client-ID Ihrer App-Registrierung
   tenantId	Die Mandanten-ID Ihrer Organisation.
   clientSecret	Der im vorherigen Schritt generierte geheime Clientschlüssel

Entwerfen der App

In diesem Abschnitt erstellen Sie ein einfaches konsolenbasiertes Menü.

1. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen graphHelper.ts , und fügen Sie den folgenden Platzhaltercode hinzu. Sie fügen dieser Datei in späteren Schritten weiteren Code hinzu.

   export {};
   

2. Erstellen Sie im Stammverzeichnis Ihres Projekts eine Datei mit dem Namen index.ts , und fügen Sie den folgenden Code hinzu.

   import * as readline from 'readline-sync';
   import { User } from '@microsoft/microsoft-graph-types';
   
   import settings, { AppSettings } from './appSettings';
   import * as graphHelper from './graphHelper';
   
   async function main() {
     console.log('TypeScript Graph Tutorial');
   
     let choice = 0;
   
     // Initialize Graph
     initializeGraph(settings);
   
     const choices = ['Display access token', 'List users', 'Make a Graph call'];
   
     while (choice != -1) {
       choice = readline.keyInSelect(choices, 'Select an option', {
         cancel: 'Exit',
       });
   
       switch (choice) {
         case -1:
           // Exit
           console.log('Goodbye...');
           break;
         case 0:
           // Display access token
           await displayAccessTokenAsync();
           break;
         case 1:
           // List users
           await listUsersAsync();
           break;
         case 2:
           // Run any Graph code
           await makeGraphCallAsync();
           break;
         default:
           console.log('Invalid choice! Please try again.');
       }
     }
   }
   
   main();
   

3. Fügen Sie am Ende der Datei die folgenden Platzhaltermethoden hinzu. Sie implementieren sie in späteren Schritten.

   function initializeGraph(settings: AppSettings) {
     // TODO
   }
   
   async function displayAccessTokenAsync() {
     // TODO
   }
   
   async function listUsersAsync() {
     // TODO
   }
   
   async function makeGraphCallAsync() {
     // TODO
   }
   

Dadurch wird ein einfaches Menü implementiert und die Auswahl des Benutzers aus der Befehlszeile gelesen.

Hinzufügen einer reinen App-Authentifizierung

• 10 Minuten verbleibend

In diesem Abschnitt fügen Sie der Anwendung die reine App-Authentifizierung hinzu. Dies ist erforderlich, um das erforderliche OAuth-Zugriffstoken zum Aufrufen von Microsoft Graph abzurufen. In diesem Schritt integrieren Sie die Azure Identity-Clientbibliothek für JavaScript in die Anwendung und konfigurieren die Authentifizierung für die Microsoft Graph-JavaScript-Clientbibliothek.

Die Azure Identity-Bibliothek bietet eine Reihe von TokenCredential Klassen, die OAuth2-Tokenflows implementieren. Die Microsoft Graph-Clientbibliothek verwendet diese Klassen, um Aufrufe von Microsoft Graph zu authentifizieren.

Konfigurieren des Graph-Clients für die reine App-Authentifizierung

In diesem Abschnitt verwenden Sie die ClientSecretCredential -Klasse, um mithilfe des Clientanmeldeinformationsflows ein Zugriffstoken anzufordern.

1. Öffnen Sie graphHelper.ts , und fügen Sie den folgenden Code hinzu.

   import 'isomorphic-fetch';
   import { ClientSecretCredential } from '@azure/identity';
   import { Client, PageCollection } from '@microsoft/microsoft-graph-client';
   // prettier-ignore
   import { TokenCredentialAuthenticationProvider } from
     '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';
   
   import { AppSettings } from './appSettings';
   
   let _settings: AppSettings | undefined = undefined;
   let _clientSecretCredential: ClientSecretCredential | undefined = undefined;
   let _appClient: Client | undefined = undefined;
   
   export function initializeGraphForAppOnlyAuth(settings: AppSettings) {
     // Ensure settings isn't null
     if (!settings) {
       throw new Error('Settings cannot be undefined');
     }
   
     _settings = settings;
   
     if (!_clientSecretCredential) {
       _clientSecretCredential = new ClientSecretCredential(
         _settings.tenantId,
         _settings.clientId,
         _settings.clientSecret,
       );
     }
   
     if (!_appClient) {
       const authProvider = new TokenCredentialAuthenticationProvider(
         _clientSecretCredential,
         {
           scopes: ['https://graph.microsoft.com/.default'],
         },
       );
   
       _appClient = Client.initWithMiddleware({
         authProvider: authProvider,
       });
     }
   }
   

2. Ersetzen Sie die leere initializeGraph Funktion in index.ts durch Folgendes.

   function initializeGraph(settings: AppSettings) {
     graphHelper.initializeGraphForAppOnlyAuth(settings);
   }
   

Dieser Code deklariert zwei private Eigenschaften, ein ClientSecretCredential -Objekt und ein Client -Objekt. Die InitializeGraphForAppOnlyAuth -Funktion erstellt eine neue Instanz von ClientSecretCredentialund verwendet diese Instanz dann, um eine neue Instanz von Clientzu erstellen. Jedes Mal, wenn ein API-Aufruf an Microsoft Graph über _appClienterfolgt, werden die bereitgestellten Anmeldeinformationen verwendet, um ein Zugriffstoken abzurufen.

Testen von ClientSecretCredential

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

1. Fügen Sie graphHelper.ts die folgende Funktion hinzu.

   export async function getAppOnlyTokenAsync(): Promise<string> {
     // Ensure credential isn't undefined
     if (!_clientSecretCredential) {
       throw new Error('Graph has not been initialized for app-only auth');
     }
   
     // Request token with given scopes
     const response = await _clientSecretCredential.getToken([
       'https://graph.microsoft.com/.default',
     ]);
     return response.token;
   }
   

2. Ersetzen Sie die leere displayAccessTokenAsync Funktion in index.ts durch Folgendes.

   async function displayAccessTokenAsync() {
     try {
       const userToken = await graphHelper.getAppOnlyTokenAsync();
       console.log(`App-only token: ${userToken}`);
     } catch (err) {
       console.log(`Error getting app-only access token: ${err}`);
     }
   }
   

3. Führen Sie den folgenden Befehl in Ihrer CLI im Stammverzeichnis Ihres Projekts aus.

   npx ts-node index.ts
   

4. Geben Sie ein 1 , wenn Sie zur Eingabe einer Option aufgefordert werden. Die Anwendung zeigt ein Zugriffstoken an.

   TypeScript Graph App-Only Tutorial
   
   [1] Display access token
   [2] List users
   [3] Make a Graph call
   [0] Exit
   
   Select an option [1...3 / 0]: 1
   App-only token: eyJ0eXAiOiJKV1QiLCJub25jZSI6IlVDTzRYOWtKYlNLVjVkRzJGenJqd2xvVUcwWS...
   

   Tipp

   Nur zu Validierungs- und Debugzwecken können Sie Nur-App-Zugriffstoken mithilfe des Onlinetokenparsers von Microsoft unter https://jwt.msdecodieren. Dies kann nützlich sein, wenn beim Aufrufen von Microsoft Graph Tokenfehler auftreten. Beispielsweise wird überprüft, ob der role Anspruch im Token die erwarteten Microsoft Graph-Berechtigungsbereiche enthält.

Benutzer auflisten

• 7 Minuten verbleibend

In diesem Abschnitt fügen Sie die Möglichkeit hinzu, alle Benutzer in Ihrer Azure Active Directory-Instanz mithilfe der reinen App-Authentifizierung aufzulisten.

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

   export async function getUsersAsync(): Promise<PageCollection> {
     // Ensure client isn't undefined
     if (!_appClient) {
       throw new Error('Graph has not been initialized for app-only auth');
     }
   
     return _appClient
       ?.api('/users')
       .select(['displayName', 'id', 'mail'])
       .top(25)
       .orderby('displayName')
       .get();
   }
   

2. Ersetzen Sie die leere listUsersAsync Funktion in index.ts durch Folgendes.

   async function listUsersAsync() {
     try {
       const userPage = await graphHelper.getUsersAsync();
       const users: User[] = userPage.value;
   
       // Output each user's details
       for (const user of users) {
         console.log(`User: ${user.displayName ?? 'NO NAME'}`);
         console.log(`  ID: ${user.id}`);
         console.log(`  Email: ${user.mail ?? 'NO EMAIL'}`);
       }
   
       // If @odata.nextLink is not undefined, there are more users
       // available on the server
       const moreAvailable = userPage['@odata.nextLink'] != undefined;
       console.log(`\nMore users available? ${moreAvailable}`);
     } catch (err) {
       console.log(`Error getting users: ${err}`);
     }
   }
   

3. Führen Sie die App aus, melden Sie sich an, und wählen Sie Option 2 aus, um Benutzer aufzulisten.

   [1] Display access token
   [2] List users
   [3] Make a Graph call
   [0] Exit
   
   Select an option [1...3 / 0]: 2
   User: Adele Vance
     ID: 05fb57bf-2653-4396-846d-2f210a91d9cf
     Email: AdeleV@contoso.com
   User: Alex Wilber
     ID: a36fe267-a437-4d24-b39e-7344774d606c
     Email: AlexW@contoso.com
   User: Allan Deyoung
     ID: 54cebbaa-2c56-47ec-b878-c8ff309746b0
     Email: AllanD@contoso.com
   User: Bianca Pisani
     ID: 9a7dcbd0-72f0-48a9-a9fa-03cd46641d49
     Email: NO EMAIL
   User: Brian Johnson (TAILSPIN)
     ID: a8989e40-be57-4c2e-bf0b-7cdc471e9cc4
     Email: BrianJ@contoso.com
   
   ...
   
   More users available? true
   

Code erläutert

Betrachten Sie den Code in der getUsersAsync Funktion. Es ist dem Code in getInboxAsyncsehr ähnlich:

• Es ruft eine Sammlung von Benutzern ab.
• Wird verwendet select , um bestimmte Eigenschaften anzufordern.
• Wird verwendet top , um die Anzahl der zurückgegebenen Benutzer zu begrenzen.
• orderBy Verwendet, um die Antwort zu sortieren.

Optional: Fügen Sie Ihren eigenen Code hinzu.

• 5 Minuten verbleibend

In diesem Abschnitt fügen Sie der Anwendung Ihre eigenen Microsoft Graph-Funktionen hinzu. Dies kann ein Codeausschnitt aus der Microsoft Graph-Dokumentation oder graph-Explorer oder code sein, den Sie erstellt haben. Dieser Abschnitt ist optional.

Aktualisieren der App

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

   // This function serves as a playground for testing Graph snippets
   // or other code
   export async function makeGraphCallAsync() {
     // INSERT YOUR CODE HERE
   }
   

2. Ersetzen Sie die leere makeGraphCallAsync Funktion in index.ts durch Folgendes.

   async function makeGraphCallAsync() {
     try {
       await graphHelper.makeGraphCallAsync();
     } catch (err) {
       console.log(`Error making Graph call: ${err}`);
     }
   }
   

Auswählen einer API

Suchen Sie eine API in Microsoft Graph, die Sie ausprobieren möchten. Beispiel: Die Api zum Erstellen eines Ereignisses . Sie können eines der Beispiele in der API-Dokumentation verwenden, oder Sie können eine API-Anforderung im Graph-Explorer anpassen und den generierten Codeausschnitt verwenden.

Konfigurieren von Berechtigungen

Überprüfen Sie den Abschnitt Berechtigungen der Referenzdokumentation für Die ausgewählte API, um zu sehen, welche Authentifizierungsmethoden unterstützt werden. Einige APIs unterstützen z. B. keine reinen Apps oder persönlichen Microsoft-Konten.

• Informationen zum Aufrufen einer API mit Benutzerauthentifizierung (wenn die API die (delegierte) Benutzerauthentifizierung unterstützt), finden Sie im Tutorial zur benutzerseitig (delegierten) Authentifizierung .
• Um eine API mit nur app-Authentifizierung aufzurufen (sofern die API dies unterstützt), fügen Sie den erforderlichen Berechtigungsbereich im Azure AD Admin Center hinzu.

Fügen Sie Ihren Code hinzu

Kopieren Sie Ihren Code in die makeGraphCallAsync Funktion in graphHelper.ts. Wenn Sie einen Codeausschnitt aus der Dokumentation oder dem Graph-Explorer kopieren, müssen Sie den client_appClientin umbenennen.

Herzlichen Glückwunsch!

• 100 % abgeschlossen!

Sie haben das Microsoft Graph-Tutorial zu TypeScript abgeschlossen. Nachdem Sie nun über eine funktionierende App verfügen, die Microsoft Graph aufruft, können Sie experimentieren und neue Features hinzufügen.

• Erfahren Sie, wie Sie die (delegierte) Benutzerauthentifizierung mit dem Microsoft Graph JavaScript SDK verwenden.
• Besuchen Sie die Übersicht über Microsoft Graph , um alle Daten anzuzeigen, auf die Sie mit Microsoft Graph zugreifen können.

Microsoft Graph-Toolkit

Wenn Sie TypeScript-Apps mit Benutzeroberfläche erstellen, bietet das Microsoft Graph-Toolkit eine Sammlung von Komponenten, die die Entwicklung vereinfachen können.

TypeScript/JavaScript-Beispiele

• Angular-Single-Page-App
• React-Single-Page-App
• React Native Mobile App
• JavaScript-Single-Page-App
• Node.js Express-Web-App
• Office-Add-In
• SharePoint Framework-App
• Benachrichtigungen ändern