csharp

page_type	products	languages	extensions	description	urlFragment
sample	office-teams office-365	csharp	contentType technologies createdDate updateDate samples Tabs Microsoft Bot Framework v4 09/22/2017 05:54:09 PM 9/15/2021	Sample that shows how to build a bot for Microsoft Teams in C# with bot framework v4. This sample also features facebook authentication using bot.	officedev-microsoft-teams-samples-app-complete-sample-csharp

Microsoft Teams Bot in C#

Sample that shows how to build a bot for Microsoft Teams in C#.

Included Features

• Bots
• Tabs
• Messaging Extensions
• Adaptive Cards
• Facebook Authentication (bots)

Interaction with app

Try it yourself - experience the App in your Microsoft Teams client

Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app manifest (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, see steps here).

Microsoft Teams Bot: Manifest

Prerequisites

• Install Git for windows: https://git-for-windows.github.io/

• .NET Core SDK version 6.0

  determine dotnet version

  dotnet --version

• dev tunnel or ngrok (For local environment testing) latest version (any other tunneling software can also be used)

• Teams Microsoft Teams is installed and you have an account

Setup

NOTE: Teams does not work nor render things exactly like the Bot Emulator, but it is a quick way to see if your bot is running and functioning correctly.

1. Register a new application in the Microsoft Entra ID – App Registrations portal.

2. Setup for Bot

   • Register a Microsoft Entra ID aap registration in Azure portal.
   • Also, register a bot with Azure Bot Service, following the instructions here.
   • Ensure that you've enabled the Teams Channel
   • While registering the bot, use https://<your_tunnel_domain>/api/messages as the messaging endpoint.

   NOTE: When you create your app registration, you will create an App ID and App password - make sure you keep these for later.

3. Run ngrok - point to port 3978

   ngrok http 3978 --host-header="localhost:3978"

   Alternatively, you can also use the dev tunnels. Please follow Create and host a dev tunnel and host the tunnel with anonymous user access command as shown below:

   devtunnel host -p 3978 --allow-anonymous

4. Setup for code

• Clone the repository

  git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

5. Modify the /appsettings.json and fill in the following details:

• {{BotId}} - Generated from Step 1 is the application app id

• {{MicrosoftAppId}} - Generated from Step 1 is the application app id

• {{MicrosoftAppPassword}} - Generated from Step 1, also referred to as Client secret

• {{BaseUri}} - Your application's base url. E.g. https://12345.ngrok-free.app if you are using ngrok and if you are using dev tunnels, your URL will be https://12345.devtunnels.ms.

  Here is an example for reference:

6. To test facebook auth flow create a facebookapp and get client id and secret for facebook app. Now go to your bot channel registartion -> configuration -> Add OAuth connection string

   • Provide connection Name : for eg FBConnectionName
   • Provide FBProfileUrl: for eg FBProfileUrl

7. Run the bot from a terminal or from Visual Studio:

   A) From a terminal, navigate to samples/app-complete-sample/csharp

   # run the bot
   dotnet run

   Or from Visual Studio - Launch Visual Studio - File -> Open -> Project/Solution - Navigate to app-complete-sample folder - Select AppCompleteSample.sln file - Press F5 to run the project

8. Setup Manifest for Teams

   • This step is specific to Teams.

     • Edit the manifest.json contained in the ./AppManifest or ./AppManifest_Hub folder to replace your Microsoft App Id (that was created when you registered your app registration earlier) everywhere you see the place holder string {{Microsoft-App-Id}} (depending on the scenario the Microsoft App Id may occur multiple times in the manifest.json)
     • Edit the manifest.json for validDomains and replace {{domain-name}} with base Url of your domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your domain-name will be 1234.ngrok-free.app and if you are using dev tunnels then your domain will be like: 12345.devtunnels.ms.
     • Zip up the contents of the AppManifest or AppManifest_Hub folder to create a manifest.zip (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)

   • Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

     • Go to Microsoft Teams. From the lower left corner, select Apps
     • From the lower left corner, choose Upload a custom App
     • Go to your project directory, the ./AppManifest folder, select the zip folder, and choose Open.
     • Select Add in the pop-up dialog box. Your app is uploaded to Teams.

Note: If you want to test your app across multi hub like: Outlook/Office.com, please update the manifest.json in the /AppManifest_Hub folder with the required values.

Note: If you are facing any issue in your app, please uncomment this line and put your debugger for local debug.

Congratulations!!! You have just created and sideloaded your first Microsoft Teams app! Try adding a configurable tab, at-mentioning your bot by its registered name, or viewing your static tabs.

NOTE: Most of this sample app's functionality will now work. The only limitations are the authentication examples because your app is not registered with Microsoft Entra ID nor Visual Studio Team Services.

Overview

This project is meant to help a Teams developer in two ways. First, it is meant to show many examples of how an app can integrate into Teams. Second, it is meant to give a set of patterns, templates, and tools that can be used as a starting point for creating a larger, scalable, more enterprise level bot to work within Teams. Although this project focuses on creating a robust bot, it does include simples examples of tabs as well as examples of how a bot can give links into these tabs.

What it is

At a high level, this project is written in C#, built to run a .Net, and uses the BotFramework to handle the bot's requests and responses. This project is designed to be run in Visual Studio using its debugger in order to leverage breakpoints. Most directories will hold a README file which will describe what the files within that directory do. The easiest way to get started is to follow the steps listed in the "Steps to get started running the Bot Emulator". Once this is complete and running, the easiest way to add your own content is to create a new dialog in src/dialogs by copying one from src/dialogs/examples, change it accordingly, and then instantiate it with the others in the RootDialog.cs.

General Architecture

Most code files that need to be compile reside in the src directory. Most files outside of the src directory are static files used for either configuration or for providing static resources to tabs, e.g. images and html.

Files and Directories

• appManifest
  
  This directory holds the skeleton of a manifest.json file that can be altered in order sideload this application into a team.

• middleware
  
  This directory holds the stripping at mention for channel class and Invoke message processing.

• Views
  
  The main content of the static comes from the static files placed in /Views/BotInfo/BotInfo.cshtml.

• src
  
  This directory holds all the code files, which run the entire application.

• utility
  
  This directory holds utility functions for the project.

Steps included in migration of Bot framework from v3 to V4

1. Updated the following packages:

• Microsoft.Bot.Builder.Azure and Microsoft.Bot.Builder.Integration.AspNet.WebApi
• Autofac.WebApi2
• Bot.Builder.Community.Dialogs.Formflow

2. Updated messageController.cs

3. Added dilaogBot.cs. DialogExtension.cs, AdapterWithErrorHandler.cs

4. Updated Dialog files into waterfall model dialog.

Running the sample.

Outlook on the web

• To view your app in Outlook on the web.

• Go to Outlook on the weband sign in using your dev tenant account.

On the side bar, select More Apps. Your sideloaded app title appears among your installed apps

Select your app icon to launch and preview your app running in Outlook on the web

Select your app icon from message extension and find ward, it will show all options

Note: Similarly, you can test your application in the Outlook desktop app as well.

Office on the web

• To preview your app running in Office on the web.

• Log into office.com with test tenant credentials

Select the Apps icon on the side bar. Your sideloaded app title appears among your installed apps

Select your app icon to launch your app in Office on the web

Note: Similarly, you can test your application in the Office 365 desktop app as well.

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.microsoft.com.

When you submit a pull request, a CLA-bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., label, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Further reading

• Bot Framework Documentation
• Bot Basics
• Authentication basics
• Extend Teams apps across Microsoft 365
• Create facebook app for development