Skip to content

Commit

Permalink
Merge pull request #961 from OfficeDev/v-mfurquan/toolkit-migration-r…
Browse files Browse the repository at this point in the history
…esolved-conflicts

[Toolkit Migration] Remaining samples and resolved merged conflicts.
  • Loading branch information
Pawank-MSFT authored Oct 10, 2023
2 parents e043a85 + 9f5fcaf commit a7b39b1
Show file tree
Hide file tree
Showing 69 changed files with 53,341 additions and 17,385 deletions.
5 changes: 3 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
|8|Tab SSO | Microsoft Teams sample app for tabs Azure AD SSO |[View][tab-sso#cs] | [View][tab-sso#ts] ![toolkit-icon](assets/toolkit-icon.png)
|9|Config Tab Authentication | Microsoft Teams sample app for config tabs Azure AD authentication | [View][tab-channel-group=config-csharp] | | |[View](/samples/tab-channel-group-config-page-auth/csharp/demo-manifest/tab-channel-group-config-page-auth.zip)
|10|Deep Link consuming Subentity ID | Microsoft Teams sample app for demonstrating deeplink from Bot chat to Tab consuming Subentity ID | [View][tab-deeplink#csharp] | | [View][tab-deeplink#nodejs] ![toolkit-icon](assets/toolkit-icon.png) |
|11|Integrate graph toolkit component in teams tab | Microsoft Teams tab sample app for demonstrating graph toolkit component |[View][tab-graph-toolkit#csharp]|[View][tab-graph-toolkit#js]|
|11|Integrate graph toolkit component in teams tab | Microsoft Teams tab sample app for demonstrating graph toolkit component |[View][tab-graph-toolkit#csharp]|[View][tab-graph-toolkit#js] ![toolkit-icon](assets/toolkit-icon.png)|
|12|Device permissions | Microsoft Teams tab sample app for demonstrating device permissions | | [View][tab-device-permissions#js] ![toolkit-icon](assets/toolkit-icon.png) ||[View](/samples/tab-device-permissions/nodejs/demo-manifest/tab-device-permissions.zip)|
|13|Build tabs with Adaptive Cards | Microsoft Teams tab sample code which demonstrates how to [Build tabs with Adaptive Cards](https://docs.microsoft.com/microsoftteams/platform/tabs/how-to/build-adaptive-card-tabs) | [View][tab-adaptive-cards#csharp]|| [View][tab-adaptive-cards#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/tab-adaptive-cards/csharp/demo-manifest/tab-adaptive-card.zip)|
|14|Tab in stage view | Microsoft Teams tab sample app for demonstrating tab in stage view |[View][tab-stage-view#csharp] | | [View][tab-stage-view#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/tab-stage-view/csharp/demo-manifest/tab-stage-view.zip)|
Expand Down Expand Up @@ -170,7 +170,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
|7|Region Selection App | This app contains a bot and Tab which is helpful to set the region |[View][region-selection-app#cs] ||[View](/samples/app-region-selection/csharp/demo-manifest/app-region-selection.zip)
|8|App Localization | Microsoft Teams app localization using Bot and Tab |[View][app-localization#cs] |[View][app-localization#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/app-localization/csharp/demo-manifest/app-localization.zip)
|9|Details Tab in Meetings | Microsoft Teams meeting extensibility sample for iteracting with Details Tab in-meeting |[View][meetings-details-tab#cs] |[View][meetings-details-tab#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/meetings-details-tab/csharp/demo-manifest/meetings-details-tab.zip)
|10|App SSO | Microsoft Teams app SSO for Tab, Bot, ME - search, action, linkunfurl |[View][app-sso#cs] |[View][app-sso#js]|[View](/samples/app-sso/csharp/demo-manifest/App-SSO.zip)
|10|App SSO | Microsoft Teams app SSO for Tab, Bot, ME - search, action, linkunfurl |[View][app-sso#cs] |[View][app-sso#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/app-sso/csharp/demo-manifest/App-SSO.zip)
|11|Meetings Stage View | Enable and configure your apps for Teams meetings to use in stage view |[View][meetings-stage-view#cs] |[View][meetings-stage-view#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/meetings-stage-view/csharp/demo-manifest/Meeting-stage-view.zip)
|12|Meeting Events | Get real time meeting events |[View][meetings-events#cs] | [View][meetings-events#js] ![toolkit-icon](assets/toolkit-icon.png) |[View](/samples/meetings-events/csharp/demo-manifest/Meetings-Events.zip)
|13|Meeting Recruitment App | Sample app showing meeting app experience for interview scenario.|[View][meeting-recruitment-app#cs] |[View][meeting-recruitment-app#js] ![toolkit-icon](assets/toolkit-icon.png)|[View](/samples/meeting-recruitment-app/csharp/demo-manifest/Meeting-Recruitment-App.zip)
Expand Down Expand Up @@ -199,6 +199,7 @@ The [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDev
|36|meetings-audio-state|This is an sample tab (side panel) application which shows how to mute/unmute Teams meeting audio using toggle Incoming Client Audio API.||[View][meetings-audio-state#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|
|37|meetings-context-app|This sample shows the contents of meeting tab context object in a meeting tab and using bot's meeting API, meeting participant details and meeting details are sent to user.|[View][meetings-context-app#csharp]|[View][meetings-context-app#nodejs] ![toolkit-icon](assets/toolkit-icon.png)|


## Application templates

| | App Name | Description | Code |
Expand Down
44 changes: 44 additions & 0 deletions samples/app-complete-auth/nodejs/.gitignore
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,47 @@
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# production
/build

# misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

#############

# TeamsFx files
env/.env.*.user
env/.env.local
.localConfigs
appManifest/build
/build

# dependencies
node_modules/

# misc
.env
.deployment
.DS_Store

# build
lib/
5 changes: 5 additions & 0 deletions samples/app-complete-auth/nodejs/.vscode/extensions.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"recommendations": [
"TeamsDevApp.ms-teams-vscode-extension"
]
}
73 changes: 73 additions & 0 deletions samples/app-complete-auth/nodejs/.vscode/launch.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch App (Edge)",
"type": "msedge",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Local Service"
],
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
},
{
"name": "Launch App (Chrome)",
"type": "chrome",
"request": "launch",
"url": "https://teams.microsoft.com/l/app/${{local:TEAMS_APP_ID}}?installAppPackage=true&webjoin=true&${account-hint}",
"cascadeTerminateToConfigurations": [
"Attach to Local Service"
],
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
},
{
"name": "Attach to Local Service",
"type": "node",
"request": "attach",
"port": 9239,
"restart": true,
"presentation": {
"group": "all",
"hidden": true
},
"internalConsoleOptions": "neverOpen"
}
],
"compounds": [
{
"name": "Debug (Edge)",
"configurations": [
"Launch App (Edge)",
"Attach to Local Service"
],
"preLaunchTask": "Start Teams App Locally",
"presentation": {
"group": "all",
"order": 1
},
"stopAll": true
},
{
"name": "Debug (Chrome)",
"configurations": [
"Launch App (Chrome)",
"Attach to Local Service"
],
"preLaunchTask": "Start Teams App Locally",
"presentation": {
"group": "all",
"order": 2
},
"stopAll": true
}
]
}
11 changes: 11 additions & 0 deletions samples/app-complete-auth/nodejs/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"debug.onTaskErrors": "abort",
"json.schemas": [
{
"fileMatch": [
"/aad.*.json"
],
"schema": {}
}
]
}
105 changes: 105 additions & 0 deletions samples/app-complete-auth/nodejs/.vscode/tasks.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
// This file is automatically generated by Teams Toolkit.
// The teamsfx tasks defined in this file require Teams Toolkit version >= 5.0.0.
// See https://aka.ms/teamsfx-tasks for details on how to customize each task.
{
"version": "2.0.0",
"tasks": [
{
"label": "Start Teams App Locally",
"dependsOn": [
"Validate prerequisites",
"Start local tunnel",
"Provision",
"Deploy",
"Start application"
],
"dependsOrder": "sequence"
},
{
// Check all required prerequisites.
// See https://aka.ms/teamsfx-tasks/check-prerequisites to know the details and how to customize the args.
"label": "Validate prerequisites",
"type": "teamsfx",
"command": "debug-check-prerequisites",
"args": {
"prerequisites": [
"nodejs", // Validate if Node.js is installed.
"m365Account", // Sign-in prompt for Microsoft 365 account, then validate if the account enables the sideloading permission.
"portOccupancy" // Validate available ports to ensure those debug ones are not occupied.
],
"portOccupancy": [
3978, // app service port
9239 // app inspector port for Node.js debugger
]
}
},
{
// Start the local tunnel service to forward public URL to local port and inspect traffic.
// See https://aka.ms/teamsfx-tasks/local-tunnel for the detailed args definitions.
"label": "Start local tunnel",
"type": "teamsfx",
"command": "debug-start-local-tunnel",
"args": {
"type": "dev-tunnel",
"ports": [
{
"portNumber": 3978,
"protocol": "http",
"access": "public",
"writeToEnvironmentFile": {
"endpoint": "BOT_ENDPOINT", // output tunnel endpoint as BOT_ENDPOINT
"domain": "BOT_DOMAIN" // output tunnel domain as BOT_DOMAIN
}
}
],
"env": "local"
},
"isBackground": true,
"problemMatcher": "$teamsfx-local-tunnel-watch"
},
{
// Create the debug resources.
// See https://aka.ms/teamsfx-tasks/provision to know the details and how to customize the args.
"label": "Provision",
"type": "teamsfx",
"command": "provision",
"args": {
"env": "local"
}
},
{
// Build project.
// See See https://aka.ms/teamsfx-tasks/deploy to know the details and how to customize the args.
"label": "Deploy",
"type": "teamsfx",
"command": "deploy",
"args": {
"env": "local"
}
},
{
"label": "Start application",
"type": "shell",
"command": "npm run dev:teamsfx",
"isBackground": true,
"options": {
"cwd": "${workspaceFolder}"
},
"problemMatcher": {
"pattern": [
{
"regexp": "^.*$",
"file": 0,
"location": 1,
"message": 2
}
],
"background": {
"activeOnStart": true,
"beginsPattern": "[nodemon] starting",
"endsPattern": "restify listening to|Bot/ME service listening at|[nodemon] app crashed"
}
}
}
]
}
27 changes: 21 additions & 6 deletions samples/app-complete-auth/nodejs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -38,8 +38,22 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can

- Microsoft Teams is installed and you have an account (not a guest account)
- [NodeJS](https://nodejs.org/en/)
- [dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) or [ngrok](https://ngrok.com/) latest version or equivalent tunnelling solution
- [dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) or [ngrok](https://ngrok.com/) latest version or equivalent tunneling solution
- [M365 developer account](https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) or access to a Teams account with the appropriate permissions to install an app.
- [Teams Toolkit for VS Code](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) or [TeamsFx CLI](https://learn.microsoft.com/microsoftteams/platform/toolkit/teamsfx-cli?pivots=version-one)

## 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](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. Select **File > Open Folder** in VS Code and choose this samples 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.
1. 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.
## Setup

Expand Down Expand Up @@ -119,9 +133,9 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can
### 2. Setup NGROK
1) Run ngrok - point to port 3978

```bash
```bash
ngrok http 3978 --host-header="localhost:3978"
```
```

Alternatively, you can also use the `dev tunnels`. Please follow [Create and host a dev tunnel](https://learn.microsoft.com/en-us/azure/developer/dev-tunnels/get-started?tabs=windows) and host the tunnel with anonymous user access command as shown below:

Expand Down Expand Up @@ -150,7 +164,7 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can
- `{{MicrosoftAppId}}` - Generated from Step 1 (Application (client) ID)is the application app id
- `{{TenantId}}` - Generated from Step 1(Directory (tenant) ID) is the tenant id
- `{{MicrosoftAppPassword}}` - Generated from Step 14, also referred to as Client secret
- `{{ApplicationBaseUrll}}` - Your application's base url. E.g. https://12345.ngrok-free.app if you are using ngrok and if you are using dev tunnels, your URL will be https://12345.devtunnels.ms.
- `{{ApplicationBaseUrll}}` - Your application's base url. E.g. https://12345.ngrok-free.app if you are using ngrok and if you are using dev tunnels then your base url will be like: `https://12345.devtunnels.ms`.
- `{{ Connection Name }}` - Generated from step 15.
- `{{FacebookAppId}} and {{FacebookAppPassword}} and {{ FBConnectionName}}`- Generated from step 16.
- `{{AppType}}` - The value for app type will me `MultiTenant`.
Expand All @@ -165,15 +179,16 @@ Please find below demo manifest which is deployed on Microsoft Azure and you can
1. Modify the `manifest.json` in the `/appManifest` folder and replace the following details:
- `{{MicrosoftAppId}}` with Application id generated from Step 3
- `{Base_URL_Domain}` - Your application's base url domain. E.g. for https://12345.ngrok-free.app the base url domain will be 12345.ngrok-free.app if you are using ngrok and if you are using dev tunnels then your domain will be like: `12345.devtunnels.ms`.
- `{Base_URL_Domain}` - Your application's base url domain. E.g. for https://12345.ngrok-free.app the base url domain will be `12345.ngrok-free.app` when you are using ngrok and if you are using dev tunnels then your domain will be like: `12345.devtunnels.ms`.

**Note:** If you want to test your app across multi hub like: Outlook/Office.com, please update the `manifest.json` in the `app-complete-auth\nodejs` folder with the required values.

2. Zip the contents of the `appManifest` folder to create a `manifest.zip` or `appManifest_Hub` folder into a `manifest.zip`.(Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)

3. Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")
- Go to Microsoft Teams and then go to side panel, select Apps
- Choose Upload a custom App
- Go to your project directory, the ./AppPackage folder, select the zip folder, and choose Open.
- 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.

**Note**: To test facebook auth flow please setup the sample locally as due to limitations from facebook you cannot test the facebook auth flow in the deployed version of app.
Expand Down
Loading

0 comments on commit a7b39b1

Please sign in to comment.