SSO Enabled Tab via APIM Proxy - OfficeDev/TeamsFx GitHub Wiki
Overview
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.
SSO Enabled Tab via APIM Proxy shows you how to build a single-page Tab app with Graph Toolkit in frontend, Azure API Management (APIM) as Proxy for calling Graph APIs. APIM has adopted On-Behalf-Of flow for SSO.
With this sample, you can achieve the SSO feature in your tab app using OBO (on-behalf-of) flow without building a dedicated backend service.
This sample illustrates
- How to use Teams Toolkit to create a Teams tab app.
- How to use integrate APIM in TeamsFx projects.
- How to implement SSO in Teams Tab app.
- How to use APIM as proxy of Graph Toolkit, use SSO token to call Graph and get user login info.
Note
-
This sample has adopted On-Behalf-Of Flow to implement SSO.
-
This sample uses Azure API Management as proxy, and make authenticated requests to call Graph.
-
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...".
Benefits
-
This sample is an single page application, which can avoid login issue on mobile platform by implementing OBO Flow.
-
Secure your app by only using Access Token inside API Management.
-
Easily integrate with Graph Toolkit to access Graph in the Teams app.
Architecture
Here is an overall architectural diagram for the SSO Enabled Tab via APIM Proxy
sample:
Authentication
Minimal path to awesome
Run this app locally
-
Hit
F5
to start debugging. Alternatively open theRun and Debug Activity
Panel and selectDebug (Edge)
orDebug (Chrome)
.APIM is required in this sample. TeamsFx will provision APIM on Azure, and will ask you to input
subscription
andresource group name
.
Run this app on Azure
-
Click
Provision
fromLIFECYCLE
section or open the command palette and select:Teams: Provision
. -
Click
Deploy
or open the command palette and select:Teams: Deploy
. -
Open the
Run and Debug Activity
Panel. SelectLaunch Remote (Edge)
orLaunch Remote (Chrome)
from the launch configuration drop-down.