Copilot Plugin + SSO + TypeScript

This Copilot Plugin POC TypeScript project is based on traditional search-based Teams Message Extension.

I added SSO Auth features [SignIn, SignOut] after referecing the previous TME Javascript sample and new Copilot Plugin SSO Csharp sample.

The project shows Copilot Plugin can sign in as Microsoft Graph User and retrieve Graph information.

To use this project, it requires Microsoft Entra ID app and Bot framework OAuth setup knowledge.

Comparing to non-SSO Copilot plugin, please pay attention to below differences:

1. Provision, and deploy the project to Azure, it will create Entra registered Bot App and Azure Bot Service. Make sure following the guide BOT SSO Setup to setup the Entra App (it can be the same as your bot Entra registered app) and configure OAuth configuration on Azure Bot service.

2. In manifest.json, it requires webApplicationInfo property (for example, if your graph SSO app is the same bot app, and this bot app exposed API in api://${{BOT_ID}} format.)

"webApplicationInfo": {
        "id": "${{BOT_ID}}",
        "resource": "api://${{BOT_ID}}"
      }

Note: Change the settings according to your real Graph SSO app setup.

3. In manifest.json, add "token.botframework.com" to "validateDomains"

4. By default, local debug bot service doesn't include OAuth connection setting, you need to publish to Azure and then configure the Bot service.

5. Don't forget to add "CONNECTION_NAME" variable to the bot web application on Azure. Its value is your Bot Service OAuth connection name, which is configured at step 1.

   For example, in Bot Service, I used "SSO" as my OAuth connection name:

   

   In Web App Configuration, need to add "SSO" as the CONNECTION_NAME value:

   

Test

1. Provision, deploy the project to Azure.

2. Side load the app package to Teams.

3. In Copilot Plugin setting, enable SSO Planet Dev plugin:

   

4. Ask the question: "ask for SSO-PlanetSearch-Dev about Jupiter"

5. Click Sign in, make sure input the user account in the tenant of your OAuth Graph App.

   

6. After sign in successfully, the response card is updated to Signed in.

   

7. Ask the question again: "ask for SSO-PlanetSearch-Dev about Jupiter". We can see the resonsed card contains Jupiter info and current user info (name, email, graph photo)

   

8. Click Sign Out, get Task Module response.

   

9. Ask a different question, you will be prompted to sign again.

Overview of Custom Search Results template

This app template is a search-based message extension that allows users to search an external system and share results through the compose message area of the Microsoft Teams client. You can now build and run your search-based message extensions in Teams, Outlook for Windows desktop and web experiences.

Get started with the template

Prerequisites

To run the template in your local dev machine, you will need:

• Node.js, supported versions: 16, 18
• A Microsoft 365 account for development
• Set up your dev environment for extending Teams apps across Microsoft 365 Please note that after you enrolled your developer tenant in Office 365 Target Release, it may take couple days for the enrollment to take effect.
• Teams Toolkit Visual Studio Code Extension version 5.0.0 and higher or Teams Toolkit CLI

1. First, select the Teams Toolkit icon on the left in the VS Code toolbar.
2. In the Account section, sign in with your Microsoft 365 account if you haven't already.
3. Press F5 to start debugging which launches your app in Teams using a web browser. Select Debug (Edge) or Debug (Chrome).
4. When Teams launches in the browser, select the Add button in the dialog to install your app to Teams.
5. To trigger the Message Extension, you can:
   1. In Teams: @mention Your message extension from the search box area, @mention your message extension from the compose message area or click the ... under compose message area to find your message extension.
   2. In Outlook: click the More apps icon under compose email area to find your message extension.

Congratulations! You are running an application that can now search npm registries in Teams and Outlook.

What's included in the template

Folder	Contents
.vscode/	VSCode files for debugging
appPackage/	Templates for the Teams application manifest
env/	Environment files
infra/	Templates for provisioning Azure resources
src/	The source code for the search application

The following files can be customized and demonstrate an example implementation to get you started.

File	Contents
src/searchApp.ts	Handles the business logic for this app template to query npm registry and return result list.
src/index.ts	index.ts is used to setup and configure the Message Extension.

The following are Teams Toolkit specific project files. You can visit a complete guide on Github to understand how Teams Toolkit works.

File	Contents
teamsapp.yml	This is the main Teams Toolkit project file. The project file defines two primary things: Properties and configuration Stage definitions.
teamsapp.local.yml	This overrides teamsapp.yml with actions that enable local execution and debugging.

Extend the template

Following documentation will help you to extend the template.

• Add or manage the environment
• Create multi-capability app
• Add single sign on to your app
• Access data in Microsoft Graph
• Use an existing Azure Active Directory application
• Customize the Teams app manifest
• Host your app in Azure by provision cloud resources and deploy the code to cloud
• Collaborate on app development
• Set up the CI/CD pipeline
• Publish the app to your organization or the Microsoft Teams app store
• Develop with Teams Toolkit CLI
• Preview the app on mobile clients