Utiliser la Boîte à outils Microsoft Graph avec Angular

  • Article

Les composants de la Boîte à outils Microsoft Graph fonctionnement parfaitement avec des environnements web tels qu’Angular en complément de JavaScript Vanilla et HTML. Cette rubrique présent comment utiliser la Boîte à outils Microsoft Graph avec Angular. Pour des instructions détaillées décrivant la façon de créer une application Angular et utiliser la Boîte à outils Microsoft Graph, consultez Utiliser la Boîte à outils Microsoft Graph avec Angular.

Ajout de la Boîte à outils Microsoft Graph

Vous devez d’abord activer des éléments personnalisés dans votre application Angular en ajoutant le CUSTOM_ELEMENTS_SCHEMA au @NgModule() decorator dans app.module.ts. L'exemple suivant explique comment procéder :

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 {}

Ajoutez ensuite la Boîte à outils Microsoft Graph à votre projet en installation le package npm avec :

npm install @microsoft/mgt

Initialiser un fournisseur

Les fournisseurs de la Boîte à outils Microsoft Graph activent l’authentification et l’accès à Microsoft Graph pour les composants. Pour plus d’informations, consultez Utilisation de fournisseurs. Le fournisseur utilisé dépend du contexte dans lequel vous utiliserez votre solution.

L’exemple suivant montre comment ajouter le fournisseur MSAL2, mais vous pouvez suivre le même modèle avec l’un des fournisseurs.

Remarque

Si vous utilisez actuellement le fournisseur MSAL et que vous souhaitez effectuer une mise à jour vers le fournisseur MSAL2, suivez les étapes décrites dans l’article Fournisseur MSAL2 .

Importez le fournisseur et configurez-le pour qu’il initialise lorsque l’application initialise. Remplacez <YOUR-CLIENT-ID> par l’ID client de votre application.

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

Créer un ID client/application

Pour obtenir un ID client, vous devez inscrire votre application dans Microsoft Entra ID.

Ajouter des composants

À présent, vous pouvez inscrire et utiliser l’un des composants du Kit de ressources Microsoft Graph comme vous le feriez normalement dans vos modèles HTML. Par exemple, pour ajouter le composant Person, mettez à jour l’application pour inscrire le composant :

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

Ajoutez ensuite ce qui suit à votre modèle :

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

Note: Les fonctions de composant register doivent être appelées à proximité de leur utilisation dans les sous-composants. Cela garantit que dans les applications plus volumineuses où le fractionnement du code et l’ébranlement d’arborescence sont utilisés pendant le regroupement, le poids de ces composants peut être différé jusqu’à ce que cela soit nécessaire.

Personnalisation de composants avec Angular

Tous les composants de la Boîte à outils Microsoft Graph prennent en charge les composants personnalisés, ce qui vous permet de modifier le contenu d’un composant. La syntaxe par défaut pour la personnalisation des composants est d’utiliser les accolades doubles pour faire référence aux données de la propriété pour chacun des éléments renvoyés, comme indiqué :

<!-- 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>

Dans Angular, toutefois, les accolades doubles sont utilisées pour la liaison de données. Le compilateur Angular générera une erreur si vous tentez d’utiliser une syntaxe à doubles accolades.

Vous pouvez éviter ces erreurs en changeant les caractères par défaut utilisés par le Kit de ressources Microsoft Graph par un caractère autre que la double accolade à l’aide de TemplateHelper. Il est conseillé d’effectuer cette action dans votre composant d’application de premier niveau, de sorte qu’elle s’applique de manière générale.

Importez TemplateHelper et utilisez la méthode .setBindingSyntax() pour définir votre syntaxe de liaison personnalisée.

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

Vous pouvez maintenant utiliser votre syntaxe de liaison personnalisée pour définir des modèles personnalisés.

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

Étapes suivantes