{"id":5625,"date":"2020-12-01T11:02:43","date_gmt":"2020-12-01T19:02:43","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=5625"},"modified":"2021-12-07T18:07:02","modified_gmt":"2021-12-08T02:07:02","slug":"how-to-create-single-sign-on-authentication-for-tab-apps-with-microsoft-teams-toolkit-for-visual-studio-code","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/how-to-create-single-sign-on-authentication-for-tab-apps-with-microsoft-teams-toolkit-for-visual-studio-code\/","title":{"rendered":"How to create single sign-on authentication for tab apps with Microsoft Teams Toolkit for Visual Studio Code"},"content":{"rendered":"<p><img decoding=\"async\" class=\"alignleft wp-image-5630\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Microsoft-Teams-and-Visual-Studio-Code-product-logos.png\" alt=\"Microsoft Teams and Visual Studio Code product logos\" width=\"850\" height=\"301\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Microsoft-Teams-and-Visual-Studio-Code-product-logos.png 981w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Microsoft-Teams-and-Visual-Studio-Code-product-logos-300x106.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Microsoft-Teams-and-Visual-Studio-Code-product-logos-768x272.png 768w\" sizes=\"(max-width: 850px) 100vw, 850px\" \/><\/p>\n<p>With over 15,000 installs to date since its release this past summer, the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TeamsDevApp.ms-teams-vscode-extension\">Microsoft Teams Toolkit for Visual Studio Code<\/a> 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 \u201cone-stop shop\u201d for all your Teams app needs, and we\u2019ve continued to enhance it with new capabilities at every version update. That\u2019s why we&#8217;re excited to announce that with version 1.1.3, you\u2019ll be able to create single sign-on (SSO) authentication with Azure Active Directory (AAD) for Teams tab apps directly within the toolkit! We\u2019ll take care of the Azure app registration and configuration process to make this as streamlined as possible.<\/p>\n<h3>Get started<\/h3>\n<ul>\n<li>Start by selecting tab as the type of capability you\u2019d like to extend<\/li>\n<\/ul>\n<p><a href=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Project-Setup-screen-in-Teams-Toolkit.png\"><img decoding=\"async\" class=\"alignleft wp-image-5626 size-full\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Project-Setup-screen-in-Teams-Toolkit.png\" alt=\"\u2018Project Setup\u2019 screen in Teams Toolkit\" width=\"942\" height=\"539\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Project-Setup-screen-in-Teams-Toolkit.png 942w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Project-Setup-screen-in-Teams-Toolkit-300x172.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Project-Setup-screen-in-Teams-Toolkit-768x439.png 768w\" sizes=\"(max-width: 942px) 100vw, 942px\" \/><\/a><\/p>\n<ul>\n<li>Select the option to support SSO<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignleft wp-image-5631\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/SSO-enablement-option-within-toolkit.png\" alt=\"SSO enablement option within toolkit\" width=\"650\" height=\"443\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/SSO-enablement-option-within-toolkit.png 944w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/SSO-enablement-option-within-toolkit-300x204.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/SSO-enablement-option-within-toolkit-768x523.png 768w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<h3>Configure your project<\/h3>\n<ul>\n<li>To enable SSO within Teams, your app must have an Azure app registration resource. The toolkit will provision the app registration on your behalf.<\/li>\n<li>Enter the URL where your app will be hosted and click \u2018Register\u2019. Your app registration will be configured using the provided URL.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignleft wp-image-5628\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Domain-name-entry-field.png\" alt=\"Domain name entry field\" width=\"650\" height=\"136\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Domain-name-entry-field.png 943w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Domain-name-entry-field-300x63.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Domain-name-entry-field-768x161.png 768w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><img decoding=\"async\" class=\"alignleft wp-image-5629\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Fields-completed-after-app-is-registered-in-Azure.png\" alt=\"Fields completed after app is registered in Azure\" width=\"650\" height=\"153\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Fields-completed-after-app-is-registered-in-Azure.png 906w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Fields-completed-after-app-is-registered-in-Azure-300x71.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Fields-completed-after-app-is-registered-in-Azure-768x181.png 768w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<ul>\n<li>The app registration&#8217;s configuration details will be stored in the <strong>.env <\/strong>files in your project&#8217;s source code.<\/li>\n<\/ul>\n<p><img decoding=\"async\" class=\"alignleft wp-image-5627\" src=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Configuration-details-in-the-.env-file.png\" alt=\"Configuration details in the .env file\" width=\"650\" height=\"160\" srcset=\"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Configuration-details-in-the-.env-file.png 875w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Configuration-details-in-the-.env-file-300x74.png 300w, https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-content\/uploads\/sites\/73\/2020\/11\/Configuration-details-in-the-.env-file-768x190.png 768w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/p>\n<h3>Run your project<\/h3>\n<ul>\n<li>Start installing the libraries \u2013 there are two project folders that get created with a SSO project:<\/li>\n<\/ul>\n<p>1) <strong>API Server [<em>api-server]<\/em><\/strong> used to exchange the access token provided by Teams to get a token for accessing graph resources that you need for your app.<\/p>\n<p>2) <strong>Source <em>[src]<\/em><\/strong> contains the server logic that serves your front end<\/p>\n<ul>\n<li>Select <strong>npm install<\/strong> from the <em>api-server<\/em> Then <strong>npm start<\/strong>.<\/li>\n<li>Select <strong>npm install<\/strong> from the <em>src folder<\/em>. Then <strong>npm start<\/strong>.<\/li>\n<li>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&#8217;t, you will need to update your API URI and redirect URL in the app registration that was created in Azure.<\/li>\n<li>Navigate to the activity bar on the left side of the Visual Studio Code window.<\/li>\n<li>Select the <strong>Run<\/strong> icon to display the <strong>Run and Debug<\/strong><\/li>\n<li>You can also use the keyboard shortcut <strong>Ctrl+Shift+D<\/strong>.<\/li>\n<\/ul>\n<h3>Watch and learn<\/h3>\n<p>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.<\/p>\n<h3>Resources<\/h3>\n<ul>\n<li><strong>Docs:<\/strong> <a href=\"https:\/\/docs.microsoft.com\/en-us\/microsoftteams\/platform\/toolkit\/visual-studio-code-tab-sso\">Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs<\/a><\/li>\n<li><strong>Toolkit:<\/strong> <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=TeamsDevApp.ms-teams-vscode-extension\">Install the Microsoft Teams Toolkit for Visual Studio Code<\/a><\/li>\n<li><strong>Teams Dev Center:<\/strong> <a href=\"https:\/\/developer.microsoft.com\/en-us\/microsoft-teams\/\">Start your Teams app development journey in our Teams Dev Center<\/a><\/li>\n<\/ul>\n<p>Thank you<\/p>\n<p>We hope you that you\u2019ve 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!<\/p>\n<p>Happy coding!<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re excited to announce that with Microsoft Teams Toolkit for Visual Studio Code version 1.1.3, you\u2019ll be able to create single sign-on (SSO) authentication with Azure Active Directory (AAD) for Teams tab apps directly within the toolkit<\/p>\n","protected":false},"author":69076,"featured_media":25159,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[128],"tags":[23,43,44],"class_list":["post-5625","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-teams","tag-teams-toolkit","tag-sso","tag-visual-studio-code"],"acf":[],"blog_post_summary":"<p>We&#8217;re excited to announce that with Microsoft Teams Toolkit for Visual Studio Code version 1.1.3, you\u2019ll be able to create single sign-on (SSO) authentication with Azure Active Directory (AAD) for Teams tab apps directly within the toolkit<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5625","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69076"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=5625"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/5625\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/25159"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=5625"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=5625"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=5625"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}