-
Notifications
You must be signed in to change notification settings - Fork 167
React with Fluent UI
Here is an overall architectural diagram for the React with Fluent UI
app template:
This app template has three major components:
-
Azure Storage: Host the React app with Fluent UI. The code of the React app can be found in the
src
folder. -
Azure Function: Middle-tier service to call Graph. Adopted On-Behalf-Of flow. Code of the Azure Function can be found in
api
folder. -
Microsoft Entra: Both
Azure Storage
andAzure Function
are configured with Microsoft Entra app and use the Microsoft Entra app for authentication.
Some key points in the authentication flow:
-
Get SSO token and call Azure Function with SSO token
This app uses
TeamsFx
SDK to get SSO token from Microsoft 365 apps. Related code can be found insrc\components\samples\AzureFunction.ts
. -
Get access token with SSO token
This app uses
createMicrosoftGraphClientWithCredential
to create a graph client and will automatically request for access token with provided SSO token. Related code can be found inapi\index.ts
.
Scenario-based Tutorials
- Send notifications to Teams
- Respond to chat commands in Teams
- Respond to card actions in Teams
- Embed a dashboard canvas in Teams
Extend Teams app across Microsoft 365
- Create and test a personal tab across Microsoft 365
- Create and test a search-based message extension across Microsoft 365
Documentation
- Manage Application settings with Teams Toolkit
- Manage Microsoft Entra Application Registration with Teams Toolkit
How To Guides
- How to use an existing Microsoft Entra app
- How to use a multi-tenant Microsoft Entra app
- How to customize debug tasks
- How to connect to existing APIs
- How to add single sign on in Teams Toolkit for Visual Studio Code
- How to enable Single Sign-on in Teams Toolkit for Visual Studio
- How to configure Tab capability within your Teams app
- How to configure Bot capability within your Teams app
- How to configure an Outlook Add-in capability within your Teams app
- How to configure Message Extension capability within your Teams app
- How to automate ci/cd pipelines
- How to integrate Azure Functions with your Teams app
- How to integrate Azure API Management