Introdução ao Microsoft Graph ToolkitGetting started with the Microsoft Graph Toolkit

Os componentes do Microsoft Graph Toolkit podem ser adicionados facilmente ao aplicativo Web, à Web Part do SharePoint ou às guias do Microsoft Teams.The Microsoft Graph Toolkit components can easily be added to your web application, SharePoint web part, or Microsoft Teams tabs. Os componentes são baseados em padrões da Web e podem ser usados em projetos de JavaScript simples ou com estruturas da Web populares, como REACH, angular, Vue.js e muito mais.The components are based on web standards and can be used in both plain JavaScript projects or with popular web frameworks such as Reach, Angular, Vue.js, and more.

Você pode assistir a esse pequeno vídeo para ver como é rápido e fácil começar a usar o kit de ferramentas.You can watch this short video to see how quick and easy it is to get started with the Toolkit.

Configurar seu locatário do Microsoft 365Set up your Microsoft 365 tenant

Para desenvolver com o kit de ferramentas, você precisa acessar um Microsoft 365 locatário.In order to develop with the Toolkit, you need access to a Microsoft 365 tenant. Se você não tiver um, poderá obter uma assinatura gratuita do desenvolvedor do Microsoft 365, participando do programa de desenvolvedor do microsoft 365.If you don't have one, you can get a free Microsoft 365 developer subscription by joining the Microsoft 365 Developer Program. Para obter detalhes sobre como configurar sua assinatura, consulte set up a Microsoft 365 Developer Subscription.For details about how to configure your subscription, see Set up a Microsoft 365 developer subscription.

Defina seu ambiente de desenvolvimentoSet up your development environment

Para desenvolver com o kit de ferramentas, você precisará de um editor de texto ou IDE.To develop with the Toolkit, you will need a text editor or IDE. Você pode usar o editor ou o IDE de sua escolha ou instalar e usar o Visual Studio Code gratuitamente.You can use the editor or IDE of your choice or install and use Visual Studio Code for free. Você também precisará de um navegador da Web moderno, como o Microsoft Edge, Google Chrome ou Firefox.You will also need a modern web browser like Microsoft Edge, Google Chrome, or Firefox. Você também precisará de uma versão do LTS do Node.js, que pode ser instalada no NodeJS.org.You'll also need an LTS version of Node.js, which you can install from nodejs.org.

Usando o kit de ferramentas do Microsoft GraphUsing the Microsoft Graph Toolkit

Você pode usar o Microsoft Graph Toolkit em seu aplicativo referenciando o carregador diretamente (via unpkg) ou instalando o pacote NPM.You can use the Microsoft Graph Toolkit in your application by referencing the loader directly (via unpkg) or by installing the npm package.

Para usar o kit de ferramentas via gerenciamento-Loader, adicione a referência em um script ao seu código:To use the Toolkit via mgt-loader, add the reference in a script to your code:

<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

<mgt-msal-provider client-id="<YOUR_CLIENT_ID>"></mgt-msal-provider>
<mgt-login></mgt-login>

Pacotes NPMNPM packages

O Microsoft Graph Toolkit é composto por vários pacotes do NPM, permitindo que você inclua apenas o código necessário para seus aplicativos.The Microsoft Graph Toolkit is made up of several NPM packages, allowing you to only include the code you need for your applications.

@microsoft/MGT-Element@microsoft/mgt-element

O @microsoft/mgt-element é o pacote principal que contém apenas as classes base usadas para criar componentes e provedores.The @microsoft/mgt-element is the core package that contains only the base classes used for building components and providers. Este pacote expõe todas as classes e interfaces necessárias para criar seus próprios componentes e exporta a interface IProvider e a classe simpleprovider para a criação de provedores personalizados.This package exposes all necessary classes and interfaces needed to build your own components and exports the IProvider interface and SimpleProvider class for building custom providers.

@microsoft/MGT-Components@microsoft/mgt-components

