Provedor do Microsoft TeamsMicrosoft Teams provider

Use o provedor de equipes dentro da guia do Microsoft Teams para facilitar a autenticação e o acesso ao Microsoft Graph a todos os componentes.Use the Teams provider inside your Microsoft Teams tab to facilitate authentication and Microsoft Graph access to all components.

Para saber mais, veja Providers.To learn more, see providers.

IntroduçãoGet started

Antes de usar o provedor do Teams, você precisará certificar-se de que você referenciou o SDK do Microsoft Teams na sua página.Before using the Teams provider, you will need to make sure you have referenced the Microsoft Teams SDK in your page.

via marca de scriptvia script tag

O exemplo a seguir usa o provedor em HTML (via CDN).The following example uses the provider in HTML (via CDN).

<!-- Microsoft Teams sdk must be referenced before the toolkit -->
<script src="https://unpkg.com/@microsoft/teams-js/dist/MicrosoftTeams.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>

<mgt-teams-provider
  client-id="<YOUR_CLIENT_ID>"
  auth-popup-url="https://<YOUR-DOMAIN>.com/AUTH-PATH"
  authority=""
></mgt-teams-provider>
AtributoAttribute DescriçãoDescription
Client-IDclient-id ID do cliente de cadeia de caracteres (consulte Configure Your Teams app.String client ID (see Configure your Teams app. Obrigatório.Required.
auth-Popup-URLauth-popup-url Caminho absoluto ou relativo para a página que manipulará a autenticação no pop-up (consulte criar a página pop-up).Absolute or relative path to the page that will handle auth in the popup (see Create the popup page). Obrigatório.Required.
escoposscopes Cadeias de caracteres separadas por vírgula para escopos para os quais o usuário deve se concordar.Comma separated strings for scopes the user must consent to on sign in. Opcional.Optional.
depende dedepends-on Cadeia de caracteres de seletor de elemento de outro componente de provedor de prioridade mais alta.Element selector string of another higher-priority provider component. Opcional.Optional.
autoridadesauthority Cadeia de caracteres de autoridade.Authority string. O padrão é a autoridade comum.The default is the common authority. Para aplicativos de locatário único, use a ID de locatário ou o nome do locatário.For single-tenant apps, use your tenant ID or tenant name. Por exemplo, https://login.microsoftonline.com/[your-tenant-name].onmicrosoft.com ou https://login.microsoftonline.com/[your-tenant-id] .For example, https://login.microsoftonline.com/[your-tenant-name].onmicrosoft.com or https://login.microsoftonline.com/[your-tenant-id]. Opcional.Optional.

via NPMvia NPM

O exemplo a seguir usa o provedor em módulos JS (via NPM).The following example uses the provider in JS modules (via NPM).

Certifique-se de instalar o kit de ferramentas e o SDK do Microsoft Teams.Make sure to install both the toolkit and the Microsoft Teams SDK.

npm install @microsoft/mgt @microsoft/teams-js

Em seguida, importe e use o provedor.Next, import and use the provider.

import '@microsoft/teams-js';
import {Providers, TeamsProvider} from '@microsoft/mgt';
Providers.globalProvider = new TeamsProvider(config);

onde config éwhere config is

export interface TeamsConfig {
  clientId: string;
  authPopupUrl: string;
  scopes?: string[];
  msalOptions?: Configuration;
}

Como alternativa, você pode precisar definir a referência à biblioteca do Microsoft Teams.Alternatively, you might need to set the reference to the Microsoft Teams Library. Veja um exemplo:Here is an example:

import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
Providers.globalProvider = new TeamsProvider(config);

Para ver um exemplo completo, confira o exemplo de guia do Microsoft Teams.For a complete example, see Microsoft Teams tab sample.

Configurar seu aplicativo do teamsConfigure your Teams app

Se você estiver apenas começando a usar o Teams apps, consulte adicionar guias aos aplicativos do Microsoft Teams.If you're just getting started with Teams apps, see Add tabs to Microsoft Teams apps. Você também pode usar o app Studio para desenvolver rapidamente o manifesto do aplicativo.You can also use App Studio to quickly develop your app manifest.

Após instalar seu aplicativo com uma guia e você estiver pronto para usar os componentes, você precisará certificar-se de que seu aplicativo tem as permissões corretas para acessar o Microsoft Graph.After you install your app with a tab, and you're ready to use the components, you need to make sure that your app has the right permissions to access Microsoft Graph. Para configurar seu aplicativo com as permissões necessárias:To configure your app with the necessary permissions:

  1. Recuperar seu nome de domínioRetrieve your domain name
  2. Criar um novo registro de aplicativoCreate a new app registration
  3. Conceder sua permissão de aplicativoGrant your application permission

É importante adicionar a permissão certa na página Adicionar acesso à API.It's important to add the right permission on the Add API access page. Você precisará de um administrador para adicionar e aprovar as permissões, dependendo de qual componente você precisa.You will need an administrator to add and approve the permissions, depending on which component you need.

Dica: Se você não tiver certeza sobre as permissões a serem adicionadas, consulte a documentação de cada componente.Tip: If you're not sure what permissions to add, see the documentation for each component.

Habilitar fluxo de concessão implícitoEnable implicit grant Flow

Certifique-se de habilitar o fluxo de concessão implícito; Esse é um requisito para aplicativos Web que solicitam tokens do lado do cliente.Make sure to enable implicit grant flow; this is a requirement for web apps that request tokens from the client side. No portal do Azure, ao gerenciar o registro do aplicativo, edite o manifesto e altere oauth2AllowImplicitFlow para true .In the Azure Portal, when managing your app registration, edit the manifest and change oauth2AllowImplicitFlow to true.

Criar a página pop-upCreate the popup page

Para entrar com suas credenciais do Microsoft Teams, você precisa fornecer uma URL que o aplicativo Teams abrirá em um pop-up, o que irá seguir o fluxo de autenticação.In order to sign in with your Teams credentials, you need to provide a URL that the Teams app will open in a popup, which will follow the authentication flow. Essa URL precisa estar em seu domínio e precisa chamar o TeamsProvider.handleAuth(); método.This URL needs to be in your domain, and it needs to call the TeamsProvider.handleAuth(); method. Essa é a única coisa que esta página precisa fazer.That's the only thing that this page needs to do. Por exemplo:For example:

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

<script>
  mgt.TeamsProvider.handleAuth();
</script>

ou por um módulo mencionado na página pop-up de autenticação:or via a module referenced in your auth popup page:

import * as MicrosoftTeams from "@microsoft/teams-js/dist/MicrosoftTeams";
import {Providers, TeamsProvider} from '@microsoft/mgt';

TeamsProvider.microsoftTeamsLib = MicrosoftTeams;
TeamsProvider.handleAuth();

Configurar URIs de redirecionamentoConfigure redirect URIs

Após publicar esta página no seu site, você precisará usar a URL na auth-popup-url/authPopupUrl propriedade.After you publish this page on your website, you need to use the URL in the auth-popup-url/authPopupUrl property. Essa URL também precisa ser configurada como um URI de redirecionamento válido em sua configuração de aplicativo no portal do Azure AD.This URL also needs to be configured as a valid redirect URI in your app configuration in the Azure AD portal.