-description: In this module, learn how to configure identity providers with a focus on Microsoft Azure Active Directory (Azure AD)

-# Configure identity providers

-## Configuring an application to use Azure AD as an identity provider

-Identity providers supporting OAuth 2.0 won't authenticate requests from unknown applications; applications must be registered ahead of time. To do this with Azure AD, follow these steps:

-1. Open the [Application Registration Portal](https://ms.portal.azure.com/#blade/Microsoft_AAD_RegisteredApps/ApplicationsListBlade).

-2. Select your app to view its properties, or select the "New Registration" button. Find the **Redirect URI** section for the app.

-3. Select **Web** from the dropdown menu. Update the URL to your authentication endpoint. For the TypeScript/Node.js and C# sample apps on GitHub, the redirect URLs will be similar to the following:

- Redirect URLs: `https://<hostname>/bot-auth/simple-start`

-Replace `<hostname>` with your actual host, which might be a dedicated hosting site such as Azure, Glitch, or a ngrok tunnel to localhost on your development machine such as `abcd1234.ngrok.io`. You may not have this information if you haven't completed or hosted your app (or the sample app that's mentioned above), but you can always return to this page when that information is known.

-## Other authentication providers

-* **LinkedIn:** Follow the instructions in [Configuring your LinkedIn application](/linkedin/talent/apply-with-linkedin)

