Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 4 additions & 7 deletions msteams-platform/includes/get-started/azure-add-scope.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,10 @@

1. Update the values for the rest of the fields as follows:

* Enter **Teams can access the user’s profile** as **Admin consent display name**.

* Enter **Allows Teams to call the app’s web APIs as the current user** as **Admin consent description**.

* Enter **Teams can access the user profile and make requests on the user’s behalf** as **User consent display name**.

* Enter **Enable Teams to call this app’s APIs with the same rights as the user** as **User consent description**.
- Enter **Teams can access the user’s profile** as **Admin consent display name**.
- Enter **Allows Teams to call the app’s web APIs as the current user** as **Admin consent description**.
- Enter **Teams can access the user profile and make requests on the user’s behalf** as **User consent display name**.
- Enter **Enable Teams to call this app’s APIs with the same rights as the user** as **User consent description**.

1. Ensure that **State** is set to **Enabled**.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@

1. Select **Save**.

:::image type="content" source="../../assets/images/include-files/web-add-uri.png" alt-text="Screenshot shows the option to add redirect uri and select implicit grant and hybrid flows.":::
:::image type="content" source="../../assets/images/include-files/web-add-uri.png" alt-text="Screenshot shows the option to save the redirect uri.":::
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,3 @@
1. Under **Value**, select **Copy to clipboard** to save the client secret value for further use.

:::image type="content" source="../../assets/images/include-files/client-secret-value.png" alt-text="Screenshot show the option to copy the client secret ID value to copy value to clipboard.":::

Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@

1. Under **New Connection Setting**, update the following details:

* **Name**: Enter a name for your new connection setting. You can use the name in the settings of your bot service code.
* **Service Provider**: From the dropdown list, select **Azure Active Directory v2**.
* **Client id**: Update your **Microsoft App ID**.
* **Client secret**: Update the client secrets **Value**.
* **Token Exchange URL**: Update the **Application ID URI**.
* **Tenant ID**: Enter **Common**.
* **Scopes**: Enter **User.Read**.
- **Name**: Enter a name for your new connection setting. You can use the name in the settings of your bot service code.
- **Service Provider**: From the dropdown list, select **Azure Active Directory v2**.
- **Client id**: Update your **Microsoft App ID**.
- **Client secret**: Update the client secrets **Value**.
- **Token Exchange URL**: Update the **Application ID URI**.
- **Tenant ID**: Enter **Common**.
- **Scopes**: Enter **User.Read**.

1. Select **Save**.

Expand Down
271 changes: 271 additions & 0 deletions msteams-platform/tabs-messaging-extensions-with-sso-tutorial.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,271 @@
---
title: SSO for tabs and message extension
description: In this module, learn how to set up Microsoft Entra single sign-on (SSO) authentication for tabs and message extensions.
ms.topic: conceptual
ms.localizationpriority: high
ms.date: 11/21/2025
ms.owner: ryanbliss
---

# Add SSO to tab and message extension app

The Microsoft Entra single sign-on (Microsoft Entra SSO) helps to authenticate users in Teams.

**Key aspects of Microsoft Entra SSO**:

- Allows the user to sign in automatically after the first sign in.
- Allows the user to sign in to other devices without entering credentials again.
- Obtains token for the signed in user.

This step-by-step guide helps you to create tabs and message extensions enabling Microsoft Entra SSO authentication. You'll see the following output:

:::image type="content" source="assets/images/Tab-ME-SSO/hello-megan-profile245-1.png" alt-text="Screenshot of the tab and message extension with SSO authentication output after you have successfully completed the step-by-step guide.":::

## Prerequisites

Ensure that you install the following tools and set up your development environment:

