Skip to content

Latest commit

 

History

History

csharp

README.md

page_type description products languages extensions urlFragment
sample
This sample showcases how to implement Microsoft Entra ID and silent authentication in a configurable Teams tab, enabling secure access to user profile information.
office-teams
office
office-365
csharp
contentType createdDate
samples
03/20/2021 12:00:00 AM
officedev-microsoft-teams-samples-tab-channel-group-config-page-auth-csharp

Config Tab Authentication

Explore how to integrate Microsoft Entra ID and silent authentication in your Microsoft Teams tabs with this comprehensive sample application. The guide walks you through the necessary setup, including OAuth 2.0 implementation, app registration, and the configuration of user authentication flows, ensuring seamless access to Microsoft Graph user profile data.

Summary

There are many services that you may wish to consume inside your Teams app, and most of those services require authentication and authorization to get access to the service. Services include Facebook, Twitter, and of course Teams. Users of Teams have user profile information stored in Microsoft Entra ID using Microsoft Graph and this article will focus on authentication using Azure AD to get access to this information.

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 examples below use the OAuth 2.0 Implicit Grant flow with the goal of eventually reading the user's profile information from Azure AD and Microsoft Graph.

Interaction with app

Initial Config Page

Try it yourself - experience the App in your Microsoft Teams client

Please find below demo manifest which is deployed on Microsoft Azure and you can try it yourself by uploading the app manifest (.zip file link below) to your teams and/or as a personal app. (Sideloading must be enabled for your tenant, see steps here).

Config Tab Authentication: Manifest

Initiate Silent and Simple Authentication ConfigurableTab using Microsoft Entra ID

Authentication flow should be triggered by a user action. You should not open the authentication pop-up automatically because this is likely to trigger the browser's pop-up blocker as well as confuse the user.

Add a button to your configuration or content page to enable the user to sign in when needed. This can be done in the tab configuration page or any content page.

Azure AD, like most identity providers, does not allow its content to be placed in an iframe. This means that you will need to add a pop-up page to host the identity provider. In the following example this page is /tab-auth/simple-start. Use the microsoftTeams.authenticate() function of the Microsoft Teams client SDK to launch this page when your button is selected.

Pre-requisites

Run the app (Using Teams Toolkit for Visual Studio)

The simplest way to run this sample in Teams is to use Teams Toolkit for Visual Studio.

  1. Install Visual Studio 2022 Version 17.10 Preview 4 or higher Visual Studio
  2. Install Teams Toolkit for Visual Studio Teams Toolkit extension
  3. In the debug dropdown menu of Visual Studio, select Dev Tunnels > Create A Tunnel (set authentication type to Public) or select an existing public dev tunnel.
  4. In the debug dropdown menu of Visual Studio, select default startup project > Microsoft Teams (browser)
  5. In Visual Studio, right-click your TeamsApp project and Select Teams Toolkit > Prepare Teams App Dependencies
  6. Using the extension, sign in with your Microsoft 365 account where you have permissions to upload custom apps.
  7. Select Debug > Start Debugging or F5 to run the menu in Visual Studio.
  8. In the browser that launches, select the Add button to install the app to Teams.

If you do not have permission to upload custom apps (sideloading), Teams Toolkit will recommend creating and using a Microsoft 365 Developer Program account - a free program to get your own dev environment sandbox that includes Teams.

Setup

  1. Register a new application in the Microsoft Entra ID – App Registrations portal.

  • Your tab needs to run as a registered Azure AD application in order to obtain an access token from Azure AD. In this step you'll register the app in your tenant and give Teams permission to obtain access tokens on its behalf.

  • Create an Microsoft Entra ID application in Azure. You can do this by visiting the "Azure AD app registration" portal in Azure.

  • Set your application URI to the same URI you've created in the tunnelling application.

    • Ex: api://<your_tunnel_domain>/{appId} using the application ID that was assigned to your app

  • Setup a client secret. You will need this when you exchange the token for more API permissions from your backend.

    • Visit Manage > Certificates & secrets
    • Create a new client secret.

  • Setup your API permissions. This is what your application is allowed to request permission to access.

    • Visit Manage > API Permissions
    • Make sure you have the following Graph permissions enabled: email, offline_access, openid, profile, and User.Read.

  • Set Redirect URIs. Navigate to Authentication from left pane.

    • Click on Add Platform select Web.
    • Add URI as https://<>/SilentAuthEnd it will look like https://contoso.ngrok-free.app/SilentAuthEnd
    • Make sure to check Access tokens and ID tokens checkbox
    • Add one more URI as https://<>/SimpleAuthEnd
    • Again, Click on Add Platform and this time select Single-page application
    • Enter URI as https://<>/AuthEnd

Authentication Azure AD

  1. Setup NGROK

  • Run ngrok - point to port 3978

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

    Alternatively, you can also use the dev tunnels. Please follow Create and host a dev tunnel and host the tunnel with anonymous user access command as shown below:

    devtunnel host -p 3978 --allow-anonymous
  1. Setup for code

  • Clone the repository

    git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git

  • Update the appsettings.json configuration for the tab to use the <> get from the step 1 Mircosoft App Id in TabAuthentication folder update

  • If you are using Visual Studio

    • Launch Visual Studio
    • File -> Open -> Project/Solution
    • Navigate to tab-channel-group-config-page-auth folder
    • Select TabAuthentication.csproj file
    • Press F5 to run the project
  1. Setup Manifest for Teams

  • This step is specific to Teams.

    • Edit the manifest.json contained in the ./appPackage folder to replace your Microsoft App Id (that was created when you registered your app registration earlier) everywhere you see the place holder string {{Microsoft-App-Id}} (depending on the scenario the Microsoft App Id may occur multiple times in the manifest.json)
    • Edit the manifest.json for validDomains and replace {{domain-name}} with base Url of your domain. E.g. if you are using ngrok it would be https://1234.ngrok-free.app then your domain-name will be 1234.ngrok-free.app and if you are using dev tunnels then your domain will be like: 12345.devtunnels.ms.
    • Edit the manifest.json for webApplicationInfo resource "api://<<BASE-URI>>/<<YOUR-MICROSOFT-APP-ID>>" with MicrosoftAppId. E.g. ""api://1235.ngrok-free.app/0000000000-0000000-000000"".
      • Zip up the contents of the appPackage folder to create a manifest.zip (Make sure that zip file does not contains any subfolder otherwise you will get error while uploading your .zip package)

  • Upload the manifest.zip to Teams (in the Apps view click "Upload a custom app")

    • Go to Microsoft Teams. From the lower left corner, select Apps
    • From the lower left corner, choose Upload a custom App
    • Go to your project directory, the ./appPackage folder, select the zip folder, and choose Open.
    • Select Add in the pop-up dialog box. Your app is uploaded to Teams.
  1. Run your tab, either from Visual Studio with F5 or using dotnet run in the appropriate folder.

Running the sample

Initial Config Page

Simple SignIn

Silent SignIn

Channel Tab

Further reading

Tab-Channel-Group-config-auth