nodejs

page_type	description	products	languages	extensions	urlFragment
sample	This sample demonstrates a Node.js Messaging Extension for Microsoft Teams that includes a configuration page and supports single sign-on (SSO) authentication for enhanced user experience.	office-teams office office-365	javascript nodejs	contentType createdDate samples 07/07/2021 01:38:27 PM	officedev-microsoft-teams-samples-samples-msgext-search-sso-config-nodejs

Messaging Extension SSO Config Bot

This comprehensive Node.js sample illustrates the development of a Messaging Extension for Microsoft Teams, integrating a configuration page and single sign-on (SSO) capabilities using the Bot Framework v4. Designed for seamless user interaction, this extension allows users to perform searches and retrieve profile information while ensuring secure authentication through SSO.

Included Features

• Bots
• Message Extensions (with teams sso)
• Search Commands

Interaction with app

Prerequisites

• Microsoft Teams is installed and you have an account
• NodeJS version v16.14.2 or Higher Version
• dev tunnel or ngrok or equivalent tunnelling solution

This bot has been created using Bot Framework, it shows how to use a Messaging Extension configuration page, as well as how to sign in from a search Messaging Extension.

Run the app (Using Teams Toolkit for Visual Studio Code)

The simplest way to run this sample in Teams is to use Teams Toolkit for Visual Studio Code.

1. Ensure you have downloaded and installed Visual Studio Code
2. Install the Teams Toolkit extension
3. Select File > Open Folder in VS Code and choose this samples directory from the repo
4. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
5. Select Debug > Start Debugging or F5 to run the app in a Teams web client.
6. In the browser that launches, select the Add button to install the app to Teams.

If you do not have permission to upload custom apps (sideloading), Teams Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.

Run the app (Manually Uploading to Teams)

Note these instructions are for running the sample on your local machine, the tunnelling solution is required because the Teams service needs to call into the bot.

1. Setup for Bot SSO
   Refer to Bot SSO Setup document.

2. Setup NGROK

• 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

3. Setup for code

• Clone the repository

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

• Update the .env configuration for the bot to use the Microsoft App Id and App Password from the Bot Framework registration. The SiteUrl is the URL that generated by ngrok and start with "https". (Note the MicrosoftAppId is the AppId created in step 1., the MicrosoftAppPassword is referred to as the "client secret" in step1.2 and you can always create a new client secret anytime.)

• Run your bot sample Under the root of this sample folder, build and run by commands:

• npm install

• npm start

4. Setup Manifest for Teams

• This step is specific to Teams.

  • Edit the manifest.json contained in the ./appManifest 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 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.

• **Interacting with the Message Extension in Teams Once the Messaging Extension is installed, find the icon for Config Auth Search in the Compose Box's Messaging Extension menu. Right click to choose Settings and view the Config page. Click the icon to display the search window, type anything it will show your profile picture.

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

Deploy the bot to Azure

To learn more about deploying a bot to Azure, see Deploy your bot to Azure for a complete list of deployment instructions.

Running the sample

Zero install link unfurling card

Sign in on search:

Configuration page:

Display profile on search:

Profile card:

Signout:

Further reading

• How Microsoft Teams bots work

• Zero Install Link Unfurling