Use o Kit de Ferramentas do Microsoft Graph com Angular

  • Artigo

Os componentes do Microsoft Graph Toolkit funcionam muito bem com estruturas da Web como Angular além de JavaScript e HTML de baunilha. Este tópico descreve como usar o Kit de Ferramentas do Microsoft Graph com Angular. Para obter um passo a passo que descreve como criar um novo aplicativo Angular e usar o Kit de Ferramentas do Microsoft Graph, consulte Usando o Microsoft Graph Toolkit com Angular.

Adicionar o Kit de Ferramentas do Microsoft Graph

Primeiro, você precisa habilitar elementos personalizados em seu aplicativo Angular adicionando o CUSTOM_ELEMENTS_SCHEMA@NgModule() decorator ao no app.module.ts. O exemplo a seguir mostra como fazer isso:

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

Em seguida, adicione o Kit de Ferramentas do Microsoft Graph ao seu projeto instalando o pacote npm com:

npm install @microsoft/mgt

Inicializar um provedor

Os provedores do Kit de ferramentas do Microsoft Graph permitem autenticação e acesso ao Microsoft Graph para os componentes. Para saber mais, confira Usando os provedores. O provedor que você usa depende do contexto em que sua solução será usada.

O exemplo a seguir mostra como adicionar o Provedor MSAL2, mas você pode seguir o mesmo modelo com qualquer um dos provedores.

Observação

Se você estiver usando o Provedor MSAL no momento e quiser atualizar para o Provedor MSAL2, siga as etapas no artigo Provedor MSAL2 .

Importe o provedor e defina-o para inicializar quando o aplicativo for inicializado. Substitua <YOUR-CLIENT-ID> pela ID do cliente do seu aplicativo.

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

Criar uma ID de aplicativo/cliente

Para obter uma ID do cliente, você precisa registrar seu aplicativo no Microsoft Entra ID.

Adicionar os componentes

Agora, você pode registrar e usar qualquer um dos componentes do Kit de Ferramentas do Microsoft Graph como normalmente faria em seus modelos HTML. Por exemplo, para adicionar o componente Person, atualize o aplicativo para registrar o 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();
    }
}

E adicione o seguinte ao modelo:

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

Nota: As funções de componente de registro devem ser invocadas perto de seu uso em subcomponentes. Isso garante que, em aplicativos maiores em que a divisão de código e o tremor de árvore sejam usados durante a agrupamento, o peso desses componentes pode ser adiado até que seja necessário.

Personalizando componentes com Angular

Todos os componentes do Microsoft Graph Toolkit dão suporte a modelos personalizados, que permitem modificar o conteúdo de um componente. A sintaxe padrão para personalizar os componentes é usar chaves duplas para se referir aos dados de propriedade de cada um dos itens retornados, conforme mostrado:

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

No Angular, no entanto, chaves duplas são usadas para associação de dados e o compilador Angular gerará um erro se você tentar usar a sintaxe de chave dupla.

Você pode evitar esses erros alterando os caracteres padrão usados pelo Kit de Ferramentas para algo diferente de chaves duplas usando o TemplateHelper. É melhor fazer isso em seu componente de aplicativo de nível superior para que ele se aplique globalmente.

Importe o TemplateHelper e use o .setBindingSyntax() método para definir sua sintaxe de associação 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();
    }
}

Agora, você pode usar sua sintaxe de associação personalizada para definir modelos personalizados.

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

Próximas etapas