Verwenden des Microsoft Graph-Toolkits mit Angular

  • Artikel

Microsoft Graph Toolkit-Komponenten funktionieren hervorragend mit Webframeworks wie Angular zusätzlich zu Vanilla-JavaScript und HTML. In diesem Thema wird die Verwendung des Microsoft Graph-Toolkits mit Angular beschrieben. Eine schrittweise exemplarische Vorgehensweise, in der beschrieben wird, wie Sie eine neue Angular-Anwendung erstellen und das Microsoft Graph-Toolkit verwenden, finden Sie unter Verwenden des Microsoft Graph-Toolkits mit Angular.

Hinzufügen des Microsoft Graph-Toolkits

Zunächst müssen Sie benutzerdefinierte Elemente in Ihrer Angular-Anwendung aktivieren, indem Sie der CUSTOM_ELEMENTS_SCHEMA@NgModule() decorator in app.module.tshinzufügen. Im folgenden Beispiel wird dargestellt, wie Sie dazu vorgehen:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Fügen Sie als Nächstes das Microsoft Graph-Toolkit zu Ihrem Projekt hinzu, indem Sie das npm-Paket mit folgendem Befehl installieren:

npm install @microsoft/mgt

Initialisieren eines Anbieters

Die Microsoft Graph-Toolkit-Anbieter ermöglichen die Authentifizierung und den Zugriff auf Microsoft Graph für die Komponenten. Weitere Informationen finden Sie unter Verwendung der Anbieter. Der von Ihnen verwendete Anbieter hängt vom Kontext ab, in dem Ihre Lösung verwendet wird.

Das folgende Beispiel zeigt, wie Sie den MSAL2-Anbieter hinzufügen, aber Sie können dasselbe Modell mit jedem der Anbieter verwenden.

Hinweis

Wenn Sie derzeit den MSAL-Anbieter verwenden und ein Update auf den MSAL2-Anbieter durchführen möchten, führen Sie die Schritte im Artikel MSAL2-Anbieter aus .

Importieren Sie den Anbieter, und legen Sie ihn so fest, dass er initialisiert wird, wenn die Anwendung initialisiert wird. Ersetzen Sie durch <YOUR-CLIENT-ID> die Client-ID für Ihre Anwendung.

import { Component, OnInit } from '@angular/core';
import { Providers, Msal2Provider } from '@microsoft/mgt';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
    }
}

Erstellen einer App-/Client-ID

Um eine Client-ID zu erhalten, müssen Sie Ihre Anwendung in Microsoft Entra ID registrieren.

Komponenten hinzufügen

Jetzt können Sie alle Komponenten des Microsoft Graph-Toolkits wie gewohnt in Ihren HTML-Vorlagen registrieren und verwenden. Um beispielsweise die Person-Komponente hinzuzufügen, aktualisieren Sie die App, um die Komponente zu registrieren:

import { Component, OnInit } from '@angular/core';
import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({
            clientId: '<YOUR-CLIENT-ID>'
        });
        registerMgtPersonComponent();
    }
}

Fügen Sie ihrer Vorlage dann Folgendes hinzu:

<mgt-person person-query="me" view="twolines"></mgt-person>

Hinweis: Die Registerkomponentenfunktionen sollten in der Nähe ihrer Verwendung in Unterkomponenten aufgerufen werden. Dadurch wird sichergestellt, dass in größeren Anwendungen, in denen Codeteilung und Strukturschütteln während des Bündelns verwendet werden, die Gewichtung dieser Komponenten bis zur Erforderlichen zurückgestellt werden kann.

Anpassen von Komponenten mit Angular

Alle Komponenten des Microsoft Graph-Toolkits unterstützen benutzerdefinierte Vorlagen, mit denen Sie den Inhalt einer Komponente ändern können. Die Standardsyntax zum Anpassen der Komponenten besteht darin, doppelte Klammern zu verwenden, um auf die Eigenschaftendaten für jedes der zurückgegebenen Elemente zu verweisen, wie gezeigt:

<!-- Double braces are used for data binding in Angular. This will throw an error. -->
<mgt-agenda>
  <template data-type="event">
    <div>{{event.subject}}</div>
  </template>
</mgt-agenda>

In Angular werden jedoch doppelte Klammern für die Datenbindung verwendet, und der Angular Compiler löst einen Fehler aus, wenn Sie versuchen, die Syntax mit doppelten Klammern zu verwenden.

Sie können diese Fehler vermeiden, indem Sie die vom Toolkit verwendeten Standardzeichen mithilfe von TemplateHelperin etwas anderes als doppelte Klammern ändern. Es empfiehlt sich, dies in Ihrer App-Komponente der obersten Ebene zu tun, damit sie global angewendet wird.

Importieren Sie , TemplateHelper und verwenden Sie die .setBindingSyntax() -Methode, um Ihre benutzerdefinierte Bindungssyntax festzulegen.

import { Component, OnInit } from '@angular/core';
import { Providers, TemplateHelper } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';
import { registerMgtPersonComponent } from '@microsoft/mgt-components';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

    ngOnInit()
    {
        Providers.globalProvider = new Msal2Provider({ clientId: '<YOUR-CLIENT-ID>'})
        TemplateHelper.setBindingSyntax('[[',']]');
        registerMgtPersonComponent();
    }
}

Jetzt können Sie Ihre benutzerdefinierte Bindungssyntax verwenden, um benutzerdefinierte Vorlagen zu definieren.

<mgt-agenda>
  <template data-type="event">
    <div>[[event.subject]]</div>
  </template>
</mgt-agenda>

Nächste Schritte