| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Add Authentication | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/bots/how-to/authentication/add-authentication.md | Title: Add authentication to your Teams bot description: Learn how to enable authentication using third-party provider to a bot app in Teams using Azure AD. +ms.localizationpriority: high # Add authentication to your Teams bot In this article you'll learn: | Sample | BotBuilder version | Demonstrates | |:|::|:| | **Bot authentication** in [cs-auth-sample][teams-auth-bot-cs] | v4 | OAuthCard support |- | **Bot authentication** in [js-auth-sample][teams-auth-bot-js] | v4| OAuthCard support | + | **Bot authentication** in [js-auth-sample][teams-auth-bot-js] | v4 | OAuthCard support | | **Bot authentication** in [py-auth-sample][teams-auth-bot-py] | v4 | OAuthCard support | ## Create the resource group With the preliminary settings done, let's focus on the creation of the bot to us 1. Clone [node-auth-sample][teams-auth-bot-js]. 1. In a console, go to the project: </br></br>-`cd samples/bot-conversation-sso-quickstart/js` +`cd samples/bot-teams-authentication/nodejs` 1. Install modules</br></br> `npm install` 1. Update the **.env** configuration as follows: Alternatively, while in Visual Studio, you can follow these steps: :::image type="content" source="../../../assets/images/authentication/auth-bot-app-service.png" alt-text="Screenshot shows how to enter required information for auth app service."::: 1. Select **Create**.-1. If the deployment completes successfully, you should see it reflected in Visual Studio. A page is displayed in your default browser as *Your bot is ready!*. The URL will be similar to this: `https://botteamsauth.azurewebsites.net/`. Save it to a file. +1. If the deployment completes successfully, you should see it reflected in Visual Studio. A page is displayed in your default browser as *Your bot is ready!*. The URL is similar to this: `https://botteamsauth.azurewebsites.net/`. Save it to a file. 1. In your browser, go to the [**Azure portal**][azure-portal]. 1. Check your resource group, the bot should be listed along with the other resources. The following image is an example: Within the following dialog step, check for the presence of a token in the resul [!code-javascript[AddOAuthPrompt](~/../Microsoft-Teams-Samples/samples/bot-conversation-sso-quickstart/js/dialogs/mainDialog.js?range=50-64)] -**bots/logoutDialog.js** +**dialogs/logoutDialog.js** [!code-javascript[allow-logout](~/../Microsoft-Teams-Samples/samples/bot-conversation-sso-quickstart/js/dialogs/logoutDialog.js?range=31-42&highlight=7)] This section provides Bot authentication v3 SDK sample. | **Sample name** | **Description** | **.NET** | **Node.js** | **Python** | **Manifest**| ||||-|||-| Bot authentication | This sample shows how to get started with authentication in a bot for Teams. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation-sso-quickstart/js) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/python) |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/csharp/demo-manifest/bot-teams-authentication.zip) -| Tab, Bot, and Message Extension (ME) SSO | This sample shows Azure AD SSO for Tab, Bot, and ME - search, action, link-unfurling. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/nodejs) | Not available | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp/demo-manifest/App-SSO.zip) +| Bot authentication | This sample shows how to get started with authentication in a bot for Teams. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/nodejs) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/python) |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/csharp/demo-manifest/bot-teams-authentication.zip) +| Tab, Bot, and Message Extension (ME) SSO | This sample shows Azure AD SSO for Tab, Bot, and ME - search, action, link-unfurling. | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/nodejs) | NA | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-sso/csharp/demo-manifest/App-SSO.zip) ## See also - [Add authentication through Azure Bot Service](/azure/bot-service/bot-builder-authentication?view=azure-bot-service-4.0&tabs=userassigned%2Caadv2%2Ccsharp&preserve-view=true) - [Get access on behalf of a user](/graph/auth-v2-user)-+ <!-- Footnote-style links --> [azure-portal]: https://ms.portal.azure.com This section provides Bot authentication v3 SDK sample. [teams-auth-bot-py]: https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/python -[teams-auth-bot-js]: https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-conversation-sso-quickstart/js +[teams-auth-bot-js]: https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/bot-teams-authentication/nodejs |
| platform | Using Fluid Msteam | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/using-fluid-msteam.md | Title: Use Fluid with Teams -description: Tutorial for integrating Fluid-powered real-time collaboration features into a Microsoft Teams tab application +description: Tutorial for integrating Fluid-powered real-time collaboration features into a Microsoft Teams tab application. ms.localizationpriority: medium Last updated 12/13/2022 In this section you can learn the following concepts: 1. Run and connect your Teams application to a Fluid service (Azure Fluid Relay). 1. Create and get Fluid Containers, and pass them to a React component. -For more information to build complex application, see [Teams Fluid Hello World](https://github.com/microsoft/FluidExamples/tree/main/teams-fluid-hello-world) example in our FluidExamples repo. +For more information on building complex applications, see [FluidExamples](https://github.com/microsoft/FluidExamples). ## Prerequisites |
| platform | Deploy | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/deploy.md | Last updated 11/29/2021 zone_pivot_groups: teams-toolkit-platform -# Deploy Teams app to the cloud +# Deploy Teams app to the cloud using Microsoft Visual Studio Code Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure. ::: zone pivot="visual-studio-code-v5" -## Deploy Teams app to the cloud using Microsoft Visual Studio Code - You can deploy to the following types of cloud resources: * Azure App Services |
| platform | Teamsfx Preview And Customize App Manifest Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/TeamsFx-preview-and-customize-app-manifest-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs -# Customize Teams app manifest in Teams Toolkit +# Customize Teams app manifest for Visual Studio +++The Teams app manifest describes how your app integrates into Teams and is shared between local and remote environments. The default manifest file is available at the `appPackage/manifest.json` file and the environment variables available from the `env/.env.{env}` file ++The manifest file contains some environment variables with the `${{XX_XX}}` format. You can define your own environment variables and add placeholders in the `manifest.json` file. The following are the .env and .json file examples: ++```env +TEAMS_APP_DESCRIPTION=This is an amazing app +``` ++```json +{ + "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.16/MicrosoftTeams.schema.json", + "manifestVersion": "1.16", + "description": { + "short": "${{TEAMS_APP_DESCRIPTION}}", + "full": "Full description of tab0418" + }, +} +``` ++## Preview manifest file ++You can preview the manifest file either **For Local** or **For Azure**. To preview the manifest file, follow these steps: To preview the manifest file: ++1. Select **Project** > **Teams Toolkit**. ++1. Select **Prepare Teams App Dependencies** or **Provision in the Cloud...** to generate environment variables for local or remote Teams app. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/provision-in-the-cloud.png" alt-text="Screenshot shows the app trigger in local or remote."::: ++1. Upload the **Zip App Package** in the following ways: ++ 1. Select **Project** > **Teams Toolkit** > **Zip App Package** and then select either **For Local** or **For Azure** ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/zip-app-package.png" alt-text="Screenshot shows the zip app package for local or Azure."::: ++ 1. From **Solution Explorer**, right-click on **MyTeamsApp2** (in this scenario the project name is MyTeamsApp2). Go to **Teams Toolkit** > **Zip App Package** and then select either **For Local** or **For Azure**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/solution-zip.png" alt-text="Screenshot shows the solution zip app package for local or Azure."::: ++ Teams Toolkit generates the zip app package. ++1. Under `appPackage` folder, right-click on the `manifest.json` file. ++1. Select **Preview Manifest File**. ++1. Select either **For Local** or **For Azure**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/preview-manifest.png" alt-text="Screenshot shows the preview of manifest."::: ++You can preview the app manifest file under `appPackage/build` in Visual Studio. ++### Sync local changes to Developer Portal ++After you've previewed the manifest file in Visual Studio, you can sync the local changes to Developer Portal. To sync changes to Developer Portal follow these steps: ++1. Select **Project**. +1. Select **Teams Toolkit**. +1. Select **Update Manifest in Teams Developer Portal**. +++You can also sync the local changes to Developer Portal from **Solution Explorer**: ++1. Right-click on **MyTeamsApp2**. +1. Select **Teams Toolkit**. +1. Select **Update Manifest in Teams Developer Portal** +++The changes are updated to Developer Portal. ++> [!Tip] +> If you want to make any manual updates that can be overwritten in Teams Developer Portal, from the **Warning** dialog box select **Overwrite and update**. +++When you create a Teams command bot using Visual Studio, two app IDs are registered in Azure Active Directory (Azure AD). You can identify the app IDs in Developer Portal as **Application (client) ID** under **Basic information** and existing **bot ID** under **App features**. ++++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [App manifest schema for Teams](~/resources/schem) +* [Developer Portal for Teams](~/concepts/build-and-test/teams-developer-portal.md) +* [Manage multiple environments](TeamsFx-multi-env-v4.md) +* [Public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md) +* [Provision cloud resources using Visual Studio](provision-vs.md) +* [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) ++++## Customize Teams app manifest in Teams Toolkit Teams Toolkit in Visual Studio loads manifest from `manifest.template.json` with configurations from `state.{env}.json` and `config.{env}.json` while provisioning and preparing app dependencies. You can also create Teams app in Developer Portal with manifest. In the manifest template, select **Project** > **Teams Toolkit** > **Open Manife :::image type="content" source="images/vs-open-manifest-v4.png" alt-text="Screenshot is an example of showing the navigation to open manifest file." lightbox="images/vs-open-manifest-v4.png"::: -## Customize app manifest in Teams Toolkit +### Customize app manifest in Teams Toolkit The following list provides two types of placeholders in `manifest.template.json`: -* `{{state.xx}}` is pre-defined placeholder, whose value is resolved by Teams Toolkit defined in `state.{env}.json`. Its recommended not to modify the values in `state.{env}.json`. +* `{{state.xx}}` is predefined placeholder, whose value is resolved by Teams Toolkit defined in `state.{env}.json`. It's recommended not to modify the values in `state.{env}.json`. * `{{config.manifest.xx}}` is customized placeholder, whose value is resolved from `config.{env}.json`. You can add a customized parameter by: You can preview values in app manifest in two ways: :::image type="content" source="images/vs-hover-key-placeholder-v4.png" alt-text="Screenshot is an example showing when you hover over key beside placeholder can view the same values for dev and local environment." lightbox="images/vs-hover-key-placeholder-v4.png"::: -If the environment has not been provisioned, or the Teams app dependencies have not been prepared, it indicates that the values for the placeholder have not been generated. You can follow the guidance inside the hover to generate corresponding values. +If the environment hasn't been provisioned, or the Teams app dependencies haven't been prepared, it indicates that the values for the placeholder haven't been generated. You can follow the guidance inside the hover to generate corresponding values. ## Preview manifest file There are two ways to upload zip app package before you can preview the manifest :::image type="content" source="images/vs-zip1-v4.png" alt-text="Screenshot is an example of showing the navigation to zip app package for local and Azure." lightbox="images/vs-zip1-v4.png"::: -1. You can also upload zip app package from **Solution Explorer** section, if you right-click on **MyTeamsApp1**. In this scenario the project name is MyTeamsApp1. +1. You can also upload zip app package from **Solution Explorer** section, if you right-click on **MyTeamsApp1**. In this scenario, the project name is MyTeamsApp1. 1. Select **Teams Toolkit** > **Zip App Package** > **For Local** or **For Azure**. The changes are updated to Developer Portal. :::image type="content" source="images/vs-overwrite-v4.png" alt-text="Screenshot is an example of showing the update warning." lightbox="images/vs-overwrite-v4.png"::: -When you create a Teams command bot using Visual Studio, two app IDs are registered in Microsoft Azure Active Directory (Azure AD). You can identify the app IDs in the Developer Portal as **Application (client) ID** under **Basic information** and existing **bot ID** under **App features**. +When you create a Teams command bot using Visual Studio, two app IDs are registered in Microsoft Azure Active Directory (Azure AD). You can identify the app IDs in Developer Portal as **Application (client) ID** under **Basic information** and existing **bot ID** under **App features**. :::image type="content" source="images/vs-dev-portal-basic-info-v4.png" alt-text="Developer portal showing basic info app id" lightbox="images/vs-dev-portal-basic-info-v4.png"::: When you create a Teams command bot using Visual Studio, two app IDs are registe * [Public developer preview for Microsoft Teams](~/resources/dev-preview/developer-preview-intro.md) * [Provision cloud resources using Visual Studio](provision-vs.md) * [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio)+ |
| platform | Add Single Sign On Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/add-single-sign-on-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Add single sign-on to your Teams app Microsoft Teams provides single sign-on (SSO) function for an app to obtain signed in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting some of the Microsoft Azure Active Directory (Azure AD) flows and integrations behind some simple APIs. This enables you to add SSO features easily to your Teams app. ++## Enable Single Sign-on in Teams Toolkit for Visual Studio ++Teams provides SSO function for an app using the Teams Toolkit for Microsoft Visual Studio. ++1. Open **Visual Studio**. ++1. Select **Project** > **Teams Toolkit** > **Add Authentication Code**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-add-authentication-code.PNG" alt-text="Screenshot shows the add authentication code."::: ++Teams Toolkit helps you generate the authentication files in **TeamsFx-Auth** folder, including a manifest template file for Azure AD application and authentication redirect pages. Link the files to your Teams application by updating authentication configurations to ensure the SSO works for your application. ++* In the Azure AD manifest file, specify the URIs such as, the URI to identify the Azure AD authentication app and the redirect URI for returning token. +* In the Teams manifest file, add the SSO application to link it with Teams application. +* Add SSO application information in Teams Toolkit configuration files in order to make sure the authentication app can be registered on backend service and start Teams Toolkit when you're debugging or previewing Teams application. ++## Teams tab application ++1. Update Azure AD app manifest: +`TeamsFx-Auth/aad.manifest.template.json` file is an Azure AD manifest template. You can copy and paste this file to any folder of your project, and rename as `aad.manifest.json` and take note of the path to this file. The following updates in the template to create/update an Azure AD app for SSO: ++ * `identifierUris`: It's used to uniquely identify and access the resource. Set the correct redirect Uris into `identifierUris` to successfully identify this app. For more information, see [identifierUris attribute](/azure/active-directory/develop/reference-app-manifest). ++ ```json + "identifierUris":[ + "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}" + ] + ``` ++ * `replyUrlsWithType`: It lists registered redirect_uri values that Azure AD accepts as destinations when returning tokens. Set necessary redirect Uris into `replyUrlsWithType` to successfully return token. For more information, see [replyUrlsWithType attribute](/azure/active-directory/develop/reference-app-manifest). ++ ```json + "replyUrlsWithType":[ + { + "url": "${{TAB_ENDPOINT}}/auth-end.html", + "type": "Web" + } + ] + ``` ++ > [!NOTE] + > Use `${{ENV_NAME}}` to reference variables in `env/.env.{TEAMSFX_ENV}`. ++ ```json + "replyUrlsWithType":[ + { + "url": "${{TAB_ENDPOINT}}/auth-end.html", + "type": "Web" + }, + { + "url": "${{TAB_ENDPOINT}}/auth-end.html?clientId=${{AAD_APP_CLIENT_ID}}", + "type": "Spa" + }, + { + "url": "${{TAB_ENDPOINT}}/blank-auth-end.html", + "type": "Spa" + } + ] + ``` ++ * "name": It replaces the value with your expected Azure AD app name. ++1. Open your Teams app manifest file, add `WebApplicationInfo` property with the value of your SSO app. For more information, see [webApplicationInfo](../../resources/schem#webapplicationinfo). ++ ```JSON + "webApplicationInfo": { + "id": "${{AAD_APP_CLIENT_ID}}", + "resource": "SAME_AS_YOUR_IDENTIFIERURIS" + } + ``` ++ > [!NOTE] + > Update the value of resource to your `identifierUris` configed in step 1, and use `${{ENV_NAME}}` to reference envs in `env/.env.{TEAMSFX_ENV}`. ++1. Open the `appPackage/manifest.json` file, and add the following code: ++ ```JSON + "webApplicationInfo": { + "id": "${{AAD_APP_CLIENT_ID}}", + "resource": "api://${{TAB_DOMAIN}}/${{AAD_APP_CLIENT_ID}}" + } + ``` ++1. Update the `teamsapp.yml` file and the `teamsapp.local.yml` file. ++ Add Azure AD related changes and configs into your `yml` files: ++ * Add `aadApp/create` under `provision`: Create new Azure AD apps used for SSO. For more information, see [aadApp/create](https://github.com/OfficeDev/TeamsFx/wiki/Available-actions-in-Teams-Toolkit#aadappcreate). ++ * Add `aadApp/update` under `provision`: Update your Azure AD app with Azure AD app manifest in step 1. For more information, see [aadApp/update](https://aka.ms/teamsfx-actions/aadapp-update). ++ * Update `file/createOrUpdateJsonFile`: + Add the following environment variables when you debug locally: + 1. ClientId: Azure AD app client ID. + 1. ClientSecret: Azure AD app client secret. + 1. OAuthAuthority: Azure AD app oauth authority. ++ For more information, see [file/updateJson](https://github.com/OfficeDev/TeamsFx/wiki/Available-actions-in-Teams-Toolkit#fileupdatejson). ++ * In both the `teamsapp.yml` file and the `teamsapp.local.yml` file add the following code under the `provision` to create Azure AD app. ++ ```yml + - uses: aadApp/create + with: + name: "YOUR_AAD_APP_NAME" + generateClientSecret: true + signInAudience: "AzureADMyOrg" + writeToEnvironmentFile: + clientId: AAD_APP_CLIENT_ID + clientSecret: SECRET_AAD_APP_CLIENT_SECRET + objectId: AAD_APP_OBJECT_ID + tenantId: AAD_APP_TENANT_ID + authority: AAD_APP_OAUTH_AUTHORITY + authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST + ``` ++ > [!NOTE] + > Replace the value of "name" with your expected Azure AD app name. ++ * Add the following lines under `provision` to configure Azure AD app with Azure AD app template in the step 1. ++ ```json + - uses: aadApp/update + with: + manifestPath: "YOUR_PATH_TO_AAD_APP_MANIFEST" + outputFilePath : ./build/aad.manifest.${{TEAMSFX_ENV}}.json + ``` ++ > [!NOTE] + > Replace the value of `manifestPath` with the relative path of Azure AD app manifest noted in step 1. For example: `./aad.manifest.json` ++ In the `teamsapp.local.yml` file: + * Add the following code under `provision` to add Azure AD related configs to local debug service. ++ ```json + - uses: file/createOrUpdateJsonFile + with: + target: ./appsettings.Development.json + appsettings: + TeamsFx: + Authentication: + ClientId: ${{AAD_APP_CLIENT_ID}} + ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}} + InitiateLoginEndpoint: ${{TAB_ENDPOINT}}/auth-start.html + OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}} + ``` ++1. Update Infra + Azure AD related configs need to be configured in your remote service. The following example shows the configs on Azure Webapp. + 1. TeamsFx__Authentication__ClientId: Azure AD app client ID. + 2. TeamsFx__Authentication__ClientSecret: Azure AD app client secret. + 3. TeamsFx__Authentication__OAuthAuthority: Azure AD app oauth authority. + + Example for TeamsFx Tab template. ++ Open `infra/azure.parameters.json` and add following lines into `parameters`: ++ ```json + "tabAadAppClientId": { + "value": "${{AAD_APP_CLIENT_ID}}" + }, + "tabAadAppClientSecret": { + "value": "${{SECRET_AAD_APP_CLIENT_SECRET}}" + }, + "tabAadAppOauthAuthorityHost": { + "value": "${{AAD_APP_OAUTH_AUTHORITY_HOST}}" + }, + "tabAadAppTenantId": { + "value": "${{AAD_APP_TENANT_ID}}" + } + ``` + + Open the `infra/azure.bicep` file, find the code: ++ ``` + param location string = resourceGroup().location + ``` ++ Update the code as: ++ ``` + param tabAadAppClientId string + param tabAadAppOauthAuthorityHost string + param tabAadAppTenantId string + @secure() + param tabAadAppClientSecret string + ``` ++ In the `infra/azure.bicep` file, find the code: ++ ``` + resource webApp 'Microsoft.Web/sites@2021-02-01' = { + kind: 'app' + location: location + name: webAppName + properties: { + serverFarmId: serverfarm.id + httpsOnly: true + siteConfig: { + appSettings: [ + { + name: 'WEBSITE_RUN_FROM_PACKAGE' + value: '1' + } + ] + ftpsState: 'FtpsOnly' + } + } + } + ``` ++ Update the code as: ++ ``` + resource webApp 'Microsoft.Web/sites@2021-02-01' = { + kind: 'app' + location: location + name: webAppName + properties: { + serverFarmId: serverfarm.id + httpsOnly: true + siteConfig: { + ftpsState: 'FtpsOnly' + } + } + } ++ resource webAppConfig 'Microsoft.Web/sites/config@2021-02-01' = { + name: '${webAppName}/appsettings' + properties: { + WEBSITE_RUN_FROM_PACKAGE: '1' + TeamsFx__Authentication__ClientId: tabAadAppClientId + TeamsFx__Authentication__ClientSecret: tabAadAppClientSecret + TeamsFx__Authentication__InitiateLoginEndpoint: 'https://${webApp.properties.defaultHostName}/auth-start.html' + TeamsFx__Authentication__OAuthAuthority: uri(tabAadAppOauthAuthorityHost, tabAadAppTenantId) + } + } + ``` ++1. Update `appsettings.json` and `appsettings.Development.json` files for Azure AD related configs needs to be configure to your .Net project settings: ++ ```json + TeamsFx: { + Authentication: { + ClientId: AAD app client id + ClientSecret: AAD app client secret, + InitiateLoginEndpoint: Login Endpoint, + OAuthAuthority: AAD app oauth authority + } + } + ``` ++ > [!NOTE] + > You can use use `$ENV_NAME$` to reference envs in local/remote service. ++ Example for TeamsFx Tab template. + + Open `appsettings.json` and `appsettings.Development.json` files, and update the code: ++ ```json + "TeamsFx": { + "Authentication": { + "ClientId": "$clientId$", + "ClientSecret": "$client-secret$", + "InitiateLoginEndpoint": "$TAB_ENDPOINT$/auth-start.html", + "OAuthAuthority": "$oauthAuthority$" + } + } + ``` ++1. Your environment is ready and you can update your code to add SSO to your Teams app. You can find samples: + * TeamsFx SDK: <https://www.nuget.org/packages/Microsoft.TeamsFx/> + * Sample Code: under `TeamsFx-Auth/Tab` + + Example for TeamsFx Tab template. ++ * Create `Config.cs` and update the code as: ++ ```c + using Microsoft.TeamsFx.Configuration; + + namespace {{YOUR_NAMESPACE}} + { + public class ConfigOptions + { + public TeamsFxOptions TeamsFx { get; set; } + } + public class TeamsFxOptions + { + public AuthenticationOptions Authentication { get; set; } + } + } + ``` ++ > [!NOTE] + > You need to replace `{{YOUR_NAMESPACE}}` with your namespace name. ++ * Move the `TeamsFx-Auth/Tab/GetUserProfile.razor` file to `Components/`. + * Add the `GetUserProfile` component to your razor page, for example: ++ ``` + <h1>Hello, World</h1> + <GetUserProfile /> + ``` ++ * Open the `Program.cs` file, find the code: ++ ```csharp + builder.Services.AddScoped<MicrosoftTeams>(); + `````` ++ and update the code as: ++ ```csharp + var config = builder.Configuration.Get<ConfigOptions>(); + builder.Services.AddTeamsFx(config.TeamsFx.Authentication); + ``` ++ > [!NOTE] + > You need to exclude the sample code under the `TeamsFx-Auth` file to avoid build failure by adding following code into the `.csproj` file: ++ ```csharp + <ItemGroup> + <Compile Remove="TeamsFx-Auth/**/*" /> + <None Include="TeamsFx-Auth/**/*" /> + <Content Remove="TeamsFx-Auth/Tab/GetUserProfile.razor"/> + </ItemGroup> + ``` ++ * Download `auth-start.html` and `auth-end.html` files from [GitHub Repo](https://github.com/OfficeDev/TeamsFx/tree/dev/templates/csharp/sso-tab/wwwroot) to `{ProjectDirectory}/wwwroot`. ++1. To check the SSO app works as expected, run the `Local Debug` in Visual Studio. ++1. You can also run the app in cloud by selecting the `Provision in the cloud` and then `Deploy to the cloud`. ++## Teams bot application ++1. Update Azure AD app manifest in the `TeamsFx-Auth/aad.manifest.template.json` file. +1. You can copy the file to any folder of your project, and rename as the `aad.manifest.json` file and note the path to this file for later reference. Make the following updates in the template to create/update an Azure AD app for SSO. ++ * `identifierUris`: Used to uniquely identify and access the resource. You need to set correct Redirect Uris into "identifierUris" for successfully identify this app. For more information, see [identifierUris attribute](/azure/active-directory/develop/reference-app-manifest). ++ Example for TeamsFx Bot Template: ++ ``` + "identifierUris":[ + "api://botid-${{BOT_ID}}" + ] + ``` ++ > [!NOTE] + > You can use `${{ENV_NAME}}` to reference variables in the `env/.env.{TEAMSFX_ENV}` file. ++ * `replyUrlsWithType`: It lists registered redirect_uri values that Azure AD accepts as destinations when returning tokens. You need to set necessary Redirect Uris into "replyUrlsWithType" for successfully returning token. For more information, see [replyUrlsWithType attribute](/azure/active-directory/develop/reference-app-manifest). ++ Example: ++ ``` + "replyUrlsWithType":[ + { + "url": "https://${{BOT_DOMAIN}}/bot-auth-end.html", + "type": "Web" + } + ] + ``` ++ > [!NOTE] + > You can use use `${{ENV_NAME}}` to reference envs in the `env/.env.{TEAMSFX_ENV}` file. ++ Example: ++ ``` + "replyUrlsWithType":[ + { + "url": "https://${{BOT_DOMAIN}}/bot-auth-end.html", + "type": "Web" + } + ] + ``` ++ * "name": Replace the value with your expected Azure AD app name. ++1. Update Teams app manifest + + * A `WebApplicationInfo` object needs to be added into your Teams app manifest to enable SSO in the Teams app. For more information, see [webApplicationInfo](../../resources/schem#webapplicationinfo). ++ For example: open your Teams app manifest template, and append the following object in the manifest: ++ ``` + "webApplicationInfo": { + "id": "${{AAD_APP_CLIENT_ID}}", + "resource": "SAME_AS_YOUR_IDENTIFIERURIS" + } + ``` ++ > [!NOTE] + > You need to update the value of resource to your `identifierUris` configured in step 1.i, and use `${{ENV_NAME}}` to reference envs in `env/.env.{TEAMSFX_ENV}`. ++ Example for TeamsFx Bot template: ++ Open the `appPackage/manifest.json` file, and add the following property in the manifest file: ++ ``` + "webApplicationInfo": { + "id": "${{AAD_APP_CLIENT_ID}}", + "resource": "api://botid-${{BOT_ID}}" + } + ``` ++ * You can register your command under `commands` in `commandLists` of your bot: ++ ``` + { + "title": "YOUR_COMMAND_TITLE", + "description": "YOUR_COMMAND_DESCRIPTION" + } + ``` ++ Example for TeamsFx Bot template: ++ ``` + { + "title": "show", + "description": "Show user profile using Single Sign On feature" + } + ``` ++ Remember to delete the previous 'helloWorld' command since it isn't used. ++ * Also add bot domain to `validDomain`: ++ ``` + "validDomains": [ + "${{BOT_DOMAIN}}" + ] + ``` ++1. Update `teamsapp.yml` and `teamsapp.local.yml` files: + Azure AD related changes and configs needs to be added into your `yml` files: + * Add `aadApp/create` under `provision` for creating new Azure AD apps used for SSO. For more information, see [available actions in Teams Toolkit](https://github.com/OfficeDev/TeamsFx/wiki/Available-actions-in-Teams-Toolkit#aadappcreate). ++ * Add `aadApp/update` under `provision` for updating your Azure AD app with Azure AD app manifest in step 1. For more information, see [aadApp/update](https://github.com/OfficeDev/TeamsFx/wiki/Available-actions-in-Teams-Toolkit#aadappupdate). ++ * Update `file/createOrUpdateJson` File for adding the following environment variables during local debug: + 1. ClientId: Azure AD app client ID. + 1. ClientSecret: Azure AD app client secret. + 1. OAuthAuthority: Azure AD app oauth authority. + For more information, see [file/updateJson](https://github.com/OfficeDev/TeamsFx/wiki/Available-actions-in-Teams-Toolkit#fileupdatejson). ++ Example for TeamsFx Bot template ++ In both `teamsapp.yml` and `teamsapp.local.yml` files: + * Add the code under `provision` to create Azure AD app. ++ ```yml + - uses: aadApp/create + with: + name: "YOUR_AAD_APP_NAME" + generateClientSecret: true + signInAudience: "AzureADMyOrg" + writeToEnvironmentFile: + clientId: AAD_APP_CLIENT_ID + clientSecret: SECRET_AAD_APP_CLIENT_SECRET + objectId: AAD_APP_OBJECT_ID + tenantId: AAD_APP_TENANT_ID + authority: AAD_APP_OAUTH_AUTHORITY + authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST + ``` ++ > [!NOTE] + > Replace the value of "name" with your expected Azure AD app name. ++ * Add the code under `provision` to configure Azure AD app with Azure AD app template in the step 1. ++ ```json + - uses: aadApp/update + with: + manifestPath: "./aad.manifest.json" + outputFilePath : ./build/aad.manifest.${{TEAMSFX_ENV}}.json + ``` ++ > [!NOTE] + > Replace the value of "manifestPath" with the relative path of Azure AD app manifest noted in step 1. + For example, './aad.manifest.json' ++ In the `teamsapp.local.yml` file: + * Update `file/createOrUpdateJsonFile` under `provision` to add Azure AD related configs to local debug service. ++ ```json + - uses: file/createOrUpdateJsonFile + with: + target: ./appsettings.Development.json + appsettings: + BOT_ID: ${{BOT_ID}} + BOT_PASSWORD: ${{SECRET_BOT_PASSWORD}} + TeamsFx: + Authentication: + ClientId: ${{AAD_APP_CLIENT_ID}} + ClientSecret: ${{SECRET_AAD_APP_CLIENT_SECRET}} + OAuthAuthority: ${{AAD_APP_OAUTH_AUTHORITY}}/${{AAD_APP_TENANT_ID}} + ApplicationIdUri: api://botid-${{BOT_ID}} + Bot: + InitiateLoginEndpoint: https://${{BOT_DOMAIN}}/bot-auth-start + ``` ++1. Update Infra Azure AD related configs to configure remote service. The following example shows the configs on Azure Webapp. + 1. TeamsFx__Authentication__ClientId: Azure AD app client ID. + 1. TeamsFx__Authentication__ClientSecret: Azure AD app client secret. + 1. TeamsFx__Authentication__OAuthAuthority: Azure AD app oauth authority. + 1. TeamsFx__Authentication__Bot__InitiateLoginEndpoint: Auth start page for Bot. + 1. TeamsFx__Authentication__ApplicationIdUri: Azure AD app identify uris. ++ Example for TeamsFx Bot template: ++ Open the `infra/azure.parameters.json`file, add the code to `parameters`: ++ ``` + "m365ClientId": { + "value": "${{AAD_APP_CLIENT_ID}}" + }, + "m365ClientSecret": { + "value": "${{SECRET_AAD_APP_CLIENT_SECRET}}" + }, + "m365TenantId": { + "value": "${{AAD_APP_TENANT_ID}}" + }, + "m365OauthAuthorityHost": { + "value": "${{AAD_APP_OAUTH_AUTHORITY_HOST}}" + } + ``` ++ Open the `infra/azure.bicep` file and find the code: ++ ``` + param location string = resourceGroup().location + ``` ++ Update the code as: ++ ``` + param m365ClientId string + param m365TenantId string + param m365OauthAuthorityHost string + param m365ApplicationIdUri string = 'api://botid-${botAadAppClientId}' + @secure() + param m365ClientSecret string + ``` ++ Add the code before output: ++ ``` + resource webAppSettings 'Microsoft.Web/sites/config@2021-02-01' = { + name: '${webAppName}/appsettings' + properties: { + TeamsFx__Authentication__ClientId: m365ClientId + TeamsFx__Authentication__ClientSecret: m365ClientSecret + TeamsFx__Authentication__Bot__InitiateLoginEndpoint: uri('https://${webApp.properties.defaultHostName}', 'bot-auth-start') + TeamsFx__Authentication__OAuthAuthority: uri(m365OauthAuthorityHost, m365TenantId) + TeamsFx__Authentication__ApplicationIdUri: m365ApplicationIdUri + BOT_ID: botAadAppClientId + BOT_PASSWORD: botAadAppClientSecret + RUNNING_ON_AZURE: '1' + } + } + ``` ++ > [!NOTE] + > If you want add additional configs to your Azure Webapp, add the configs in the webAppSettings. ++1. Update the `appsettings.json` file and the `appsettings.Development.json` file for Azure AD related configs that needs to be configured to your .Net project settings: ++ ``` + TeamsFx: { + Authentication: { + ClientId: AAD app client id + ClientSecret: AAD app client secret, + OAuthAuthority: AAD app oauth authority, + ApplicationIdUri: AAD app identify uri, + Bot: { + InitiateLoginEndpoint: Auth start page for Bot + } + } + } + ``` ++ > [!NOTE] + > You can use `$ENV_NAME$` to reference envs in local/remote service. ++ Example for TeamsFx Bot template: ++ Open `appsettings.json` and `appsettings.Development.json` files, and add the code: ++ ``` + "TeamsFx": { + "Authentication": { + "ClientId": "$clientId$", + "ClientSecret": "$client-secret$", + "OAuthAuthority": "$oauthAuthority$", + "ApplicationIdUri": "$applicationIdUri$", + "Bot": { + "InitiateLoginEndpoint": "$initiateLoginEndpoint$" + } + } + } + ``` ++1. Update your code to add SSO to your Teams app. + + You can find samples code: ++ * TeamsFx SDK: [https://www.nuget.org/packages/Microsoft.TeamsFx/](https://www.nuget.org/packages/Microsoft.TeamsFx/) + * Sample Code: under `TeamsFx-Auth/Bot` ++ Example for TeamsFx Bot template: ++ * Open `Config.cs` and replace the code: ++ ``` + using Microsoft.TeamsFx.Configuration; ++ namespace {{YOUR_NAMESPACE}} + { + public class TeamsFxOptions + { + public AuthenticationOptions Authentication { get; set; } + } ++ public class ConfigOptions + { + public string BOT_ID { get; set; } + public string BOT_PASSWORD { get; set; } + public TeamsFxOptions TeamsFx { get; set; } + } + } + ``` ++ > [!NOTE] + > Replace the `{{YOUR_NAMESPACE}}` property with your namespace name. + + * Move `TeamsFx-Auth/Bot/SSO` and `TeamsFx-Auth/Bot/Pages` files to `/`. ++ > [!NOTE] + > Remember to replace `{{YOUR_NAMESPACE}}` with your project namespace. ++ * Open the `Program.cs` file, and find the code: ++ ``` + builder.Services.AddSingleton<BotFrameworkAuthentication, ConfigurationBotFrameworkAuthentication>(); + ``` ++ Update the code as: ++ ``` + builder.Services.AddRazorPages(); ++ // Create the Bot Framework Adapter with error handling enabled. + builder.Services.AddSingleton<IBotFrameworkHttpAdapter, AdapterWithErrorHandler>(); ++ builder.Services.AddSingleton<IStorage, MemoryStorage>(); + // Create the Conversation state. (Used by the Dialog system itself.) + builder.Services.AddSingleton<ConversationState>(); ++ // The Dialog that will be run by the bot. + builder.Services.AddSingleton<SsoDialog>(); ++ // Create the bot as a transient. In this case the ASP Controller is expecting an IBot. + builder.Services.AddTransient<IBot, TeamsSsoBot<SsoDialog>>(); ++ builder.Services.AddOptions<BotAuthenticationOptions>().Configure(options => + { + options.ClientId = config.TeamsFx.Authentication.ClientId; + options.ClientSecret = config.TeamsFx.Authentication.ClientSecret; + options.OAuthAuthority = config.TeamsFx.Authentication.OAuthAuthority; + options.ApplicationIdUri = config.TeamsFx.Authentication.ApplicationIdUri; + options.InitiateLoginEndpoint = config.TeamsFx.Authentication.Bot.InitiateLoginEndpoint; + }); + ``` ++ Find the code: ++ ``` + builder.Services.AddSingleton<HelloWorldCommandHandler>(); + builder.Services.AddSingleton(sp => + { + var options = new ConversationOptions() + { + Adapter = sp.GetService<CloudAdapter>(), + Command = new CommandOptions() + { + Commands = new List<ITeamsCommandHandler> { sp.GetService<HelloWorldCommandHandler>() } + } + }; ++ return new ConversationBot(options); + }); + ``` ++ Update the code as: ++ ``` + builder.Services.AddSingleton(sp => + { + var options = new ConversationOptions() + { + Adapter = sp.GetService<CloudAdapter>(), + Command = new CommandOptions() + { + Commands = new List<ITeamsCommandHandler> { } + } + }; ++ return new ConversationBot(options); + }); + ``` ++ Find and delete the code: ++ ``` + // Create the bot as a transient. In this case the ASP Controller is expecting an IBot. + builder.Services.AddTransient<IBot, TeamsBot>(); + ``` ++ Find the code: ++ ``` + app.UseEndpoints(endpoints => + { + endpoints.MapControllers(); + }); + ``` ++ Update the code as: ++ ``` + app.UseEndpoints(endpoints => + { + endpoints.MapControllers(); + endpoints.MapRazorPages(); + }); + ``` + + > [!NOTE] + > You need to exclude the sample code under `TeamsFx-Auth` to avoid build failure by adding the following code to `.csproj` file: ++ ``` + <ItemGroup> + <Compile Remove="TeamsFx-Auth/**/*" /> + <None Include="TeamsFx-Auth/**/*" /> + <Content Remove="TeamsFx-Auth/Tab/GetUserProfile.razor"/> + </ItemGroup> + ``` ++1. To check if SSO app works as expected, run the `Local Debug` in Visual Studio. ++1. You can also run the app in cloud by selecting `Provision in the cloud` and then select `Deploy to the cloud` to update your app. ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Prerequisites for creating your Teams app](tools-prerequisites-v4.md) +* [Enable SSO for tab app](~/tabs/how-to/authentication/tab-sso-overview.md) +* [Enable SSO for your bot and message extension](~/bots/how-to/authentication/bot-sso-overview.md) +* [Prepare Accounts to build your Teams app](tools-prerequisites-v4.md#accounts-to-build-your-teams-app) +++ ## Add SSO to Teams app in Visual Studio For applications that interact with the user in a chat, Team, or channel, SSO manifests as an Adaptive Card, which the user can interact with to invoke the Azure AD consent flow. For more information about how to use an existing Azure AD app in your TeamsFx p * [Enable SSO for tab app](~/tabs/how-to/authentication/tab-sso-overview.md) * [Enable SSO for your bot and message extension](~/bots/how-to/authentication/bot-sso-overview.md) * [Prepare Accounts to build your Teams app](tools-prerequisites-v4.md#accounts-to-build-your-teams-app) |
| platform | Create New Project Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/create-new-project-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Create a new Teams project using Teams Toolkit in Visual Studio ++You can create Teams apps in Visual Studio using the app templates. You can search and select any of the following Teams template to create a new app. ++* Notification Bot +* Command Bot +* Workflow Bot +* Tab +* Message Extension ++## Prerequisites ++| | Install | For using... | +| | | | +| | Visual Studio latest version | Install the latest enterprise edition of Visual Studio, and select the **ASP.NET and web development** workload and **Microsoft Teams Development Tools** for installation.| +| | Teams Toolkit | A Visual Studio workload that creates a project scaffolding for your app. Use the latest version. | +| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to sideload your Teams app into local Teams environment for testing app behavior. | + | | [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Microsoft 365 account with the appropriate permissions to install an app. | ++## Create a new Teams app ++To create a new Teams app, follow the steps: ++1. Open **Visual Studio**. +1. Create a new app by using one of the following two options: ++ * Select **New project** under **Quick actions** to select a project template. + + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/new-project-vs.png" alt-text="Screenshot shows the selection of new project from quick actions."::: ++ * Select **File > New > Project**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/file-new-project.png" alt-text="Screenshot shows the selection of new project from file menu."::: ++ The **Create a new project** window appears. ++1. Enter **Teams** in the search box and from search results, select **Microsoft Teams App**. ++1. Select **Next**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/new-project-template-vs.png" alt-text="Screenshot shows the search and select Microsoft Teams app." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/new-project-template-vs.png"::: ++ The **Configure your new project** window appears. ++ 1. Enter a suitable name for your project. ++ > [!NOTE] + > * The project name you enter is updated in the **Solution name** field. You can change the solution name with no effect on the project name. + > * You can select the **Place solution and project in the same directory** checkbox to save the project and solution in the same folder. ++ 1. Select the folder location where you want to create the project workspace. + 1. Select **Create**. + + :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-app-project-name.png" alt-text="Screenshot shows the configure the project name of your application."::: ++ The **Create a new Teams application** window appears. ++1. Ensure **Tab** is selected, then select **Create**. ++ You can select any type of Teams app for your project. ++ > [!NOTE] + > If you want to add single sign-on (SSO) capability to your Teams app, select the **Configure with single sign-on** checkbox. For more information, see [ how to add single sign-on to your Teams apps](/microsoftteams/platform/toolkit/add-single-sign-on?pivots=visual-studio). ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/create-new-app-vs.png" alt-text="Screenshot shows the selection of teams app type." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/create-new-app-vs.png"::: ++ The **GettingStarted .txt** tab appears. You can see the instructions in **GettingStarted** window and check out the different features in Teams Toolkit. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/get-started-vs.png" alt-text="Screenshot shows the Getting Started teams toolkit page." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/get-started-tab-vs.png"::: ++You have created the app project scaffolding for your Teams app using Teams Toolkit template. ++The steps to create the other apps are similarlar except notification bot. ++### Directory Structure ++Teams Toolkit provides all components for building an app. After you're created the project, you can view the project folders and files under **Solution Explorer**. ++* Directory structure for a basic Teams app ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/basic-app-directory.png" alt-text="Screenshot shows the tab Solution Explorer teams toolkit for basic tab."::: ++* Directory structure for a scenario-based Teams app ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/scenario-based-directory.png" alt-text="Screenshot shows the scenario based Solution Explorer teams toolkit."::: ++## Teams app templates in Teams Toolkit ++You can see Teams app templates already populated in Teams Toolkit for various Teams app types. The following table lists all the templates available: ++|Teams app templates |Description | +||| +|**Notification Bot** |You can use the notification bot app to send notifications to your Teams client. There are multiple ways to trigger the notification. For example, trigger the notification by HTTP request, or by time. You can select triggered notification based on your business scenario. | +|**Command Bot** |You can type a command to interact with the bot using the command bot app. | +|**Workflow Bot** |You can interact with the bot using automate repetitive workflow action. | +|**Tab** |Tab app shows a webpage inside Teams, and it enables SSO using Teams account. | +|**Message Extension** |The message extension app implements simple features such as creating an Adaptive Card, searching Nugget packages, or unfurling links for the `dev.botframework.com` domain. | ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Build a Teams app with Blazor](~/sbs-gs-blazorupdate.yml) +* [Build a Teams app with C# or .NET](~/sbs-gs-csharp.yml) +* [Prerequisites for all types of environment and create your Teams app](tools-prerequisites-v4.md) +* [Prepare to build apps using Microsoft Teams Toolkit](build-environments-v4.md) +* [Provision cloud resources using Visual Studio](provision-vs.md) +* [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio) +++ In this article, learn how to create a new Teams project using Microsoft Visual Studio. Teams Toolkit provides Microsoft Teams app templates in Visual Studio to create Teams apps. You can search and select the Teams app template that you require when you create a new project. Teams Toolkit for Visual Studio provides Teams app templates for creating: You can see Teams app templates already populated in Teams Toolkit for various T |**Message Extension** |Message extension app implements simple features like creating an Adaptive Card, searching Nugget packages, unfurling links for the `dev.botframework.com` domain. | After the project is created, Teams Toolkit automatically opens **GettingStarted** window. You can see the instructions in **GettingStarted** window and check out the different features in Teams Toolkit.- ## See also * [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) After the project is created, Teams Toolkit automatically opens **GettingStarted * [Prepare to build apps using Microsoft Teams Toolkit](build-environments-v4.md) * [Provision cloud resources using Visual Studio](provision-vs.md) * [Deploy Teams app to the cloud using Visual Studio](deploy-vs.md#deploy-teams-app-to-the-cloud-using-visual-studio)+++ |
| platform | Debug Background Process V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-background-process-v4.md | +zone_pivot_groups: teams-toolkit-platform-vs # Debug background processes using Visual Studio ++Visual Studio uses the `launchSettings.json` file to store configuration information that describes how to start an ASP.NET Core application. The file holds essential application settings used solely during development on the local machine. You can find it in the Properties folder of your project. It specifies details like the command to run, the browser's URL, and the required environment variables to be set. ++After selecting **Prepare Teams App Dependencies**, Teams Toolkit updates the launchUrl using the real Teams app ID, Teams tenant ID, and Microsoft 365 account. ++## Start local tunnel ++For bot and message extension, you can use Dev Tunnel. It starts a local tunnel service to make the bot messaging endpoint public. For more information, see [Dev tunnels in Visual Studio](/aspnet/core/test/dev-tunnels?view=aspnetcore&preserve-view=true). ++In the debug dropdown, select **Dev Tunnels (no active tunnel)** > **Create a Tunnel** or select an existing public dev tunnel. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-create-devtunnel.png" alt-text="Screenshoot shows the steps to create a tunnel."::: ++The tunnel creation dialog opens. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-create-devtunnel-detail.png" alt-text="Screenshot shows how to create a dev tunnel."::: ++* Select the **Account** to use to create the tunnel. Azure, Microsoft Account (MSA), and GitHub are the account types that are supported. +* Enter a **Name** for the tunnel. +* Select the **Tunnel Type**, Persistent or Temporary. +* From the dropdown, select the required public authentication in **Access**. +* Select **OK**. Visual Studio displays confirmation of tunnel creation. ++The tunnel you have created will be under **Dev Tunnels(MyPublicDevTunnel)** > **MyPublicDevTunnel**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-select-devtunnel.png" alt-text="Screenshot shows how to select dev tunnel."::: ++## Create the debug resources ++Teams Toolkit executes lifecycle `provision` defined in the `teamsapp.local.yml` file to create necessary resources for debugging Teams apps. For more information, see [Provision task](https://aka.ms/teamsfx-tasks/provision) and [available actions](https://aka.ms/teamsfx-actions). ++## Take a tour of your app source code ++You can view the project folders and files under **Explorer** in Visual Studio after debugging. The following table lists the files related to debugging: ++| Folder name| Contents| Description | +| | | | +| `teamsapp.local.yml` | The main Teams Toolkit project file for debugging. | This file defines the lifecycles and actions required for debugging. | +| `env/.env.local` | Environment variables file for Teams Toolkit project. | The values of each environment variable are consumed or generated during preparing Teams app dependencies. | +| `appsettings.Development.json` | Environment variables file for the app code. | The values of each environment variable are generated during preparing Teams app dependencies. | ++## See also ++* [Teams Toolkit Visual Studio Overview](teams-toolkit-fundamentals-vs.md) +* [Debug your Teams app locally using Visual Studio](debug-local-vs.md) +* [Provision cloud resources in Visual Studio](provision-vs.md) +* [Deploy Teams app to the cloud VS](deploy-vs.md) +* [Customize Teams app manifest in Teams Toolkit](TeamsFx-preview-and-customize-app-manifest-vs.md) +++ The local debug process involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in Microsoft Visual Studio Code. The Visual Studio Code launches the debuggers, and Microsoft Edge or Google Chrome launches a new browser instance. The debug process workflow is as follows: Use the following .NET Core versions: When you select **Start Debugging (F5)**, Teams Toolkit output channel displays the progress and result after checking the prerequisites. - :::image type="content" source="images/prerequisites-debugcheck1-v4.png" alt-text="Prerequisites check summary" lightbox="images/prerequisites-debugcheck1-v4.png"::: + :::image type="content" source="images/prerequisites-debugcheck1-v4.png" alt-text="Prerequisites check summary."::: ## Register and configure Teams app You can view the project folders and files under **Explorer** in Visual Studio C ## See also -* [Teams Toolkit Overview](../teams-toolkit-fundamentals.md) -* [Debug your Teams app using Teams Toolkit](../debug-local.md) -* [Use Teams Toolkit to provision cloud resources](../provision.md) -* [Deploy to the cloud](../deploy.md) -* [Preview and customize Teams app manifest](../TeamsFx-preview-and-customize-app-manifest.md) +* [Teams Toolkit Visual Studio Overview](teams-toolkit-fundamentals-vs.md) +* [Debug your Teams app locally using Visual Studio](debug-local-vs.md) +* [Provision cloud resources in Visual Studio](provision-vs.md) +* [Deploy Teams app to the cloud VS](deploy-vs.md) +* [Customize Teams app manifest in Teams Toolkit](TeamsFx-preview-and-customize-app-manifest-vs.md) + |
| platform | Debug Local Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-local-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Debug your Teams app locally using Visual Studio ++Visual Studio allows you to debug tabs, bots, and message extensions. You can debug your app locally in Visual Studio using Teams Toolkit by performing: ++## Set up dev tunnel (Only for bot and message extension) ++In the debug dropdown menu: ++1. Select **Dev Tunnels**. ++1. If you have already have an existing dev tunnel, select the existing tunnel from the list. For example, in the following image **PublicDevTunnel** is an existing dev tunnel. ++1. If you haven't already created a tunnel, select **Create a Tunnel...**. A new window appears. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-devtunnel.PNG" alt-text="Screenshot shows the dev tunnel for debug option."::: ++1. Enter the name of the dev tunnel and under **Access** select **Public** from the dropdown. +1. Select **OK**. ++### Set up your Teams Toolkit ++To debug your app after you create a project, perform the following steps: ++1. Right-click on your project. +1. Select **Teams Toolkit** > **Prepare Teams App Dependencies**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-teamsappdependencies.png" alt-text="Screenshot shows the local debug teams app dependencies."::: ++ > [!NOTE] + > In this scenario the project name is MyTeamsApp1. ++ Your Microsoft 365 account needs to have the side loading permission before you sign in. Ensure that your Teams app can be uploaded to the tenant, otherwise your Teams app can fail to run in Teams Client. ++1. Sign in to your **Microsoft 365 Account** and then select **Continue**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-signin-m365.png" alt-text="Screenshot shows sign in to Microsoft 365 account."::: ++ > [!NOTE] + > Learn more about sideloading permission, see [Prepare your Microsoft 365 tenant](../../concepts/build-and-test/prepare-your-o365-tenant.md). ++1. Select **Debug** > **Start Debugging** or select **F5**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-Startdebug.png" alt-text="Screenshot shows start debugging."::: ++ Visual Studio launches the Teams app inside Microsoft Teams client in your browser. For more information, see [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md). ++1. Select **Add** to install your app in Teams. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-add-loadapp.png" alt-text="Screenshot shows to add app."::: ++ You can also use the hot reload function of Visual Studio during debug. For more information, see [.NET hot reload](https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/). ++ > [!NOTE] + > When you debug a notification bot app, ensure that you post HTTP request to `http://localhost:5130/api/notification` in order to trigger notification. If you've selected HTTP trigger when creating the project, you can use any API tools such as, cURL (Windows Command Prompt), Postman, or any other API tool. ++ Before you try to run the Teams app locally, if you make any changes to the Teams app manifest file `/appPackage/manifest.json`, ensure that you perform the **Prepare Teams App Dependencies** command. ++## Next step ++> [!div class="nextstepaction"] +> [Debug background process](debug-background-process-v4.md) ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Introduction to Azure Functions](/azure/azure-functions/functions-overview) +* [Use Teams Toolkit to provision cloud resources](provision-vs.md) +* [Add capabilities to your Teams apps](add-capability-v4.md) +* [Deploy to the cloud](deploy-vs.md) +* [Manage multiple environments in Teams Toolkit](TeamsFx-multi-env-v4.md) +++ Teams Toolkit helps you to debug and preview your Microsoft Teams app locally. During the debug process, Teams Toolkit automatically starts app services, launches debuggers, and side-loads the Teams app. You can preview your Teams app in Teams web client locally after debugging. Visual Studio allows you to debug tab, bot, and message extension. You can debug your app locally in Visual Studio using Teams Toolkit by performing: -### Set up ngrok (Only for Bot and Message Extension app) +## Set up ngrok (Only for Bot and Message Extension app) Use command prompt to run this command: Perform the following steps using the Teams Toolkit to debug your app after you * [Add capabilities to your Teams apps](add-capability-v4.md) * [Deploy to the cloud](deploy-vs.md) * [Manage multiple environments in Teams Toolkit](TeamsFx-multi-env-v4.md)+ |
| platform | Debug Overview Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/debug-overview-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Debug your Teams app using Visual Studio ++Teams Toolkit automates app startup services, initiates debugging, and side loads Teams app. After debugging, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tabs, bots, and message extensions. ++## Prerequisites ++| | Install | For using... | +| | | | +| | Visual Studio 2022 | You can install the enterprise edition of Visual Studio, and install the **ASP.NET** workload and Microsoft Teams Development Tools. Use the latest version | +| | Teams Toolkit | A Visual Studio extension that creates a project scaffolding for your app. Use latest version. | +| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call-all in one place. | +| | [Prepare your Microsoft 365 tenant](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. | +| | [Microsoft 365 developer account](~/concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. | +| | Azure Tools and [Microsoft Azure CLI](/cli/azure/install-azure-cli) | Azure tools to access stored data or deploy a cloud-based backend for your Teams app in Azure. | ++## Key features of Teams Toolkit ++Teams Toolkit automates the local debugging process for the following key features: ++* Prepare Teams app dependencies: Teams Toolkit prepares local debug dependencies and registers your Teams app in your tenant account. For Bot and Message Extension apps, Teams Toolkit will register and configure bot. ++* Start debugging: You can perform debugging with a single operation, press **F5** to start debugging. Teams Toolkit builds code, starts services, and launches the app in your browser. ++* Toggle breakpoints: You can toggle breakpoints in the source code of tabs, bots, message extensions, and Azure Functions. The breakpoints execute when you interact with the Teams app in your web browser. ++ The following image shows the toggle breakpoints: ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-toggle-breakpoint.png" alt-text="Screenshot shows the local debug toggle breakpoints." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-toggle-breakpoint.png"::: ++* Hot Reload: Select **Hot Reload** to apply your changes in your Teams app when you want to update and save the source code during debugging. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-hot-reload.png" alt-text="Screenshot shows the select hot reload icon."::: ++ To enable auto Hot Reload, select **Hot Reload on File Save** from the dropdown. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-hot-reload-filesave.png" alt-text="Screenshot shows the select hot reload on file save."::: + + > [!Tip] + > To learn more about the Hot Reload function, see [.NET Hot Reload experience](https://devblogs.microsoft.com/dotnet/introducing-net-hot-reload/). ++* Stop debugging: Select **Stop Debugging (Shift+F5)** when the local debug is complete. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-Stopdebug.png" alt-text="Screenshot shows the select stop debug icon."::: ++### Add environment variables ++You can add the `environmentVariables` to the `launchSettings.json` file. +++### Launch Teams app as a web app ++You can launch Teams app as a web app instead of running the app in Teams client. To launch your Teams app as a web app, follow these steps: ++1. In Solution Explorer, under Project, select **Properties** > **launchSettings.json**. ++1. Remove the `launchUrl` property. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-launch-teamsapp-webapp.png" alt-text="Screenshot shows the launch teams as a web app by removing launchurl." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-launch-teamsapp-webapp.png"::: ++1. Right-click on **Solution** (in this scenario the project name is MyTeamsApp1) and select **Properties**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-solution-properties.png" alt-text="Screenshot shows the right click solution and select properties." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-solution-properties.png"::: ++ A solution property pages dialog box appears. ++1. Select **Configuration Properties** > **Configuration** in the dialog box. +1. Clear the **Deploy** checkbox. +1. Select **OK**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-disable-deploy.png" alt-text="Screenshot shows the uncheck deploy in configuration properties." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/vs-localdebug-disable-deploy.png"::: ++## Next ++> [!div class="nextstepaction"] +> [Debug your app locally](debug-local-vs.md) ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Debug background process](debug-background-process-v4.md) +* [Use Teams Toolkit to provision cloud resources](provision-vs.md) +* [Deploy to the cloud](deploy-vs.md) +* [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-vs.md) +++ Teams Toolkit helps you to debug and preview your Microsoft Teams app. Debug is the process of checking, detecting, and correcting issues or bugs to ensure the program runs successfully in Teams. Teams Toolkit automates app startup services, initiates debug, and side loads Teams app. After debug, you can preview the Teams app in Teams web client. You can also customize debug settings to use your bot endpoints, or environment variables to load your configured app. Visual Studio allows you to debug tab, bot, and message extension. During the debug process, Teams Toolkit supports the following debug features: You can launch Teams app as a web app instead of running in Teams client. * [Use Teams Toolkit to provision cloud resources](provision-vs.md) * [Deploy to the cloud](deploy-vs.md) * [Preview and customize Teams app manifest](TeamsFx-preview-and-customize-app-manifest-vs.md)+ |
| platform | Deploy Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/deploy-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs -# Deploy Teams app to the cloud VS +# Deploy Teams app to the cloud using Visual Studio Teams Toolkit helps to deploy or upload the front-end and back-end code in your app to your provisioned cloud resources in Azure. ++You can deploy your Teams app to the following cloud resources: ++* Azure App Services +* Azure Functions +* Azure Storage (as static website) +* SharePoint ++> [!Note] +> +> Before you deploy your app code to Azure cloud, you need to complete the provisioning of cloud resources. ++To deploy Teams app using Teams Toolkit, follow these steps: ++1. Open **Visual Studio**. +1. Select **Create a new project** or open an existing project from the list. +1. Select **Project** > **Teams Toolkit** > **Deploy to the Cloud**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/deploy-to-the-cloud-button.png" alt-text="Screenshot shows steps to deploy to the cloud."::: ++1. In the pop-up window that appears, select **Deploy**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/deploy_warning.png" alt-text="Screenshot shows deploy warning window."::: +The app is deployed to Azure cloud. ++## Customize deploy lifecycle in Teams using Visual Studio ++To customize the deployment process, you can edit the following `deploy` sections in the `teamsapp.yml` file: ++* [cli/runNpmCommand](#clirunnpmcommand) +* [cli/runDotnetCommand](#clirundotnetcommand) +* [cli/runNpxCommand](#clirunnpxcommand) +* [azureAppService/zipDeploy](#azureappservicezipdeploy) +* [azureFunctions/zipDeploy](#azurefunctionszipdeploy) +* [azureStorage/deploy](#azurestoragedeploy) ++### cli/runNpmCommand ++This action executes `npm` commands under specified directory with parameters. ++#### Sample ++```yaml + - uses: cli/runNpmCommand + with: + workingDirectory: ./src + args: install +``` ++#### Parameters ++| Parameter | Description | Required | Default value | +||||| +| `workingDirectory` | Represents the folder where you want to run the command. If your input value is a relative path, it's relative to the `workingDirectory`. | No | Project root | +| `args` | command arguments | Yes | NA | ++### cli/runDotnetCommand ++This action executes `dotnet` commands under specified directory with parameters. ++#### Sample ++```yaml + - uses: cli/runDotnetCommand + with: + workingDirectory: ./src + execPath: /YOU_DOTNET_INSTALL_PATH + args: publish --configuration Release --runtime win-x86 --self-contained +``` ++#### Parameters ++| Parameter | Description | Required | Default value | +||||| +| `workingDirectory` | Represents the folder where you want to run the command. If your input value is a relative path, it's relative to the `workingDirectory`. | No | Project root | +| `args` | npm command arguments | Yes | NA | +| `execPath` | executor path | No | System PATH | ++### cli/runNpxCommand ++This action executes `npx` commands under specified directory with parameters. You can use it to run `gulp` commands for bundling and packaging sppkg. ++#### Sample ++```yaml + - uses: cli/runNpxCommand + with: + workingDirectory: ./src + args: gulp package-solution --ship --no-color +``` ++#### Parameters ++| Parameter | Description | Required | Default value | +||||| +| `workingDirectory` | Represents the folder where you want to run the command. If your input value is a relative path, it's relative to the `workingDirectory`. | No | Project root | +| `args` | command arguments | Yes | NA | ++### azureAppService/zipDeploy ++This action uploads and deploys the project to Azure App Service using [the zip deploy feature](https://aka.ms/zip-deploy-to-azure-functions). ++#### Sample ++```yaml + - uses: azureAppService/zipDeploy + with: + workingDirectory: ./src + artifactFolder: . + ignoreFile: ./.webappignore + resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}} + dryRun: false + outputZipFile: ./.deployment/deployment.zip +``` ++#### Parameters ++| Parameter | Description | Required | Default value | +||||| +| `workingDirectory` | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the `workingDirectory`. | No | Project root | +| `artifactFolder` | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the `workingDirectory`. | Yes | NA | +| `ignoreFile` | Specifies the file path of the ignore file used during upload. You can utilize this file to exclude certain files or folders from the artifactFolder. Its syntax is similar to the Git's ignore. | No | null | +| `resourceId` | Indicates the resource ID of an Azure App Service. It's generated automatically after running the provision command. If you already have an Azure App Service, you can find its resource ID in the Azure portal. For more information, see [how to find resource ID](https://azurelessons.com/how-to-find-resource-id-in-azure-portal/). | Yes | NA | +| `dryRun` | You can set the dryRun parameter to true if you only want to test the preparation of the upload and don't intend to deploy it. This helps you verify that the packaging zip file is correct. | No | false | +| `outputZipFile` | Indicates the path of the zip file for the packaged artifact folder. It's relative to the workingDirectory. During deployment, it reconstructs this file reflects all folders and files in your `artifactFolder`, and removes any non-existent files or folder. | No | ./.deployment/deployment.zip | ++### azureFunctions/zipDeploy ++This action uploads and deploys the project to Azure Functions using. For more information, see [the zip deploy feature](https://aka.ms/zip-deploy-to-azure-functions). ++#### Sample ++```yaml + - uses: azureFunctions/zipDeploy + with: + workingDirectory: ./src + artifactFolder: . + ignoreFile: ./.webappignore + resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}} + dryRun: false + outputZipFile: ./.deployment/deployment.zip +``` ++#### Parameters ++| Parameter | Description | Required | Default value | +||||| +| `workingDirectory` | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the `workingDirectory`. | No | Project root | +| `artifactFolder` | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the `workingDirectory`. | Yes | NA | +| `ignoreFile` | Specifies the file path of the ignore file used during upload. You can utilize this file to exclude certain files or folders from the artifactFolder. Its syntax is similar to the Git's ignore. | No | null | +| `resourceId` | Indicates the resource ID of an Azure Functions. It's generated automatically after running the provision command. If you already have an Azure Functions, you can find its resource ID in the Azure portal. For more information, see [how to find resource ID](https://azurelessons.com/how-to-find-resource-id-in-azure-portal/). | Yes | NA | +| `dryRun` | You can set the dryRun parameter to true if you only want to test the preparation of the upload and don't intend to deploy it. This helps you verify that the packaging zip file is correct. | No | false | +| `outputZipFile` | Indicates the path of the zip file for the packaged artifact folder. It's relative to the workingDirectory. During deployment, it reconstructs this file, reflecting all folders and files in your `artifactFolder`, and removes any non-existent files or folder. | No | ./.deployment/deployment.zip | ++### azureStorage/deploy ++This action uploads and deploys the project to Azure Storage. ++#### Sample ++```yaml + - uses: azureStorage/deploy + with: + workingDirectory: ./src + artifactFolder: . + ignoreFile: ./.webappignore + resourceId: ${{BOT_AZURE_APP_SERVICE_RESOURCE_ID}} +``` ++#### Parameters ++| Parameter | Description | Required | Default value | +||||| +| `workingDirectory` | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the workingDirectory. | No | Project root | +| `artifactFolder` | Represents the folder where you want to upload the artifact. If your input value is a relative path, it's relative to the `workingDirectory`. | Yes | NA | +| `ignoreFile` | Specifies the file path of the ignore file used during upload. You can utilize this file to exclude certain files or folders from the `artifactFolder`. Its syntax is similar to the Git's ignore. | No | null | +| `resourceId` | Indicates the resource ID of an Azure Storage. It's generated automatically after running the provision command. If you already have an Azure Storage, you can find its resource ID in the Azure portal (see [this link](https://azurelessons.com/how-to-find-resource-id-in-azure-portal/) for more information). | Yes | NA | ++### See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Create and deploy an Azure cloud service](/azure/cloud-services/cloud-services-how-to-create-deploy-portal) +* [Create multi-capability Teams apps](add-capability-v4.md) +* [Add cloud resources to Microsoft Teams app](add-resource-v4.md) +* [Create new Teams app in Visual Studio](~/toolkit/toolkit-v4/create-new-project-vs.md) +* [Provision cloud resources using Visual Studio](provision-vs.md) +* [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md) +* [Debug your Teams app locally using Visual Studio](debug-local-vs.md#debug-your-teams-app-locally-using-visual-studio) +++ ## Deploy Teams app to the cloud using Visual Studio You can deploy the following to the cloud: The other way to preview your app: * [Provision cloud resources using Visual Studio](provision-vs.md) * [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md) * [Debug your Teams app locally using Visual Studio](debug-local-vs.md#debug-your-teams-app-locally-using-visual-studio)+ |
| platform | Explore Teams Toolkit Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/explore-Teams-Toolkit-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Explore Teams Toolkit in Visual Studio ++> [!IMPORTANT] +>We've introduced the important changes in Teams Toolkit extension within Microsoft Visual Studio v17.7 with many new app development features. We recommend that you use Teams Toolkit v17.7 for building your Teams app. ++In this article, learn how to explore Teams Toolkit and its features in Visual Studio. ++Teams Toolkit appears as a workload in the app you've created in Visual Studio. For more information, see [How to create a Teams app](create-new-project-vs.md). ++You can view Teams Toolkit in Visual studio in the following ways: ++* Project +* Solution Explorer ++# [Project](#tab/prj) ++To view the Teams Toolkit from the **Project** menu, follow these steps: ++1. Select **Project**. +1. Select **Teams Toolkit**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-installed.png" alt-text="Screenshot shows the Teams toolkit project menu."::: ++# [Solution Explorer](#tab/solutionexplorer) ++ To view Teams Toolkit under **Solution Explorer**, follow these steps: ++1. Select **View** > **Solution Explorer** to view **Solution Explorer** panel. +1. Right-click on your app project name. +1. Select **Teams Toolkit**. ++ > [!NOTE] + > In this scenario the project name is **MyTeamsApp**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/ttk-solution explorer.png" alt-text="Screenshots the Teams toolkit operations from Project"::: + ++++After you've created your Teams app project, you can use the following options to develop and build your app: +++|Function |Description | +||| +|Prepare Teams App Dependencies |Before you debug locally, ensure that you prepare your app for dependencies. This option helps you to set up the local debug dependencies and register Teams app in the Teams platform. You must have a Microsoft 365 account. For more information, see [how to debug your Teams app locally using Visual Studio](debug-local-vs.md). | +|Open Manifest File | Helps you to open Teams app manifest file. Hover over the parameters to preview the values. For more information, see [how to edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | +|Update Manifest in Teams Developer Portal | Helps you to update the manifest file. When you update the manifest file, only then you can redeploy the manifest file to Azure without deploying the whole project again. Use this command to update your changes to remote. For more information, see [how to edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md). | +|Add Authentication Code | Helps you obtain signed-in Teams user token to access Microsoft Graph and other APIs. Teams Toolkit facilitates the interaction by abstracting from the Microsoft Azure Active Directory (Azure AD), which flows and integrates with simple APIs. For more information, see [how to add single sign-on to Teams app](add-single-sign-on-vs.md). | +|Provision in the Cloud | Helps you to create Azure resources that host your Teams app. For more information, see [how to provision cloud resources using Visual Studio](provision-vs.md). | +|Deploy to the Cloud | Helps you to copy your code to the cloud resources that you provisioned in Azure AD. For more information, see [how to deploy Teams app to the cloud using Visual Studio](deploy-vs.md). | +|Preview in Teams | Launches the Teams web client and lets you preview the Teams app in your browser. | +|Zip App Package | Generates a Teams app package in the **Build** folder under the project. You can upload the app package to the Teams client and run the Teams app. | ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Create a new Teams app using Teams Toolkit](create-new-project-vs.md) +* [App manifest schema](~/resources/schem) +* [Prepare to build apps using Teams Toolkit](build-environments-v4.md) +++ Teams Toolkit appears within Visual Studio as a workload. When you've created a Teams Toolkit app, you can see Teams Toolkit options in the following ways: # [Project](#tab/prj) After you've created your Teams app project, you can use the following options t * [Create a new Teams app using Teams Toolkit](create-new-project-vs.md) * [App manifest schema](~/resources/schem) * [Prepare to build apps using Teams Toolkit](build-environments-v4.md)+ |
| platform | Install Teams Toolkit Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/install-Teams-Toolkit-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Install Teams Toolkit in Visual Studio ++> [!IMPORTANT] +> We've introduced the important changes in Teams Toolkit extension within Microsoft Visual Studio v17.7 with many new app development features. We recommend that you use Teams Toolkit v17.7 for building your Teams app. ++You can learn how to install Teams Toolkit and enjoy enhanced experience for app development. ++## Install Teams Toolkit for Visual Studio ++1. Download and open [Visual Studio installer](https://aka.ms/VSDownload). +1. Select **Install**. If you've already installed Visual Studio, select **Modify**. ++ Visual Studio installer shows all workloads. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/visual-studio-install.png" alt-text="Screenshot shows how to install Visual studio."::: ++1. From the installation screen, perform the following steps: + 1. Select **Workloads** > **ASP.NET and web development**. + 1. On the right pane, go to **Installation details** > **Optional** and then select **Microsoft Teams development tools**. + 1. Select **Install**. Visual Studio is installed and a pop-up apears. ++1. Select **Launch**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/visual-studio-launch.png" alt-text="Screenshot shows how to launch visual studio."::: ++The Visual Studio 2022 window appears. ++## Next step ++> [!div class="nextstepaction"] +> [Explore Teams Toolkit](explore-Teams-Toolkit-vs.md) ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Prepare to build apps](build-environments-v4.md) +* [Provision cloud resources](provision-vs.md) +* [Deploy Teams app to the cloud](deploy-vs.md) +++ The Microsoft Azure Active Directory (Azure AD) manifest contain definitions of all the attributes of an Azure AD application object in the Microsoft identity platform. ## Prerequisites Teams Toolkit menu options are available in Visual Studio only when an app proje * [Prepare to build apps](build-environments-v4.md) * [Provision cloud resources](provision-vs.md) * [Deploy Teams app to the cloud](deploy-vs.md)+ |
| platform | Provision Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/provision-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Provision cloud resources in Visual Studio TeamsFx integrates with Azure and the Microsoft 365 cloud, which allows to place your app in Azure with a single command. TeamsFx integrates with Azure Resource Manager (ARM), which enables to provision Azure resources that your application needs for code approach. ++## Sign in to your Azure account ++1. Open **Visual Studio**. +1. Open the **Microsoft Teams App project**. +1. Select **Project** > **Teams Toolkit** > **Provision in the Cloud**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-in-cloud.png" alt-text="Screenshot shows sign in to Azure account."::: ++1. Select **Sign in...**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-start.png" alt-text="Screenshot shows the sign in to Azure account."::: ++ > [!NOTE] + > If you're already signed in, your username is displayed, or you've an option to **Add an account**. ++ After you've signed in to your Azure account using your credentials, the browser closes automatically. ++### Provision cloud resources ++After you open your project in Visual Studio, to provision cloud resources follow these steps: ++1. Select **Project** > **Teams Toolkit** > **Provision in the Cloud...**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-in-cloud.png" alt-text="Screenshot shows how to provision in cloud."::: ++ The **Provision** window appears. ++1. Enter the following details to provision your resources: ++ 1. Select your **Subscription name** from the dropdown menu. + 1. Select your **Resource group** from the dropdown menu or you can create new **Resource group** by selecting **New...**. + 1. Select your **Region** from the dropdown menu. + 1. Select **Provision**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-select-subscription.png" alt-text="Screenshot shows the selection of resource group." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-select-subscription.png"::: ++1. In the pop-up window that appears, select **Provision**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-warning.png" alt-text="Screenshot shows the provision warning."::: ++ The provisioning process creates resources in the Azure cloud. You can monitor the progress by observing the Teams Toolkit output window. ++1. In the pop-up window that appears, to view all the resources that are provisioned, select **View provisioned resources**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/teams-toolkit-vs-provision-provision-success-info.png" alt-text="Screenshot shows the provisioned resources."::: ++## Provision actions ++The following actions are designed for provision: ++* [teamsApp/create](#teamsappcreate) +* [teamsApp/update](#teamsappupdate) +* [teamsApp/validateManifest](#teamsappvalidatemanifest) +* [teamsApp/validateAppPackage](#teamsappvalidateapppackage) +* [teamsApp/zipAppPackage](#teamsappzipapppackage) +* [teamsApp/publishAppPackage](#teamsapppublishapppackage) +* [aadApp/create](#aadappcreate) +* [aadApp/update](#aadappupdate) +* [botAadApp/create](#botaadappcreate) +* [arm/deploy](#armdeploy) +* [azureStorage/enableStaticWebsite](#azurestorageenablestaticwebsite) +* [script](#script) ++### teamsApp/create ++If the environment variable that stores Teams app ID is empty or the app ID isn't found from Teams Developer Portal, then the `teamsApp/create` action creates a new Teams app. It operates on Teams app in Teams Developer Portal. ++```yml + - uses: teamsApp/create + with: + # #required. Name of Teams app + name: <your-preferred-app-name> + # Write the information of created resources into environment file for the specified environment variable(s). + writeToEnvironmentFile: + # The id for Teams app + teamsAppId: <your-preferred-env-var-name> +``` ++### teamsApp/update ++When you apply the Teams app manifest to an existing Teams app in Teams Developer Portal. `teamsApp/update` action uses the app ID in manifest.json file to determine which Teams app to update. It operates on Teams app in Teams Developer Portal. ++```yml +- uses: teamsApp/update + with: + # Required. Relative path to the yaml file. This is the path for built zip file. + appPackagePath: <path-to-teams-app-package-file> +``` ++### teamsApp/validateManifest ++The `teamsApp/validateManifest` action renders Teams app manifest template with environment variables and validates Teams app manifest file using its schema. ++```yml +- uses: teamsApp/validateManifest + with: + # Required. Relative path to the yaml file. Path to Teams app manifest file + manifestPath: <path-to-manifest-file> +``` ++### teamsApp/validateAppPackage ++The `teamsApp/validateAppPackage` action validates Teams app package using validation rules. ++```yml + - uses: teamsApp/validateAppPackage + with: + # Required. Relative path to the yaml file. This is the path for built zip file. + appPackagePath: <path-to-teams-app-package-file> +``` ++### teamsApp/zipAppPackage ++The `teamsApp/zipAppPackage` action renders Teams app manifest template with environment variables and compresses the manifest file with two icons into a zip file. ++```yml +- uses: teamsApp/zipAppPackage + with: + # Required. Relative path to the yaml file. This is the path for Teams app manifest file. Environment variables in manifest will be replaced before apply to AAD app. + manifestPath: <path-to-manifest-file> + # Required. Relative path to the yaml file. This is the path for built zip file. + outputZipPath: <path-to-generated-zip-file> + # Required. Relative path to the yaml file. This is the path for built manifest json file. + outputJsonPath: <path-to-generated-json-file> +``` ++### teamsApp/publishAppPackage ++The `teamsApp/publishAppPackage` action publishes built Teams app zip file to tenant app catalog. It operates in Microsoft 365 tenant app catalog. ++```yml +- uses: teamsApp/publishAppPackage + with: + # Required. Relative path to this file. This is the path for built zip file. + appPackagePath: <path-to-teams-app-package> + # Write the information of created resources into environment file for the specified environment variable(s). + writeToEnvironmentFile: + # The Teams app id in tenant app catalog. + publishedAppId: <your-preferred-env-var-name> +``` ++### aadApp/create ++The `aadApp/create` action creates a new Azure Active Directory (Azure AD) application to authenticate users if the environment variable that stores the `clientId` is empty. It operates in Azure AD in Microsoft 365 tenant. ++```yml +- uses: aadApp/create + with: + # Required. The AAD app's display name. When you run aadApp/update, the Azure Active Directory AD app name will be updated based on the definition in manifest. If you don't want to change the name, make sure the name in AAD manifest is the same with the name defined here. + name: <your-application-name> + # Required. If the value is false, the action will not generate client secret for you + generateClientSecret: true + # Required. Specifies what Microsoft accounts are supported for the current application. Supported values are: `AzureADMyOrg`, `AzureADMultipleOrgs`, `AzureADandPersonalMicrosoftAccount`, `PersonalMicrosoftAccount`. + signInAudience: "AzureADMyOrg" + # Write the information of created resources into environment file for the specified environment variable(s). + writeToEnvironmentFile: + # Required. The client (application) ID of Azure Active Directory AD application. The action will refer the environment variable defined here to determine whether to create a new AAD app. + clientId: <your-preferred-env-var-name> + # Required when `generateClientSecret` is `true`. The action will refer the environment variable defined here to determine whether to create a new client secret. It's recommended to add `SECRET_` prefix to the environment variable name so it will be stored to the .env.{envName}.user environment file. + clientSecret: <your-preferred-env-var-name> + # Required. The object ID of AAD application + objectId: <your-preferred-env-var-name> + # Optional. The tenant ID of AAD tenant + tenantId: <your-preferred-env-var-name> + # Optional. The AAD authority + authority: <your-preferred-env-var-name> + # Optional. The host name of AAD authority + authorityHost: <your-preferred-env-var-name> +``` + +### aadApp/update ++`aadApp/update` action updates your Azure AD application based on Azure AD app manifest. It refers to the ID property in Azure AD app manifest to determine which Azure AD app to update. aadApp/update operates on Azure AD in your Microsoft 365 tenant. ++```yaml +- uses: aadApp/update + with: + # Required. Relative path to the yaml file. Path to the AAD app manifest. Environment variables in manifest will be replaced before apply to AAD app. + manifestPath: <path-to-manifest-file> + # Required. Relative path to the yaml folder. This action will output the final AAD manifest used to update AAD app to this path. + outputFilePath : <path-to-output-file> +``` ++### botAadApp/create ++The `botAadApp/create` action creates a new or reuses an existing Azure AD application for bot. It operates on Azure AD in the Microsoft 365 tenant. ++```yml +- uses: botAadApp/create + with: + # Required. The AAD app's display name + name: <your-app-name> + writeToEnvironmentFile: + # The The AAD app's client id created for bot. + botId: <your-preferred-env-var-name> + # The The AAD app's client secret created for bot. + botPassword: <your-preferred-env-var-name> +``` ++### arm/deploy ++The `arm/deploy` action deploys given ARM templates in parallel. It operates on Azure subscription. ++```yml +- uses: arm/deploy + with: + # Required. You can use built-in environment variable `AZURE_SUBSCRIPTION_ID` here. TeamsFx will ask you select one subscription if its value is empty. You're free to reference other environment variable here, but TeamsFx will not ask you to select subscription if it's empty in this case. + subscriptionId: ${{AZURE_SUBSCRIPTION_ID}} + # Required. You can use built-in environment variable `AZURE_RESOURCE_GROUP_NAME` here. TeamsFx will ask you to select or create one resource group if its value is empty. You're free to reference other environment variable here, but TeamsFx will not ask you to select or create resource group if it's empty in this case. + resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}} + # Required. The ARM templates to be deployed. + templates: + # Required. Relative path to the yaml file. + - path: <path-to-arm-template> + # Optional. Relative path to the yaml file. TeamsFx will replace the environment variable reference with real value before deploy ARM template. + parameters: <path-to-arm-template-parameter> + # Required. Name of the ARM template deployment. + deploymentName: <arm-deployment-name> + # Optional. Teams Toolkit will download this bicep CLI version from github for you, will use bicep CLI in PATH if you remove this config. + bicepCliVersion: v0.9.1 +``` ++### azureStorage/enableStaticWebsite ++The `azureStorage/enableStaticWebsite` action enables static website setting in Azure Storage. It operates on Azure Storage. ++```yml +- uses: azureStorage/enableStaticWebsite + with: + # Required. The resource id of Azure Storage + storageResourceId: ${{<env-name-of-azure-storage-resource-id>}} + # Required. The path to index page. + indexPage: <path-to-index-page> + # Required. The path to error page. + errorPage: <path-to-error-page> +``` ++### script ++The `script` action executes a user-defined script. ++```yml +- uses: script + with: + # Required. Command to run or path to the script. Succeeds if exit code is 0. '::set-teamsfx-env key=value' is a special command to generate output variables into .env file, in this case, "mykey=abc" will be added the output in the corresponding .env file. + run: $my_key="abc"; echo "::set-teamsfx-env mykey=${my_key}" + # Optional. Available values are: bash, sh, powershell(Powershell Desktop), pwsh(powershell core), cmd. If omitted, it defaults to bash on Linux/MacOS, defaults to pwsh on windows. + shell: <shell-name> + # Optional. Current working directory. Defaults to the directory of this file. + workingDirectory: <working-directory> + # Optional. Timeout in ms. + timeout: <timeout-in-ms> + # Optional. Redirect stdout and stderr to a file. + redirectTo: <path-to-output-file> +``` ++### Customize resource provision ++The provision steps are defined in the `teamsapp.yml` file, under the `provision` property. You can add, remove, or update actions to the `provision` property to define the expected actions you want to do during provision. ++#### Reference environment variables in parameter files ++Teams Toolkit supports referencing the values from environment variables in the `teamsapp.yml` file, Teams app manifest, Azure AD app manifest, and Azure parameter files. You can use the syntax `${{ENV_VARIABLE_NAME}}` to reference environment variables. ++The following example sets the value of environment variable `MY_AZURE_SUBSCRIPTION_ID` to `subscriptionId`: ++```yml +subscriptionId: ${{MY_AZURE_SUBSCRIPTION_ID}} +``` ++#### Customize ARM template files ++If the predefined templates don't meet your app requirements, you can create your own ARM template or update existing ARM template and provide the path to `arm/deploy` action as follows: ++```yml +- uses: arm/deploy + with: + subscriptionId: ${{AZURE_SUBSCRIPTION_ID}} + resourceGroupName: ${{AZURE_RESOURCE_GROUP_NAME}} + templates: + - path: <path-to-your-arm-template> + parameters: <path-to-your-parameter-file> + deploymentName: <arm-deployment-name> + bicepCliVersion: <bicep-cli-version> +``` + +The `arm/deploy` action support ARM templates that are written in bicep and json format. If you use json format, you can omit the `bicepCliVersion` parameter. You need to have basic knowledge of Azure Resource Manager. For more information, see [Azure Resource Manager documentation](/azure/azure-resource-manager/). ++### Manage your resources ++You can sign in to [Azure portal](https://portal.azure.com/) and manage all resources created using Teams Toolkit. ++* You can select a resource group from the existing list or the new resource group that you've created. +* You can see the details of the resource group you've selected in the overview section of the table of contents. ++### Customize Teams apps ++You can customize your bot or the Teams app by adding environment variables to use an Azure AD app that you've created. You can customize the Teams app in the following ways: ++* [Use an existing Azure AD app for your Teams app](#use-an-existing-azure-ad-app-for-your-teams-app-1) +* [Use an existing Azure AD app for your bot](#use-an-existing-azure-ad-app-for-your-bot) ++#### Use an existing Azure AD app for your Teams app ++To use an Azure AD app created for your Teams app and to add environment variables to the .env files, follow these steps. ++1. Open the `teamsapp.yml` file and find the `aadApp/create` action. ++1. Find the environment variable names that store information for Azure AD app in the `writeToEnvironmentFile` property. If you create projects using Teams Toolkit the default `writeToenvironmentFile` property definition is as follows: ++ ```yml + writeToEnvironmentFile: + clientId: AAD_APP_CLIENT_ID + clientSecret: SECRET_AAD_APP_CLIENT_SECRET + objectId: AAD_APP_OBJECT_ID + tenantId: AAD_APP_TENANT_ID + authority: AAD_APP_OAUTH_AUTHORITY + authorityHost: AAD_APP_OAUTH_AUTHORITY_HOST + ``` ++1. Add values for each environment variable from step 2. ++ 1. Add the following environment variables and their values to `env\.env.{env}` file. For example: ++ ```env + AAD_APP_CLIENT_ID=<value of Azure AD application's client id (application id)> # example: 00000000-0000-0000-0000-000000000000 + AAD_APP_OBJECT_ID=<value of Azure AD application's object id> # example: 00000000-0000-0000-0000-000000000000 + AAD_APP_TENANT_ID=<value of Azure AD's Directory (tenant) id>> # example: 00000000-0000-0000-0000-000000000000 + AAD_APP_OAUTH_AUTHORITY=<value of Azure AD's authority> # example: https://login.microsoftonline.com/<Directory (tenant) ID> + AAD_APP_OAUTH_AUTHORITY_HOST=<host of Azure AD's authority> # example: https://login.microsoftonline.com + AAD_APP_ACCESS_AS_USER_PERMISSION_ID=<id of access_as_user permission> # example: 00000000-0000-0000-0000-000000000000 + ``` ++ 1. If your application requires an Azure AD app client secret, add the following environment variable and its value to `env\.env.{env}.user` file. For example: ++ ```env + SECRET_AAD_APP_CLIENT_SECRET=<value of Azure AD application's client secret> + ``` ++If you don't have an Azure AD app yet or you've one but don't know where to find the correct value, see [Use existing Azure AD app in TeamsFx project](../use-existing-aad-app.md). ++>[!NOTE] +> +> * Remember to update the environment variable names in the examples if you use different names in `writeToEnvironmentFile`. +> * If you don't use `aadApp/create` action to create Azure AD application, you can add necessary environment variables with your preferred name without following above steps. +> * Ensure you do not share the same Azure AD app in multiple environments. ++#### Use an existing Azure AD app for your bot ++You can follow the steps to add environment variables to the .env files to use an Azure AD app created for your Teams app. ++1. Open the `teamsapp.yml` file and find the `botAadApp/create` action. ++1. Find the environment variable names that store information for Azure AD app in the `writeToEnvironmentFile` property. The default `writeToEnvironmentFile` definition if you create projects using Teams Toolkit is as follows: ++ ```yml + writeToEnvironmentFile: + botId: BOT_ID + botPassword: SECRET_BOT_PASSWORD + ``` ++1. Add values for each environment variable from step 2. ++ 1. Add the environment variable and its value to `env\.env.{env}` file. For example: ++ ```env + BOT_ID=<value of Azure AD application's client id (application id)> # example: 00000000-0000-0000-0000-000000000000 + ``` ++ 1. Add the environment variable and its value to `env\.env.{env}.user` file. For example: ++ ```env + SECRET_BOT_PASSWORD=<value of Azure AD application's client secret> + ``` ++If you don't have an Azure AD app for your bot yet or you've one but don't know where to find the correct values, see [Use existing Azure AD app in TeamsFx project](../use-existing-aad-app.md). ++> [!NOTE] +> +> * Remember to update the environment variable names in the examples if you use different names in `writeToEnvironmentFile`. +> * If you don't use `botAadApp/create` action to create Azure AD application, you can add necessary environment variables with your preferred name without following above steps. +> * Ensure that you do not share the same Azure AD app in multiple environments. ++## See also ++* [Teams Toolkit Overview](teams-toolkit-fundamentals-vs.md) +* [Deploy Teams app to the cloud](deploy-vs.md) +* [Manage multiple environments](TeamsFx-multi-env-v4.md) +* [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md) +* [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md) +++ > [!NOTE] > Teams toolkit doesn't provide support to deploy resources to other cloud platforms except Azure, however, the user can deploy manually. If you get an insufficient permission error when Teams Toolkit tries to add user * [Manage multiple environments](TeamsFx-multi-env-v4.md) * [Collaborate with other developers on Teams project](TeamsFx-collaboration-v4.md) * [Edit Teams app manifest using Visual Studio](TeamsFx-preview-and-customize-app-manifest-vs.md)+ |
| platform | Teams Toolkit Fundamentals Vs | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/teams-toolkit-fundamentals-vs.md | +zone_pivot_groups: teams-toolkit-platform-vs # Teams Toolkit Visual Studio Overview ++> [!IMPORTANT] +> We've introduced the important changes in Teams Toolkit extension within Microsoft Visual Studio v17.7 with many new app development features. We recommend that you use Teams Toolkit v17.7 for building your Teams app. ++Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio. ++* Start with a project template for common line-of-business app scenarios or from a sample. +* Save setup time with automated app registration and configuration. +* Run and debug to Teams directly from familiar tools. +* Smart defaults for hosting in Microsoft Azure using infrastructure-as-code and Bicep. +* Bring your app to your organization or the Teams App Store using built-in publishing tools. +++## Available for Visual Studio ++Teams Toolkit v17.7 is available for free for Visual Studio 2022 Community, Professional, and Enterprise. For more information about installation and setup, see how to [install Teams Toolkit](./install-Teams-Toolkit-vs.md). ++| Teams Toolkit | Visual Studio | +| - | - | +| Installation | Available in the Visual Studio Installer | +| Build with | C#, .NET, ASP.NET, and Blazor | ++## Features ++The following are the key features of Teams Toolkit: ++* [Project templates](#project-templates) +* [Automatic registration and configuration](#automatic-registration-and-configuration) ++### Project templates ++You can start with the capability-focused templates such as tabs, bots, and message extensions or by following the existing samples if you're already familiar with Teams app development. Teams Toolkit reduces the complexity of getting started with the help of templates for custom app built for org scenarios and smart defaults to accelerate your time to production. ++Perform the following the steps to select templates and app capbaility: ++1. Select **File > New > Project**. ++1. Enter **Teams** in the search box and from search results, select **Microsoft Teams App** template. + +1. Select **Next**. ++ :::image type="content" source="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/new-project-template-vs.png" alt-text="Screenshot shows the search and select Microsoft Teams app." lightbox="../../assets/images/teams-toolkit-v2/teams-toolkit-vs/new-project-template-vs.png"::: ++### Automatic registration and configuration ++You can save time and let the toolkit automatically register the app in Teams Developer Portal. When you first run or debug the app, Teams Toolkit automatically registers the Teams app to your Microsoft 365 tenant and configures settings such as Azure Active Directory (Azure AD) for your Teams app. Sign in with your Microsoft 365 account to control where the app is configured and customize the Azure AD manifest. ++#### TeamsFx .NET SDK reference ++* [Microsoft.Extensions.DependencyInjection Namespace](/../dotnet/api/Microsoft.Extensions.DependencyInjection) +* [Microsoft.TeamsFx Namespace](/../dotnet/api/Microsoft.TeamsFx) +* [Microsoft.TeamsFx.Configuration Namespace](/../dotnet/api/Microsoft.TeamsFx.Configuration) +* [Microsoft.TeamsFx.Conversation Namespace](/../dotnet/api/Microsoft.TeamsFx.Conversation) +* [Microsoft.TeamsFx.Helper Namespace](/../dotnet/api/Microsoft.TeamsFx.Helper) ++## See also ++[Install Teams Toolkit](install-Teams-Toolkit-vs.md) +++ Teams Toolkit makes it simple to get started with app development for Microsoft Teams using Visual Studio. * Start with a project templates for common line-of-business app scenarios or from a sample. You can save time and let the toolkit automatically register the app in Teams De ## See also -* [Build tabs for Teams](~/tabs/what-are-tabs.md) -* [Build bots for Teams](~/bots/what-are-bots.md) -* [Build Message extensions](~/messaging-extensions/what-are-messaging-extensions.md) -* [Create a new Teams app](create-new-project-vs.md) -* [Provision cloud resources](provision-vs.md) -* [Deploy Teams app to the cloud](deploy-vs.md) -* [Publish Teams apps](publish-v4.md) +[Install Teams Toolkit](install-Teams-Toolkit-vs.md) + |
| platform | Tools Prerequisites V4 | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/toolkit/toolkit-v4/tools-prerequisites-v4.md | Ensure the following requirements are met before you start building your Teams a | **Required** | | | | | | Teams Toolkit| A Microsoft Visual Studio Code extension that creates a project scaffolding for your app. Use the latest version. | JavaScript and SharePoint Framework (SPFx)| | | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Collaborate with everyone you work with through apps for chat, meetings, and call - all in one place.| JavaScript and SPFx|- | |[Node Package Manager (NPM)](https://www.npmjs.com/package/@microsoft/teamsfx) | Install and manage packages for use in both Node.js and ASP.NET Core applications.| JavaScript and SPFx| | | [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | JavaScript and SPFx| | **Optional** | | | | | | [Azure Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) and [Azure CLI](/cli/azure/install-azure-cli) | Access stored data or deploy a cloud-based back-end for your Teams app in Azure. | JavaScript| Ensure that the following tools are installed on the device where youΓÇÖll creat | [Microsoft Visual Studio 2022](https://visualstudio.microsoft.com/downloads/) | Use the latest version, *ASP.NET and web development* workload, and *Microsoft Teams development tools* option. | C# or Blazor. | | [Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) | The Microsoft Visual Studio Code extension to create a Teams app project. Use the latest version. | JavaScript, TypeScript, and SPFx. | | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Sideloading feature to test your app behavior within your local Teams environment.| JavaScript, TypeScript, SPFx, and C# or Blazor. |- | [Node.js](https://nodejs.org/en/download/) | Back-end JavaScript runtime environment. Use the latest v16 LTS release.| JavaScript, TypeScript, and SPFx. | - | [Node Package Manager (NPM)](https://www.npmjs.com/package/@microsoft/teamsfx) | Installing and managing packages for use in both Node.js and ASP.NET core applications.| JavaScript, TypeScript, and SPFx. | | [Microsoft Edge](https://www.microsoft.com/edge) (recommended) or [Google Chrome](https://www.google.com/chrome/) | A browser with developer tools. | JavaScript, TypeScript, SPFx, and C# or Blazor. | | **Optional** | | | | [Azure Tools for Visual Studio Code](https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-node-azure-pack) and [Azure CLI](/cli/azure/install-azure-cli) | Stored data or deploy a cloud-based back-end for your Teams app in Azure. | JavaScript and TypeScript. | Ensure that you have the following accounts before you start building your Teams | | | | |[Microsoft 365 account with a valid subscription](#microsoft-365-developer-program)|Teams developer account while developing an app.| JavaScript, TypeScript, SPFx, and C# or Blazor. | |[Azure account](#azure-account)|Back-end resources on Azure.| JavaScript, TypeScript, SPFx, and C# or Blazor. |-|[SharePoint collection site administrator account](#sharepoint-collection-site-administrator-account) |Deployment for hosting.| SPFx. | ### Microsoft 365 developer program An Azure account allows you to host a Teams app or the back-end resources for yo > [!NOTE] > You can use Azure account to provision Azure resource to host your Teams app. You can [create a free account](https://azure.microsoft.com/free/) in case you don't have any. If you don't use Teams Toolkit to provision and deploy, Azure account isn't required. -### SharePoint collection site administrator account --While creating Teams app using SPFx environment, you must have a SharePoint collection site administrator account. ItΓÇÖs required for deploying and hosting your app on SharePoint site. If you're using a Microsoft 365 developer program tenant, you can use the administrator account you created at the time. - ## Verify sideloading permission After creating the app, you must load your app in Teams without distributing it. This process is known as sideloading. Sign in to your Microsoft 365 account to view this option. |
| platform | Whats New | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/whats-new.md | Teams platform features that are available to all app developers. **2023 August** -***August 10, 2023***: [Send a proactive message using AAD ID](bots/how-to/conversations/send-proactive-messages.md) +* ***August 16, 2023***: [Use Teams Toolkit Visual Studio v17.7 extension with many new app development features to get started with app development for Teams.](toolkit/toolkit-v4/teams-toolkit-fundamentals-vs.md) +* ***August 10, 2023***: [Send a proactive message using AAD ID](bots/how-to/conversations/send-proactive-messages.md) :::column-end::: :::row-end::: |