O @microsoft/mgt-components pacote contém todos os componentes da Web conectados ao Microsoft Graph, como Person , PeoplePicker e mais.The @microsoft/mgt-components package contains all Microsoft Graph connected web components, such as Person, PeoplePicker, and more.

ProvedoresProviders

Os provedores estão disponíveis por meio de um único pacote e podem ser instalados conforme necessário.Providers are available via a single package and can be installed as needed. Os seguintes pacotes de provedor estão disponíveis:The following provider packages are available:

  • @micosoft/MGT-MSAL-Provider@micosoft/mgt-msal-provider

    @micosoft/mgt-msal-provider contém o MsalProvider mgt-msal-provider componente e.@micosoft/mgt-msal-provider contains the MsalProvider and mgt-msal-provider component. O provedor MSAL utiliza msal.js para autenticação em aplicativos Web e PWAs.The msal provider leverages msal.js for authenticating in web apps and PWAs.

  • @microsoft/MGT-Teams-Provider@microsoft/mgt-teams-provider

    @microsoft/mgt-teams-provider contém o TeamsProvider mgt-teams-provider componente e.@microsoft/mgt-teams-provider contains the TeamsProvider and mgt-teams-provider component. O provedor do Microsoft Teams habilita a autenticação no aplicativo de guia do Microsoft Teams.The Microsoft Teams provider enables authentication in Microsoft Teams tab application.

  • @microsoft/MGT-SharePoint-Provider@microsoft/mgt-sharepoint-provider

    @microsoft/mgt-sharepoint-provider contém o SharePointProvider para autenticação em um ambiente do SharePoint.@microsoft/mgt-sharepoint-provider contains the SharePointProvider for authenticating in a SharePoint environment.

  • @microsoft/MGT-proxy-Provider@microsoft/mgt-proxy-provider

    @microsoft/mgt-proxy-provider contém o ProxyProvider aplicativo para o qual o proxy Graph chama por meio de um serviço de back-end.@microsoft/mgt-proxy-provider contains the ProxyProvider for application that proxy Graph calls through a backend service.

@microsoft/MGT@microsoft/mgt

O @microsoft/mgt é o pacote principal que inclui todos os pacotes acima e os exporta novamente para que estejam disponíveis por meio de um único pacote que você possa instalar.The @microsoft/mgt is the main package that includes all above packages and re-exports them so they are available via a single package you can install.

@microsoft/MGT-React@microsoft/mgt-react

O @microsoft/mgt-react pacote contém todos os componentes de reagir gerados automaticamente e assume a dependência do @microsoft/mgt pacote.The @microsoft/mgt-react package contains all auto-generated React components and takes dependency on the @microsoft/mgt package.

PolyfillsPolyfills

Se você estiver usando os módulos ES6 do pacote do NPM e estiver direcionando um navegador como o IE11 que não ofereça suporte a componentes Web nativamente, será necessário incluir os metapreenchimentos no seu projeto, pois eles não serão incluídos automaticamente.If you're using the ES6 modules from the npm package and you're targeting a browser such as IE11 that does not support web components natively, you will need to include polyfills in your project, as they are not automatically included. Os metapreenchimentos ajudam a preencher os recursos de navegador ausentes em navegadores que ainda estejam no processo de atualização para suporte aos padrões de componente da Web.Polyfills help to fill in missing browser capabilities in browsers that are still in the process of updating to support Web Component standards. Para obter instruções e saber mais, confira documentação dos metaabastecimentos.For instructions and to learn more, see polyfills documentation.

Os metapreenchimentos já estão incluídos se você estiver usando o kit de ferramentas através do script de gerenciamento de Complementos.The polyfills are already included if you're using the Toolkit via the mgt-loader script.

Próximas etapasNext Steps

Agora você está pronto para começar a desenvolver com o Microsoft Graph Toolkit!You're now ready to start developing with the Microsoft Graph Toolkit! Os seguintes guias estão disponíveis para ajudá-lo a começar:The following guides are available to help you get started: