[JS] chore: update setup for echo/search/oauth bot/ME/adaptive card (#…

…998) ## Linked issues closes: #980 #981 #982 ## Details Provide a list of your changes here. If you are fixing a bug, please provide steps to reproduce the bug. #### Change details - rename MicrosoftAppId, MicrosoftAppPassword - update README - remove npm install from teamsapp.local.yml ## Attestation Checklist - [x] My code follows the style guidelines of this project - I have checked for/fixed spelling, linting, and other errors - I have commented my code for clarity - I have made corresponding changes to the documentation (we use [TypeDoc](https://typedoc.org/) to document our code) - My changes generate no new warnings - I have added tests that validates my changes, and provides sufficient test coverage. I have tested with: - Local testing - E2E testing in Teams - New and existing unit tests pass locally with my changes ### Additional information > Feel free to add other relevant information below
microsoft · Dec 6, 2023 · 142f215 · 142f215
1 parent ea204aa
commit 142f215
Show file tree

Hide file tree

Showing 22 changed files with 188 additions and 124 deletions.
diff --git a/js/samples/01.messaging.a.echoBot/README.md b/js/samples/01.messaging.a.echoBot/README.md
@@ -2,6 +2,26 @@
 
 This sample shows how to incorporate a basic conversational flow into a Microsoft Teams application using [Bot Framework](https://dev.botframework.com) and the Teams AI SDK.
 
+<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
+
+<!-- code_chunk_output -->
+
+- [Teams Echo Bot](#teams-echo-bot)
+  - [Showcase](#showcase)
+  - [Setting up the sample](#setting-up-the-sample)
+  - [Teams Toolkit for Visual Studio Code](#teams-toolkit-for-visual-studio-code)
+    - [Prerequisites](#prerequisites)
+    - [Run the sample](#run-the-sample)
+  - [Interacting with the bot](#interacting-with-the-bot)
+  - [Other ways to run the sample](#other-ways-to-run-the-sample)
+    - [Teams Toolkit CLI](#teams-toolkit-cli)
+    - [Manual resource management and uploading to Teams](#manual-resource-management-and-uploading-to-teams)
+    - [BotFramework Emulator](#botframework-emulator)
+  - [Deploy the bot to Azure](#deploy-the-bot-to-azure)
+  - [Further reading](#further-reading)
+
+<!-- /code_chunk_output -->
+
 ## Showcase
 
 - The bot echos back any message it receives. That's it!

diff --git a/js/samples/01.messaging.a.echoBot/infra/azure.bicep b/js/samples/01.messaging.a.echoBot/infra/azure.bicep
@@ -53,11 +53,11 @@ resource webApp 'Microsoft.Web/sites@2021-02-01' = {
           value: '1'
         }
         {
-          name: 'MicrosoftAppId'
+          name: 'BOT_ID'
           value: botAadAppClientId
         }
         {
-          name: 'MicrosoftAppPassword'
+          name: 'BOT_PASSWORD'
           value: botAadAppClientSecret
         }
       ]

diff --git a/js/samples/01.messaging.a.echoBot/teamsapp.local.yml b/js/samples/01.messaging.a.echoBot/teamsapp.local.yml
@@ -63,15 +63,10 @@ provision:
 # Defines what the `deploy` lifecycle step does with Teams Toolkit.
 # Runs after `provision` during Start Debugging (F5) or run manually using `teamsfx deploy --env local`.
 deploy:
-  # Ensures that the project dependnecies are installed.
-  - uses: cli/runNpmCommand
-    with:
-      args: install --no-audit
-
   # Provides the Teams Toolkit .env file values to the apps runtime so they can be accessed with `process.env`.
   - uses: file/createOrUpdateEnvironmentFile
     with:
       target: ./.env
       envs:
-        MicrosoftAppId: ${{BOT_ID}}
-        MicrosoftAppPassword: ${{SECRET_BOT_PASSWORD}}
+        BOT_ID: ${{BOT_ID}}
+        BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}}
diff --git a/js/samples/01.messaging.a.echoBot/teamsapp.yml b/js/samples/01.messaging.a.echoBot/teamsapp.yml
@@ -13,103 +13,103 @@ environmentFolderPath: ./env
 # Defines what the `provision` lifecycle step does with Teams Toolkit.
 # Runs with the Provision menu or CLI using `teamsfx provision --env {environment name}`.
 provision:
-    # Automates the creation of a Teams app registration and saves the App ID to an environment file.
-    - uses: teamsApp/create
-      with:
-          name: EchoBot-${{TEAMSFX_ENV}}
-      writeToEnvironmentFile:
-          teamsAppId: TEAMS_APP_ID
+  # Automates the creation of a Teams app registration and saves the App ID to an environment file.
+  - uses: teamsApp/create
+    with:
+      name: EchoBot-${{TEAMSFX_ENV}}
+    writeToEnvironmentFile:
+      teamsAppId: TEAMS_APP_ID
 
-    # Automates the creation an Azure AD app registration which is required for a bot.
-    # The Bot ID (AAD app client ID) and Bot Password (AAD app client secret) are saved to an environment file.
-    - uses: botAadApp/create
-      with:
-          name: EchoBot-${{TEAMSFX_ENV}}
-      writeToEnvironmentFile:
-          botId: BOT_ID
-          botPassword: SECRET_BOT_PASSWORD
+  # Automates the creation an Azure AD app registration which is required for a bot.
+  # The Bot ID (AAD app client ID) and Bot Password (AAD app client secret) are saved to an environment file.
+  - uses: botAadApp/create
+    with:
+      name: EchoBot-${{TEAMSFX_ENV}}
+    writeToEnvironmentFile:
+      botId: BOT_ID
+      botPassword: SECRET_BOT_PASSWORD
 
-    # Automates the creation of infrastructure defined in ARM templates to host the bot.
-    # The created resource IDs are saved to an environment file.
-    - uses: arm/deploy
-      with:
-          subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
-          resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
-          templates:
-              - path: ./infra/azure.bicep
-                parameters: ./infra/azure.parameters.json
-                deploymentName: Create-resources-for-tab
-          bicepCliVersion: v0.9.1
+  # Automates the creation of infrastructure defined in ARM templates to host the bot.
+  # The created resource IDs are saved to an environment file.
+  - uses: arm/deploy
+    with:
+      subscriptionId: ${{AZURE_SUBSCRIPTION_ID}}
+      resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}}
+      templates:
+        - path: ./infra/azure.bicep
+          parameters: ./infra/azure.parameters.json
+          deploymentName: Create-resources-for-tab
+      bicepCliVersion: v0.9.1
 
-    # Optional: Automates schema and error checking of the Teams app manifest and outputs the results in the console.
-    - uses: teamsApp/validateManifest
-      with:
-          manifestPath: ./appPackage/manifest.json
+  # Optional: Automates schema and error checking of the Teams app manifest and outputs the results in the console.
+  - uses: teamsApp/validateManifest
+    with:
+      manifestPath: ./appPackage/manifest.json
 
-    # Automates creating a final app package (.zip) by replacing any variables in the manifest.json file for the current environment.
-    - uses: teamsApp/zipAppPackage
-      with:
-          manifestPath: ./appPackage/manifest.json
-          outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
-          outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+  # Automates creating a final app package (.zip) by replacing any variables in the manifest.json file for the current environment.
+  - uses: teamsApp/zipAppPackage
+    with:
+      manifestPath: ./appPackage/manifest.json
+      outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+      outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
 
-    # Optional: Automates an app package check for errors that would prevent the app from being published and reports any problems.
-    - uses: teamsApp/validateAppPackage
-      with:
-          appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Optional: Automates an app package check for errors that would prevent the app from being published and reports any problems.
+  - uses: teamsApp/validateAppPackage
+    with:
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
 
-    # Automates updating the Teams app manifest in Teams Developer Portal using the App ID from the mainfest file.
-    # This action ensures that any manifest changes are reflected when launching the app again in Teams.
-    - uses: teamsApp/update
-      with:
-          appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Automates updating the Teams app manifest in Teams Developer Portal using the App ID from the mainfest file.
+  # This action ensures that any manifest changes are reflected when launching the app again in Teams.
+  - uses: teamsApp/update
+    with:
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
 
 # Defines what the `deploy` lifecycle step does with Teams Toolkit.
 # Runs with the Deploy menu or CLI using `teamsfx deploy --env {environment name}`.
 deploy:
-    # Install any dependencies and build the web app using NPM
-    - uses: cli/runNpmCommand
-      name: install dependencies
-      with:
-          args: install
+  # Install any dependencies and build the web app using NPM
+  - uses: cli/runNpmCommand
+    name: install dependencies
+    with:
+      args: install
 
-    - uses: cli/runNpmCommand
-      name: build app
-      with:
-          args: run build --if-present
+  - uses: cli/runNpmCommand
+    name: build app
+    with:
+      args: run build --if-present
 
-    # Deploy to an Azure App Service using the zip file created in the provision step.
-    - uses: azureAppService/zipDeploy
-      with:
-          artifactFolder: .
-          ignoreFile: .webappignore
-          # This example uses the env var thats generated by the arm/deploy action.
-          # You can replace it with an existing Azure Resource ID or other
-          # custom environment variable.
-          resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}
+  # Deploy to an Azure App Service using the zip file created in the provision step.
+  - uses: azureAppService/zipDeploy
+    with:
+      artifactFolder: .
+      ignoreFile: .webappignore
+      # This example uses the env var thats generated by the arm/deploy action.
+      # You can replace it with an existing Azure Resource ID or other
+      # custom environment variable.
+      resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}}
 
 # Defines what the `publish` lifecycle step does with Teams Toolkit.
 # Runs with the Deploy menu or CLI using `teamsfx publish --env {environment name}`.
 publish:
-    # Optional: Automates schema and error checking of the Teams app manifest and outputs the results in the console.
-    - uses: teamsApp/validateManifest
-      with:
-          manifestPath: ./appPackage/manifest.json
+  # Optional: Automates schema and error checking of the Teams app manifest and outputs the results in the console.
+  - uses: teamsApp/validateManifest
+    with:
+      manifestPath: ./appPackage/manifest.json
 
-    # Automates creating a final app package (.zip) by replacing any variables in the manifest.json file for the current environment.
-    - uses: teamsApp/zipAppPackage
-      with:
-          manifestPath: ./appPackage/manifest.json
-          outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
-          outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
+  # Automates creating a final app package (.zip) by replacing any variables in the manifest.json file for the current environment.
+  - uses: teamsApp/zipAppPackage
+    with:
+      manifestPath: ./appPackage/manifest.json
+      outputZipPath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+      outputJsonPath: ./appPackage/build/manifest.${{TEAMSFX_ENV}}.json
 
-    # Optional: Automates an app package check for errors that would prevent the app from being published and reports any problems.
-    - uses: teamsApp/validateAppPackage
-      with:
-          appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Optional: Automates an app package check for errors that would prevent the app from being published and reports any problems.
+  - uses: teamsApp/validateAppPackage
+    with:
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
 
-    # Automates updating the Teams app manifest in Teams Developer Portal using the App ID from the mainfest file.
-    # This action ensures that any manifest changes are reflected when launching the app again in Teams.
-    - uses: teamsApp/update
-      with:
-          appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
+  # Automates updating the Teams app manifest in Teams Developer Portal using the App ID from the mainfest file.
+  # This action ensures that any manifest changes are reflected when launching the app again in Teams.
+  - uses: teamsApp/update
+    with:
+      appPackagePath: ./appPackage/build/appPackage.${{TEAMSFX_ENV}}.zip
diff --git a/js/samples/02.messageExtensions.a.searchCommand/README.md b/js/samples/02.messageExtensions.a.searchCommand/README.md
@@ -2,6 +2,28 @@
 
 This sample shows how to incorporate a basic Message Extension app into a Microsoft Teams application using [Bot Framework](https://dev.botframework.com) and the Teams AI SDK. Users can search npmjs for packages.
 
+<!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
+
+<!-- code_chunk_output -->
+
+- [Teams Search Command Message Extension](#teams-search-command-message-extension)
+  - [Showcase](#showcase)
+  - [Setting up the sample](#setting-up-the-sample)
+  - [Multiple ways to test](#multiple-ways-to-test)
+  - [Teams Toolkit for Visual Studio Code](#teams-toolkit-for-visual-studio-code)
+    - [Prerequisites](#prerequisites)
+    - [Run the sample](#run-the-sample)
+  - [Interacting with the bot](#interacting-with-the-bot)
+  - [Other ways to run the sample](#other-ways-to-run-the-sample)
+    - [Teams Toolkit CLI](#teams-toolkit-cli)
+    - [Manual resource management and uploading to Teams](#manual-resource-management-and-uploading-to-teams)
+    - [BotFramework Emulator](#botframework-emulator)
+  - [Deploy the bot to Azure](#deploy-the-bot-to-azure)
+  - [Further reading](#further-reading)
+
+<!-- /code_chunk_output -->
+
+
 ## Showcase
 - Message Extensions are convenient ways to add functionality to Teams.
 - This sample adds a search command to the compose area of a chat.

diff --git a/js/samples/02.messageExtensions.a.searchCommand/infra/azure.bicep b/js/samples/02.messageExtensions.a.searchCommand/infra/azure.bicep
@@ -53,11 +53,11 @@ resource webApp 'Microsoft.Web/sites@2021-02-01' = {
           value: '1'
         }
         {
-          name: 'MicrosoftAppId'
+          name: 'BOT_ID'
           value: botAadAppClientId
         }
         {
-          name: 'MicrosoftAppPassword'
+          name: 'BOT_PASSWORD'
           value: botAadAppClientSecret
         }
       ]

diff --git a/js/samples/02.messageExtensions.a.searchCommand/teamsapp.local.yml b/js/samples/02.messageExtensions.a.searchCommand/teamsapp.local.yml
@@ -63,15 +63,10 @@ provision:
 # Defines what the `deploy` lifecycle step does with Teams Toolkit.
 # Runs after `provision` during Start Debugging (F5) or run manually using `teamsfx deploy --env local`.
 deploy:
-  # Ensures that the project dependnecies are installed.
-  - uses: cli/runNpmCommand
-    with:
-      args: install --no-audit
-
   # Provides the Teams Toolkit .env file values to the apps runtime so they can be accessed with `process.env`.
   - uses: file/createOrUpdateEnvironmentFile
     with:
       target: ./.env
       envs:
-        MicrosoftAppId: ${{BOT_ID}}
-        MicrosoftAppPassword: ${{SECRET_BOT_PASSWORD}}
+        BOT_ID: ${{BOT_ID}}
+        BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}}
diff --git a/js/samples/06.auth.oauth.adaptiveCard/.gitignore b/js/samples/06.auth.oauth.adaptiveCard/.gitignore
@@ -115,4 +115,5 @@ appPackage/build
 .deployment
 
 .env.*
-.env
+.env
+build
diff --git a/js/samples/06.auth.oauth.adaptiveCard/README.md b/js/samples/06.auth.oauth.adaptiveCard/README.md
@@ -4,6 +4,10 @@ This sample shows how to incorporate a basic conversational flow into a Microsof
 
 This sample requires creating an OAuth Connection in Azure Bot Service, which provides a token store to store the token after sign-in.
 
+Note that this bot will only work in tenants where the following graph scopes are permitted:
+
+- `User.Read`
+
 <!-- @import "[TOC]" {cmd="toc" depthFrom=1 depthTo=6 orderedList=false} -->
 
 <!-- code_chunk_output -->
@@ -60,6 +64,8 @@ The simplest way to run this sample in Teams is to use Teams Toolkit for Visual
 
 1. Ensure you have downloaded and installed [Visual Studio Code](https://code.visualstudio.com/docs/setup/setup-overview)
 1. Install the [Teams Toolkit extension](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension)
+   1. Login with your M365 account.
+   2. Login with your Azure account. Ensure that you have a valid subscription and resource group. This will be required to provision your bot.
 1. Select **File > Open Folder** in VS Code and choose this sample's directory from the repo
 1. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps
 1. Select **Debug > Start Debugging** or **F5** to run the app in a Teams web client.

diff --git a/js/samples/06.auth.oauth.adaptiveCard/infra/azure.bicep b/js/samples/06.auth.oauth.adaptiveCard/infra/azure.bicep
@@ -55,11 +55,11 @@ resource webApp 'Microsoft.Web/sites@2021-02-01' = {
           value: '1'
         }
         {
-          name: 'MicrosoftAppId'
+          name: 'BOT_ID'
           value: botAadAppClientId
         }
         {
-          name: 'MicrosoftAppPassword'
+          name: 'BOT_PASSWORD'
           value: botAadAppClientSecret
         }
         {

diff --git a/js/samples/06.auth.oauth.adaptiveCard/src/index.ts b/js/samples/06.auth.oauth.adaptiveCard/src/index.ts
@@ -11,14 +11,10 @@ import * as restify from 'restify';
 // See https://aka.ms/bot-services to learn more about the different parts of a bot.
 import {
     ActivityTypes,
-    CardFactory,
     CloudAdapter,
     ConfigurationBotFrameworkAuthentication,
-    ConfigurationBotFrameworkAuthenticationOptions,
+    ConfigurationServiceClientCredentialFactory,
     MemoryStorage,
-    MessagingExtensionAttachment,
-    MessagingExtensionResult,
-    TaskModuleTaskInfo,
     TurnContext
 } from 'botbuilder';
 
@@ -27,7 +23,12 @@ const ENV_FILE = path.join(__dirname, '..', '.env');
 config({ path: ENV_FILE });
 
 const botFrameworkAuthentication = new ConfigurationBotFrameworkAuthentication(
-    process.env as ConfigurationBotFrameworkAuthenticationOptions
+    {},
+    new ConfigurationServiceClientCredentialFactory({
+        MicrosoftAppId: process.env.BOT_ID,
+        MicrosoftAppPassword: process.env.BOT_PASSWORD,
+        MicrosoftAppType: 'MultiTenant'
+    })
 );
 
 // Create adapter.

diff --git a/js/samples/06.auth.oauth.adaptiveCard/teamsapp.local.yml b/js/samples/06.auth.oauth.adaptiveCard/teamsapp.local.yml
@@ -106,7 +106,7 @@ deploy:
     with:
       target: ./.env
       envs:
-        MicrosoftAppId: ${{BOT_ID}}
-        MicrosoftAppPassword: ${{SECRET_BOT_PASSWORD}}
+        BOT_ID: ${{BOT_ID}}
+        BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}}
         # an arbitrary name for the connection
         OAUTH_CONNECTION_NAME: graph-connection
-Original file line number
+Diff line change
@@ Expand Up / @@ -115,4 +115,5 @@ appPackage/build @@
     .deployment
     .env.*
-    .env
+    .env
+    build