Setting Up Single Sign-On (SSO) in Microsoft Teams App

Single Sign-On (SSO) is a critical feature in enterprise applications, allowing users to access multiple applications with a single set of credentials. When building apps for Microsoft Teams, integrating SSO can enhance user experience by seamlessly authenticating users through their existing Microsoft 365 credentials. In this blog, we'll walk through the process of setting up SSO in a Microsoft Teams app using Azure Active Directory (Azure AD) and the Microsoft Teams Toolkit.

Prerequisites

Before we begin, ensure you have the following:

1. Microsoft 365 Developer Account: This account will be used for testing and deploying your Teams app.
2. Azure Active Directory (Azure AD) Tenant: Your Teams app will leverage Azure AD for authentication.
3. Microsoft Teams Toolkit: Install the Teams Toolkit in Visual Studio Code to streamline the app development process.
4. Node.js and npm: These are required to run the Teams app locally.

Step 1: Create a Microsoft Teams App

1. Install the Teams Toolkit: Open Visual Studio Code, go to the Extensions view by clicking on the Extensions icon in the Sidebar, and search for "Teams Toolkit." Install the extension.
2. Create a New Teams App:

Step 2: Register the App in Azure AD

Go to the Azure Portal: Open the Azure Portal and navigate to "Azure Active Directory."

Register a New Application:

• Select "App registrations" and click on "New registration."
• Give your application a name (e.g., "Teams SSO App") and choose "Accounts in this organizational directory only" as the supported account type.
• Set the redirect URI to https://localhost:3000/auth-end, which is used for local development. This will be updated later for production.

Configure API Permissions:

• Go to the "API permissions" section of your app registration.
• Click on "Add a permission" and choose "Microsoft Graph."
• Select "Delegated permissions" and add permissions like User.Read to allow the app to access user profiles.

Generate Client Secret:

• In the "Certificates & secrets" section, generate a new client secret.
• Save the client secret value; you'll need it later to configure your app.

Set Up Redirect URIs:

• Go back to the "Authentication" section and add the redirect URI for your production environment.
• Ensure that "ID tokens" is checked under the "Implicit grant" section.

Step 3: Implement SSO in Your Teams App

Update the App Manifest:

• Open the manifest.json file in your project.
• Add the webApplicationInfo object with the following properties:

"webApplicationInfo": {
  "id": "<YOUR_CLIENT_ID>",
  "resource": "https://<YOUR_TENANT>.onmicrosoft.com/<YOUR_APP_ID>"
}        

• Replace <YOUR_CLIENT_ID> with the Application (client) ID from Azure AD and <YOUR_TENANT> with your Azure AD tenant name.

Install Necessary Packages:

In your project, run the following command to install the required packages:

npm install @azure/msal-browser @microsoft/teams-js        

Authenticate Users:

In your Teams app code, use the MSAL library to initiate the authentication flow. Here's a sample code snippet:

import * as msal from "@azure/msal-browser";
import * as microsoftTeams from "@microsoft/teams-js";

const msalConfig = {
  auth: {
    clientId: "<YOUR_CLIENT_ID>",
    authority: "https://login.microsoftonline.com/<YOUR_TENANT>",
    redirectUri: "https://<YOUR_DOMAIN>/auth-end"
  }
};

const msalInstance = new msal.PublicClientApplication(msalConfig);

microsoftTeams.initialize();

microsoftTeams.getContext(async (context) => {
  const account = msalInstance.getAllAccounts()[0];
  if (!account) {
    await msalInstance.loginPopup();
  }
});        

• Replace the placeholders with the appropriate values from your Azure AD registration.

Handle Authentication Tokens:

Once authenticated, you'll receive an ID token that you can use to access Microsoft Graph or other APIs.

Step 4: Test Your Teams App

Run Your App Locally:

• Use the Teams Toolkit to run your app locally.
• Open Microsoft Teams, sideload your app, and test the SSO functionality.
• Verify that users are authenticated without being prompted for credentials.

Deploy to Azure:

Once testing is complete, deploy your app to Azure and update the redirect URIs in Azure AD for production.

Step 5: Publish Your App to the Teams App Store

Package Your App:

• Use the Teams Toolkit to create a package for your app, including the manifest, icons, and other necessary files.

Submit for Approval:

• Submit your app to the Teams App Store for review.
• After approval, your app will be available for all users in your organization.

Setting Up SSO in Microsoft Teams App Using Okta

