One Productivity Hub using Graph Toolkit
One Productivity Hub sample shows you how to build a tab for viewing your calendar events, to-do tasks and files by using Microsoft Graph Toolkit components and TeamsFx Provider.
Note: This sample will only provision single tenant Azure Active Directory app. For multi-tenant support, please refer to this wiki.
This sample illustrates
- How to use TeamsFx to build frontend hosting on Azure for your tab app.
- How to integration TeamsFx with Microsoft Graph Toolkit library.
Prerequisite to use this sample
- Node.js version 16, 18
- A Microsoft 365 tenant in which you have permission to upload Teams apps. You can get a free Microsoft 365 developer tenant by joining the Microsoft 365 developer program.
- Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or TeamsFx CLI
Minimal path to awesome
Run the app locally
From VSCode
- Clone the repo to your local workspace or directly download the source code.
- Open the project in Visual Studio Code.
- Open Debug View (
Ctrl+Shift+D
) and select "Debug in Teams (Edge)" or "Debug in Teams (Chrome)" in dropdown list. - Press "F5" to open a browser window and then select your package to view contact exporter sample app.
From TeamsFx CLI
- Run command:
teamsapp provision --env local
. - Run command:
teamsapp deploy --env local
. - Run command:
teamsapp preview --env local
.
- Run command:
Deploy the app to Azure
If you don't have an Azure subscription, create a free account before you begin
From VSCode
- Sign in to Azure by clicking
Sign in to Azure
under theACCOUNTS
section from sidebar. - Click
Provision
fromLIFECYCLE
section or open the command palette and select:Teams: Provision
. - Click
Deploy
or open the command palette and select:Teams: Deploy
.
- Sign in to Azure by clicking
From TeamsFx CLI
- Run command:
teamsapp auth login azure
. - Run command:
teamsapp provision --env dev
. - Run command:
teamsapp deploy --env dev
.
- Run command:
Preview the app in Teams
- From VSCode:
- Once deployment is completed, you can preview the APP running in Azure. In Visual Studio Code, open
Run and Debug
and selectLaunch Remote (Edge)
orLaunch Remote (Chrome)
in the dropdown list and PressF5
or green arrow button to open a browser.
- Once deployment is completed, you can preview the APP running in Azure. In Visual Studio Code, open
- From TeamsFx CLI:
- Run command:
teamsapp preview --env dev
.
- Run command:
Advanced usage of this sample
The app will look like this when it runs for the first time. Select Start One Productivity Hub to enable the app for your account.
For the first time to run the app, you need to consent the required permissions for Microsoft Graph. Select Accept to consent permissions.
Scroll down to review your calendar events, to-do tasks and file folders in One Productivity Hub tab.
Known issues
This template has adopted Authorization Code Flow to implement SSO. There's a known limitation with mobile platforms such as iOS and a few Android versions where users have to sign in again as the state was not stored due to third party cookie being blocked by the browser.
Due to system webview limitations, users in the tenant with conditional access policies applied cannot consent permissions when conduct an OAuth flow within the Teams mobile clients, it would show error: "xxx requires you to secure this device...".
To achieve full SSO experience, we will recommend you to implement OBO flow to pass your token to a server. See more here.
Version History
Date | Author | Comments |
---|---|---|
Jul 17, 2022 | aycabas | update to support Teams Toolkit v4.0.0 |
Mar 17, 2023 | rentu | update to support Teams Toolkit v5.0.0 |
Feedback
We really appreciate your feedback! If you encounter any issue or error, please report issues to us following the Supporting Guide. Meanwhile you can make recording of your journey with our product, they really make the product better. Thank you!