-|Sample name | Description | .NETCore | Node.js |

-|-|--|--|-|

-| Teams conversation bot | Messaging and conversation event handling. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/57.teams-conversation-bot)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/57.teams-conversation-bot)|

-| Bot samples | Set of bot samples | [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore) | |

-* [Set up auto answer for Microsoft Teams Rooms on Android and Teams video phone devices](/microsoftteams/set-up-auto-answer-on-teams-android)

-> [!NOTE]

-> Uninstall behavior for personal app with bot is currently available only in [public developer preview](../../../resources/dev-preview/developer-preview-intro.md).

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

- 

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-

-# TeamsFx SDK for TypeScript or JavaScript

-TeamsFx aims to reduce tasks of implementing identity and access to cloud resources to single-line statements with zero configuration.

-Use the library to:

-* Access core functionalities in client and server environment in a similar way.

-* Write user authentication code in a simplified way.

-## Get started

-TeamsFx SDK is pre-configured in scaffolded project using TeamsFx toolkit or CLI.

-For more information, see [Teams app project](https://github.com/OfficeDev/TeamsFx/blob/main/packages/vscode-extension/README.md).

-### Prerequisites

-* Node.js version `10.x.x` or later.

-* If your project has installed `botbuilder` related [packages](https://github.com/Microsoft/botbuilder-js#packages) as dependencies, ensure they are of the same version and the version is `>= 4.9.3`. ([Issue - all of the BOTBUILDER packages should be the same version](https://github.com/BotBuilderCommunity/botbuilder-community-js/issues/57#issuecomment-508538548))

-For more information, see:

-### Create and authenticate `MicrosoftGraphClient`

-To create graph client object for accessing Microsoft Graph API, you will need the credentials to authenticate. The SDK provides several credential classes to choose that meets various requirements. You need to load configuration before using any credentials.

-* In browser environment, you need to explicitly pass in the configuration parameters. The scaffolded React project has provided environment variables to use.

-```ts

-loadConfiguration({

- authentication: {

- initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,

- clientId: process.env.REACT_APP_CLIENT_ID,

- },

-});

-```

-* In NodeJS environment like Azure Function, you can just call `loadConfiguration`. It will load from environment variables by default.

-loadConfiguration();

-#### Using Teams app user credential

-loadConfiguration({

- authentication: {

- initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,

- clientId: process.env.REACT_APP_CLIENT_ID,

- },

-});

-const credential = new TeamsUserCredential();

-const graphClient = createMicrosoftGraphClient(credential, ["User.Read"]); // Initializes MS Graph SDK using our MsGraphAuthProvider

-const profile = await graphClient.api("/me").get();

-> You can use this credential class in browser application, such as Teams Tab App.

-#### Using Microsoft 365 tenant credential

-Microsoft 365 tenant credential doesn't require to interact with Teams App user. You can call Microsoft Graph as application.

-Use the following snippet:

-```ts

-loadConfiguration();

-const credential = new M365TenantCredential();

-const graphClient = createMicrosoftGraphClient(credential);

-const profile = await graphClient.api("/users/{object_id_of_another_people}").get();

-```

-## Core concepts and code structure

-### Credentials

-There are 3 credential classes located under [credential folder](https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk/src/credential) to help simplify authentication.

-Credential classes implement `TokenCredential` interface that is broadly used in Azure library APIs. They are designed to provide access tokens for specific scopes. The following credential classes represent different identity under certain scenarios:

-* `TeamsUserCredential` represent Teams current user's identity. Using this credential will request user consent at the first time.

-* `M365TenantCredential` represent Microsoft 365 tenant identity. It is usually used when user is not involved like time-triggered automation job.

-* `OnBehalfOfUserCredential` uses on-behalf-of flow. It needs an access token and you can get a new token for different scope. It's designed to be used in Azure Function or Bot scenarios.

-### Bots

-`TeamsBotSsoPrompt` can integrate with Bot framework. It simplifies the authentication process for developing bot application.

-### Helper functions

-TeamsFx SDK provides helper functions to ease the configuration for third-party libraries. They are located under [core folder](https://github.com/OfficeDev/TeamsFx/tree/main/packages/sdk/src/core).

-### Error handling

-API error response is `ErrorWithCode`, which contains error code and error message.

-For example, to filter out specific error, you can use the following snippet:

- const credential = new TeamsUserCredential();

- await credential.login("User.Read");

- return;

-And if credential instance is used in other library such as Microsoft Graph, it's possible that error is caught and transformed.

- const credential = new TeamsUserCredential();

- const graphClient = createMicrosoftGraphClient(credential, ["User.Read"]); // Initializes MS Graph SDK using our MsGraphAuthProvider

-### Use Graph API in tab app

-Use `TeamsUserCredential` and `createMicrosoftGraphClient`.

-loadConfiguration({

- authentication: {

- initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,

- clientId: process.env.REACT_APP_CLIENT_ID,

- },

-});

-const credential: any = new TeamsUserCredential();

-const graphClient = createMicrosoftGraphClient(credential, ["User.Read"]);

-### Call Azure Function in tab app

-loadConfiguration({

- authentication: {

- initiateLoginEndpoint: process.env.REACT_APP_START_LOGIN_PAGE_URL,

- clientId: process.env.REACT_APP_CLIENT_ID,

- },

-});

-const credential: any = new TeamsUserCredential();

-const token = credential.getToken(""); // Get SSO token for the user

-const apiConfig = getResourceConfiguration(ResourceType.API);

-const response = await axios.default.get(apiConfig.endpoint + "api/httptrigger1", {

-### Access SQL database in Azure Function

-loadConfiguration();

-const sqlConnectConfig = new DefaultTediousConnectionConfiguration();

-const config = await sqlConnectConfig.getConfig();

-const config2 = await sqlConnectConfig.getConfig("your database name");

-### Use certificate-based authentication in Azure Function

-loadConfiguration({

- authentication: {

- clientId: process.env.M365_CLIENT_ID,

- certificateContent: "The content of a PEM-encoded public/private key certificate",

- authorityHost: process.env.M365_AUTHORITY_HOST,

- tenantId: process.env.M365_TENANT_ID,

- },

-### Use Graph API in Bot application

-loadConfiguration();

- new TeamsBotSsoPrompt("TeamsBotSsoPrompt", {

-## Troubleshooting

-##### Redirect by setting custom logger

-##### Redirect by setting custom log function

-[Microsoft TeamsFx sample gallery](https://github.com/OfficeDev/TeamsFx-Samples)

-# Customize app manifest in Teams Toolkit

-Teams Toolkit consists of the following manifest template files under `templates/appPackage` folder:

-* `manifest.local.template.json` - local debug teams app

-* `manifest.remote.template.json` - shared in all environments

-* [Install Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) version v3.0.0+.

-During provision, Teams Toolkit loads manifest from `manifest.remote.template.json`, combined with configurations from `state.{env}.json` and `config.{env}.json`, and creates teams app in [Dev Portal](https://dev.teams.microsoft.com/apps).

-During local debug, Teams Toolkit loads manifest from `manifest.local.template.json`, combined with configurations from `localSettings.json`, and creates teams app in [Dev Portal](https://dev.teams.microsoft.com/apps).

-## Supported placeholder in manifest.remote.template.json

-* `{{state.xx}}` is pre-defined placeholder whose value is resolved by Teams Toolkit, defined in `state.{env}.json`. Ensure 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 as follows:

- * Add a placeholder in manifest.remote.template.json with pattern: `{{config.manifest.xx}}`

- * Add a config value in config.{env}.json

- Besides each config placeholder in `manifest.remote.template.json`, there is a `Go to config file`. You can navigate to configuration file by selecting it.

-## Supported placeholder in manifest.local.template.json

-`{{localSettings.xx}}` is pre-defined placeholder whose value is resolved by Teams Toolkit, defined in `localSettings.json`. Ensure not to modify the values in localSettings.json.

- > [!NOTE]

- > Ensure not to customize the local manifest.

-# Preview Teams app manifest in Teams Toolkit

-After scaffolding, the following are the manifest template files available under `templates/appPackage` folder:

-* `manifest.local.template.json` - local debug teams app.

-* `manifest.remote.template.json` - shared between all remote environments.

-The Template files consisting placeholders, and the actual values from Teams Toolkit are resolved in files under `.fx/configs` and `.fx/states`.

-* [Install Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) version v3.0.0+.

-To preview manifest file of local teams app, you need to press **F5** to run local debug. It generates default local settings for you, then the app package and preview manifest builds under **build/appPackage** folder.

-1. Select **Preview** in the codelens of **manifest.local.template.json** file.

-2. Select **Preview manifest file** at the menu bar of **manifest.local.template.json** file.

-3. Select **Zip Teams metadata package** in Treeview and select **Local**.

-To preview manifest file of remote teams app, select **Provision in the cloud** in **DEVELOPMENT** panel of Teams Toolkit extension Treeview, or trigger **Teams: Provision in the cloud** from command palette. It generates configuration for remote teams app, and builds package and preview manifest under **build/appPackage** folder.

-1. Select **Preview** in the codelens of **manifest.remote.template.json** file.

-2. Select **Preview manifest file** at the menu bar of **manifest.remote.template.json** file.

-3. Select **Zip Teams metadata package** in Treeview.

-4. Select your environment.

-## Sync local changes to Dev portal

-After previewing the manifest file, you can sync your local changes to Dev portal by following the steps:

-1. Select **Update to Teams platform** at the top left corner of `manifest.{env}.json`

-2. Select **Teams: Update manifest to Teams platform** at the menu bar of `manifest.{env}.json`

- You can also trigger **Teams: update manifest to Teams platform** from command palette

-> Trigger from editor codelens or **title** will update current manifest file to Teams platform. Trigger from command palette requires selecting target environment.

-If the manifest file is outdated due to configuration file change or template change, ensure to confirm the following action:

-* **Preview only**: local manifest file will be overwritten according to current configuration

-* **Preview and update**: local manifest file will be overwritten according to current configuration and also updated to Teams platform

-* **Cancel**: do nothing

-> The changes will be updated to dev portal. If you have some manual updates in dev portal, it will be overwritten.

-# Manage multiple environments in Teams Toolkit

- With multiple environments, you can perform the following:

-1. **Test before production**: It is a common practice to set up multiple environments such as dev, test, and staging before publishing a Teams App to production environment in modern app development lifecycle.

-2. **Manage app behaviors in different environments**: You can set different behaviors for multiple environments such as enable telemetry in production environment but disable it in development environment.

-* [Install Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) version v3.0.0+.

-After creating new project, Teams Toolkit by default creates:

-* One `local` environment to represent the local machine environment configurations.

-* One `dev` environment to represent the remote or cloud environment configurations.

-To add another remote environment, select the Teams icon in the sidebar, select create new environment the under Environment section as shown in the following image:

-> [!NOTE]

-> If you have more than one existing environments, you need to select an existing environment to create the same. The command will copy file contents of `config.<newEnv>.json` and `azure.parameters.<newEnv>.json` from the existing environment you selected to the new environment being created.

-You can select the target environment for all environment-related operations. The toolkit prompts and ask for a target environment when you have multiple remote environments as shown in the following image:

-* `.fx/configs`: configure files that user can customize for the Teams app.

- * `config.<envName>.json`: per-environment configuration file.

- * `azure.parameters.<envName>.json`: per-environment parameters file for Azure bicep provision.

- * `projectSettings.json`: global project settings , which apply to all environments.

- * `localSettings.json`: local debug configuration file.

-* `.fx/states`: provision result that is generated by the Toolkit.

- * `state.<envName>.json`: per-environment provision output file.

- * `<env>.userdata`: per-environment sensitive user data for the provision output.

- * `appPackage`: app manifest template files.

- * `azure`: Bicep template files.

-## Customize the provision

-The following table lists the common scenarios supported for customized provision and where to customize:

-| Customize Azure Resource | <ul> <li>Bicep files under `templates/azure`.</li> <li>`.fx/azure.parameters.<envName>.json`.</li></ul> | [Customize ARM parameters and templates](provision.md#customize-arm-parameters-and-templates). |

-| Reuse existing Azure AD app for Teams app | <ul> <li>`auth` section in`.fx/config.<envName>.json`.</li> </ul> | [Use an existing Azure AD app for your Teams app](provision.md#use-an-existing-azure-ad-app-for-your-teams-app). |

-| Reuse existing Azure AD app for bot | <ul> <li>`bot` section in`.fx/config.<envName>.json`.</li> </ul> | [Use an existing Azure AD app for your bot](provision.md#use-an-existing-azure-ad-app-for-your-bot). |

-| Skip adding user while provisioning SQL | <ul> <li>`skipAddingSqlUser` property in`.fx/config.<envName>.json`.</li> </ul> | [Skip adding user for SQL database](provision.md#skip-adding-user-for-sql-database). |

-| Customize app manifest | <ul> <li>`templates/manifest.remote.template.json`.</li> <li>`manifest` section in`.fx/config.<envName>.json`.</li> </ul> | [Customize Teams App Manifest in Teams Toolkit](TeamsFx-manifest-customization.md). |

-### Scenario 1: customize Teams app name for different environment

-* 1. Open config file `.fx/configs/config.dev.json`.

-* 2. Update the property of *manifest > appName > short* to `myapp(dev)`

-* 3. Create new environment and name it `staging` if it doesn't exist.

-* 4. Open config file `.fx/configs/config.staging.json`.

-* 5. Update the same property `myapp(staging)`.

-* 6. Run provision command on `dev` and `staging` environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit).

-### Scenario 2: customize Teams App description for different environment

-In this scenario, you will learn how to set different Teams app description for different environments:

-* For the default environment `dev`, the description will be `my app description for dev`;

-* For the staging environment `staging`, the description will be `my app description for staging`;

-* 1. Open config file `.fx/configs/config.dev.json`.

-* 2. Add new property of *manifest > description > short* with value `my app description for dev`.

-* 3. Create a new environment and name it `staging` if it doesn't exist.

-* 4. Open config file `.fx/configs/config.staging.json`.

-* 5. Add the same property to `my app description for staging`.

-* 6. Open Teams app manifest template for remote `templates/appPackage/manifest.remote.template.json`.

-* 7. Update the property `description > short` to use the **variable** defined in configure files with mustache syntax `{{config.manifest.description.short}}`.

- The updates to `manifest.remote.template.json` are as follows:

-* 8. Run provision command against `dev` and `staging` environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit).

-### Scenario 3: customize Teams App description for all environments

-In this scenario, you will learn how to set the description of Teams app to `my app description` for all environments.

-* 1. Open Teams app manifest template for remote `templates/appPackage/manifest.remote.template.json`.

-* 2. Update the property `description > short` with **hard-coded string** `my app description`.

- The updates to `manifest.remote.template.json` are as follows:

-* 3. Run provision command against **all** environment to update the app name in remote environments. To run provision command with Teams Toolkit, see [provision](provision.md#provision-using-teams-toolkit).

-### Scenario 4: customize Azure resources for different environment

-You can customize Azure resources for each environment, for example specify Azure Function name, by editing the environment corresponding to `.fx/configs/azure.parameters.{env}.json` file.

-For more information on Bicep template and parameter files, see [provision cloud resources](provision.md)

-* [Collaborate with other developers on Teams project](TeamsFx-collaboration.md)

-You can create a new Teams app with one of the Teams app capabilities. During app development, you can use Teams Toolkit to add more capabilities to your Teams app. The following table lists the Teams app capabilities:

-| Tabs | Tabs are simple HTML tags that point to domains declared in the app manifest. You can add tabs as a part of channel inside a team, group chat, or personal app for an individual user.|

-| Bots | Bots help to interact with your web service through text, interactive cards, and task modules.|

-| Messaging extensions | Messaging extensions help to interact with your web service through buttons and forms in the Microsoft Teams client.|

-[Install Teams Toolkit](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension) version v3.0.0+.

-## Add capabilities using Teams Toolkit

-> [!IMPORTANT]

-> You need to perform provision for each environment after you successfully add capabilities to your Teams app.

-1. Open **Microsoft Visual Studio Code**.

-1. Select **Teams Toolkit** from left panel.

-1. Select **Add capabilities**:

- :::image type="content" source="../assets/images/teams-toolkit-v2/manual/add capabilities.png" alt-text="capabilities":::

- You can also open the command palette and enter **Teams: Add Capabilities**:

-1. From the pop-up, select the capabilities to include in your project:

-1. Select **OK**.

-The selected capabilities are succesfully added to your project. The Teams Toolkit generate source code for newly added capabilities.

-1. Change directory to your **project directory**.

-## Supported capabilities matrix

-|Existing capabilities|Other supported capabilities can be added|

-## Add capabilities

-After adding bot and messaging extension, the changes in your project are as follows:

-* A bot template code is added into a subfolder with path `yourProjectFolder/bot`. This includes a **hello world** bot application template into your project.

-* `launch.json` and `task.json` under `.vscode` folder are updated, which includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally.

-* `manifest.remote.template.json` and `manifest.local.template.json` file under `templates/appPackage` folder are updated, which includes bot related information in the manifest file that represents your application in the Teams Platform. The changes are as follows:

- * The ID of your bot.

- * The scopes of your bot.

- * The commands that hello world bot application can respond to.

-* The files under `templates/azure/teamsfx` will be updated, and `templates/azure/provision/xxx`.bicep file will be regenerated.

-* The files under `.fx/config` are regenerated, which ensures your project is set with right configurations for newly added capability.

-* A frontend tab template code is added into a subfolder with path `yourProjectFolder/tab`, which includes a **hello world** tab application template into your project.

-* `launch.json` and `task.json` under `.vscode` folder are updated, which includes necessary scripts for Visual Studio Code, and is executed when you want to debug your application locally.

-* `manifest.remote.template.json` and `manifest.local.template.json` file under `templates/appPackage` folder are updated, which includes tab-related information in the manifest file that represents your application in the Teams Platform, the changes are as follows:

- * The configurable and static tabs.

- * The scopes of the tabs.

-* The files under `templates/azure/teamsfx` will be updated, and `templates/azure/provision/xxx`.bicep file will be regenerated.

-* The file under `.fx/config` are regenerated, which ensures your project is set with right configurations for newly added capability.

-## Limitations

-The limitations to TeamsFx while adding more capabilities are as follows:

-* You can add tabs up to 16 instances.

-* You can add bot and messaging extension for one instance each.

-The local debug workflow involves the `.vscode/launch.json` and `.vscode/tasks.json` files to configure the debugger in Visual Studio Code, then the Visual Studio Code launches the debuggers, and Microsoft Edge or Chrome debugger launches a new browser instance as follows:

-1. The `launch.json` file configures the debugger in Visual Studio Code.

-2. Visual Studio Code runs the compound `preLaunchTask`, `Pre Debug Check & Start All` in `.vscode/tasks.json` file.

-3. Visual Studio Code then launches the debuggers specified in the compound configurations, such as **Attach to Bot**, **Attach to Backend**, **Attach to Frontend**, and **Launch Bot**.

-4. Microsoft Edge or Chrome debugger launches a new browser instance and opens a web page to load Teams client.

-* Microsoft 365 account with valid credentials, the Teams toolkit prompts you to sign in to Microsoft 365 account, if you haven't signed in.

-* Custom app uploading or sideloading for your developer tenant is turned on. If not, the local debug terminates.

-* Ngrok binary version 2.3, applicable for bot and messaging extension. If Ngrok is not installed or the version doesn't match the requirement, the Teams toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`.

-* Azure Functions Core Tools version 3. If Azure Functions Core Tools is not installed or the version doesn't match the requirement, the Teams toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.

-* .NET Core SDK version, applicable for Azure Functions. If .NET Core SDK is not installed or the version doesn't match the requirement, the Teams Toolkit installs .NET Core SDK for Windows and MacOS in `~/.fx/bin/dotnet`. For Linux, the local debug terminates.

-* Development certificate, if the development certificate for localhost is not installed for tab in Windows or macOS, the Teams toolkit prompts you to install it.

-* Azure Functions binding extensions defined in `api/extensions.csproj`. If Azure Functions binding extensions is not installed, the Teams Toolkit installs Azure Functions binding extensions.

-* NPM packages, applicable for tab app, bot app, messaging extension app, and Azure Functions. If NPM is not installed, the Teams Toolkit installs all NPM packages.

-* Bot and messaging extension. The Teams Toolkit starts Ngrok to create a HTTP tunnel for bot and messaging extension.

-* Ports available, if tab, bot, messaging extension, and Azure Functions ports are unavailable, the local debug terminates.

-|Tab without Azure functions | Node.js LTS versions 10, 12, **14 (recommended)**, 16 | The local debug terminates, if Node.js is not installed or the version doesn't match the requirement.|

-|Tab with Azure functions | Node.js LTS versions 10, 12, **14 (recommended)** |The local debug terminates, if Node.js is not installed or the version doesn't match the requirement.|

-|Bot | Node.js LTS versions 10, 12, **14 (recommended)**, 16|The local debug terminates, if Node.js is not installed or the version doesn't match the requirement.|

-|Messaging extension | Node.js LTS versions 10, 12, **14 (recommended)**, 16 |The local debug terminates, if Node.js is not installed or the version doesn't match the requirement.|

-|Bot, messaging extension | Ngrok version 2.3| ΓÇó If Ngrok is not installed or the version doesn't match the requirement, the Teams toolkit installs Ngrok NPM package `ngrok@4.2.2` in `~/.fx/bin/ngrok`. </br> ΓÇó The Ngrok binary is managed by Ngrok NPM package in `/.fx/bin/ngrok/node modules/ngrok/bin`.|

-|Azure functions | Azure Functions Core Tools version 3| ΓÇó If Azure Functions Core Tools is not installed or the version doesn't match the requirement, the Teams toolkit installs Azure Functions Core Tools NPM package, azure-functions-core-tools@3 for **Windows** and for **macOs** in `~/.fx/bin/func`. </br> ΓÇó The Azure Functions Core Tools NPM package in `~/.fx/bin/func/node_modules/azure-functions-core-tools/bin` manages Azure Functions Core Tools binary. For Linux, the local debug terminates.|

-|Azure functions |.NET Core SDK version|ΓÇó If .NET Core SDK is not installed or the version doesn't match the requirement, the toolkit installs .NET Core SDK for Windows and macOS in `~/.fx/bin/dotnet`.</br> ΓÇó For Linux, the local debug terminates.|

-|Azure functions | Azure functions binding extensions defined in `api/extensions.csproj`| If Azure functions binding extensions is not installed, the toolkit installs Azure functions binding extensions.|

-|NPM packages| NPM packages for tab app, bot app, messaging extension app, and Azure functions|If NPM is not installed, the toolkit installs all NPM packages.|

-> If the development certificate for localhost is not installed for tab in Windows or macOS, the Teams toolkit prompts you to install it.</br> -->

-1. [Registers and configures Azure AD application](#registers-and-configures-azure-ad-application): Teams Toolkit registers and configures your Azure AD application.

-1. [Registers and configures bot](#registers-and-configures-bot): Teams Toolkit registers and configures your bot for tab or messaging extension app.

-1. [Registers and configures Teams app](#registers-and-configures-teams-app): Teams Toolkit registers and configures your Teams app.

-1. Registers an Azure AD application.

-1. Creates a Client Secret.

-1. Exposes an API.

- a. Configures Application ID URI. For tab, `api://localhost/{appId}`. For bot or messaging extension, `api://botid-{botid}`.

- b. Adds a scope named `access_as_user`. Enables it for **Admin and users**.

-The following table lists the configurations of Microsoft 365 client application with the client Ids:

- | Microsoft 365 client application | Client ID |

- | | |

- | Teams desktop, mobile | 1fec8e78-bce4-4aaf-ab1b-5451cc387264 |

- | Teams web | 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 |

- | Office.com | 4345a7b9-9a63-4910-a426-35363201d503 |

- | Office.com | 4765445b-32c6-49b0-83e6-1d93765276ca |

- | Office desktop | 0ec893e0-5785-4de6-99da-4ed124e5296c |

- | Outlook desktop | d3590ed6-52b3-4102-aeff-aad2292ab01c |

- | Outlook Web Access | 00000002-0000-0ff1-ce00-000000000000 |

- | Outlook Web Access | bc59ab01-8403-45c6-8796-ac3ef710b3e3 |

-4. Configures API permissions. Adds Microsoft Graph permission to **User.Read**.

-The following table lists the configuration of the authentication as follows:

- | Project type | Redirect URIs for web | Redirect URIs for single-page application |

- | | | |

- | Tab | `https://localhost:53000/auth-end.html` | `https://localhost:53000/auth-end.html?clientId={appId>}` |

- | Bot or messaging extension | `https://ngrok.io/auth-end.html` | NA |

-1. Registers an Azure AD application.

-1. Creates a Client Secret for the Azure AD application.

-1. Registers a bot in [Microsoft Bot Framework](https://dev.botframework.com/) using the Azure AD application.

-1. Adds Microsoft Teams channel.

-1. Configures messaging endpoint as `https://{ngrokTunnelId}.ngrok.io/api/messages`.

-Registers a Teams app in [Developer](https://dev.teams.microsoft.com/home) using the manifest template in `templates/appPackage/manifest.local.template.json`.

-After registering and configuring the app, local debug files get generated.

-You can view the project folders and files in the Explorer area of Visual Studio Code after the Teams Toolkit registers and configures your app. The following table lists the local debug files and the configuration types:

-| `.fx/configs/localSettings.json` | Local debug configuration file | The values of each configuration generates and saves during local debug. |

-| `templates/appPackage/manifest.local.template.json` | Teams app manifest template file for local debug | The placeholders in the file resolves during local debug. |

-| `tabs/.env.teams.local` | Environment variables file for tab | The values of each environment variable generates and saves during local debug. |

-| `bot/.env.teamsfx.local` | Environment variables file for bot and messaging extension| The values of each environment variable generates and saves during local debug. |

-| `api/.env.teamsfx.local` | Environment variables file for Azure Functions | The values of each environment variable generates and saves during local debug. |

-1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar.

-1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode.

-3. Select **Sign in** to Microsoft 365 account.

-4. Select **Install** for installing the development certificate for localhost.

-5. Select **Yes** if the following dialog appears:

-1. Select **Debug Edge** or **Debug Chrome** from the **Run and Debug** in the activity bar.

-1. Select **Start Debugging (F5)** or **Run** to run your Teams app in debug mode.

-3. Select **Sign in** to Microsoft 365 account.

-4. Select **Install** to install the development certificate for localhost.

-#### 2. Debug your app

- a. [Starts app services](#starts-app-services) </br>

- b. [Launches debuggers](#launches-debuggers) </br>

- c. [Sideloads the Teams app](#sideloads-the-teams-app)

-| Azure Functions | **Start Backend** | api |

-1. In Visual Studio Code settings, clear **Ensure Ngrok is installed and started (ngrok)**.

-1. Set botDomain and botEndpoint configuration in `.fx/configs/localSettings.json` to your domain and endpoint.

-1. In Visual Studio Code settings, clear **Ensure development certificate is trusted (devCert)**.

-1. Set sslCertFile and sslKeyFile configuration in `.fx/configs/localSettings.json` to your certificate file path and key file path.

-1. For tab, update `dev:teamsfx` script in `tabs/package.json`.

-1. For bot or messaging extension, update `dev:teamsfx` script in `bot/package.json`.

-1. For Azure Functions, update `dev:teamsfx` script in `api/package.json` and for TypeScript update `watch:teamsfx` script.

-|12/24/2021| Introduced step-by-step guide to grant Tab device permissions | App fundamentals > Device capabilities > [step-by-step guide to grant Tab device permissions](sbs-tab-device-permissions.yml) |

-|06/21/2021|Uninstall behavior for personal app with bot | Build bots > Bot conversations > [Uninstall behavior updates in personal apps with bots](bots/how-to/conversations/subscribe-to-conversation-events.md#uninstall-behavior-for-personal-app-with-bot)|