Microsoft 365 Code | Decode is a series that focuses on breaking down topics for developers to understand concepts better. In this segment, Bob and Rabia decode Single Sign-on (SSO) in a Teams tab app. Watch the video and get a detailed breakdown below.
Why do you need SSO?
Applications that are interconnected yet independent often require users to login separately to access and use them. This often disrupts the overall usability of an app and the satisfaction of users.
In the above video, Bob has a Teams tab that retrieves the email messages of the logged-in user from Microsoft Graph with the click of a button. Unfortunately, there is a pop-up dialogue that keeps showing up whenever he opens the tab. This slightly annoying pop-up makes it hard for users to engage with the application from multiple devices.
We can fix this by enabling SSO in Teams which allows the Teams tab app to use services connected to Azure AD with security and compliance, without the need to sign in again and again. No pop-up, no prompts.
What is SSO for any application?
Single sign on allows users to log in once with their credentials and access services without having to re-enter them over and over.
What is Teams SSO?
Teams SSO is when users can use a Microsoft Teams application with the same login they used when they signed into Microsoft Teams. The process is completely silent unless the application needs to ask the user to grant additional permissions.
In the above diagram, we see how a SSO-enabled Teams tab functions.
The process is simple:
- The client code uses Microsoft Teams JS SDK https://aka.ms/teams-js-sdk and gets an access token from Microsoft Teams. This token gives only basic user data information and is not usable to retrieve data from Microsoft Graph.
- The client calls a web service, which is part of the Teams application. This web service calls Azure Active Directory to exchange the token from step one for an access token targeted to the Microsoft Graph, with the permission needed to retrieve the user’s profile.
Check out this excellent article, Securely connect to Microsoft Graph from Teams tabs using SSO, by Waldek Mastykarz (Microsoft) who also makes a special appearance in our video.
How can you enable SSO in Teams Tab application?
There are three steps to complete to enable SSO in your Teams tab application.
Sample showing token exchange
Here is the sample that shows the token exchange between client and service side code. In the sample we are displaying the token from Teams as well as the access token to retrieve Microsoft Graph data.
Decoding the tokens
We further dissect and view claims for each token using a web-based tool by Microsoft called jwt.ms. The interesting aspect to investigate in the payload is aud claim, which identifies who the audience is for this token. The initial access token from Microsoft Teams JS SDK has the sample application URI as the audience (aud) since the token is meant for the application, while the access token from Azure AD has Microsoft Graph app id as the audience.
Postman demo for Microsoft Graph call
Next using postman, we call the Microsoft Graph endpoint with the access token to demonstrate that the token can successfully retrieve the user profile information from Microsoft Graph.
Complete the simple demo to call Microsoft Graph
We then call Microsoft Graph with the token received and send the data back to client code to display as below.
Best practices
Call services in your server-side code using the token and return only the data back to the client. Read more about it in the blog by Waldek Mastykarz under the section Call Graph server-side and return only the data.
Advanced SSO sample with consent pop-up
The simple sample to show Teams tab SSO assumes that the scopes needed to access data from Microsoft Graph are pre-consented. It may be wise to use dynamic consent instead and list only the scopes your app needs at any moment. Bob deep dives into the sample and explains how that can be achieved in our video.
Check out how dynamic consents in Teams tab SSO can be implemented with pop-up dialogs and redirection URLs. Here is the sample that includes the ability to pop up a consent dialog when needed.
0 comments