Tab App with Azure Backend
Microsoft Teams supports the ability to run web-based UI inside "custom tabs" that users can install either for just themselves (personal tabs) or within a team or group chat context.
Hello World Tab with Backend shows you how to build a tab app with an Azure Function as backend, how to get user login information with SSO and how to call Azure Function from frontend tab.
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 Microsoft 365 Agents Toolkit to create a Teams tab app.
- How to use TeamsFx SDK to call Azure Functions.
- How to use TeamsFx SDK in Azure Function to call Graph to get user info.
Prerequisites
- Node.js, supported versions: 18, 20, 22
- A Microsoft 365 account. If you do not have Microsoft 365 account, apply one from Microsoft 365 developer program
- Microsoft 365 Agents Toolkit Visual Studio Code Extension version 5.0.0 and higher or Microsoft 365 Agents Toolkit CLI
Note
This sample has adopted On-Behalf-Of Flow to implement SSO.
This sample uses Azure Function as middle-tier service, and make authenticated requests to call Graph from Azure Function.
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...".
Minimal path to awesome
Run the app locally
From VS Code:
- hit
F5
to start debugging. Alternatively open theRun and Debug Activity
Panel and selectDebug in Teams (Edge)
orDebug in Teams (Chrome)
.
- hit
From Microsoft 365 Agents Toolkit CLI:
- Run command:
atk provision --env local
. - Run command:
atk deploy --env local
. - Run command:
atk preview --env local
.
- Run command:
Deploy the app to Azure
From VS Code:
- Sign into Azure by clicking the
Sign in to Azure
under theACCOUNTS
section from sidebar. - Click
Provision
fromLIFECYCLE
section or open the command palette and select:Microsoft 365 Agents: Provision
. - Click
Deploy
or open the command palette and select:Microsoft 365 Agents: Deploy
.
- Sign into Azure by clicking the
From Microsoft 365 Agents Toolkit CLI:
- Run command:
atk auth login azure
. - Run command:
atk provision --env dev
. - Run command:
atk deploy --env dev
.
- Run command:
Preview the app in Teams
From VS Code:
- Open the
Run and Debug Activity
Panel. SelectLaunch Remote (Edge)
orLaunch Remote (Chrome)
from the launch configuration drop-down.
- Open the
From Microsoft 365 Agents Toolkit CLI:
- Run command:
atk preview --env dev
.
- Run command:
Run the app locally with proxy
In some scenarios, it is helpful to skip the login and authentication flow and then provide mocked Graph API responses for development and test purpose. This sample provides a new way to debug it with proxy for mocking Graph API responses. You can customize the desired Graph API responses.
- Refer to Get started with Dev Proxy to install devproxy first.
- Open the project with VS Code, open the
Run and Debug Activity
Panel and selectDebug in Teams with proxy (Edge)
. - Please refer to Proxy Mode for more information.
Version History
Date | Author | Comments |
---|---|---|
May 18, 2022 | hund030 | update to support Teams Toolkit v4.0.0 |
Dec 8, 2022 | hund030 | update to support Teams Toolkit v5.0.0 |
Mar 11, 2024 | xzf0587 | update to support proxy |
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!