Compartilhar via

Utilizar o Microsoft Graph Toolkit com Angular

Cuidado

O Toolkit do Microsoft Graph foi preterido. O período de reforma começa a 1 de setembro de 2025, com a reforma completa prevista para 28 de agosto de 2026. Os programadores devem migrar para utilizar os SDKs do Microsoft Graph ou outras ferramentas suportadas do Microsoft Graph para criar experiências Web. Para obter mais informações, veja o anúncio de preterição.

Os componentes do Microsoft Graph Toolkit funcionam perfeitamente com arquiteturas Web como Angular para além de JavaScript de baunilha e HTML. Este tópico descreve como utilizar o Microsoft Graph Toolkit com Angular. Para obter instruções passo a passo que descreva como criar uma nova aplicação Angular e utilizar o Toolkit do Microsoft Graph, consulte Utilizar o Microsoft Graph Toolkit com Angular.

Adicionar o Microsoft Graph Toolkit

Primeiro, tem de ativar elementos personalizados na sua aplicação Angular ao adicionar o CUSTOM_ELEMENTS_SCHEMA ao @NgModule() decorator 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 Microsoft Graph Toolkit ao seu projeto ao instalar o pacote npm com:

npm install @microsoft/mgt

Inicializar um fornecedor

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 fornecedor que utilizar depende do contexto no qual a sua solução será utilizada.

O exemplo seguinte mostra como adicionar o Fornecedor MSAL2, mas pode seguir o mesmo modelo com qualquer um dos fornecedores.

Observação

Se estiver atualmente a utilizar o Fornecedor MSAL e quiser atualizar para o Fornecedor MSAL2, siga os passos no artigo Fornecedor MSAL2 .

Importe o fornecedor e defina-o para inicializar quando a aplicação inicializar. Substitua <YOUR-CLIENT-ID> pelo ID de cliente da aplicação.

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 um ID de aplicação/cliente

Para obter um ID de cliente, tem de registar a sua aplicação no Microsoft Entra ID.

Adicionar os componentes

Agora, pode registar e utilizar qualquer um dos componentes do Microsoft Graph Toolkit como faria normalmente nos seus modelos HTML. Por exemplo, para adicionar o componente Pessoa, atualize a aplicação para registar 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();
    }
}

Em seguida, adicione o seguinte ao seu modelo:

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

Nota: As funções de componente de registo devem ser invocadas perto da respetiva utilização em subcomponentes. Isto garante que, em aplicações maiores em que a divisão de códigos e o abalo de árvores são utilizados durante o agrupamento, o peso desses componentes pode ser diferido até ser necessário.

Personalizar componentes com Angular

Todos os componentes do Microsoft Graph Toolkit suportam modelos personalizados, que lhe permitem modificar o conteúdo de um componente. A sintaxe predefinida para personalizar os componentes é utilizar chavetas duplas para fazer referência aos dados de propriedade de cada um dos itens devolvidos, 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, as chavetas duplas são utilizadas para o enlace de dados e o compilador de Angular emitirá um erro se tentar utilizar a sintaxe de chaveta dupla.

Pode evitar estes erros ao alterar os carateres predefinidos utilizados pelo Toolkit para algo diferente de chavetas duplas com o TemplateHelper. É melhor fazê-lo no seu componente de Aplicação de nível superior para que se aplique globalmente.

Importe e TemplateHelper utilize o .setBindingSyntax() método para definir a sintaxe 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();
    }
}

Agora, pode utilizar a sintaxe de enlace personalizado para definir modelos personalizados.

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

Próximas etapas

  • Last updated on