Integrating Single Sign-On (SSO) in a Microsoft Teams app with Okta involves configuring Okta as the identity provider (IdP) and setting up your Teams app to authenticate users via Okta. Here’s how you can do it:

Step 1: Create an Application in Okta

Log in to Okta: Sign in to your Okta Admin Console.

Create a New Application:

• Go to Applications > Applications and click on Create App Integration.
• Choose OIDC - OpenID Connect as the sign-in method and Web Application as the application type.
• Click Next.

Configure the App Integration:

• App Integration Name: Enter a name for your application (e.g., "Teams SSO App").
• Sign-in Redirect URIs: Add the following URIs:https://localhost:3000/auth-end (for local development)https://<YOUR_PRODUCTION_DOMAIN>/auth-end (for production)
• Sign-out Redirect URIs: (Optional) Add a URI where users are redirected after signing out.
• Assignments: Choose whether the app should be assigned to users or groups.
• Click Save.

Gather Configuration Details:

• Once the app is created, go to the General tab and note the Client ID and Client Secret.
• In the Okta API Scopes section, ensure the necessary scopes are enabled, such as openid and profile.
• You’ll also need the Issuer URI, found in the General tab (e.g., https://<YOUR_OKTA_DOMAIN>/oauth2/default).

Step 2: Register the App in Azure AD

You still need to register your app in Azure AD, but this time, it will be used in conjunction with Okta as the identity provider.

Go to the Azure Portal: Open the Azure Portal and navigate to Azure Active Directory.

Register a New Application:

• Select App registrations and click on New registration.
• Give your application a name and set the redirect URI to match what you configured in Okta.
• Save the registration details, including the Application (client) ID and Directory (tenant) ID.

Step 3: Configure the Teams App to Use Okta for Authentication

Update the App Manifest:

• Open the manifest.json file in your Teams app project.
• Add the webApplicationInfo object, replacing Azure AD-specific configurations with Okta details:

"webApplicationInfo": {
  "id": "<YOUR_AZURE_AD_CLIENT_ID>",
  "resource": "<YOUR_OKTA_ISSUER_URI>"
}        

• Replace <YOUR_AZURE_AD_CLIENT_ID> with the Azure AD Application ID and <YOUR_OKTA_ISSUER_URI> with the Okta Issuer URI.

Install Necessary Packages:

Ensure your project has the required dependencies:

npm install @okta/okta-auth-js @microsoft/teams-js        

Implement the Authentication Flow:

Use the Okta Auth SDK to handle the authentication flow. Below is a sample code snippet:

import { OktaAuth } from '@okta/okta-auth-js';
import * as microsoftTeams from "@microsoft/teams-js";

const oktaAuth = new OktaAuth({
  issuer: 'https://<YOUR_OKTA_DOMAIN>/oauth2/default',
  clientId: '<YOUR_OKTA_CLIENT_ID>',
  redirectUri: 'https://<YOUR_DOMAIN>/auth-end',
  scopes: ['openid', 'profile']
});

microsoftTeams.initialize();

microsoftTeams.getContext(async (context) => {
  const token = await oktaAuth.token.getWithRedirect({
    responseType: ['id_token'],
  });

  if (token) {
    // Process the token and continue with app logic
  }
});
        

Replace <YOUR_OKTA_DOMAIN>, <YOUR_OKTA_CLIENT_ID>, and <YOUR_DOMAIN> with your specific Okta and domain details.

Handle Authentication Tokens:

Once authenticated, the ID token returned by Okta can be used to access resources, including Microsoft Graph if integrated.

Step 4: Test Your Teams App

Run Your App Locally:

• Use the Teams Toolkit to run your app locally.
• Open Microsoft Teams, sideload your app, and test the SSO functionality.
• Verify that users can authenticate via Okta without being prompted for additional credentials.

Deploy to Production:

After successful local testing, update the redirect URIs in Okta and Azure AD for your production environment.

Using Okta as your SSO provider in a Microsoft Teams app enhances security and provides a seamless authentication experience across your enterprise applications. By following these steps, you can set up Okta as the identity provider for your Teams app, ensuring a smooth SSO implementation.

Nadir Riyani holds a Master's in Computer Application and brings 15 years of experience in the IT industry to his role as an Engineering Manager. With deep expertise in Microsoft technologies, Splunk, DevOps Automation, Database systems, and Cloud technologies? Nadir is a seasoned professional known for his technical acumen and leadership skills. He has published over 200 articles in public forums, sharing his knowledge and insights with the broader tech community. Nadir's extensive experience and contributions make him a respected figure in the IT world.