Uso del kit de herramientas de Microsoft Graph con Angular

  • Artículo

Los componentes del kit de herramientas de Microsoft Graph funcionan muy bien con marcos web como Angular además de JavaScript y HTML de vainilla. En este tema se describe cómo usar Microsoft Graph Toolkit con Angular. Para ver un tutorial paso a paso que describe cómo crear una nueva aplicación Angular y usar microsoft Graph Toolkit, consulte Uso del kit de herramientas de Microsoft Graph con Angular.

Adición del kit de herramientas de Microsoft Graph

En primer lugar, debe habilitar elementos personalizados en la aplicación de Angular agregando a CUSTOM_ELEMENTS_SCHEMA en @NgModule() decoratorapp.module.ts. En el ejemplo siguiente se muestra cómo hacerlo:

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

A continuación, agregue Microsoft Graph Toolkit al proyecto mediante la instalación del paquete npm con:

npm install @microsoft/mgt

Inicializar un proveedor

Los proveedores del Kit de herramientas de Microsoft Graph permiten la autenticación y el acceso a Microsoft Graph para los componentes. Para más información, vea Usar los proveedores. El proveedor que use depende del contexto en el que se usará la solución.

En el ejemplo siguiente se muestra cómo agregar el proveedor MSAL2, pero puede seguir el mismo modelo con cualquiera de los proveedores.

Nota:

Si actualmente usa el proveedor MSAL y desea actualizar al proveedor de MSAL2, siga los pasos del artículo Proveedor MSAL2 .

Importe el proveedor y establézcalo para inicializarlo cuando se inicialice la aplicación. Reemplace por <YOUR-CLIENT-ID> el identificador de cliente de la aplicación.

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

Creación de un identificador de aplicación o cliente

Para obtener un identificador de cliente, debe registrar la aplicación en Microsoft Entra ID.

Agregar componentes

Ahora, puede registrar y usar cualquiera de los componentes de Microsoft Graph Toolkit como lo haría normalmente en las plantillas HTML. Por ejemplo, para agregar el componente Person, actualice la aplicación para registrar el componente:

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

A continuación, agregue lo siguiente a la plantilla:

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

Nota: Las funciones del componente de registro se deben invocar cerca de su uso en subcomponentes. Esto garantiza que en aplicaciones más grandes en las que se usan la división de código y la agitación de árboles durante la agrupación, el peso de esos componentes se puede aplazar hasta que sea necesario.

Personalización de componentes con Angular

Todos los componentes de Microsoft Graph Toolkit admiten plantillas personalizadas, que permiten modificar el contenido de un componente. La sintaxis predeterminada para personalizar los componentes es usar llaves dobles para hacer referencia a los datos de propiedad de cada uno de los elementos devueltos, como se muestra:

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

Sin embargo, en Angular, se usan llaves dobles para el enlace de datos y el compilador de Angular producirá un error si intenta usar la sintaxis de doble llave.

Para evitar estos errores, cambie los caracteres predeterminados utilizados por el kit de herramientas a algo distinto de las llaves dobles mediante TemplateHelper. Es mejor hacerlo en el componente de aplicación de nivel superior para que se aplique globalmente.

TemplateHelper Importe y use el método para establecer la .setBindingSyntax() sintaxis de enlace personalizada.

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

Ahora, puede usar la sintaxis de enlace personalizada para definir plantillas personalizadas.

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

Pasos siguientes