Compartir a través de

Proveedor de TeamsFx

Precaución

Microsoft Graph Toolkit está en desuso. El período de retirada comienza el 1 de septiembre de 2025, con la retirada completa prevista para el 28 de agosto de 2026. Los desarrolladores deben migrar al uso de los SDK de Microsoft Graph u otras herramientas de Microsoft Graph compatibles para crear experiencias web. Para obtener más información, consulte el anuncio de desuso.

Use el proveedor TeamsFx dentro de las aplicaciones de Microsoft Teams para proporcionar a los componentes del kit de herramientas de Microsoft Graph acceso a Microsoft Graph.

Para más información sobre los proveedores de autenticación, consulte Proveedores.

Introducción

Inicialice el proveedor dentro del componente.

// Import the providers and credential at the top of the page
import {Providers, GraphEndpoint} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential} from "@microsoft/teamsfx";

const scopes = ["User.Read"];
const baseURL: GraphEndpoint = 'https://graph.microsoft.us'; // change the base URL
const teamsfx = new TeamsFx();
const provider = new TeamsFxProvider(teamsfx, scope, baseURL);
Providers.globalProvider = provider;

Use el teamsfx.login(scopes) método para obtener el token de acceso necesario.

// Put this code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await teamsfx.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

Ahora puede agregar cualquier componente en la página HTML o en el render() método al usar React y usará el contexto TeamsFx para acceder a Microsoft Graph.

<!-- Using HTML -->
<mgt-person query="me" view="threeLines"></mgt-person>

// Using React
public render(): void {
  return (
      <div>
        <Person personQuery="me" view={ViewType.threelines}></Person>
      </div>
  );
}

Para obtener un ejemplo que muestra cómo inicializar el proveedor TeamsFx, vea el ejemplo De exportador de contactos.

Actualización desde la versión anterior del proveedor TeamsFx

Si usa la versión <del proveedor TeamsFx = v2.7.1, puede seguir estos pasos para actualizar al proveedor TeamsFx más reciente:

  1. Actualice la versión del proveedor TeamsFx a >=3.0.0 y el SDK >de TeamsFx = 2.0.0

  2. Reemplace el código relacionado con el proveedor TeamsFx como se muestra a continuación:

    Antes

    import {Providers} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential} from "@microsoft/teamsfx";
const scope = ["User.Read"];
const teamsfx = new TeamsFx();
const provider = new TeamsFxProvider(teamsfx, scope);
Providers.globalProvider = provider;

// Put these code below in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await teamsfx.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

    ->

    Después

    import {Providers} from '@microsoft/mgt-element';
import {TeamsFxProvider} from '@microsoft/mgt-teamsfx-provider';
import {TeamsUserCredential, TeamsUserCredentialAuthConfig} from "@microsoft/teamsfx";
const authConfig: TeamsUserCredentialAuthConfig = {
    clientId: process.env.REACT_APP_CLIENT_ID,
    initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,
};
const scope = ["User.Read"];
const credential = new TeamsUserCredential(authConfig);
const provider = new TeamsFxProvider(credential, scope);
Providers.globalProvider = provider;

// Put these code in a call-to-action callback function to avoid browser blocking automatically showing up pop-ups. 
await credential.login(this.scope);
Providers.globalProvider.setState(ProviderState.SignedIn);

Contenido relacionado

  • Last updated on