nodejs

page_type	description	products	languages	extensions	urlFragment
sample	Microsoft Teams app SSO for Tab, Bot, ME - search, action, linkunfurl	office-teams office office-365	nodejs	contentType createdDate samples 07-07-2021 13:38:25	officedev-microsoft-teams-samples-app-sso-nodejs

App SSO Node

This app talks about the Teams Tab, Bot, ME - search, action, linkunfurl SSO with Node JS

Tab SSO This sample shows how to implement Azure AD single sign-on support for tabs. It will

• Obtain an access token for the logged-in user using SSO
• Call a web service - also part of this project - to exchange this access token
• Call Graph and retrieve the user's profile

Bot, ME SSO Bot Framework v4 bot using Teams authentication

This bot has been created using Bot Framework, it shows how to get started with authentication in a bot for Microsoft Teams.

The focus of this sample is how to use the Bot Framework support for oauth in your bot. Teams behaves slightly differently than other channels in this regard. Specifically an Invoke Activity is sent to the bot rather than the Event Activity used by other channels. This Invoke Activity must be forwarded to the dialog if the OAuthPrompt is being used. This is done by subclassing the ActivityHandler and this sample includes a reusable TeamsActivityHandler. This class is a candidate for future inclusion in the Bot Framework SDK.

The sample uses the bot authentication capabilities in Azure Bot Service, providing features to make it easier to develop a bot that authenticates users to various identity providers such as Azure AD (Azure Active Directory), GitHub, Uber, etc. The OAuth token is then used to make basic Microsoft Graph queries. Refer the SSO setup documentation.

IMPORTANT: The manifest file in this app adds "token.botframework.com" to the list of validDomains. This must be included in any bot that uses the Bot Framework OAuth flow.

Prerequisites

1. A global administrator account for an Office 365 tenant. Testing in a production tenant is not recommended! You can get a free tenant for development use by signing up for the Office 365 Developer Program (not a guest account).

2. To test locally, NodeJS must be installed on your development machine (version 10.14 or higher).

   # determine node version
   node --version

3. To test locally, you'll need Ngrok installed on your development machine. Make sure you've downloaded and installed Ngrok on your local machine. ngrok will tunnel requests from the Internet to your local computer and terminate the SSL connection from Teams.

NOTE: The free ngrok plan will generate a new URL every time you run it, which requires you to update your Azure AD registration, the Teams app manifest, and the project configuration. A paid account with a permanent ngrok URL is recommended.

4. Required Permissions * Make sure you have the following Graph permissions enabled: email, offline_access, openid, profile, and User.Read (default). * For permissions Manage > API Permissions * Our SSO flow will give you access to the first 4 permissions, and we will have to exchange the token server-side to get an elevated token for the profile permission (for example, if we want access to the user's profile photo).

To try this sample

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

NOTE: Create Bot Framework registration resource in Azure - Use the current https URL you were given by running ngrok. Append with the path /api/messages used by this sample - Ensure that you've enabled the Teams Channel - If you don't have an Azure account you can use this Bot Framework registration >Important: As we are building app with Bot & Tab in Step 1.3 change the api://botid-{YourBotId to api://fully-qualified-domain-name.com/botid-{YourBotId} > >Sample Application Id URI: api://43dfa1bc0d1e.ngrok.io/botid-eddbe35e-4878-99d2-.......946c4aac7

1. Clone the repository

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

2. In a console, navigate to samples/app-sso/nodejs

   cd samples/app-sso/nodejs

3. Run ngrok - point to port 3978

   ngrok http -host-header=localhost 3978

4. Update the .env configuration for the bot to use the MicrosoftAppId (Microsoft App Id), MicrosoftAppPassword (App Password) and connectionName (OAuth Connection Name) from the Bot Framework registration.

   NOTE: the App Password is referred to as the client secret in the azure portal and you can always create a new client secret anytime.

5. Install modules & Run the NodeJS Server

   • Server will run on PORT: 4001
   • Open a terminal and navigate to project root directory

   npm run server

   This command is equivalent to: npm install > npm run build-client > npm start

6. Install modules & Run the React Client

   • Client will run on PORT: 3978
   • Open a terminal and navigate to project root directory

   npm run client

   This command is equivalent to: cd client > npm install > npm start

   NOTE: You might see an error sometimes like below but it shouldn't be a problem if your Server is running on PORT 4001

7. Teams manifest changes.

   • Edit the manifest.json contained in the teamsAppManifest folder to replace your Microsoft App Id (that was created when you registered your bot earlier) everywhere you see the place holder string <<YOUR-MICROSOFT-APP-ID>> (depending on the scenario the Microsoft App Id may occur multiple times in the manifest.json) also update the <<DOMAIN-NAME>> with the ngrok URL
   • Zip up the contents of the teamsAppManifest folder to create a manifest.zip
   • Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

Interacting with the bot in Teams

Note: This manifest.json specified that the bot will be installed in a "personal" scope only. Please refer to Teams documentation for more details.

You can interact with this bot by sending it a message. The bot will respond by requesting you to login to AAD, then making a call to the Graph API on your behalf and returning the results.

• Install App

• Type anything on the compose box and send
• The bot will perform Single Sign-On and Profile card will be displayed along with the option prompt to view the token

NOTE: If the user is using the application for the first time and user consent is required for additional permissions, the following dialog box appears to continue with the consent experience

If the bot couldn't perform SSO then it will fallback to normal Authentication method and show a Sign In card like below

• Open Messaging Extension(Search), it will show profile details

• Open Messaging Extension(Action), it will show profile details

or

• Open Messaging Extension(linkunfurl), The link will unfurl and show profile details

Paste https://profile.botframework.com on the compose box

NOTE: If SSO couldn't be performed then it will fallback to normal Authentication method and you will get a default Sign In action

Consent the ME Search by clicking the Sign In link like below

Consent the ME Action by clicking the Setup button like below

• Open SSO Tab, Continue and then Accept and it'll show the profile details

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.

Further reading

• Bot Framework Documentation
• Bot Basics
• SSO for Bot
• SSO for Messaging Extensions
• SSO for Tab
• Azure Portal
• Add Authentication to Your Bot Via Azure Bot Service
• Activity processing
• Azure Bot Service Introduction
• Azure Bot Service Documentation
• Azure CLI
• Azure Portal
• Language Understanding using LUIS
• Channels and Bot Connector Service
• dotenv
• Microsoft Teams Developer Platform