-* **Google:** Obtain OAuth 2.0 client credentials from the [Google API Console](https://console.developers.google.com/)

-* **External OAuth providers from tabs:** For more information, see [Use external OAuth providers](../../tabs/how-to/authentication/auth-oauth-provider.md)

-## See also

-* [Authenticate a user in a Microsoft Teams bot](../../resources/bot-v3/bot-authentication/auth-bot-AAD.md)

-* [Single sign-on (SSO) support for tabs](../../tabs/how-to/authentication/tab-sso-overview.md)

-* [Authenticate a user in a Microsoft Teams tab](../../tabs/how-to/authentication/auth-tab-aad.md)

-* [Get context for your tab for shared channels](../../tabs/how-to/access-teams-context.md#retrieve-context-in-microsoft-teams-connect-shared-channels)

-description: Learn how to deploy Microsoft Teams apps with C# or .NET. in App Studio

-keywords: getting started .net c# csharp app studio

-# Update C# app package in App Studio

-> [!TIP]

-> **Try the Developer Portal**: App Studio has evolved. Configure, distribute, and manage your Teams apps with the new [Developer Portal](https://dev.teams.microsoft.com/).

-App Studio is a Teams app that you can install from the Teams store. It simplifies the creation and registration of an app.

-Complete the following steps to update the app package:

-1. To install App Studio in Teams, select the **Apps** icon at the bottom of the left-hand bar, and search for **App Studio**:

- <img width="450px" alt="Finding App Studio in the Store View" src="~/assets/images/get-started/searchforAppStudio.png"/>

-1. Select the **App Studio** tile and choose **Install**. The App Studio is installed:

- <img width="450px" alt="Installing App Studio" src="~/assets/images/get-started/InstallingAppStudio.png"/>

-1. To create the app package for your Teams app, select the **Manifest editor** tab in **App Studio**:

- <img width="450px" alt="App Studio" src="~/assets/images/get-started/AppStudio.png"/>

- The sample comes with its own manifest and is designed to build an app package when the project is built. The manifest.json file can be located in Visual Studio in Manifest under ```Microsoft.Teams.Samples.HelloWorld.Web```.

- In Visual Studio, the manifest.json file is located in under **Manifest** in `Microsoft.Teams.Samples.HelloWorld.Web`. This step is described by the following image:

- <img width="450px" alt="Build the app package on .NET with Visual Studio" src="~/assets/images/get-started/app-package-on-.NET-with-Visual-Studio.png"/>

-1. Now to modify this app package, select **Import an existing app** in the **Manifest editor**:

- <img width="450px" alt="Importing an existing app" src="~/assets/images/get-started/Importinganapp.png"/>

-1. Select the **Hello World** tile for your newly imported app:

- <img width="450px" alt="Newly imported app view" src="~/assets/images/get-started/HelloWorldappdetails.png"/>

- The following image shows the imported app package in App Studio:

- <img width="450px" alt="Importing the app package" src="~/assets/images/get-started/Importinganapp2.png"/>

- On the left-hand side of the Manifest editor there is a list of steps. On the right-hand side there is a list of properties that need to be filled in for each step. As you started with a sample app, much of the information is already completed. The next steps enable you to update the properties of the Hello World app.

-## App details

-Select **App details** under **Details**. Select the **Generate** button to create a new App ID.

-Your new App ID is similar to `2322041b-72bf-459d-b107-f4f335bc35bd`.

-Go through the app details in the right-hand pane including **Developer information** and **Branding** details. These details are important if you are writing a new app for distribution.

-## Tabs

-It is simple to add tabs to a Teams app. The sample app already supports several tabs, and you can enable them.

-### Team tab

-Your app can only have one Team tab:

-<img width="450px" alt="Adding a Teams tab" src="~/assets/images/get-started/TeamTab.png"/>

-In this sample, the Team tab is where your configuration page is displayed. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. Change the URL to `https://yourteamsapp.ngrok.io/configure` where `yourteamsapp.ngrok.io` must be replaced with the URL that you used when hosting your app.

-### Personal tabs

-Your app can have up to 16 tabs, including the Team tab.

-Personal tabs are different from the Team tab. **Hello Tab** is already listed in the personal tabs list with a placeholder value `com.contoso.helloworld.hellotab`. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. The following dialog box appears:

-<img width="450px" alt="Adding a personal tab dialog" src="~/assets/images/get-started/PersonalTab.png"/>

-Update the following boxes with your app URL:

-Replace `yourteamsapp.ngrok.io` by the URL that you used when hosting your app.

-#### Bots

-It is easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft:

-<img width="450px" alt="Adding a bot" src="~/assets/images/get-started/Bots.png"/>

-The bot that was imported from the sample does not have an associated App ID. You must create a new bot so that App Studio can create a new App ID and register it with Microsoft.

-> [!NOTE]

-> The App ID created by App Studio for the bot is different from the App ID created for the app. Each bot in an app requires its own App ID.

-Complete the following steps to setup your bot:

-1. Select **Delete** next to the imported bot in the bot list. Now there are no bots left to show.

-1. Select **Setup** to display the **Set up a bot** dialog box.

- <img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/>

-1. Add a bot name **Contoso bot** and select all three check boxes under **Scope**.

-1. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list.

-1. Now open a text file in notepad and copy and paste your new bot ID into it.

-1. Click **Generate New Password**, and note the password in the same text file you noted your bot App ID.

-1. Update the **Bot endpoint address** to `https://yourteamsapp.ngrok.io/api/messages`, and replace `yourteamsapp.ngrok.io` with the URL that you used when hosting your app.

-1. Now save your text file as you must add the information from the file to your hosted app to allow secure communication with your bot.

-#### Messaging extensions

-Messaging extensions let users ask for information from your service and post that information. The information is posted in the form of cards into the channel conversation. Messaging extensions appear at the bottom of the compose box.

-Complete the following steps to setup your messaging extension:

-1. Select **Messaging extensions** under **Capabilities** in the left-hand pane of App Studio to configure the messaging extension:

- <img width="450px" alt="Adding a messaging extension" src="~/assets/images/get-started/Messagingextensions.png"/>

- The sample messaging extension is listed in the **Messaging Extensions** pane.

-1. Select **Delete** to remove the messaging extension, select **Set up**, and follow the same steps used for [bots](#bots). The **Messaging Extension** dialog box is displayed.

-1. Select the **Use existing bot** tab and **Select from one of my existing bots**.

-1. Select the bot you created from the drop-down menu. Add a **Bot name** and select **Save** to close the dialog box.

-1. Under the **Command** section, select **Add**. To add a search-based command, select the **Allow users to query your service for information and insert that into a message** option.

-1. In the **New command** dialog box, enter the following values:

- Under **New command**:

- - **Command ID**: Enter random text

- - **Title**: Enter random title

- - **Description**: Enter random description

- Under **Parameter**:

- - **Name**: Enter the parameter name

- - **Title**: Enter the card title

- - **Description**: Enter card description

-1. After you enter the information, select **Save** to close the dialog box.

-#### Register your app in Teams

-After entering the details of your app, complete the following steps to register your app in Teams:

-1. Use **Test and distribute** of App Studio to install your app in Teams.

-1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension.

-1. Select **Test and distribute** under **Finish** in the left-hand pane of App Studio:

- <img width="450px" alt="Testing your app" src="~/assets/images/get-started/Testanddistribute.png"/>

-1. To upload your app to Teams, select the **Install** button under **Test and Distribute**:

- <img width="450px" alt="Adding a messaging extension dialog" src="~/assets/images/get-started/InstallingHelloWorld.png"/>

- > [!NOTE]

- > If you are unable to sideload the app, verify whether you have [enabled custom app uploading](../get-started/get-started-dotnet-app-studio.md#enable-sideloading-option).

-1. Select the **Search** box in the **Add to a team** section and select a team to add the sample app. You can set up a special team for testing.

-1. Select the **Install** button at the bottom of the dialog box.

- Your app is now available in Teams. However, the bot and the messaging extension will not work until you update the hosted applications environment with the App IDs and passwords.

- <img width="450px" alt="The finished app" src="~/assets/images/get-started/Finishedhelloworld.png"/>

-## Register your app in Teams

-After entering the details of your app, complete the following steps to register your app in Teams:

-1. Use **Preview** of Developer Portal to install your app in Teams.

- :::image type="content" source="../assets/images/teams-toolkit-v2/preview-in-teams.png" alt-text="Image showing Preview button":::

-1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension.

-1. Select **Publish to store** under **Publish** in the left-hand pane of Developer Portal:

- :::image type="content" source="../assets/images/teams-toolkit-v2/devp-publish-left-pane.png" alt-text="Image showing Publish option in left pane":::

- > [!NOTE]

- > If you are unable to sideload the app, verify whether you have [enabled custom app uploading](../get-started/get-started-dotnet-app-studio.md#enable-sideloading-option).

-1. Select **Add** to install the app on Teams.

- Your app is now available in Teams. However, the bot and the messaging extension will not work until you update the hosted applications environment with the App IDs and passwords.

-## Update the credentials for your hosted app

-The sample app requires the environment variables to be set to the values that you saved in the text file.

-1. Open the Solution Explorer.

- :::image type="content" source="../assets/images/get-started/csharp-repo-cloned.png" alt-text="Sample repo for c# Teams app":::

-1. Open the `appsettings.json` file.

- :::image type="content" source="../assets/images/teams-toolkit-v2/csharp-appsetting-json.png" alt-text="Image showing appsettings.json file":::

-1. Update the **MicrosoftAppId** value with your bot ID that you saved in the text file.

-1. Update the **MicrosoftAppPassword** with the bot password that you saved.

- :::image type="content" source="../assets/images/get-started/get-started-net-azure-add-keys.png" alt-text="Image showing adding Azure keys":::

- After making these changes, rebuild the app. If you're using ngrok, you can run the app locally, and if you've hosted it in Azure, redeploy the app.

-## Test the app capabilities in Teams

-### Test your tab

-After you've installed the app into Teams, configure it to display the tab that you want the app to load.

-To configure the app tab:

-1. Go to a channel in the team where you installed the sample app, and select the **'+'** button to add a new tab.

-1. Select **Hello World** from the **Add a tab** list. A configuration dialog box is displayed that enables you to select the tab to display in this channel.

-1. Select **Save**. The `Hello World` tab is loaded with the tab.

- <img width="530px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png" />

-### Test your bot in Teams

-You can now test the bot in Teams.

-To test your bot:

- <img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png" />

-### Test your messaging extension

-To test your messaging extension:

-1. Select **...** below the input box in your conversation view. A menu with the **'Hello World'** app is displayed.

-1. Select the menu, a set of random texts is displayed. You can select one of the random texts and that is inserted into your conversation.

- <img width="530px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu1.png" />

- <img width="530px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result1.png" />

-1. Select one of the random texts. A card formatted and ready to send with your own message is shown.

- <img width="530px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />

-| &nbsp; | &nbsp; |

-|: | :|

-|[Back](get-started-overview.md) | &nbsp; |

-|

-description: Learn how to deploy Microsoft Teams apps with Node.js in App Studio

-keywords: getting started node.js app studio

-# Update Node.js app package in App Studio

-> [!TIP]

-> **Try the Developer Portal**: App Studio has evolved. Configure, distribute, and manage your Teams apps with the new [Developer Portal](https://dev.teams.microsoft.com/).

-App Studio is a Teams app that you can install from the Teams store. It simplifies the creation and registration of an app.

-Complete the following steps to update the app package:

-1. To install App Studio in Teams, select the **Apps** icon at the bottom of the left-hand bar, and search for **App Studio**:

- <img width="450px" alt="Finding App Studio in the Store View" src="~/assets/images/get-started/searchforAppStudio.png"/>

-1. Select the **App Studio** tile and choose **Install**. The App Studio is installed:

- <img width="450px" alt="Installing App Studio" src="~/assets/images/get-started/InstallingAppStudio.png"/>

-1. To create the app package for your Teams app, select the **Manifest editor** tab in **App Studio**:

- <img width="450px" alt="App Studio" src="~/assets/images/get-started/AppStudio.png"/>

- The sample comes with its own manifest and is designed to build an app package when the project is built. On Node.js, this is done by typing `gulp` at the command line in the root directory of the project.

- You can build the app package on Node.js by typing `gulp` at the command line in the root directory of the project.

- ```bash

- $ gulp

- [13:39:27] Using gulpfile ~\documents\github\msteams-samples-hello-world-nodejs\gulpfile.js

- [13:39:27] Starting 'clean'...

- [13:39:27] Starting 'generate-manifest'...

- [13:39:27] Finished 'generate-manifest' after 11 ms

- [13:39:27] Finished 'clean' after 21 ms

- [13:39:27] Starting 'default'...

- Build completed. Output in manifest folder

- [13:39:27] Finished 'default' after 62 ╬╝s

- ```

- The name of the generated app package is `helloworldapp.zip`. You can search for this file if the location is not clear in the tool you are using.

-1. Now to modify this app package, select **Import an existing app** in the **Manifest editor**:

- <img width="450px" alt="Importing an existing app" src="~/assets/images/get-started/Importinganapp.png"/>

-1. Select the **Hello World** tile for your newly imported app:

- <img width="450px" alt="Newly imported app view" src="~/assets/images/get-started/HelloWorldappdetails.png"/>

- The following image shows the imported app package in App Studio:

- <img width="450px" alt="Importing the app package" src="~/assets/images/get-started/Importinganapp2.png"/>

- On the left-hand side of the Manifest editor there is a list of steps. On the right-hand side there is a list of properties that need to be filled in for each step. As you started with a sample app, much of the information is already completed. The next steps enable you to update the properties of the Hello World app.

-## App details

-Select **App details** under **Details**. Select the **Generate** button to create a new App ID.

-Your new App ID is similar to `2322041b-72bf-459d-b107-f4f335bc35bd`.

-Go through the app details in the right-hand pane including **Developer information** and **Branding** details. These details are important if you are writing a new app for distribution.

-## Tabs

-It is simple to add tabs to a Teams app. The sample app already supports several tabs, and you can enable them.

-### Team tab

-Your app can only have one Team tab:

-<img width="450px" alt="Adding a Teams tab" src="~/assets/images/get-started/TeamTab.png"/>

-In this sample, the Team tab is where your configuration page is displayed. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. Change the URL to `https://yourteamsapp.ngrok.io/configure` where `yourteamsapp.ngrok.io` must be replaced with the URL that you used when hosting your app.

-### Personal tabs

-Your app can have up to 16 tabs, including the Team tab.

-Personal tabs are different from the Team tab. **Hello Tab** is already listed in the personal tabs list with a placeholder value `com.contoso.helloworld.hellotab`. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. The following dialog box appears:

-<img width="450px" alt="Adding a personal tab dialog" src="~/assets/images/get-started/PersonalTab.png"/>

-Update the following boxes with your app URL:

-* Change the **Content URL** box to `https://yourteamsapp.ngrok.io/hello`

-* Change the **Website URL** box to `https://yourteamsapp.ngrok.io/hello`

-Replace `yourteamsapp.ngrok.io` by the URL that you used when hosting your app.

-#### Bots

-It is easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft:

-<img width="450px" alt="Adding a bot" src="~/assets/images/get-started/Bots.png"/>

-The bot that was imported from the sample does not have an associated App ID. You must create a new bot so that App Studio can create a new App ID and register it with Microsoft.

-> [!NOTE]

-> The App ID created by App Studio for the bot is different from the App ID created for the app. Each bot in an app requires its own App ID.

-Complete the following steps to setup your bot:

-1. Select **Delete** next to the imported bot in the bot list. Now there are no bots left to show.

-1. Select **Setup** to display the **Set up a bot** dialog box.

- <img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/>

-1. Add a bot name **Contoso bot** and select all three check boxes under **Scope**.

-1. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list.

-1. Now open a text file in notepad and copy and paste your new bot ID into it.

-1. Click **Generate New Password**, and note the password in the same text file you noted your bot App ID.

-1. Update the **Bot endpoint address** to `https://yourteamsapp.ngrok.io/api/messages`, and replace `yourteamsapp.ngrok.io` with the URL that you used when hosting your app.

-1. Now save your text file as you must add the information from the file to your hosted app to allow secure communication with your bot.

-#### Messaging extensions

-Messaging extensions let users ask for information from your service and post that information. The information is posted in the form of cards into the channel conversation. Messaging extensions appear at the bottom of the compose box.

-Complete the following steps to setup your messaging extension:

-1. Select **Messaging extensions** under **Capabilities** in the left-hand pane of App Studio to configure the messaging extension:

- <img width="450px" alt="Adding a messaging extension" src="~/assets/images/get-started/Messagingextensions.png"/>

- The sample messaging extension is listed in the **Messaging Extensions** pane.

-1. Select **Delete** to remove the messaging extension, select **Set up**, and follow the same steps used for [bots](#bots). The **Messaging Extension** dialog box is displayed.

-1. Select the **Use existing bot** tab and **Select from one of my existing bots**.

-1. Select the bot you created from the drop-down menu. Add a **Bot name** and select **Save** to close the dialog box.

-1. Under the **Command** section, select **Add**. To add a search-based command, select the **Allow users to query your service for information and insert that into a message** option.

-1. In the **New command** dialog box, enter the following values:

- Under **New command**:

- * **Command ID**: Enter random text

- * **Title**: Enter random title

- * **Description**: Enter random description

- Under **Parameter**:

- * **Name**: Enter the parameter name

- * **Title**: Enter the card title

- * **Description**: Enter card description

-1. After you enter the information, select **Save** to close the dialog box.

-#### Register your app in Teams

-After entering the details of your app, complete the following steps to register your app in Teams:

-1. Use **Test and distribute** of App Studio to install your app in Teams.

-1. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension.

-1. Select **Test and distribute** under **Finish** in the left-hand pane of App Studio:

- <img width="450px" alt="Testing your app" src="~/assets/images/get-started/Testanddistribute.png"/>

-1. To upload your app to Teams, select the **Install** button under **Test and Distribute**:

- <img width="450px" alt="Adding a messaging extension dialog" src="~/assets/images/get-started/InstallingHelloWorld.png"/>

- > [!NOTE]

- > If you are unable to sideload the app, verify whether you have [enabled custom app uploading](../get-started/get-started-dotnet-app-studio.md#enable-sideloading-option).

-1. Select the **Search** box in the **Add to a team** section and select a team to add the sample app. You can set up a special team for testing.

-1. Select the **Install** button at the bottom of the dialog box.

- Your app is now available in Teams. However, the bot and the messaging extension will not work until you update the hosted applications environment with the App IDs and passwords.

- <img width="450px" alt="The finished app" src="~/assets/images/get-started/Finishedhelloworld.png"/>

-## Update the credentials for your hosted app

-The sample app requires the following environment variables to be set to the values you made a note of earlier:

-```

-MICROSOFT_APP_ID=<YOUR BOT'S APP ID>

-MICROSOFT_APP_PASSWORD=<YOUR BOT'S PASSWORD>

-WEBSITE_NODE_DEFAULT_VERSION=8.9.4

-```

-The environment variables are a part of your environment. Only your app's code can access them. They aren't exposed to any third parties.

-If you're running the app using ngrok, you'll need to set up local environment variables. You can use Visual Studio Code to add a [launch configuration](https://code.visualstudio.com/Docs/editor/debugging#_launch-configurations):

-```json

-{

- "type": "node",

- "request": "launch",

- "name": "Launch - Teams Debug",

- "program": "${workspaceRoot}/src/app.js",

- "cwd": "${workspaceFolder}/src",

- "env": {

- "BASE_URI": "https://yourNgrokURL.ngrok.io",

- "MICROSOFT_APP_ID": "00000000-0000-0000-0000-000000000000",

- "MICROSOFT_APP_PASSWORD": "yourBotAppPassword",

- "NODE_DEBUG": "botbuilder",

- "SUPPRESS_NO_CONFIG_WARNING": "y",

- "NODE_CONFIG_DIR": "../config"

- }

-}

-```

-Where:

-* The authorization credentials for your bot are as follows:

- * MICROSOFT_APP_ID is ID.

- * MICROSOFT_APP_PASSWORD is password.

-* NODE_DEBUG show you what's happening in your bot in the Visual Studio Code debug console

-* NODE_CONFIG_DIR points to the directory at the root of the repository (by default, when the app is run locally, it looks for the root directory in the `src` folder).

-> [!Note]

-> If you have not stopped npm from earlier in the tutorial, you'll need to run `npm stop` in order for Visual Studio Code to pickup your launch configuration variables correctly.

-<a name="ConfigureTheAppTab"></a>

-## Test the app capabilities in Teams

-After you install the app into Teams, you need to configure it to show content.

-### Test your tab in Teams

-1. Go to a channel in Teams, and select the **'+'** button to add a new tab.

-1. You can then choose `Hello World` from the **Add a tab** list.

-1. In the configuration dialog, select the tab you want to display in the channel. Then, select **Save**.

-You can see the `Hello World` tab loaded with the tab you chose:

-<img width="430px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png"/>

-### Test your bot in Teams

-You can now interact with the bot in Teams. Choose a channel in the team where you registered your app, and type `@your-bot-name`, followed by your message. This type of message is called an **\@mention**. Whatever message you send to the bot will be sent back to you as a reply:

-<img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png"/>

-<a name="ComposeRichMessages"></a>

-### Test your messaging extension

-To test your messaging extension:

-1. Select the three dots below the input box in your conversation view. A menu with the **'Hello World'** app is displayed.

-1. Select the menu. A set of random texts is displayed. You can select one of the random texts and that is inserted into your conversation.

- <img width="430px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu1.png" />

- <img width="430px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result1.png" />

-1. Select one of the random texts. The formatted card appears ready to send with your own message included at the bottom:

- <img width="430px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />

-| &nbsp; | &nbsp; |

-|: | :|

-|[Back](get-started-overview.md) | &nbsp; |

-|

-| [Identity provider](../concepts/authentication/configure-identity-provider.md) | An entity that stores and provides credentials to the user. Users can register themselves with an identity provider as well. <br>**See also**: [Authentication](#a) |

-description: Describes Azure AD authentication in Teams and how to use it in your bots

-keywords: teams authentication bots Azure AD

-localization_priority: Normal

-# Authenticate a user in a Microsoft Teams bot

-There are many services that you may want to consume inside your Teams app, and most of those services require authentication and authorization to get access. The services include Facebook, Twitter, and Teams. Users in Teams have user profile information stored in Azure Active Directory using Microsoft Graph. This topic focuses on authentication using Azure AD to get access.

-OAuth 2.0 is an open standard for authentication used by Azure AD and many other service providers. Understanding OAuth 2.0 is a prerequisite for working with authentication in Teams and Azure AD. The following examples use the OAuth 2.0 Implicit Grant flow to eventually read the user's profile information from Azure AD and Microsoft Graph.

-The authentication flow described in this topic is similar to the tabs, except that tabs can use web-based authentication flow, and bots require authentication to be driven from code. The concepts in this topic will also be useful when implementing authentication from the mobile platform.

-For a general overview of authentication flow for bots, see the topic [Authentication flow in bots](~/resources/bot-v3/bot-authentication/auth-flow-bot.md).

-## Configuring identity providers

-See the topic [Configure identity providers](~/concepts/authentication/configure-identity-provider.md) for detailed steps on configuring OAuth 2.0 callback redirect URL(s) when using Azure Active Directory as an identity provider.

-## Initiate authentication flow

-Authentication flow should be triggered by a user action. Don't open the authentication pop-up automatically, as it might trigger the browser's pop-up blocker and confuse the user.

-## Add UI to start authentication

-Add UI to the bot to enable the user to sign in when needed. Here it's done from a Thumbnail card, in TypeScript:

-```typescript

-// Show prompt of options

-protected async promptForAction(session: builder.Session): Promise<void> {

- let msg = new builder.Message(session)

- .addAttachment(new builder.ThumbnailCard(session)

- .title(this.providerDisplayName)

- .buttons([

- builder.CardAction.messageBack(session, "{}", "Sign in")

- .text("SignIn")

- .displayText("Sign in"),

- builder.CardAction.messageBack(session, "{}", "Show profile")

- .text("ShowProfile")

- .displayText("Show profile"),

- builder.CardAction.messageBack(session, "{}", "Sign out")

- .text("SignOut")

- .displayText("Sign out"),

- ]));

- session.send(msg);

-}

-```

-Three buttons have been added to the Hero Card: Sign in, Show Profile, and Sign out.

-## Sign the user in

-Because of the validation that must be performed for security reasons and the support for the mobile versions of Teams, the code isn't shown here, but [here's an example of the code that kicks off the process when the user presses the Sign in button.](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/e84020562d7c8b83f4a357a4a4d91298c5d2989d/src/dialogs/BaseIdentityDialog.ts#L154-L195).

-The validation and mobile support are explained in the topic [Authentication flow in bots](~/resources/bot-v3/bot-authentication/auth-flow-bot.md).

-Be sure to add the domain of your authentication redirect URL to the [`validDomains`](~/resources/schem#validdomains) section of the manifest. If you don't sign in, the pop-up won't appear.

-## Showing user profile information

-Although getting an access token is difficult because of all the transitions back and forth across different websites and the security issues that must be addressed, once you have a token, obtaining information from Azure Active Directory is straightforward. The bot makes a call to the `me` Graph endpoint with the access token. Graph responds with the user information for the person who logged in. Information from the response is used to construct a bot card and sent.

-```typescript

-// Show user profile

-protected async showUserProfile(session: builder.Session): Promise<void> {

- let azureADApi = this.authProvider as AzureADv1Provider;

- let userToken = this.getUserToken(session);

- if (userToken) {

- let profile = await azureADApi.getProfileAsync(userToken.accessToken);

- let profileCard = new builder.ThumbnailCard()

- .title(profile.displayName)

- .subtitle(profile.mail)

- .text(`${profile.jobTitle}<br/> ${profile.officeLocation}`);

- session.send(new builder.Message().addAttachment(profileCard));

- } else {

- session.send("Please sign in to AzureAD so I can access your profile.");

- }

- await this.promptForAction(session);

-}

-// Helper function to make the Graph API call

-public async getProfileAsync(accessToken: string): Promise<any> {

- let options = {

- url: "https://graph.microsoft.com/v1.0/me",

- json: true,

- headers: {

- "Authorization": `Bearer ${accessToken}`,

- },

- };

- return await request.get(options);

-}

-```

-If the user isn't signed in, they're prompted to do so.

-## Sign the user out

-```typescript

-// Handle user logout request

-private async handleLogout(session: builder.Session): Promise<void> {

- if (!utils.getUserToken(session, this.providerName)) {

- session.send(`You're already signed out of ${this.providerDisplayName}.`);

- } else {

- utils.setUserToken(session, this.providerName, null);

- session.send(`You're now signed out of ${this.providerDisplayName}.`);

- }

- await this.promptForAction(session);

-}

-```

-## Other samples

-For sample code showing the bot authentication process, see:

-* [Microsoft Teams bot authentication sample](https://github.com/OfficeDev/microsoft-teams-sample-auth-node)

-description: Describes authentication flow in bots

-keywords: teams authentication flow bots

-localization_priority: Normal

-# Microsoft Teams authentication flow for bots

-OAuth 2.0 is an open standard for authentication and authorization used by Azure AD and many other identity providers. A basic understanding of OAuth 2.0 is a prerequisite for working with authentication in Teams; [here's a good overview](https://aaronparecki.com/oauth-2-simplified/) that's easier to follow than the [formal specification](https://oauth.net/2/). Authentication flow for tabs and bots are different. Tabs are similar to websites so they can use OAuth 2.0 directly, and bots aren't and must do a few things differently, but the core concepts are identical.

-See the GitHub repo [Microsoft Teams Authentication Sample](https://github.com/OfficeDev/microsoft-teams-sample-auth-node)

-for an example that demonstrates authentication flow for bots using Node using the [OAuth 2.0 authorization code grant type](https://oauth.net/2/grant-types/authorization-code/).

-

-1. The user sends a message to the bot.

-2. The bot determines if the user needs to sign in.

- * In this example, the bot stores the access token in its user data store. It asks the user to log in if it doesn't have a validated token for the selected identity provider. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/469952a26d618dbf884a3be53c7d921cc580b1e2/src/utils/AuthenticationUtils.ts#L58-L76))

-3. The bot constructs the URL to the start page of the authentication flow, and sends a card to the user with a `signin` action. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/469952a26d618dbf884a3be53c7d921cc580b1e2/src/dialogs/BaseIdentityDialog.ts#L160-L190))

- * Like other application auth flows in Teams, the start page must be on a domain that's in your `validDomains` list, and on the same domain as the post-login redirect page.

- * **IMPORTANT**: The OAuth 2.0 authorization code grant flow calls for a `state` parameter in the authentication request that contains a unique session token to prevent a [cross-site request forgery attack](https://en.wikipedia.org/wiki/Cross-site_request_forgery). The example uses a randomly generated GUID.

-4. When the user selects the *signin* button, Teams opens a pop-up window and navigates it to the start page.

-5. The start page redirects the user to the identity provider's `authorize` endpoint. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/469952a26d618dbf884a3be53c7d921cc580b1e2/public/html/auth-start.html#L51-L56))

-6. On the provider's site, the user signs in and grants access to the bot.

-7. The provider takes the user to the bot's OAuth redirect page, with an authorization code.

-8. The bot redeems the authorization code for an access token, and **provisionally** associates the token with the user that initiated the sign-in flow. Below, we call this a *provisional token*.

- * In the example, the bot associates the value of the `state` parameter with the ID of the user that initiated the sign-in process so it can later match it with the `state` value returned by the identity provider. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/469952a26d618dbf884a3be53c7d921cc580b1e2/src/AuthBot.ts#L70-L99))

- * **IMPORTANT**: The bot stores the token it receives from the identity provider and associates it with a specific user, but it is marked as "pending validation". The provisional token can't be used yet: it must be further validated:

- 1. **Validate what's received from the identity provider.** The value of the `state` parameter must be confirmed against what was saved earlier.

- 1. **Validate what's received from Teams.** A [two-step authentication](https://en.wikipedia.org/wiki/Man-in-the-middle_attack) validation is performed to ensure that the user who authorized the bot with the identity provider is the same user who is chatting with the bot. This validation guards against [man-in-the-middle](https://en.wikipedia.org/wiki/Man-in-the-middle_attack) and [phishing](https://en.wikipedia.org/wiki/Phishing) attacks. The bot generates a verification code and stores it, associated with the user. The verification code is sent automatically by Teams as described below in steps 9 and 10. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/469952a26d618dbf884a3be53c7d921cc580b1e2/src/AuthBot.ts#L100-L113))

-9. The OAuth callback renders a page that calls `notifySuccess("<verification code>")`. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/master/src/views/oauth-callback-success.hbs))

-10. Teams closes the pop-up and sends the `<verification code>` sent to `notifySuccess()` back to the bot. The bot receives an [invoke](/bot-framework/dotnet/bot-builder-dotnet-activities#invoke) message with `name = signin/verifyState`.

-11. The bot checks the incoming verification code against the verification code stored with the user's provisional token. ([View code](https://github.com/OfficeDev/microsoft-teams-sample-auth-node/blob/469952a26d618dbf884a3be53c7d921cc580b1e2/src/dialogs/BaseIdentityDialog.ts#L127-L140))

-12. If they match, the bot marks the token as validated and ready for use. Otherwise, the auth flow fails, and the bot deletes the provisional token.

-> [!Note]

-> If you experience issues with authentication on mobile, ensure your Javascript SDK is update to version 1.4.1 or later.

-## Samples

-For sample code showing the bot authentication process, see:

-* [Microsoft Teams bot authentication sample (Node)](https://github.com/OfficeDev/microsoft-teams-sample-auth-node)

-## More details

-For detailed implementation walkthroughs for bot authentication targeting Azure Active Directory, see:

-* [Authenticate a user in a Microsoft Teams bot](~/resources/bot-v3/bot-authentication/auth-bot-AAD.md)

-description: Describes the Azure Bot Service OAuthCard and how it's used for authentication

-localization_priority: Normal

-keywords: teams authentication OAuthCard OAuth card Azure Bot Service

-# Using Azure Bot Service for Authentication in Teams

-Without the Azure Bot ServiceΓÇÖs OAuthCard, it's complicated to implement authentication in a bot. It's a full-stack challenge that involving building a web experience, integrating with external OAuth providers, token management, and handling the right server-to-server API calls to complete authentication flow securely. This can result in clunky experiences requiring the entry of ΓÇ£magic numbersΓÇ¥.

-With Azure Bot ServiceΓÇÖs OAuthCard, it's easier for your Teams bot to sign in your users and access external data providers. Whether youΓÇÖve already implemented auth and you want to switch over to something simpler, or if you're looking to add authentication to your bot service for the first time, the OAuthCard can make it easier.

-Other topics in [Authentication](~/resources/bot-v3/bot-authentication/auth-flow-bot.md) describe authentication without using the OAuthCard, so if you want to understand authentication in Teams more deeply, or have a situation where you can't use the OAuthCard, you can still refer to those topics.

-## Support for the OAuthCard

-There are currently some restrictions to where you can use the OAuthCard. These include:

-* The card won't work with [guest access](/MicrosoftTeams/guest-access).

-* It won't work with [Microsoft Teams free](https://products.office.com/microsoft-teams/free).

-* It can only be used for bot authentication.

-* It only works for bots registered in the [Azure Bot Service](https://azure.microsoft.com/services/bot-service/).

-## How does the Azure Bot Service help me do authentication?

-Full documentation using the OAuthCard is available in the topic: [Add authentication to your bot via Azure Bot Service](/azure/bot-service/bot-builder-tutorial-authentication?view=azure-bot-service-3.0&preserve-view=true). Note that this topic is in the Azure Bot Framework documentation set, and isn't specific to Teams.

-The following sections tell how to use the OAuthCard in Teams.

-## Main benefits for Teams developers

-The OAuthCard helps with authentication in the following ways:

-* Provides an out-of-box web-based authentication flow: you no longer have to write and host a web page to direct to external login experiences or provide a redirect.

-* Is seamless for end users: complete the full sign-in experience right within Teams.

-* Includes easy token management: you no longer have to implement a token storage system ΓÇô instead, the Bot Service takes care of token caching and provides a secure mechanism for fetching those tokens.

-* Is supported by complete SDKs: easy to integrate and consume from your bot service.

-* Has out-of-box support for many popular OAuth providers, such as Azure AD/MSA, Facebook, and Google.

-## When should I implement my own solution?

-Because access tokens are sensitive information, you may not wish to have them stored in an external service. In this case, you may choose to still implement your own token management system and login experience within Teams, as described in the rest of the Teams [Authentication](~/resources/bot-v3/bot-authentication/auth-flow-bot.md) topics.

-## Getting started with OAuthCard in Teams

-> [!NOTE]

-> This guide is using the Bot Framework v3 SDK. You can find the v4 implementation [here](/azure/bot-service/bot-builder-authentication?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true). You will still need to create a manifest and include token.botframework.com in the `validDomains` section, because otherwise the Sign in button won't open the authentication window. Use the [Developer Portal](~/concepts/build-and-test/teams-developer-portal.md) to generate your manifest.

-YouΓÇÖll first need to configure your Azure bot service to set up external authentication providers. Read [Configuring identity providers](~/concepts/authentication/configure-identity-provider.md) for detailed steps.

-To enable authentication using the Azure Bot Service, you need to make these additions to your code:

-1. Include token.botframework.com in the `validDomains` section of your app manifest because Teams will embed the Bot ServiceΓÇÖs login page.

-2. Fetch the token from the Bot Service whenever your bot needs to access authenticated resources. If no token is available, send a message with an OAuthCard to the user requesting them to log into the external service.

-3. Handle the login completion activity. This ensures that the authentication request and the token are associated with the user currently interacting with your bot.

-4. Retrieve the token whenever your bot needs to perform authenticated actions, such as calling external REST APIs.

-In your dialog code, youΓÇÖll need to add this snippet (C#), which checks for an existing access token:

-```CSharp

-// First ask Bot Service if it already has a token for this user

-var token = await context.GetUserTokenAsync(ConnectionName).ConfigureAwait(false);

-if (token != null)

-{

- // use the token to do exciting things!

-}

-else

-{

- // If Bot Service does not have a token, send an OAuth card to sign in

- await SendOAuthCardAsync(context, (Activity)context.Activity);

-}

-```

-If an access token doesnΓÇÖt exist, your code will then send a message with an OAuthCard to the user:

-```CSharp

-private async Task SendOAuthCardAsync(IDialogContext context, Activity activity)

-{

- await context.PostAsync($"To do this, you'll first need to sign in.");

- var reply = await context.Activity.CreateOAuthReplyAsync(_connectionName, _signInMessage, _buttonLabel).ConfigureAwait(false);

- await context.PostAsync(reply);

- context.Wait(WaitForToken);

-}

-```

-To handle the login complete activity, youΓÇÖll need to process this Invoke:

-```CSharp

-if (activity.Name == "signin/verifyState")

-{

- // We do this so that we can pass handling to the right logic in the dialog. You can

- // set this to be whatever string you want.

- activity.Text = "loginComplete";

- await Conversation.SendAsync(activity, () => new Dialogs.RootDialog());

- return Request.CreateResponse(HttpStatusCode.OK);

-}

-```

-In your dialog code, you can then retrieve the token from the Bot authentication service:

-```CSharp

-if (text.Contains("loginComplete"))

- {

- // Handle login completion event.

- JObject ctx = activity.Value as JObject;

- if (ctx != null)

- {

- string code = ctx["state"].ToString();

- var oauthClient = activity.GetOAuthClient();

- var token = await oauthClient.OAuthApi.GetUserTokenAsync(activity.From.Id, ConnectionName, magicCode: code).ConfigureAwait(false);

- if (token != null)

- {

- // Make whatever API calls here you want

- await context.PostAsync($"Success! You are now signed in.");

- }

- }

- // Need to respond to the Invoke.

- return;

-}

-```

-## Using OAuthCard with messaging extensions

-You can also use Azure Bot Service to connect third-party providers to your messaging extension. The flow is the same as with a bot, except instead of returning an OAuthCard, your service will return a login prompt.

-The following snippet (C#) illustrates how to craft the login response:

-```CSharp

-var token = await client.OAuthApi.GetUserTokenAsync(activity.From.Id, ConnectionName).ConfigureAwait(false);

-if (token == null)

-{

- // Send the login response with the auth link.

- string link = await client.OAuthApi.GetSignInLinkAsync(activity, ConnectionName);

- response = new ComposeExtensionResponse()

- {

- ComposeExtension = new ComposeExtensionResult()

- };

- response.ComposeExtension.Type = "auth";

- response.ComposeExtension.SuggestedActions = new ComposeExtensionSuggestedAction()

- {

- Actions = new List<CardAction>()

- {

- new CardAction(ActionTypes.OpenUrl, Title: "Sign into this app", value: link)

- }

- };

- return response;

-}

-```

-Note that in the example above you need to make the call to `GetSignInLinkAsync` directly against the `client.OAuthApi` property.

-When the user successfully completes the login sequence, your service will receive another Invoke request containing the original user query, along with a state parameter string containing the ΓÇ£magic codeΓÇ¥. You can now fetch the token using this string, along with the user ID and connection name.

-```CSharp

-var query = activity.GetComposeExtensionQueryData();

-JObject data = activity.Value as JObject;

-var client = activity.GetOAuthClient();

-// Check if the request comes with login state

-if (data != null && data["state"] != null)

-{

- var token = await client.OAuthApi.GetUserTokenAsync(activity.From.Id, ConnectionName, data["state"].ToString());

- // Do stuff with the token here.

-}

-```

-description: Learn how to create a Microsoft Teams messaging extension using App Studio.

-localization_priority: Normal

-# Create a messaging extension using App Studio

-> [!TIP]

-> Looking for a faster way to get started? Create a [messaging extension](../build-your-first-app/build-messaging-extension.md) using the Microsoft Teams Toolkit.

-At a high level, you'll need to complete the following steps to create a messaging extension.

-1. Prepare your development environment.

-2. Create and deploy your web service (while developing use a tunneling service like ngrok to run it locally).

-3. Register your web service with the Bot Framework.

-4. Create your app package.

-5. Upload your package to Teams.

-Creating your web service, creating your app package, and registering your web service with the Bot Framework can be done in any order. Because those three pieces are so intertwined, no matter which order you do them in you'll need return to update the others. Your registration needs the messaging endpoint from your deployed web service, and your web service needs the ID and password created from your registration. Your app manifest also needs that ID to connect Teams to your web service.

-As you're building your messaging extension, you'll regularly be moving between changing your app manifest, and deploying code to your web service. When working with the app manifest, ensure that you can either manually modify the JSON file, or make changes through App Studio. Either way, you'll need to re-deploy (upload) your app in Teams when you make a change to the manifest, but there's no need to do so when you deploy changes to your web service.

-## Create your web service

-The heart of your messaging extension is your web service. It will define a single route, typically `/api/messages`, to receive all requests on. If you're getting started from scratch, you have a few options to choose from.

-* Use one of our [quickstarts](#learn-more) tutorials that will guide you through the creation of your web service.

-* Choose one of the messaging extension samples available in the [Bot Framework sample repository](https://github.com/Microsoft/BotBuilder-Samples) to start from.

-* If you're using JavaScript, use the [Yeoman generator for Microsoft Teams](https://github.com/OfficeDev/generator-teams) to scaffold your Teams app, including your web service.

-* Create your web service from scratch. You can choose to add the Bot Framework SDK for your language, or you can work directly with the JSON payloads.

-## Register your web service with the Bot Framework

-Messaging extensions take advantage of the Bot Framework's messaging schema and secure communication protocol; if you don't already have one you'll need to register your web service on the Bot Framework. The Microsoft App ID (we'll refer to this ID as your Bot ID from inside of Teams, to identify it from other App ID's you might be working with) and the messaging endpoint your register with the Bot Framework will be used in your messaging extension to receive and respond to requests. If you're using an existing registration, make sure you [enable the Microsoft Teams channel](/azure/bot-service/bot-service-manage-channels?preserve-view=true&view=azure-bot-service-4.0).

-If you follow one of the quickstarts or start from one of the available samples you'll be guided through registering your web service. If you want to manually register your service you have three options to do so. If you choose to register without using an Azure subscription you won't be able to take advantage of the simplified OAuth authentication flow provided by the Bot Framework. You'll be able to migrate your registration to Azure after creation.

-* If you have an Azure subscription (or want to create a new one), you can register your web service manually using the Microsoft Azure portal. Create a "Bot Channels Registration" resource. You can choose the free pricing tier, as messages from Microsoft Teams don't count towards your total allowable messages per month.

-* If you don't wish to use an Azure subscription, you can use the [legacy registration portal](https://dev.botframework.com/bots/new).

-* App Studio can also help you register your web service (bot). Web services registered through App Studio are not registered in Azure. You can use the [legacy portal](https://dev.botframework.com/bots) to view, manage, and migrate your registrations.

-## Create your app manifest

-You can either use App Studio to help you create your app manifest, or create it manually.

-### Create your app manifest using App Studio

-You can use the App Studio app from within the Teams client to help create your app manifest.

-1. In the Teams client, open App Studio from the **...** overflow menu on the left navigation rail. If it isn't already installed, you can do so by searching for it.

-2. On the **Manifest editor** tab select **Create a new app** (or if you're adding a messaging extension to an existing app, you can import your app package)

-3. Add your app details (see [manifest schema definition](~/resources/schem) for full descriptions of each field).

-4. On the **Messaging extensions** tab, select the **Setup** button.

-5. You can either create a new web service (bot) for your messaging extension to use, or if you've already registered one select/add it here.

-6. If necessary, update your bot endpoint address to point to your bot. It should look something like `https://someplace.com/api/messages`.

-7. The **Add** button in the **Command** section will guide you through adding commands to your messaging extension. See the [Learn more](#learn-more) section for links to more information on adding commands. Remember you can define up to 10 commands for your messaging extension.

-8. The **Message Handlers** section allows you to add a domain that your messaging will trigger on. See [link unfurling](~/messaging-extensions/how-to/link-unfurling.md) for more information.

-From the **Finish => Test and distribute** tab you can **Download** your app package (which includes your app manifest as well as your app icons), or **Install** the package.

-### Create your app manifest manually

-As with bots and tabs, you update the [app manifest](~/resources/schem#composeextensions) of your app to include the messaging extension properties. These properties govern how your messaging extension appears and behaves in the Teams client. Messaging extensions are supported beginning with v1.0 of the manifest.

-#### Declare your messaging extension

-To add a messaging extension, include a new top-level JSON structure in your app manifest with the `composeExtensions` property. You create a single messaging extension for your app, with up to 10 commands.

-> [!NOTE]

-> The manifest refers to messaging extensions as `composeExtensions`. This is to maintain backward compatibility.

-The extension definition is an object that has the following structure:

-| Property name | Purpose | Required? |

-||||

-| `botId` | The unique Microsoft app ID for the bot as registered with the Bot Framework. This should typically be the same as the ID for your overall Teams app. | Yes |

-| `canUpdateConfiguration` | Enables **Settings** menu item. | No |

-| `commands` | Array of commands that this messaging extension supports. You're limited to 10 commands. | Yes |

-#### Define your commands

-Your messaging extension should declare one or more commands, which define where your users can trigger your messaging extension, and the type of interaction. See [learn more](#learn-more) for more information on messaging extension commands.

-#### Simple manifest example

-The following example is a simple messaging extension object in the app manifest with a search command. This is not the entire app manifest file, just the part specific to messaging extensions. See [app manifest schema](~/resources/schem) for a complete example.

-```json

-...

-"composeExtensions": [

- {

- "botId": "abcd1234-1fc5-4d97-a142-35bb662b7b23",

- "canUpdateConfiguration": true,

- "commands": [

- {

- "id": "searchCmd",

- "description": "Search you ToDo's",

- "title": "Search",

- "initialRun": true,

- "parameters": [

- {

- "name": "searchKeyword",

- "description": "Enter your search keywords",

- "title": "Keywords"

- }

- ]

- }

- ]

- }

-]

-...

-```

-#### Complete app manifest example

-```json

-{

- "$schema": "https://developer.microsoft.com/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",

- "manifestVersion": "1.5",

- "version": "1.0",

- "id": "57a3c29f-1fc5-4d97-a142-35bb662b7b23",

- "packageName": "com.microsoft.teams.samples.Todo",

- "developer": {

- "name": "John Developer",

- "websiteUrl": "http://todobotservice.azurewebsites.net/",

- "privacyUrl": "http://todobotservice.azurewebsites.net/privacy",

- "termsOfUseUrl": "http://todobotservice.azurewebsites.net/termsofuse"

- },

- "name": {

- "short": "To Do",

- "full": "To Do"

- },

- "description": {

- "short": "Find or create a new task in To Do",

- "full": "Find or create a new task in To Do"

- },

- "icons": {

- "outline": "todo-outline.jpg",

- "color": "todo-color.jpg"

- },

- "accentColor": "#ff6a00",

- "composeExtensions": [

- {

- "botId": "57a3c29f-1fc5-4d97-a142-35bb662b7b23",

- "canUpdateConfiguration": true,

- "commands": [

- {

- "id": "searchCmd",

- "description": "Search you Todo's",

- "title": "Search",

- "initialRun": true,

- "context": ["commandBox", "compose"],

- "parameters": [

- {

- "name": "searchKeyword",

- "description": "Enter your search keywords",

- "title": "Keywords"

- }

- ]

- },

- {

- "id": "addTodo",

- "description": "Create a To Do item",

- "title": "Create To Do",

- "type": "action",

- "context": ["commandBox", "message", "compose"],

- "parameters": [

- {

- "name": "Name",

- "description": "To Do Title",

- "title": "Title",

- "inputType": "text"

- },

- {

- "name": "Description",

- "description": "Description of the task",

- "title": "Description",

- "inputType": "textarea"

- },

- {

- "name": "Date",

- "description": "Due date for the task",

- "title": "Date",

- "inputType": "date"

- }

- ]

- },

- {

- "id": "reassignTodo",

- "description": "Reassign a todo item",

- "title": "Reassign a todo item",

- "type": "action",

- "fetchTask": true,

- "parameters": [

- {

- "name": "Name",

- "title": "Title"

- }

- ]

- }

- ]

- }

- ],

- "permissions": [

- "identity",

- "messageTeamMembers"

- ],

- "validDomains": [

- "todobotservice.azurewebsites.net",

- "*.todobotservice.azurewebsites.net"

- ]

-}

-```

-## Add your invoke message handlers

-When your users trigger your messaging extension you'll need to handle the initial invoke message, collect some information from the user, then process that information and respond appropriately. To do that, you'll first need to decide what kind of commands you want to add to your messaging extension and either [add an action commands](~/messaging-extensions/how-to/action-commands/define-action-command.md) or [add a search commands](~/messaging-extensions/how-to/search-commands/define-search-command.md).

-## Messaging extensions in Teams meetings

-> [!NOTE]

-> If a meeting or group chat has federated users in the roster, Teams suppresses access to messaging extensions for all users, including the organizer.

-Once a meeting begins, Teams participants can interact directly with your messaging extension during a live call. Consider the following when building your in-meeting messaging extension:

-1. **Location**. Your messaging extension can be invoked from the compose message area, the command box, or @mentioned in the meeting chat.

-1. **Metadata**. When your messaging extension is invoked it can identify the user and tenant from `userId` and `tenantId`. The `meetingId` can be found as part of the `channelData` object. Your app can use the `userId` and `meetingId` for the `GetParticipant` API request to retrieve user roles.

-1. **Command type**. If your message extension uses [action-based commands](../messaging-extensions/what-are-messaging-extensions.md#action-commands), it should follow tabs [single sign-on](../tabs/how-to/authentication/tab-sso-overview.md) authentication.

-1. **User experience**. You messaging extension should look and behave the same as it would outside a meeting.

-## Next steps

-* [Create action commands](~/messaging-extensions/how-to/action-commands/define-action-command.md)

-* [Create search commands](~/messaging-extensions/how-to/search-commands/define-search-command.md)

-* [Link unfurling](~/messaging-extensions/how-to/link-unfurling.md)

-## Learn more

-Try it out in a quickstart:

-* Quickstarts for C#

- * [Messaging extension with action-based commands](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/51.teams-messaging-extensions-action)

- * [Messaging extension with search-based commands](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/50.teams-messaging-extensions-search)

-* Quickstarts for JavaScript

- * [Messaging extension with action-based commands](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/51.teams-messaging-extensions-action)

- * [Messaging extension with search-based commands](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/50.teams-messaging-extensions-search)

-Learn more about Teams development concepts:

-* [Understand Teams app capabilities](../concepts/capabilities-overview.md)

-* [What are messaging extensions?](../messaging-extensions/what-are-messaging-extensions.md)

-> * Your app can account for the unique properties of each of the channel types to function properly. To enable your tab for private and shared channels, see [retrieve context in private channels](~/tabs/how-to/access-teams-context.md#retrieve-context-in-private-channels) and [retrieve context in shared channels](~/tabs/how-to/access-teams-context.md#retrieve-context-in-microsoft-teams-connect-shared-channels).

-> * Your app can account for the unique properties of each of the channel types to function properly. To enable your tab for private and shared channels, see [retrieve context in private channels](~/tabs/how-to/access-teams-context.md#retrieve-context-in-private-channels) and [retrieve context in shared channels](~/tabs/how-to/access-teams-context.md#retrieve-context-in-microsoft-teams-connect-shared-channels).

-## Retrieve context in Microsoft Teams Connect shared channels

-> [!NOTE]

-> Currently, Microsoft Teams Connect shared channels are in developer preview only.

-When your content page is loaded in a Microsoft Teams Connect shared channel, the data you receive from the `getContext` call is altered due to the unique roster of users in shared channels.

-The following fields are changed when your content page is in a shared channel:

-* `team.groupId`: Undefined for shared channels.

-* `team.internalId`: Set to the `threadId` of the team, the channel is shared for the current user. If the user has access to multiple teams, this is set to the team that hosts (creates) the shared channel.

-* `team.displayName`: Set to the name of the team, the channel is shared for the current user. If the user has access to multiple teams, this is set to the team that hosts (creates) the shared channel.

-* `sharepointSite.url`: Set to the URL of a distinct, unique SharePoint site for the shared channel.

-* `sharepointSite.path`: Set to the path of a distinct, unique SharePoint site for the shared channel.

-* `sharepointSite.domain`: Set to the domain of a distinct, unique SharePoint site domain for the shared channel.

-In addition to these field changes, there are two new fields available for shared channels:

-* `hostTeamGroupId`: Set to the `team.groupId` associated with the hosting team, or the team that created the shared channel. The property can make Microsoft Graph API calls retrieve membership of the shared channel.

-* `hostTeamTenantId`: Set to the `channel.ownerTenantId` associated with the hosting team, or the team that created the shared channel. The property can be cross-referenced with the current user's tenant ID found in the `user.tenant.id` field of the *context* object to determine if the user is internal or external to the hosting team's tenant.

-If your page makes use of any of these values, the value of `channel.membershipType` field must be `Shared` to determine if your page is loaded in a shared channel and can respond appropriately.

-> `teamSiteUrl` also works well for standard channels.

-> If your page makes use of any of these values, the value of `channelType` field must be `Shared` to determine if your page is loaded in a shared channel and can respond appropriately.

-|`channelId`| The property is set to the SC channel thread ID.|

-|`groupId`|The property is `null` for shared Channels.|

-description: Describes configuring Admin consent

-keywords: teams authentication tabs Microsoft Azure Active Directory (Azure AD) Graph API

-# Configure admin consent

-You can define app scope for an exposed API and determine if users can consent to this scope in directories where user consent is enabled. You can let only admins provide consent for higher-privileged permissions.

-## To expose an API

-1. Select **Manage** > **Expose an API** from the left pane.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/expose-api-menu.png" alt-text="Expose an API menu option.":::

- The **Expose an API** page appears.

-1. Select **Set** to generate app ID URI.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/expose-an-api.png" alt-text="Set app ID URI":::

- The section for setting app ID URI appears.

-1. Enter the app ID URI, and then select **Save**.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/set-app-id-uri.png" alt-text="App ID URI":::

- A message pops up on the browser stating that the app ID URI was updated.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/app-id-uri-msg.png" alt-text="App ID URI message":::

- The app ID URI displays on the page.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/app-id-uri-added.png" alt-text="App ID URI updated":::

-## To configure API scope

-1. Select **+ Add a scope** in the **Scopes defined by this API** section.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/select-scope.png" alt-text="Select scope":::

- The **Add a scope** page appears.

-1. Enter the app details for your app scope.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/add-scope.png" alt-text="Add scope details":::

- 1. Enter the scope name. This is a mandatory field.

- 1. Select **Admins and users** to configure the users who can give consent to use user's login credentials. The default option is **Admins only**.

- 1. Enter the **Admin consent display name**. This is a mandatory field.

- 1. Enter the description for admin consent. This is a mandatory field.

- 1. Enter the **User consent display name**.

- 1. Enter the description for user consent description.

- 1. Select the **Enabled** option for state.

- 1. Select **Add scope**.

- A message pops up on the browser stating that the scope was added.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/scope-added-msg.png" alt-text="Scope added message":::

- The app ID URI displays on the page.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/scope-added.png" alt-text="Scope added and displayed":::

-## To configure authorized client application

-1. Move through the **Expose an API** page to the **Authorized client application** section, and select **+ Add a client application**.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/auth-client-apps.png" alt-text="Authorized client application":::

- The **Add a client application** page appears.

-1. Enter the details for adding a client application. For this section, you'll add two client applications.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/add-client-app.png" alt-text="Add a client application":::

- 1. Enter **1fec8e78-bce4-4aaf-ab1b-5451cc387264** as client ID for Teams mobile or desktop application.

- 1. Select the app ID you created for your app for the **Authorized scopes**.

- 1. Select **Add application**.

- A message pops up on the browser stating that the client app was added.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/update-app-auth-msg.png" alt-text="Client application added message":::

- The client app IDs display on the page.

-1. Repeat the previous step to add client app for Teams web application.

- 1. Enter **5e3ce6c0-2b1f-4285-8d4b-75ee78787346** as client ID for web app.

- 1. Select the app ID you created for your app for the **Authorized scopes**.

- 1. Select **Add application**.

- A message pops up on the browser stating that the client app was added.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/update-app-auth-msg.png" alt-text="Client application added message for web app":::

- The client app IDs display on the page.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/client-app-added.png" alt-text="Client app added and displayed":::

-description: Describes creating client secret

-keywords: teams authentication tabs Microsoft Azure Active Directory (Azure AD) Graph API

-# Create client secret

-A client secret is a string that the application uses to prove its identity when requesting a token.

-1. Select **Manage** > **Certificates & secrets**.

-2. Select **+ New client secret**.

- :::image type="content" source="../../../assets/images/adaptive-cards/client-secret.png" alt-text="Client secret page":::

- The **Add a client secret** page appears.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/add-client-secret.png" alt-text="Add a client secret page":::

-3. Enter the description.

-4. Select the duration of validity for the secret.

-5. Select **Add**.

- A message pops up on the browser stating that the client secret was updated, and the client secret displays on the page.

- :::image type="content" source="../../../assets/images/authentication/teams-sso-tabs/client-secret-added.png" alt-text="Client secret added":::

-6. Select the copy button next to the **Value** of client secret.

-7. Save the value that you copied for later use.

- > [!NOTE]

- > Ensure that you copy the value of client secret right after you create it. The value is visible only at the time when the client secret is created, and can't be viewed after that.

-description: Get started building great custom apps directly within Visual Studio Code with the Microsoft Teams Toolkit.

-keywords: teams visual studio code toolkit

-# Build apps with the Teams Toolkit and Visual Studio Code

-The Teams Toolkit for Visual Studio Code helps developers create and deploy Teams apps with integrated identity, access to cloud storage, data from Microsoft Graph, and other services in Azure and Microsoft 365 with a ΓÇ£zero-configurationΓÇ¥ approach to the developer experience.

-You also can use the toolkit with Visual Studio or as a CLI (called `teamsfx`).

-## Install the Teams Toolkit for Visual Studio Code

-1. Open Visual Studio Code.

-1. Select the Extensions view (**Ctrl+Shift+X** / **⌘⇧-X** or **View > Extensions**).

-1. In the search box, enter _Teams Toolkit_.

-1. Select on the green install button next to the Teams Toolkit.

-You also can find the Teams Toolkit on the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=TeamsDevApp.ms-teams-vscode-extension).

-The following tools are installed by the Visual Studio Code extension when they're needed. If already installed, the installed version is used instead. If using Linux (including WSL), you must install these tools before use:

- Azure Functions Core Tools is used to run any backend components locally during a local debug run, including the authentication helpers required when running your services in Azure. It's installed within the project directory using the npm `devDependencies`.

- The .NET SDK is used to install customized bindings for local debugging and Azure Functions app deployments. If you haven't installed the .NET 3.1 or later SDK globally, the portable version is installed.

- Some Teams app features (conversational bots, messaging extensions, and incoming webhooks) require inbound connections. You need to expose your development system to Teams through a tunnel. A tunnel isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`).

-## Use the Teams Toolkit for Visual Studio Code

-## Set up a new Teams project

-The Teams Toolkit can create React apps that are hosted in Azure or SPFx web parts that are hosted on your Microsoft 365 SharePoint environment. To create a new React app to be hosted on Azure:

-1. Open Visual Studio code.

-1. Open the Teams Toolkit by selecting the Teams icon in the sidebar:

- :::image type="content" source="../assets/images/teams-toolkit-v2/sidebar-icon.png" alt-text="The Teams Icon in the Visual Studio Code sidebar.":::

-1. Select **Create New Project**.

- :::image type="content" source="../assets/images/teams-toolkit-v2/create-project.png" alt-text="Location of the Create New Project link in the Teams Toolkit sidebar.":::

-1. Select **Create a new Teams app**.

- :::image type="content" source="../assets/images/teams-toolkit-v2/create-new-project-intro.png" alt-text="Wizard start for Create New Project":::

-1. On the **Select capabilities** step, the **Tab** capability is already selected. You can also optionally select **Bot** and **Messaging Extension**. Press **OK**.

- :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-capabilities.png" alt-text="Screenshot showing how to add capabilities to your new app.":::

-1. On the **Frontend hosting type** step, select **Azure**.

- :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-hosting.png" alt-text="Screenshot showing how to select hosting for your new app.":::

-1. Optionally, on the **Cloud resources** step, select cloud resources that your application uses. You can select CRUD (create, read, update, and delete) access to a SQL table or an API:

- :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-cloud-resources.png" alt-text="Screenshot showing how to add cloud resources for your new app.":::

-1. On the **Programming Language** step, you can choose **JavaScript** or **TypeScript**:

- :::image type="content" source="../assets/images/teams-toolkit-v2/create-project-programming-languages.png" alt-text="Screenshot showing how to select the programming language.":::

-1. Select a workspace folder. A folder is created within your workspace folder for the project you're creating.

-1. Enter a suitable name for your app, like `helloworld`. The name of the app must consist only of alphanumeric characters. Press **Enter** to continue.

-Your Teams app is created within a few seconds. The scaffolded app contains code to handle single sign-on with Azure Active Directory and access to the Microsoft Graph. If you selected Azure resources, then the code for those resources is also available.

-For a walk-through of the SPFx creation and publication process, see the [SPFx tutorial](../get-started/first-app-spfx.md).

-## Configure your app

-At its core, the Teams app embraces three components:

- 1. The Microsoft Teams client (web, desktop or mobile) where users interact with your app.

- 1. A server that responds to requests for content that is displayed in Teams. For example, HTML tab content or a bot Adaptive Card.

- 1. A Teams app package consists of three files:

- > [!div class="checklist"]

- >

- > - The manifest.json.

- > - A [color icon](../resources/schem#icons) for your app to display in the public or organization app catalog.

- > - An [outline icon](../resources/schem#icons) for display on the Teams activity bar.

-The manifest and icons are stored in the `.fx` folder of your project prior to being uploaded to Teams. When an app is installed, the Teams client parses the manifest file to determine needed information like the name of your app and the URL where the services are located.

-1. To configure your app, navigate to the **Teams Toolkit** tab in Visual Studio Code.

-1. Select **Manifest Editor** in the **Project** section.

-Editing the fields in the App details page updates the contents of the manifest.json file that is ultimately shipped as part of the app package.

-## Install and run your app locally

-To build and run your app locally:

-1. From Visual Studio Code, press **F5** to run your application in debug mode.

- > When you run the app for the first time, all dependencies are downloaded and the app is built. A browser window automatically opens when the build is complete. This can take 3-5 minutes to complete.

- The toolkit prompts you to install a local certificate if required. This certificate allows Teams to load your application from `https://localhost`. Select yes when the following dialog appears:

- :::image type="content" source="../assets/images/teams-toolkit-v2/ssl-prompt.png" alt-text="Screenshot showing how the prompt to install a SSL certificate to enable Teams to load your application from localhost.":::

-1. Your web browser is started to run the application. If prompted to open Microsoft Teams, select Cancel to remain within the browser. You may also be prompted to switch to the Teams application at other times. Select the web app when this happens.

- :::image type="content" source="../assets/images/teams-toolkit-v2/launch-web-browser-and-pick-webapp.png" alt-text="Screenshot showing how to pick the web version of teams when launched":::

-1. You may be prompted to sign in. If so, sign in with your Microsoft 365 account.

-1. When prompted to install the app onto Teams, press **Add**.

-Both the backend and frontend are hooked into the Visual Studio Code debugger. This allows you to set breakpoints anywhere in your code and inspect state. You can also use any frontend debugging tools (such as the React Developer Tools) within the browser. For more information about debugging in Visual Studio Code, review [the documentation](https://code.visualstudio.com/Docs/editor/debugging).

-## Publish your app to Teams

-Before it can be used by other people, you must publish your app to the Developer Portal for Teams.

-1. To publish your app, navigate to the **Teams Toolkit** tab in Visual Studio Code.

-1. Select **Publish to Teams** in the **Project** section.

-If using Azure hosting, you must have provisioned and deployed to the cloud. For a walk-through of the SPFx publication process, see the [SPFx tutorial](../get-started/first-app-spfx.md).

-## Next step

-> [!div class="nextstepaction"]

-> [Maintaining and supporting your published app](../concepts/deploy-and-publish/appsource/post-publish/overview.md)

-## See also

-description: Build a tab that supports single-sign-on and Microsoft Graph calls directly within Visual Studio Code with the Microsoft Teams Toolkit.

-keywords: teams visual studio code toolkit tabs sso graph authentication Azure identity platform

-localization_priority: Normal

-# Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs

-> [!IMPORTANT]

-> **This document refers to an old version of Teams Toolkit**

->

-> For current information, read the [prerequisites](../get-started/prerequisites.md) and follow one of the newer tutorials.

-The Microsoft Teams Toolkit enables you to create single sign-on (SSO) authentication for tab apps directly within Visual Studio Code. The toolkit guides you through the process and provides everything you need including provisioning your Microsoft identity platform registration in the Microsoft Azure portal.

-## Get started ΓÇö create a project

-1. Create a new project in the toolkit.

-1. Select tab as the type of extension you'd like to create.

-1. Select the option to support SSO.

-> [!TIP]

-> After installation, you should see the Teams Toolkit in the Visual Studio Code activity bar. If not, right-click within the activity bar and select **Microsoft Teams** to pin the toolkit for easy access.

-## Configure your project

-1. To enable SSO within Teams, your app must have an Azure app registration resource. The Teams Toolkit will provision the app registration on your behalf.

-1. Enter the URL where your app will be hosted and select **next**. Your app registration will be configured using the provided URL.

-1. The app registration's configuration details will be stored in the `.env` files in your project's source code.

-If you would like to learn more about how your Azure app registration will be provisioned, *see* our [single sign-on (SSO) support for tabs](../tabs/how-to/authentication/tab-sso-overview.md) documentation.

-> [!TIP]

-> You will need to go to **Azure App Registrations** and update your *API URI* and *redirect URLs* whenever you change this URL.

-## Run your project

-1. Select **npm install** from the `api-server` folder. Then **npm start**.

-1. Select **npm install** from the `.src` folder. Then **npm start**.

-1. If you're using a tunneling service like [ngrok](https://ngrok.com/), run it and make sure the URL matches with what you entered in the project creation wizard. If it doesn't, you'll need to update your *API URI* and *redirect URL* in the app registration that was created in Azure.

-1. Navigate to the activity bar on the left side of the Visual Studio Code window.

-1. Select the **Run** icon to display the **Run and Debug** view.

-1. You can also use the keyboard shortcut **Ctrl+Shift+D**.

-> [!TIP]

-> You may not see the app install dialogue in the browser if pop-up windows are disabled for your browser. If this happens, enable pop-up windows and refresh the page.

-## See also

-[Build apps with the Microsoft Teams Toolkit and Visual Studio Code](visual-studio-code-overview.md)