Поставщик TeamsFx

  • Статья

Используйте поставщик TeamsFx в приложениях Microsoft Teams, чтобы предоставить компонентам Microsoft Graph Toolkit доступ к Microsoft Graph.

Дополнительные сведения о поставщиках проверки подлинности см. в статье Поставщики.

Начало работы

  1. Инициализация поставщика и входа для получения необходимого маркера доступа

    1. Инициализация поставщика внутри компонента.

          // Import the providers and credential at the top of the page
    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;

    2. Используйте метод для credential.login(scopes) получения необходимого маркера доступа.

          // 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);

    Использование класса TeamsFx

    Примечание. Класс TeamsFx будет нерекомендуем и удален из будущего выпуска пакета SDK TeamsFx, и рекомендуется использовать TeamsUserCredential вместо него.

    1. Инициализация поставщика внутри компонента.

          // Import the providers and credential at the top of the page
    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;

    2. Используйте метод для teamsfx.login(scopes) получения необходимого маркера доступа.

          // Put these 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);

  2. Теперь вы можете добавить любой компонент на HTML-странице или в render() метод при использовании React, и он будет использовать контекст TeamsFx для доступа к Microsoft Graph.

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

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

Пример, показывающий, как инициализировать поставщик TeamsFx, см. в примере экспорта контактов.

См. также