How to create single sign-on authentication for tab apps with Microsoft Teams Toolkit for Visual Studio Code
With over 15,000 installs to date since its release this past summer, the Microsoft Teams Toolkit for Visual Studio Code has quickly become a popular tool that developers use to create, debug, and deploy Microsoft Teams apps. We built the toolkit to serve as your “one-stop shop” for all your Teams app needs, and we’ve continued to enhance it with new capabilities at every version update. That’s why we’re excited to announce that with version 1.1.3, you’ll be able to create single sign-on (SSO) authentication with Azure Active Directory (AAD) for Teams tab apps directly within the toolkit! We’ll take care of the Azure app registration and configuration process to make this as streamlined as possible.
Get started
- Start by selecting tab as the type of capability you’d like to extend
- Select the option to support SSO
Configure your project
- To enable SSO within Teams, your app must have an Azure app registration resource. The toolkit will provision the app registration on your behalf.
- Enter the URL where your app will be hosted and click ‘Register’. Your app registration will be configured using the provided URL.
- The app registration’s configuration details will be stored in the .env files in your project’s source code.
Run your project
- Start installing the libraries – there are two project folders that get created with a SSO project:
1) API Server [api-server] used to exchange the access token provided by Teams to get a token for accessing graph resources that you need for your app.
2) Source [src] contains the server logic that serves your front end
- Select npm install from the api-server Then npm start.
- Select npm install from the src folder. Then npm start.
- If you are using a tunneling service like ngrok, run it and make sure the URL matches with what you entered in the project creation wizard. If it doesn’t, you will need to update your API URI and redirect URL in the app registration that was created in Azure.
- Navigate to the activity bar on the left side of the Visual Studio Code window.
- Select the Run icon to display the Run and Debug
- You can also use the keyboard shortcut Ctrl+Shift+D.
Watch and learn
Rather watch and learn? Watch a short clip where our duo of Karthig Balendran and Allen Snow from the Microsoft Teams engineering team provide a demo and walkthrough.
Resources
- Docs: Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs
- Toolkit: Install the Microsoft Teams Toolkit for Visual Studio Code
- Teams Dev Center: Start your Teams app development journey in our Teams Dev Center
Thank you
We hope you that you’ve enjoyed learning about creating a tab-based Teams app that performs SSO authentication. Please make sure to update to the latest version of the Teams Toolkit for Visual Studio Code (v1.1.3) and try out our new SSO capability for tabs and provide any feedback so that we can continue to enhance and meet your needs!
Happy coding!
Light
Dark