{"id":232876,"date":"2021-06-07T08:43:31","date_gmt":"2021-06-07T15:43:31","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/visualstudio\/?p=232876"},"modified":"2021-06-07T08:43:31","modified_gmt":"2021-06-07T15:43:31","slug":"build-apps-for-microsoft-teams-with-net","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/visualstudio\/build-apps-for-microsoft-teams-with-net\/","title":{"rendered":"Build apps for Microsoft Teams with .NET"},"content":{"rendered":"

We recently announced updates to the Teams Toolkit – a streamlined way to create, debug, and deploy apps to Microsoft Teams. In this post, we\u2019re taking a closer look at how to get started developing a new Microsoft Teams app with .NET and Blazor using the Teams Toolkit extension for Visual Studio 2019 that\u2019s in early Preview.<\/p>\n

What are Teams apps?<\/h2>\n

Microsoft Teams apps extend the functionality of Teams to fit your team’s needs in an integrated and connected way.\u00a0Your app could\u00a0be simple and send notifications or get more complex and provide integration with your CRM to add, lookup, and\u00a0review customer data.<\/p>\n

Download and install the Teams Toolkit extension<\/h2>\n

To get started\u00a0building Teams apps,\u00a0visit the Teams Toolkit in the Visual Studio Marketplace<\/a>\u00a0and click the Download button.\u00a0Once downloaded, click the\u00a0Microsoft.VisualStudio.TeamsToolkit.vsix\u00a0file to begin the installation process.\u00a0Click Install to add the extension to Visual Studio 2019.<\/p>\n

\"VSIX<\/a><\/p>\n

Getting started using project templates<\/h2>\n

You\u2019re now ready to create your first Microsoft Teams app. One of the features included is a new project template. Currently, the template creates a Blazor Server application that is setup to work with Teams and includes all the dependencies you\u2019ll want to get started.\nTo begin, launch Visual Studio 2019\u00a0and click\u00a0Create a new project<\/strong>.\u00a0In the dialog, search for Teams to find the new Microsoft Teams App project template. Once selected, click\u00a0Next<\/strong>.<\/p>\n

Configure your project details on the screens that follow. The dialog gives you an opportunity to provide a name for your Teams app, but it can be changed or configured later too. Finally, clicking Create<\/strong> will complete the process and open your new solution in Visual Studio 2019.<\/p>\n

\"Visual<\/a><\/p>\n

Configure\u00a0identity\u00a0with one\u00a0click<\/h2>\n

One of our focuses with the Teams Toolkit is to help developers create apps that integrate with Teams with as close to zero-configuration as possible. We\u2019ve also listened to feedback on some of the challenges of creating Teams apps today and focused on making identity and single sign-on (SSO) simpler to setup.<\/p>\n

Before you start debugging,\u00a0navigate to the\u00a0Project >\u00a0TeamsFx<\/strong>\u00a0menu and click the\u00a0Configure for SSO\u2026<\/strong> menu option. Select an account with a Microsoft 365 tenant and all the required dependencies will be setup for your app. If you don\u2019t have M365, sign up for the Microsoft Developer Program<\/a>\u00a0first, which allows you to have a testing tenant with preconfigured permissions.<\/p>\n

Start debugging your app in\u00a0Teams<\/h2>\n

That\u2019s all the setup that is needed to get started, so the next step is\u00a0run\u00a0your app.\u00a0It\u2019s as easy as\u00a0clicking the\u00a0Start Debugging\u00a0button in the toolbar or\u00a0using\u00a0the\u00a0Debug > Start Debugging<\/strong>\u00a0menu option.\u00a0Visual Studio will launch Teams in a browser and offer to add your app. Click the\u00a0Add\u00a0button\u00a0to see your application running in Teams.<\/p>\n

\"Add<\/a><\/p>\n

The project template includes sample code to demonstrate the basics of\u00a0getting information about the authenticated user. Clicking\u00a0the Authorize button\u00a0will\u00a0prompt the user to accept the additional permissions required to use Microsoft Graph.<\/p>\n

\"New<\/a><\/p>\n

Exploring the project template<\/h2>\n

The project template includes a few dependencies and project setup criteria to make developing Teams app simpler.<\/p>\n

Microsoft.TeamsFx.SimpleAuth<\/h3>\n

Included\u00a0as a package reference\u00a0and\u00a0available on GitHub<\/a>\u00a0is the\u00a0Microsoft.TeamsFx.SimpleAuth\u00a0library which\u00a0helps with token acquisition for single sign-on. This is configured in the project\u00a0as middleware\u00a0with a\u00a0single line of code in the\u00a0ConfigureServices\u00a0method of the Startup class.<\/p>\n

services.AddTeamsFxSimpleAuth(Configuration);<\/pre>\n
Microsoft.Fast.Components.FluentUI<\/h3>\n
To help\u00a0build applications that\u00a0look and feel at home inside Teams, we\u2019ve included a new package that provides\u00a0a set of lightweight\u00a0Blazor\u00a0component wrappers around Fluent UI web components.\u00a0These are\u00a0optional for your application, but are provided by default to make it easy to build the UI of your app.\u00a0This project is available on GitHub<\/a> and we’d love your feedback!<\/p>\n
Teams\u00a0app manifest<\/h2>\n
All the details and configuration for a Teams app are controlled with a Teams app manifest. Inside the Properties folder of the project you\u2019ll find the manifest.json file. Use the manifest to configure the name of your Teams app, endpoints of the hosted web app, and which capabilities are provided. Visit the documentation to learn more about the manifest file<\/a>.<\/p>\n
\"developer\": {\r\n\"name\":\u00a0\"My Company\",\r\n\"websiteUrl\":\u00a0\"https:\/\/localhost:44357\",\r\n\"privacyUrl\":\u00a0\"https:\/\/localhost:44357\/privacy\",\r\n\"termsOfUseUrl\":\u00a0\"https:\/\/localhost:44357\/termsofuse\"\r\n},\r\n<\/pre>\n
After making changes to the manifest file, you can use the\u00a0Project >\u00a0TeamsFx\u00a0> Update Teams\u00a0Manifest<\/strong>\u00a0menu to update your application in the Teams Developer Portal.<\/p>\n
Share your feedback\u00a0and explore Teams\u00a0apps<\/h2>\n
The Teams Toolkit extension for Visual Studio 2019 is currently in Preview and during this time we\u2019re encouraging developers to try it out and share their feedback with us. We appreciated all the feedback we receive and it helps us deliver experiences that truly matter to you. To share your feedback, use the Help > Submit Feedback<\/strong>\u00a0menu in Visual Studio.\u00a0Also, be sure to\u00a0visit the documentation and learn more\u00a0about developing applications for Microsoft Teams!<\/p>\n","protected":false},"excerpt":{"rendered":"
Create, debug, and deploy web apps directly in Teams with Visual Studio and Blazor using an early preview of the Teams Toolkit extension available for Visual Studio 2019 today. Learn more about the Teams Toolkit and follow along to get started in under 5 minutes. <\/p>\n","protected":false},"author":557,"featured_media":232931,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[155,1029],"tags":[237,1377,6210,294,880,6811,6812],"class_list":["post-232876","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-visual-studio","category-web","tag-net","tag-asp-net-core","tag-blazor","tag-extensions","tag-get-started","tag-teams","tag-web-apps"],"acf":[],"blog_post_summary":"
Create, debug, and deploy web apps directly in Teams with Visual Studio and Blazor using an early preview of the Teams Toolkit extension available for Visual Studio 2019 today. Learn more about the Teams Toolkit and follow along to get started in under 5 minutes. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/232876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/users\/557"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/comments?post=232876"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/posts\/232876\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media\/232931"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/media?parent=232876"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/categories?post=232876"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/visualstudio\/wp-json\/wp\/v2\/tags?post=232876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}