React with Fluent UI - OfficeDev/TeamsFx GitHub Wiki
Architecture
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.
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
.