|   | Install | For using... |
| --- | --- | --- |
| 1. | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and calls all in one place.|
| 2. | [Microsoft 365 developer account](concepts/build-and-test/prepare-your-o365-tenant.md) | Access to Teams account with the appropriate permissions to install an app. |
| 3. | [.NET Core SDK](https://dotnet.microsoft.com/en-us/download) | Customized bindings for local debugging and Azure Functions app deployments. If you haven't installed the latest version, install the portable version. |
| 4. | [Visual Studio 2022](https://visualstudio.microsoft.com) | You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version. |
| 5. | Dev tunnel | Teams app features (conversational bots, message extensions, and incoming webhooks) need inbound connections. A tunnel connects your development system to Teams. Dev tunnel is a powerful tool to securely open your localhost to the internet and control who has access. Dev tunnel is available in Visual Studio 2022 version 17.7.0 or later. <br> or </br> You can also use [ngrok](https://ngrok.com/downloads) as a tunnel to connect your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`). |

> [!NOTE]
> After downloading ngrok, sign up and install [authtoken](https://ngrok.com/downloads).

## Set up local environment

[!INCLUDE [Set up local environment](includes/get-started/clone-repository.md)]

## Register Microsoft Entra app

The following steps help you to create and register your bot in Azure portal:

- Create and register your Azure app.
- Create client secret to enable SSO authentication of the bot.
- Add Teams channel to deploy the bot.
- Create a tunnel to your web server's endpoints using dev tunnel (recommended) or ngrok.
- Add messaging endpoint to the dev tunnel that you created.

[!INCLUDE [Azure app registration](includes/get-started/azure-app-registration.md)]

**Create a tunnel**

# [dev tunnel](#tab/dev)

[!INCLUDE [Tunnel](includes/get-started/dev-tunnel.md)]

# [ngrok](#tab/ngrok)

[!INCLUDE [Tunnel](includes/get-started/ngrok-tunnel.md)]

---

[!INCLUDE [Azure web authentication](includes/get-started/azure-web-authentication.md)]

[!INCLUDE [Client secret](includes/get-started/create-client-secret.md)]

**Add API permissions**

1. In the left pane, select **API permissions**.

1. Select **+ Add a permission**.

:::image type="content" source="../msteams-platform/assets/images/teams-file-upload-bot/add-api-permission.png" alt-text="Screenshot shows the option to select Add permission.":::

1. Select **Microsoft Graph**.

1. Select **Delegated permissions**.

1. Select **User** > **User.Read**.

1. Select **Add permissions**.

:::image type="content" source="../msteams-platform/assets/images/teams-file-upload-bot/select-api-permission.png" alt-text="Screenshot show the option to select permissions.":::

> [!NOTE]
>
> - If an app isn't granted IT admin consent, users must provide consent the first time they use an app.
> - Users need to consent to the API permissions only if the Microsoft Entra app is registered in a different tenant.

[!INCLUDE [Application ID URI](includes/get-started/application-id-uri.md)]

[!INCLUDE [Azure add scope](includes/get-started/azure-add-scope.md)]

[!INCLUDE [Azure client application](includes/get-started/azure-client-application.md)]

[!INCLUDE [Manifest](includes/get-started/azure-manifest.md)]

## Create your bot

[!INCLUDE [Azure bot resource](includes/get-started/azure-bot-resource.md)]

[!INCLUDE [Teams channel](includes/get-started/add-teams-channel.md)]

[!INCLUDE [Messaging endpoint](includes/get-started/messaging-endpoint.md)]

[!INCLUDE [Service connection](includes/get-started/oauth-connection-settings.md)]

## Set up app settings

1. Go to the **appsettings.json** file in the cloned repository.

:::image type="content" source="./assets/images/Tab-ME-SSO/app-setting-folder-1.png" alt-text="Screenshot of Project file with appsettings.json file highlighted in red.":::

1. Open the **appsettings.json** file in Visual Studio.

1. Update the following information:

- Replace `"MicrosoftAppId"` to your bot's **Microsoft App ID**.
- Replace `"MicrosoftAppPassword"` to your bot's client secrets **Value**.
- Replace `"SiteUrl"` to your ngrok URL.
- Replace `"ConnectionName"` to the name of OAuth connection setting.
- Replace `"TenantId"` to the tenant ID of the tenant where the app is used.
- Replace `"ClientId"` to your bot's **Microsoft App ID**.
- Replace `"AppSecret"` to your bot's client secrets **Value**.
- Replace `"ApplicationIdURI"` in the form of `api://*******.ngrok.io/botid-{AppID}`.

:::image type="content" source="./assets/images/Tab-ME-SSO/app-setting.png" alt-text="Screenshot of the appsettings.json file with the values entered highlighted in red.":::

## Set up manifest file

1. Go to the **manifest.json** file in the cloned repository.

:::image type="content" source="./assets/images/Tab-ME-SSO/folder-manifest.png" alt-text="Screenshot of Manifest folder with the manifest file highlighted in red.":::

1. Open the **manifest.json** file in Visual Studio and make the following changes:

1. Replace `DOMAIN-NAME` with your ngrok URL.
1. Replace `YOUR-MICROSOFT-APP-ID` with your bot's **Microsoft App ID**.

> [!NOTE]
> Depending on the scenario `[YOUR-MICROSOFT-APP-ID]` and `[DOMAIN-NAME]` may occur multiple times.

1. Replace `resource` as `api://*******.ngrok.io/botid-{AppID}`.

:::image type="content" source="~/assets/images/Tab-ME-SSO/vs-manifest.png" alt-text="Screenshot of the manifest.json file with the values entered highlighted in red.":::

## Build and run the service

To build and run the service, use Visual Studio or Command line.

# [Visual Studio](#tab/vs2019)

1. Open Visual Studio.
1. Select **File** > **Open** > **Project/Solution...**.

:::image type="content" source="~/assets/images/Tab-ME-SSO/open-project1.png" alt-text="Screenshot of Visual Studio file menu. The menu entries titled Open under File menu and Project/Solution under Open are highlighted in red.":::

1. In the **csharp** folder, select **App SSO Sample.csproj** file.

:::image type="content" source="./assets/images/Tab-ME-SSO/project-folder1-1.png" alt-text= "Screenshot of Project file with App SSO Sample.csproj file highlighted in red.":::

1. Press **F5** to run the project.

1. Select **Yes** if the following dialog appears:

:::image type="content" source="./assets/images/sbs-outgoing-webhooks/outgoing-webhook-certificate.png" alt-text="Screenshot of Security Warning with the Yes option highlighted in red.":::

A webpage appears with a message **Your bot is ready!**

:::image type="content" source="./assets/images/Tab-ME-SSO/bot-completion-explorer.png" alt-text="Screenshot of the webpage that displays Your bot is ready.":::

# [Command line](#tab/cli)

Go to the **csharp** folder in a Command Prompt window and enter the following command:

```bash
dotnet run
```

![Dotnet](~/assets/images/Tab-ME-SSO/dotnet-run1.png)

---

## Upload SSO App to Teams

1. In your cloned repository, go to **csharp** > **App SSO Sample** > **TeamsAppManifest**.

1. Create a .zip file with the following files that are present in the **Manifest** folder:

- manifest.json
- icon-outline.png
- icon-color.png

:::image type="content" source="./assets/images/Tab-ME-SSO/upload-tab-me-sso-1.png" alt-text="Screenshot of Manifest folder with tab manifest zip folder highlighted in red.":::

1. In the Teams client, select the **Apps** icon.

1. Select **Manage your apps**.

1. Select **Upload an app**.

1. Look for the option to **Upload a custom app**. If you see the option, custom app upload is enabled.

:::image type="content" source="~/assets/images/tab-device-permission/custom-upload.png" alt-text="Screenshot shows the upload a custom app.":::

> [!NOTE]
> Contact your Teams administrator, if you don't find the option to upload a custom app.

1. Select **Open** to upload the .zip file that you created in the **Manifest** folder.

:::image type="content" source="./assets/images/Tab-ME-SSO/upload-tab-me-sso-open-1.png" alt-text="Screenshot of Manifest folder with Open option to upload the Teams Bot zip file highlighted in red.":::

1. Select **Add**.

:::image type="content" source="./assets/images/Tab-ME-SSO/add-sso-app-1.png" alt-text="Screenshot of app details dialog to add tab SSO app.":::

1. Select **Open** and send a message to the bot.

:::image type="content" source="./assets/images/Tab-ME-SSO/open-sso-app.png" alt-text="Screenshot of scope selection dialog with Open option highlighted.":::

1. The bot performs SSO and displays profile card along with option prompt to view token.

:::image type="content" source="./assets/images/Tab-ME-SSO/Congratulation-image-1.png" alt-text="Screenshot of the profile card received in Teams.":::

1. Select **Yes** to view token or **No** to continue with chat.

:::image type="content" source="./assets/images/Tab-ME-SSO/token-view1-1.png" alt-text="Screenshot of the dialog to either select Yes or No.":::

1. If SSO isn't performed, then the bot performs default authentication method for your tab.

:::image type="content" source="./assets/images/Tab-ME-SSO/not-login11-1.png" alt-text="Screenshot of the default SSO page in Teams.":::

1. To sign in, if SSO isn't performed:

1. In the left pane of the Teams, select More added apps (●●●).

1. Select your new SSO application.

:::image type="content" source="./assets/images/Tab-ME-SSO/recent-app-sso-1.png" alt-text="Screenshot of your app highlighted in red in Apps section.":::

1. Select **sign in**.

:::image type="content" source="./assets/images/Tab-ME-SSO/sign-in-sso1-1.png" alt-text= "Screenshot of your app with sign in highlighted in red.":::

1. Enter your credentials in **Sign in** window and select **Next**.

:::image type="content" source="./assets/images/Tab-ME-SSO/sign-in-box.png" alt-text= "Screenshot of Microsoft Sign in page with Next highlighted in red.":::

1. Select **Accept**.

:::image type="content" source="./assets/images/Tab-ME-SSO/consent-box.png" alt-text= "Screenshot of Microsoft consent dialog with Accept highlighted in red.":::

1. Select your profile under search box. You'll see the following output:

:::image type="content" source="./assets/images/Tab-ME-SSO/hello-megan-profile-1.png" alt-text= "Screenshot of the selected profile.":::

1. Send `https://profile.botframework.com` to the application to get a profile card.

:::image type="content" source="./assets/images/Tab-ME-SSO/profile-card-1.png" alt-text= "Screenshot of the selected profile after entering the URL.":::

## Complete challenge

Did you come up with output like this?

:::image type="content" source="./assets/images/Tab-ME-SSO//hello-megan-profile245-1.png" alt-text="Screenshot of the output after you have successfully completed the step-by-step guide.":::

You've completed the tutorial to get started with SSO for tab and message extension app.
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ ms.localizationpriority: high
ms.date: 01/17/2023
ms.owner: ryanbliss
---

# Enable SSO for tab app

With single sign-on (SSO) in Teams, app users have the advantage of using Teams to access tab apps. After logging in to Teams using Microsoft or Microsoft 365 account, app users can use your app without the need to sign in again. Your app is available to app users on any device with the access granted through Microsoft Entra ID.
Expand Down