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.

• How to use Teams 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.

• Node.js, supported versions: 16, 18
• A Microsoft 365 account. If you do not have Microsoft 365 account, apply one from Microsoft 365 developer program
• Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or TeamsFx CLI

• 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...".

• From VS Code:

  1. hit F5 to start debugging. Alternatively open the Run and Debug Activity Panel and select Debug (Edge) or Debug (Chrome).

• From TeamsFx CLI:

  1. Run command: teamsfx provision --env local .
  2. Run command: teamsfx deploy --env local .
  3. Run command: teamsfx preview --env local .

• From VS Code:

  1. Sign into Azure by clicking the Sign in to Azure under the ACCOUNTS section from sidebar.
  2. Click Provision from LIFECYCLE section or open the command palette and select: Teams: Provision.
  3. Click Deploy or open the command palette and select: Teams: Deploy.

• From TeamsFx CLI:

  1. Run command: teamsfx account login azure.
  2. Run command: teamsfx provision --env dev.
  3. Run command: teamsfx deploy --env dev.

• From VS Code:

  1. Open the Run and Debug Activity Panel. Select Launch Remote (Edge) or Launch Remote (Chrome) from the launch configuration drop-down.

• From TeamsFx CLI:

  1. Run command: teamsfx preview --env dev.

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!