Microsoft Teams Integration
Microsoft Teams allows embedding web applications into its UI through a feature called Tabs. Jetveo Apps support this functionality, including embedding into Microsoft Outlook.
Creating the Teams App
Step 1: Enable Teams Integration
First, enable support for embedding the app into Microsoft Teams within the app instance settings.
Step 2: Create an Application Manifest
To create the Teams application manifest, use the Teams Developer Portal. This portal simplifies the process of building the app. The key requirement is to create a Personal App feature.
Go to https://dev.teams.microsoft.com/apps and create a new app.
In the newly created app page go through Basic information in Configure section and fill details. Optionally, define icon in Branding section. For single sign-on support, check detailed description below.
Navigate to the Features section and create a new Personal App:
In the Personal App detail page, define individual tabs. For each tab:
- Set the Content URL and Website URL to the Jetveo app URL.
- Select
personal
as scope - Choose
personalTab
as the context. This results in the app appearing in the main left-hand menu of Teams. - Save new tab configuration
To test your app, click the Preview in Teams button. This installs the app locally in your Teams for testing purposes.
Sample Manifest
For advanced scenarios, it is possible to manually create and upload the application manifest instead of using Teams Developer Portal. Below there is an example manifest.
{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.17/MicrosoftTeams.schema.json",
"version": "1.0.0",
"manifestVersion": "1.17",
"id": "<arbitrary autogenerated GUID>",
"name": {
"short": "Your App Name",
"full": "Your App Long Name"
},
"developer": {
"name": "Your organization name",
"mpnId": "",
"websiteUrl": "Your organization website",
"privacyUrl": "Privacy policy url",
"termsOfUseUrl": "Terms of use url"
},
"description": {
"short": "Short description of your app",
"full": "Long description of your app"
},
"icons": {
"outline": "outline.png",
"color": "color.png"
},
"accentColor": "#FFFFFF",
"staticTabs": [
{
"entityId": "<arbitrary autogenerated GUID>",
"name": "Title of the tab",
"contentUrl": "URL of the Jetveo app",
"websiteUrl": "URL of the Jetveo app",
"scopes": [
"personal"
],
"context": [
"personalTab"
]
},
{
"entityId": "about",
"scopes": [
"personal"
]
}
],
"validDomains": []
}
Validating and Publishing the Teams App
Before publishing, validate your app to identify any issues. This can be done using the App Validation feature in the Teams Developer Portal.
Your Teams app can be published either to your organization only, or to the public Teams Store. We will focus on publishing internal apps to your organization only.
To publish the app, choose Publish to org item in the left menu of the Developer Portal.
Approval process
After publishing, the app must be approved by your organization's administrator. This is done in the Teams Admin Center, Manage Apps.
Find submitted app by filtering the app list for Custom Apps under the App Type.
In the detail of the app, click Publish.
The app is now visible in Teams, section Apps > Built for your org. Click Open to open the app.
Note: Administrator can allow users to create or upload custom apps, as described here.
Single Sign-On (SSO)
To enable SSO for users accessing an app within Teams, you need to create an App Registration in Microsoft Entra Administration or update an existing app registration if you already have one for your app. This guide outlines the required steps. For further details, consult the official Microsoft documentation.
Create a New App Registration
Navigate to the Microsoft Entra portal and open the Applications > App Registrations section.
Click "New registration".
In the registration dialog:
- Enter a name for your application (1).
- If your app is intended for use within your organization only, select Accounts in this organizational directory only (your company only - Single tenant) under option (2). This is the typical choice.
- Since this is a background application, leave the Redirect URI field (3) empty.
Navigate to the newly created App Registration details page and note down the Application (Client) ID. This will be required in the next step.
Configure the App Registration
In the Expose an API section, create an Application ID URI as described here.
Use the format:
api://jetveo-app-domain.example.com/{Application-Client-ID}
Replacejetveo-app-domain.example.com
with real domain or your Jetveo App and{Application-Client-ID}
with the value noted in the previous step. This value will also be required for configuring your Teams app.Configure the API Scope in the same section as described here:
- Scope name:
access_as_user
- Consent: Admins and users
- Scope name:
Configure the Client Application in the same section as described here.
Add both Teams client IDs for Teams desktop, mobile, and Teams web. As of January 2025, these are:Microsoft 365 Client Application Client ID Teams desktop, mobile 1fec8e78-bce4-4aaf-ab1b-5451cc387264 Teams web 5e3ce6c0-2b1f-4285-8d4b-75ee78787346 Navigate to the Manifest section. Ensure you are editing the Microsoft Graph App Manifest (new) format. In the manifest, set
requestedAccessTokenVersion
to2
. Save the manifest.
Configure the Teams App
As a second step, update your Teams app according to the guidelines provided here. This process can be completed in the Teams App Developer Portal:
- Enter the App ID URI in the Single sign-on section.
- Enter the Application (Client) ID in the Basic information section:
After completing these steps, your Teams app manifest will include a webApplicationInfo
section with the following structure:
"webApplicationInfo": {
"id": "{Microsoft Entra AppId}",
"resource": "api://jetveo-app-domain.example.com/{Microsoft Entra AppId}"
}
This configuration enables SSO functionality for your Teams app, allowing users to seamlessly authenticate and access your application within the Teams environment.