Skip to content

Latest commit

 

History

History
 
 

js

README.md

Teams Bot with SSO

Teams Bot with SSO using Bot Framework v4.

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

The focus of this sample is how to use the Bot Framework support for OAuth SSO 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.

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

  • Microsoft Teams is installed and you have an account (not a guest account)
  • NodeJS
  • ngrok or equivalent tunneling solution
  • M365 developer account or access to a Teams account with the appropriate permissions to install an app.

To try this sample

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. Create and configure AAD app

1.1 Create AAD app for SSO

This step will create an AAD app, it will be reused wherever it needs AAD throughout this sample to simpler the steps.

  • Navigate to Azure App Registration Blade

  • Click "New Registration" on the upper left corner

  • Fill out name and select third option for supported account type

  • Set Redirect Uri to "https://token.botframework.com/.auth/web/redirect" and click "Register":

    App Registration Organization

  • Navigate to the AAD app you just created, copy and paste the Application ID(will referred as AppId in this document) somewhere safe. You'll need it in a future step: Save Application ID

1.2 Create Client Secret

  • Navigate to the "Certificates & secrets" blade and add a client secret by clicking "New Client Secret"

    New Secret


  • Copy and paste the secret somewhere safe. You'll need it in a future step

1.3. Expose API endpoint

  • Click "Expose an API" in the left rail

    • Update your application ID URL to include your bot id - api://botid-, where is the id of the bot that will be making the SSO request and found in your Teams Application Manifest, which is the same you create and saved in step1.1: Application ID URI

    • Click "Add a scope"

      • access_as_user as the Scope name.

      • Set Who can consent? to Admins and users

      • Fill in the fields for configuring the admin and user consent prompts with values that are appropriate for the access_as_user scope. Suggestions:

        • Admin consent title: Teams can access the user’s profile

        • Admin consent description: Allows Teams to call the app’s web APIs as the current user.

        • User consent title: Teams can access your user profile and make requests on your behalf

      • User consent description: Enable Teams to call this app’s APIs with the same rights that you have

      • Ensure that State is set to Enabled

      • Select Add scope (Note: The domain part of the Scope name displayed just below the text field should automatically match the Application ID URI set in the previous step, with /access_as_user appended to the end)

      Add Scope

1.4. Authorize client applications

Add the following Ids as authorized clients for your application

  • 1fec8e78-bce4-4aaf-ab1b-5451cc387264 (Teams mobile/desktop application)

  • 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 (Teams web application)

    Add Client Application

1.5. Add any necessary API permissions for downstream calls

  • Navigate to "API permissions" blade on the left hand side

  • Add any user delegated permissions that your app will need to downstream APIs. This quick start only requires User.Read.

    Add Permissions

1.6. Enable implicit grant

  • Navigate to "Authentication"

  • Check the Access tokens and ID tokens boxes..

2. Setup bot in Azure Bot Service

2.1. Run ngrok - point to port 3978

ngrok http -host-header=rewrite 3978

2.2. Create new Bot Channel Registration resource in Azure

Create Bot Channels registration resource in Azure

  • For the "Messaging endpoint", use the current https URL you were given by running ngrok. Append with the path /api/messages:

  • For "Microsoft App ID and password", click "Create New", fill in the AppId and client secret you created in step1.1 and step 1.2: Create Bot Channels Registration

    Create Bot Channels Registration2

  • After you select Create, it will take a few moments for your bot service to be provisioned. Once you see a notification indicating the validation process is complete, navigate back to Home > Bot Services to find your bot. You may have to refresh the page to see your bot listed.

  • Ensure that you've enabled the Teams Channel

3. Setup Bot Service Connection (TokenStore)

  • In the Azure Portal, navigate back to the Bot Channels Registration created in Step 2

  • Switch to the "Settings" blade and click "Add Setting" under the OAuth Connection Settings section

    Add OAuth Settings

  • Fill out the Connection Setting form

    • Enter a name for your new Connection setting. This will be the name that gets referenced inside the settings of your bot service code in step 5

    • In the Service Provider dropdown, select Azure Active Directory V2

    • Enter in the client id and client secret obtained in step 2

    • For the Token Exchange URL use the Application ID URL obtained in step 2

    • Specify "common" as the Tenant ID

    • Add all the scopes configured when specifying permissions to downstream APIs in step 2

    • Click "Save"

    SSO Connection Settings

4. Configure bot sample

Update the .env configuration for the bot to use the Microsoft App Id and App Password from the Bot Framework registration. (Note the MicrosoftAppId is the AppId created in step 1.1, the MicrosoftAppPassword is referred to as the "client secret" in step1.2 and you can always create a new client secret anytime.)

5. Run your bot sample

Under the root of this sample folder, build and run by commands:

  • npm install
  • npm start

6. Configure and run the Teams app

  • Using App Studio

    • Open your app in App Studio's manifest editor.
    • Open the Bots page under Capabilities.
    • Choose Setup, then choose the existing bot option. Enter your AAD app registration ID from step 1.1. Select any of the scopes you wish to have the bot be installed.
    • Open Domains and permissions from under Finish. Enter the same ID from the step above in AAD App ID, then and append it to "api://botid-" and enter the URI into Single-Sign-On.
    • Open Test and distribute, then select Install.

  • Manually update the manifest.json

    • Edit the manifest.json contained in the appPackage/ folder to replace with your MicrosoftAppId (that was created in step1.1 and is the same value of MicrosoftAppId in .env file) everywhere you see the place holder string {TODO: MicrosoftAppId} (depending on the scenario the Microsoft App Id may occur multiple times in the manifest.json)
    • Zip up the contents of the appPackage/ folder to create a manifest.zip
    • Upload the manifest.zip to Teams (in the left-bottom Apps view, click "Upload a custom app")

You can interact with this bot by sending it a message. The bot will respond by asking for your consent, by this consent the Bot will exchange an SSO token, then making a call to the Graph API on your behalf and returning the results. It will keep you loggined unless you send a message "logout".

Further reading