Usar o kit de ferramentas do Microsoft Graph com angularUse the Microsoft Graph Toolkit with Angular

Os componentes do kit de ferramentas do Microsoft Graph funcionam bem com estruturas da Web como angulares, além de JavaScript e HTML.Microsoft Graph Toolkit components work great with web frameworks like Angular in addition to vanilla JavaScript and HTML. Este tópico descreve como usar o kit de ferramentas do Microsoft Graph com angular.This topic describes how to use the Microsoft Graph Toolkit with Angular. Para obter instruções passo a passo que descrevem como criar um novo aplicativo angular e usar o Microsoft Graph Toolkit, consulte usando o Microsoft Graph Toolkit com angular.For a step-by-step walkthrough that describes how to create a new Angular application and use the Microsoft Graph Toolkit, see Using Microsoft Graph Toolkit with Angular.

Adicionar o Microsoft Graph ToolkitAdd the Microsoft Graph Toolkit

Primeiro, você precisa habilitar elementos personalizados no seu aplicativo angular adicionando o CUSTOM_ELEMENT_SCHEMA ao @NgModule() decorator app.module.ts .First, you need to enable custom elements in your Angular application by adding the CUSTOM_ELEMENT_SCHEMA to the @NgModule() decorator in app.module.ts. O exemplo a seguir mostra como fazer isso:The following example shows how to do this:

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 instalando o pacote do NPM com:Next, add the Microsoft Graph Toolkit to your project by installing the npm package with:

npm install @microsoft/mgt

Inicializar um provedorInitialize a provider

Os provedores do Microsoft Graph Toolkit permitem a autenticação e o acesso ao Microsoft Graph para os componentes.The Microsoft Graph Toolkit providers enable authentication and access to Microsoft Graph for the components. Para saber mais, consulte usando os provedores.To learn more, see Using the providers. O provedor que você usa depende do contexto no qual a solução será usada.The provider you use depends on the context in which your solution will be used.

O exemplo a seguir mostra como adicionar o provedor MSAL, mas você pode seguir o mesmo modelo com qualquer um dos provedores.The following example shows how to add the MSAL Provider, but you can follow the same model with any of the providers. Importe o provedor e defina-o para ser inicializado quando o aplicativo for inicializado.Import the provider and set it to initialize when the application initializes. Substitua <YOUR-CLIENT-ID> pela ID do cliente para seu aplicativo.Replace <YOUR-CLIENT-ID> with the client ID for your application.

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

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

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

Criar uma ID de aplicativo/clienteCreate an app/client ID

Para obter uma ID de cliente, você precisa registrar seu aplicativo no Azure AD.In order to get a client ID, you need to register your application in Azure AD.

Observação: o MSAL só dá suporte ao fluxo implícito do OAuth.Note: MSAL only supports the Implicit Flow for OAuth. Certifique-se de habilitar o fluxo implícito em seu aplicativo no portal do Azure (não está habilitado por padrão).Make sure to enable Implicit Flow in your application in the Azure Portal (it is not enabled by default). Em autenticação, encontre a seção concessão implícita e marque as caixas de seleção para tokens de acesso e tokens de ID.Under Authentication, find the Implicit grant section and select the checkboxes for Access tokens and ID tokens.

Adicionar componentesAdd components

Agora, você pode usar qualquer um dos componentes do Microsoft Graph Toolkit como faria normalmente em seus modelos HTML.Now, you can use any of the Microsoft Graph Toolkit components as you normally would in your HTML templates. Por exemplo, para adicionar o componente pessoa, adicione o seguinte ao modelo:For example, to add the Person component, add the following to your template:

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

Personalizando componentes com o angularCustomizing components with Angular

Todos os componentes do Microsoft Graph Toolkit dão suporte a modelos personalizados, que permitem modificar o conteúdo de um componente.All Microsoft Graph Toolkit components support custom templates, which allow you to modify the content of a component. 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:The default syntax for customizing the components is to use double braces to refer to the property data for each of the returned items, as shown:

<!-- 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 apresentará um erro se você tentar usar a sintaxe de chave dupla.In Angular, however, double braces are used for data binding and the Angular compiler will throw an error if you try to use the double brace syntax.

Você pode evitar esses erros alterando os caracteres padrão usados pelo kit de ferramentas para algo diferente de chaves duplas usando o TemplateHelper .You can avoid these errors by changing the default characters used by the Toolkit to something other than double braces by using the TemplateHelper. É melhor fazer isso no seu componente de aplicativo de nível superior para que se aplique globalmente.It is best to do this in your top-level App component so that it applies globally.

Importe o TemplateHelper e use o .setBindingSyntax() método para definir sua sintaxe de associação personalizada.Import the TemplateHelper and use the .setBindingSyntax() method to set your custom binding syntax.

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

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

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

Agora, você pode usar a sintaxe de associação personalizada para definir modelos personalizados.Now, you can use your custom binding syntax to define custom templates.

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

Próximas etapasNext steps