| Service | Microsoft Docs article | Related commit history on GitHub | Change details |
|---|---|---|---|
| platform | Teams Apps In Meetings | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/apps-in-teams-meetings/teams-apps-in-meetings.md | Meetings enable collaboration, partnership, informed communication, and shared f <br> You can create scenes for meetings, provide notifications to users, populate in-meeting dialogs, and more with meeting app extensibility. - Custom apps built for your org (LOB apps) built for meetings and calls are available in Government Community Cloud (GCC), GCC-High, and Department of Defense (DOD) environments. Third-party apps built for meetings and calls are available in Government Community Cloud (GCC) but aren't available for GCC-High and Department of Defense (DOD) tenants. For more information, see [roles in a Teams meeting](https://support.microsoft.c * [Meeting apps APIs](meeting-apps-apis.md) * [Enhanced collaboration with Live Share SDK](teams-live-share-overview.md) * [Instrumenting for Teams app specific analytics](../concepts/design/overview-analytics.md#instrumenting-for-teams-app-specific-analytics)+* [Integrate Teams meetings and calls in external apps](../get-started/b2c-apps.md) |
| platform | Add Default Install Scope | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/concepts/deploy-and-publish/add-default-install-scope.md | To configure details in app manifest: ## Block apps by default for users until an admin approves -To enhance Teams app experience, you can block an app for users by default until admin allows the app. For example, consider a help desk app created by Contoso Electronics for Teams. To ensure the app functions properly, Contoso Electronics wants customers to configure specific properties of the app first. The app is blocked by default and is available to users only after an admin allows it. +To enhance the user experience of a Teams app, at times, IT administrators must intervene before users use the app. For example, consider a help desk app created by Contoso Electronics for Teams. To ensure the app functions properly, Contoso Electronics wants customers to configure specific properties of the app first. -To block the app by default, set the `defaultBlockUntilAdminAction` property to `true` in the app manifest file. When the property is set to `true`, the status of the app in Teams admin center is **Blocked by publisher** in the [Manage apps](https://admin.teams.microsoft.com/policies/manage-apps) page. +To ensure that IT admins perform the relevant tasks, developers can block an app for users until an admin allows the app. To block the app by default, set the `defaultBlockUntilAdminAction` property to `true` in the app manifest file. When the property is set to `true`, the status of the app in Teams admin center is **Blocked by publisher** in the [Manage apps](https://admin.teams.microsoft.com/policies/manage-apps) page. :::image type="content" source="../../assets/images/manage-apps-status.png" alt-text="Screenshot shows an app blocked by publisher." lightbox="../../assets/images/manage-apps-status-expanded.png"::: -The admin gets a request to take action before a user can access the app. In the **[Manage apps](https://admin.teams.microsoft.com/policies/manage-apps)** page in Teams admin center, an admin can select **Allow** to allow the app with **Blocked by publisher** status. +The admins can do their due diligence about your app and they can read the [app documentation that you provide]() before they allow their users to use your app. For example, the admins can purchase the required licenses and distribute the licenses before allowing users to use the app. To allow the app with **Blocked by publisher** status, an admin can select **Allow** in the **[Manage apps](https://admin.teams.microsoft.com/policies/manage-apps)** page in Teams admin center. :::image type="content" source="../../assets/images/manage-apps-allow.png" alt-text="Screenshot shows the Allow option for the app blocked by publisher." lightbox="../../assets/images/manage-apps-allow-expanded.png"::: -If by default, you don't want the app to be hidden, you can update the `defaultBlockUntilAdminAction` property to `false`. When the new version of the app is approved, by default the app is allowed as long as the admin hasn't taken any explicit action. +If you don't want your app to be blocked by default, update the `defaultBlockUntilAdminAction` setting to `false` and submit your updated app for publishing. After we publish the new version of your app, it's allowed by default. > [!NOTE]-For custom apps built for your org, `defaultBlockUntilAdminAction` isn't supported. If you upload a custom app built for your organization with this property, the app isn't blocked. +> For custom apps built for your org, `defaultBlockUntilAdminAction` isn't supported. If you upload a custom app built for your organization with this property, the app isn't blocked. ## Next step |
| platform | B2c Apps | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/get-started/b2c-apps.md | + + Title: Integrate Teams meetings and calls in an external app +description: In this module, learn how to integrate Teams meetings and calls in an external business-to-consumer (B2C) app. +ms.localizationpriority: high Last updated : 03/01/2024++++# Integrate Teams meetings and calls in external apps ++Microsoft Teams provides built-in business-to-consumer (B2C) communication functionality. For example, bank mortgage officers can conduct virtual appointments with customers using Teams meetings. ++Customers can join the meeting in the following ways: ++* Use Teams native apps or Teams web client. +* Dial the meetingΓÇÖs telephone number. +* Use custom apps that work with Teams calling and meetings. ++Integrating Teams interoperability into your customer-facing web or native app enables customized user experiences. You can build a web app compatible with mobile and desktop, or create native apps for iOS, Android, and Windows. This integration maintains the advantages of using Teams for employee interactions. These interactions can include employee familiarity, Teams copilot features, expandability with Teams apps and bots, and adherence to Microsoft 365 security and compliance. ++Custom web and native apps can interact with two types of Teams B2C experiences: virtual appointments and contact center. ++The following image shows an example of how you can integrate the Teams interoperable meeting and calling experience into your web or native app: +++## Virtual appointments ++Virtual appointments are organized meetings between a customer and a business at a set time. The distinct separation between the customer and the business, along with the scheduled aspect of the interaction, are fundamental characteristics of most virtual appointments. ++For example, various industries use virtual appointments such as meetings with healthcare professionals, loan officers, or product support technicians. ++To build a virtual appointments app, follow these steps: ++1. Build a communication management service function using Graph [onlineMeeting APIs](/graph/api/resources/onlinemeeting). This function handles scheduling the meeting and setting options such as recording availability. +1. Integrate Azure Communication Services Calling and Chat into your web or native app. For more information, see [Telephony concepts](/azure/communication-services/concepts/telephony/telephony-concept) and [Chat concepts](/azure/communication-services/concepts/chat/concepts). +1. Configure the communication management service to share the Teams meeting metadata with the client app. ++[Azure Communication Services client libraries](/azure/communication-services/concepts/sdk-options) are available for various platforms and languages, such as web client (JavaScript), iOS (Swift), Android (Java), Windows (.NET). The client libraries support both mobile and desktop web clients. ++You can use open-source [UI library](/azure/communication-services/concepts/ui-library/ui-library-overview) to develop web, iOS, and Android apps. Azure Communication Services is identity-agnostic, and you can control how to identify and authenticate end users. ++For more information and quickstarts, see: ++* [Concept: Virtual visit apps with Azure Communication Services](/azure/communication-services/tutorials/virtual-visits) +* [Concept: Azure & Teams interoperability](/azure/communication-services/concepts/interop/guest/overview) +* [Azure Architecture Guide for joining a Teams meeting](/azure/architecture/guide/mobile/azure-communication-services-architecture#microsoft-365-and-teams) +* [Azure Sample Builder for joining a Teams meeting](https://aka.ms/acs-sample-builder) +* [Quickstart: Join a Teams meeting as an external user](/azure/communication-services/quickstarts/voice-video-calling/get-started-teams-interop?pivots=platform-android) ++## Contact center ++Contact center apps focus on unscheduled communication between consumers and agents. The unscheduled nature of the interaction is a key attribute of contact center apps. The contact center captures a large family of apps diverse across the following: ++* **Scale:** Small businesses might have few employees operating as agents in a limited role, such as a restaurant providing a contact number for booking reservations. An airline might employ thousands of staff and vendors providing a 24/7 contact center. +* **Channel:** Organizations can engage with consumers through the telephone system, apps, short message service (SMS), or consumer communication platforms. +* **Organizational approach:** Most businesses have employees operate as agents who use Teams or licensed Contact Center as a Service (CCaaS) software. Alternatively, other businesses might outsource the agent role or use specialized service providers who fully operate contact centers. ++To build a contact center app, follow these steps: ++1. [Plan and configure Teams Auto attendants and Call queues](/microsoftteams/plan-auto-attendant-call-queue). +1. Build a communication management service function using Graph APIs to retrieve metadata for Auto attendants and Call queues. +1. Integrate Azure Communication Services Calling and Chat into your web or native app. For more information, see [Telephony concepts](/azure/communication-services/concepts/telephony/telephony-concept) and [Chat concepts](/azure/communication-services/concepts/chat/concepts). +1. Configure the communication management service to share the Teams Auto attendant or Call queue metadata to the client app. ++The Azure Communication Services [UI library](/azure/communication-services/concepts/ui-library/ui-library-overview) includes [a Call composite](https://azure.github.io/communication-ui-library/?path=/docs/composites-call-basicexample--basic-example) that enables rapid and straightforward integration of these unscheduled calling experiences into mobile and desktop web clients. ++For more information and quickstarts, see: ++* [Concept: Contact Center apps with Azure Communication Services](/azure/communication-services/tutorials/contact-center) +* [Quickstart: Join your calling app to a Teams call queue](/azure/communication-services/quickstarts/voice-video-calling/get-started-teams-call-queue) +* [Quickstart: Teams auto attendant on Azure Communication Services](/azure/communication-services/quickstarts/voice-video-calling/get-started-teams-auto-attendant) |
| platform | Build Api Based Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/build-api-based-message-extension.md | To enable `microsoftEntra` authentication method for API-based message extension The **Register an application** page appears. -4. Enter the name of your app that you want to be displayed to the app user. You can change the name at a later stage, if you want to. +4. Enter the name of your app that you want to be displayed to the app user. You can change the name at a later stage if you want to. :::image type="content" source="../assets/images/authentication/teams-sso-tabs/register-app.png" alt-text="App registration page on Microsoft Entra admin center."::: To enable `microsoftEntra` authentication method for API-based message extension 8. Note and save the app ID from **Application (client) ID** to update the app manifest later. - Your app is registered in Microsoft Entra ID. You now have app ID for your API-based message extension app. + Your app is registered in Microsoft Entra ID. You now have the app ID for your API-based message extension app. ### Configure scope for access token After you've created a new app registration, configure scope (permission) option To configure scope and authorize trusted client applications, you need: * [Add Application ID URI](#application-id-uri): Configure scope (permission) options for your app. Expose a web API and configure the application ID URI.-* [Configure API scope](#configure-api-scope): Define scope for the API, and the users who can consent for a scope. You can let only admins provide consent for higher-privileged permissions. -* [Configure authorized client application](#configure-authorized-client-application): Create authorized client IDs for applications that you want to preauthorize. It allows the app user to access the app scopes (permissions) you've configured, without requiring any further consent. Preauthorize only those client applications you trust as your app users won't have the opportunity to decline consent. +* [Configure API scope](#configure-api-scope): Define scope for the API, and the users who can consent for a scope. You can only let admins provide consent for higher-privileged permissions. +* [Configure authorized client application](#configure-authorized-client-application): Create authorized client IDs for applications that you want to preauthorize. It allows the app user to access the app scopes (permissions) you've configured, without requiring any further consent. Preauthorize only those client applications you trust as your app users don't have the opportunity to decline consent. #### Application ID URI To configure scope and authorize trusted client applications, you need: > | If base resource name used is | URL will be... | Format is supported on... | > | | | | > | *demoapplication* | `https://demoapplication.example.net` | All platforms.|- > | *DemoApplication* | `https://DemoApplication.example.net` | Desktop, web, and iOS only. It isn't supported in Android. | + > | *DemoApplication* | `https://DemoApplication.example.net` | Desktop, web, and iOS only. It isn't supported on Android. | >- > Use the lower case option *demoapplication* as base resource name. + > Use the lower-case option *demoapplication* as base resource name. 1. Select **Save**. After the API-based message extension gets a request header with token, perform * **Use the token**: Extract the user information from the token, such as name, email, and object ID and use the token to call the message extension app's own API. > [!NOTE]- > The API receives an Microsoft Entra token with the scope set to `access_as_user` as registered in the Azure portal. However, the token isn't authorized to call any other downstream APIs, such as Microsoft Graph. + > The API receives a Microsoft Entra token with the scope set to `access_as_user` as registered in the Azure portal. However, the token isn't authorized to call any other downstream APIs, such as Microsoft Graph. </details> <br/> After the API-based message extension gets a request header with token, perform * A 400 Bad Request error might occur if a request parameter is missing or incorrectly formatted. * A 401 Unauthorized or 403 Forbidden error suggests issues with the API key, such as it being missing or unauthorized.- * A 500 Internal Server Error indicates that the service doesn't know how to respond, possibly due to a server-side issue. + * A 500 Internal Server Error indicates that the service doesn't know how to respond, due to a server-side issue. * **Troubleshooting with Tools**: If the information from the network trace is insufficient, you can construct a request following the OpenAPI description document and use tools like Swagger Editor or Postman to test the request, including the authorization header for the API key if necessary. |
| platform | Create Api Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/create-api-message-extension.md | Title: Create API-based message extension -description: Learn how to create an API message extension using Teams Visual Studio, Visual Studio Code, and Teams Toolkit. +description: Learn how to create or build an API-based message extension using Teams Toolkit for Visual Studio, Visual Studio Code, and CLI. ms.localizationpriority: medium |
| platform | High Quality Message Extension | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/messaging-extensions/high-quality-message-extension.md | Command description maps user intent and utterance to search command inside a pl #### Semantic description -The [semanticDescription](../resources/schem#composeextensionscommands) property is used to provide a detailed description of a command for Microsoft Copilot. Semantic description for commands supports up to 5,000 characters and isn't displayed in the user interface. If the `semanticDescription` property is left empty, Microsoft Copilot uses the information in the `description` field. When writing a `semanticDescription`, you must include information about expected values, limits, and ranges for the command. +The [semanticDescription](../resources/schem#composeextensionscommands) property is used to provide a detailed description of a command for Copilot for Microsoft 365. Semantic description for commands supports up to 5,000 characters and isn't displayed in the user interface. If the `semanticDescription` property is left empty, Copilot for Microsoft 365 uses the information in the `description` field. When writing a `semanticDescription`, you must include information about expected values, limits, and ranges for the command. The `semanticDescription` property isn't a mandatory field. However, if you add `semanticDescription` in app manifest, the existing validation checks for short, parameter, and command descriptions are also applicable for semantic descriptions. The following table lists the command and semantic description examples for each ### Parameter description -Each message extension command supports up to five parameters and first parameter must be visible in the message extension search bar. A parameter must have a good description, which must contain a combination of acceptable parameters, enums, acronyms, and output format. +Each message extension command supports has a corresponding `parameters' property which supports up to five parameters and the first parameter must be visible in the message extension search bar. A parameter must have a good description, which must contain a combination of acceptable parameters, enums, acronyms, and output format. The [semanticDescription](../resources/schem#composeextensionscommands) property is used to provide a detailed description of a command for Microsoft Copilot. Semantic description for parameters supports up to 2,000 characters and isn't displayed in the user interface. If the `semanticDescription` property is left empty, Copilot uses the information in the `description` field. When writing a `semanticDescription`, you must include information about expected values, limits, and ranges for the command. For M365 Chat, a search-based message extension must support more than three uni * Update your web service to support search based on multiple parameters. For more information on how to respond to user requests, see [Respond to search command](how-to/search-commands/respond-to-search.md). * Copilot for Microsoft 365 might pass an empty string or null value for parameters, which aren't part of user utterance, update your web service to handle the parameters. +* A message extension supports upto 10 commands (9 usable) and each command has a corresponding `parameters` property which supports up to 5 parameters. + <br> <details><summary>The following code is an example of multiple parameters defined in app manifest:</summary> The search parameters must have good descriptions with acceptable parameters, en ## Sample prompts -The [`samplePrompts`](../resources/schem#composeextensionscommands) property guides users on how to use the various plugins within Copilot. The prompts must be adaptable to different locales and clear across different commands. Sample prompts are available in the following areas within Copilot for Microsoft 365: +The [`samplePrompts`](../resources/schem#composeextensionscommands) property guides users on how to use the various plugins within Copilot. Copilot uses the sample prompts to display the prompts for the user. The prompts must be adaptable to different locales and clear across different commands. Sample prompts are available in the following areas within Copilot for Microsoft 365: * First Run Experience (FRE): When a user first installs or enables a plugin. * Prompt library or Copilot Lab: When a user seeks help with prompts. We recommend you to follow these guidelines to increase the chances of your app The following code is an example of the `samplePrompts` property in app manifest: ```json-composeExtensions": [ - { - "canUpdateConfiguration": true, - "botId": "bxxxxxx5-xxxx-xxxx-xxxx-4xxxxxx16599", - "commands": [ - { - "id": "orders", - "title": "Orders", - "context": [ - "Commandbox", - "Compose" - ], - "description": "Search for orders", - "semanticDescription": "Search for orders", - "samplePrompts": [ - { "text": "Search for all orders" }, -- { "text": "Search for orders related to Contoso" }, - { "text": "Search for all pending orders" }, - { "text": "Search for all completed ordered for Fabrikam" } - ], - // ... - }, - // ... - ] - } +"composeExtensions": [ + { + "canUpdateConfiguration": true, + "botId": "bxxxxxx5-xxxx-xxxx-xxxx-4xxxxxx16599", + "commands": [ + { + "id": "orders", + "title": "Orders", + "context": [ + "Commandbox", + "Compose" + ], + "description": "Search for orders", + "semanticDescription": "Search for orders", + "samplePrompts": [ + { + "text": "Search for all orders" + }, + { + "text": "Search for orders related to Contoso" + }, + { + "text": "Search for all pending orders" + }, + { + "text": "Search for all completed ordered for Fabrikam" + } + ] + } + ] + } +] ``` ## Adaptive Card response |
| platform | Promote App Adoption | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/promote-app-adoption.md | Admins can set up an app governance process that manages your organization's IT ## Understand how you can drive app adoption -By following these five easy steps, you make it easy for your customers to adopt apps within their organizations. +You can help your customers to adopt apps within their organizations by following these steps. :::row::: :::column span="1"::: |
| platform | Manifest Schema Dev Preview | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema-dev-preview.md | Each command item is an object with the following structure: |||||| |`id`|String|64 characters|✔️|The ID for the command.| |`type`|String|64 characters||Type of the command. One of `query` or `action`. Default: `query`|-|`samplePrompts`|array|5 |No|Property used to provide sample prompts supported by the plugin.| +|`samplePrompts`|array|5 |No|Property used by Copilot to display prompts supported by the plugin to the user.| |`samplePrompts.text`|string|128 characters|✔️|Content of the sample prompt.| |`apiResponseRenderingTemplateFile`|String|2048 characters||A relative file path for api [response rendering template](https://developer.microsoft.com/json-schemas/teams/vDevPreview/MicrosoftTeams.ResponseRenderingTemplate.schema.json) file used to format the JSON response from developer’s API to Adaptive Card response.| |`context`|Array of Strings|3 characters||Defines where the message extension can be invoked from. Any combination of `compose`, `commandBox`, `message`. <br>Default values: `compose, commandBox`| |`title`|String|32 characters|✔️|The user-friendly command name.| |`description`|String|128 characters||The description that appears to users to indicate the purpose of this command.|-|`semanticDescription`|String|5000 characters||Semantic description of the command for consumption by the large language model.| +|`semanticDescription`|String|5000 characters||Semantic description of the command for consumption by Copilot using large language model (LLM).| |`initialRun`|Boolean|||A Boolean value that indicates whether the command runs initially with no parameters. <br>Default value: `false`| |`fetchTask`|Boolean|||A Boolean value that indicates if it must fetch the dialog dynamically.| |`taskInfo`|Object|||Specify the dialog to preload when using a message extension command.| |
| platform | Manifest Schema | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/resources/schema/manifest-schema.md | Your message extension must declare one or more commands with a maximum of 10 co Each command item is an object with the following structure: -|Name| Type| Maximum size | Required | Description| +|Name| Type| Maximum size | Required | Description| Copilot to show user prompts to start with |||||| |`id`|String|64 characters|✔️|The ID for the command.| |`type`|String|||Type of the command. One of `query` or `action`. Default: **query**.|-|`samplePrompts`|array|5 |No|Property used to provide sample prompts supported by the plugin.| +|`samplePrompts`|array|5 |No|Property used by Copilot to display prompts supported by the plugin to the user.| |`samplePrompts.text`|string|128 characters|✔️|Content of the sample prompt.| |`apiResponseRenderingTemplateFile`|String|2048 characters||A relative file path for api [response rendering template](https://developer.microsoft.com/json-schemas/teams/vDevPreview/MicrosoftTeams.ResponseRenderingTemplate.schema.json) file used to format the JSON response from developer’s API to Adaptive Card response.| |`context`|Array of Strings|3 characters||Defines where the message extension can be invoked from. Any combination of `compose`, `commandBox`, `message`. <br>Default values: `compose, commandBox`| |`title`|String|32 characters|✔️|The user-friendly command name.| |`description`|String|128 characters||The description that appears to users to indicate the purpose of this command.|-|`semanticDescription`|String|5000 characters||Semantic description of the command for consumption by the large language model.| +|`semanticDescription`|String|5000 characters||Semantic description of the command for consumption by Copilot using large language model (LLM).| |`initialRun`|Boolean|||A Boolean value indicates whether the command runs initially with no parameters. Default is **false**.| |`fetchTask`|Boolean|||A Boolean value that indicates if it must fetch the dialog (referred as task module in TeamsJS v1.x) dynamically. Default is **false**.| |`taskInfo`|Object|||Specify the dialog to pre-load when using a message extension command.| Each command item is an object with the following structure: |`parameter.name`|String|64 characters|✔️|The name of the parameter as it appears in the client. The parameter name is included in the user request.| |`parameter.title`|String|32 characters|✔️|User-friendly title for the parameter.| |`parameter.description`|String|128 characters||User-friendly string that describes this parameter’s purpose.|-|`parameter.semanticDescription`|String|2000 characters||Semantic description of the parameter for consumption by the large language model.| +|`parameter.semanticDescription`|String|2000 characters||Semantic description of the parameter for consumption by Copilot using large language model (LLM).| |`parameter.value`|String|512 characters||Initial value for the parameter. Currently the value isn't supported| |`parameter.inputType`|String|||Defines the type of control displayed on a dialog for`fetchTask: false` . Input value can only be one of `text, textarea, number, date, time, toggle, choiceset` .| |`parameter.choices`|Array of objects|10 items||The choice options for the`choiceset`. Use only when`parameter.inputType` is `choiceset`.| |
| platform | Auth Oauth Provider | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/authentication/auth-oauth-provider.md | The following image provides the flow to add authentication to external browsers 1. Initiate the external auth-login process. The third-party app calls the TeamsJS function `authentication.authenticate` with `isExternal` set as true to initiate the external auth-login process. - The passed `url` contains placeholders for `{authId}`, and `{oauthRedirectMethod}`. + The passed `url` contains placeholders for `{authId}`, `{oauthRedirectMethod}`, and `{hostRedirectUrl}`. ```JavaScript authentication.authenticate({- url: `${window.location.origin}/auth-start?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}&hostRedirectUrl=${url}&googleId=${googleId}`, + url: `${window.location.origin}/auth-start?oauthRedirectMethod={oauthRedirectMethod}&authId={authId}&hostRedirectUrl={hostRedirectUrl}&googleId=${googleId}`, isExternal: true }).then((result) => { this.getGoogleServerSideToken(result); The following image provides the flow to add authentication to external browsers }) ``` -1. The Teams clients open the URL in an external browser after automatically replacing the placeholders for `oauthRedirectMethod` and `authId` with suitable values. +1. The Teams clients open the URL in an external browser after automatically replacing the placeholders for `oauthRedirectMethod`, `authId`, and `hostRedirectUrl` with suitable values. **Example** ```http- https://3p.app.server/auth?oauthRedirectMethod=deeplink&authId=1234567890 + https://3p.app.server/auth?oauthRedirectMethod=deeplink&authId=1234567890&hostRedirectUrl=msteams://teams.microsoft.com/l/auth-callback?authId=1234567890&result={result} ``` -1. The third-party app server responds. The third-party app server receives and saves the `url` with the following two query parameters: +1. The third-party app server responds. The third-party app server receives and saves the `url` with the following three query parameters: | Parameter | Description| | | |- | `oauthRedirectMethod` |Indicates how the third-party app must send the response of authentication request back to Teams, with one of the two values: deep link or page.| - |`authId` | The request-id Teams creates for this specific authentication request that needs to be sent back to Teams through a deep link.| + | `oauthRedirectMethod` |Indicates how the third-party app must send the response of authentication request back to the client, with one of the two values: deep link or page.| + |`authId` |The request-id Teams creates for this specific authentication request that needs to be sent back to the client through a deep link.| + |`hostRedirectUrl` | The deep link includes the URL schema of the initiating client to redirect after the authentication. | > [!TIP]- > The app can marshal `authId`, `oauthRedirectMethod` in the OAuth `state` query parameter while generating the login URL for the OAuthProvider. The `state` contains the passed `authId` and `oauthRedirectMethod`, when OAuthProvider redirects back to the server and the app uses the values for sending authentication response back to Teams as described in step 6. + > The app can marshal `authId`, `oauthRedirectMethod`, and `hostRedirectUrl` in the OAuth `state` query parameter while generating the login URL for the OAuthProvider. The `state` contains the passed `authId`, `oauthRedirectMethod`, and `hostRedirectUrl`, when OAuthProvider redirects to the server and the app uses the values for sending authentication response back to the initiating client as described in step 6. 1. The third-party app server redirects to specified `url`. The third-party app server redirects to OAuth providers auth page in the external browser. The `redirect_uri` is a dedicated route on the app server. You can register `redirect_uri` in the OAuth provider’s dev console as static, the parameters need to be sent through the state object. **Example** ```http- https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https://3p.app.server/authredirect&state={"authId":"…","oauthRedirectMethod":"…"}&client_id=… &response_type=code&access_type=offline&scope= … + https://accounts.google.com/o/oauth2/v2/auth?redirect_uri=https://3p.app.server/authredirect&state={"authId":"…","oauthRedirectMethod":"…","hostRedirectUrl":"_"}&client_id=… &response_type=code&access_type=offline&scope= … ``` 1. Sign in to external browser. The OAuth providers redirect back to the `redirect_uri` with the auth code and the state object. The following image provides the flow to add authentication to external browsers 1. The third-party app server handles the response and checks `oauthRedirectMethod`, which is returned from external OAuth provider in the state object to determine whether the response needs to be returned through the auth-callback deep link or through web page that calls `notifySuccess()`. ```JavaScript- const state = JSON.parse(req.query.state) if (state.oauthRedirectMethod === 'deeplink') {- return res.redirect('msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&result=${req.query.code}') + const clientRedirectUrl: string = state.hostRedirectUrl.replace('{result}', req.query.code) + return res.redirect(clientRedirectUrl) } else { // continue redirecting to a web-page that will call notifySuccess() – usually this method is used in Teams-Web … ``` -1. The third-party app generates a deep link for Teams mobile in the following format, and sends the auth code with the session ID back to Teams. + For example, in Teams mobile client, the modified `hostRedirectUrl` results the following: ```JavaScript return res.redirect(`msteams://teams.microsoft.com/l/auth-callback?authId=${state.authId}&result=${req.query.code}`) ``` + The provided value of `hostRedirectUrl` depends on the client that initiates the external authentication flow. + 1. Teams calls the success callback and sends the result (auth code) to the third-party app. The app receives the code in the success callback and uses the code to retrieve the token, then the user information and update the user interface. ```JavaScript |
| platform | Developer Tools | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/developer-tools.md | Last updated 08/29/2022 # DevTools for Microsoft Teams tabs -When Teams is running in a browser, it's easy to access the browser's DevTools: F12 on Windows or Command-Option-I on MacOS. The DevTools gives you access to: +When Teams is running in a browser, it's easy to access the browser's DevTools: F12 on Windows or Command-Option-I on macOS. The DevTools gives you access to: 1. View console logs. 1. View or modify HTML, CSS, and network requests during runtime. While the web version and the desktop version of Teams are almost the same, ther :::image type="content" source="../../assets/images/dev-preview/devtools-right-click.png" alt-text="Screenshot shows the option to open DevTools from Windows desktop."::: - * On MacOS, select the Microsoft Teams icon in the Dock. + * On macOS, select the Microsoft Teams icon in the Dock. - :::image type="content" source="../../assets/images/dev-preview/mac-os-developer-tools.PNG" alt-text="Screenshot shows the option to open DevTools from MacOS dock."::: + :::image type="content" source="../../assets/images/dev-preview/mac-os-developer-tools.PNG" alt-text="Screenshot shows the option to open DevTools from macOS dock."::: The following example shows DevTools open and inspecting a tab configuration dialog: - :::image type="content" source="../../assets/images/dev-preview/tab-and-devtools.png" alt-text="Screenshot shows the Tab and DevTools." lightbox="../../assets/images/dev-preview/tab-and-devtools.png"::: + :::image type="content" source="../../assets/images/dev-preview/tab-and-devtools.png" alt-text="Screenshot shows the Tab and DevTools." lightbox="../../assets/images/dev-preview/tab-and-devtools.png"::: ## Access DevTools from an Android device You can also enable the DevTools from the Teams Android client. To enable DevTools, you must: +1. DevTools for Android is available only on the beta version of Teams app. To join the beta version of Teams app, follow the instructions listed in [Get beta versions of apps.](https://support.google.com/googleplay/answer/7003180?hl=en#:~:text=Get%20beta%20versions%20of%20apps) ++ :::image type="content" source="~/assets/images/tabs/android-beta-dev-tools.png" alt-text="Screenshot shows the option to join the beta."::: + 1. Enable the [developer preview](~/resources/dev-preview/developer-preview-intro.md). 1. Connect your device to your desktop computer, and set up your Android device for [remote debugging](https://developers.google.com/web/tools/chrome-devtools/remote-debugging/). 1. In your Chrome browser, open `chrome://inspect/#devices`. |
| platform | Using Teams Client Library | https://github.com/MicrosoftDocs/msteams-docs/commits/main/msteams-platform/tabs/how-to/using-teams-client-library.md | For more information regarding the authentication parameter, see [use external O #### Teams apps running across Microsoft 365 -Enabling an existing Teams app to run in Outlook and Microsoft 365 requires all of the following: +Following are the requirements to enable an existing Teams app to run in Outlook and Microsoft 365: -1. Dependency on TeamsJS version 2.x.x ( `@microsoft/teams-js@2.0.0`) or later, +1. Dependency on TeamsJS version 2.x.x ( `@microsoft/teams-js@2.0.0`) or later. -2. [Modifying existing application code](#2-update-teamsjs-references) according to the required changes described in this article, and +2. [Modify existing application code](#2-update-teamsjs-references) according to the required changes described in this article. -3. [Updating your app manifest](#3-update-the-app-manifest-optional) (previously called Teams app manifest) to version 1.13 or later. +3. [Update your app manifest](#3-update-the-app-manifest-optional) (previously called Teams app manifest) to version 1.13 or later. -For more info, see [Extend Teams apps across Microsoft 365](../../m365-apps/overview.md). +For more information, see [Extend Teams apps across Microsoft 365](../../m365-apps/overview.md). ### Callbacks converted to promises > [!NOTE] > The `getTabInstances` API isn't implemented on Teams mobile. -Teams APIs that previously took a callback parameter have been updated to return a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object. These include the following APIs: +Teams APIs that previously took a callback parameter are updated to return a JavaScript [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) object. These include the following APIs: ```js app.getContext, app.initialize, appInstallDialog.openAppInstallDialog, app.openLink, authentication.authenticate, authentication.getAuthToken, authentication.getUser, authentication.registerAuthenticationHandlers was removed to support using Promises, calendar.openCalendarItem, calendar.composeMeeting, call.startCall, chat.getChatMembers, conversations.openConversation, location.getLocation, location.showLocation, mail.openMailItem, mail.composeMail, pages.backStack.navigateBack, pages.navigateToTab, pages.tabs.getMruTabInstances, pages.tabs.getTabInstances, pages.getConfig, pages.config.setConfig, pages.backStack.navigateBack, people.selectPeople, teams.fullTrust.getConfigSetting, teams.fullTrust.joinedTeams.getUserJoinedTeams async function example() { } ``` - > [!TIP] The `pages` namespace includes functionality for running and navigating webpages ##### *dialog* namespace +> [!NOTE] +> The `window.alert`, `window.confirm`, and `window.prompt` APIs used to display a dialog aren't supported in the new Teams Client. We recommended you to render a dialog within your own frame, for example, using the [Fluent V9 dialog](https://react.fluentui.dev/?path=/docs/components-dialog--default) or use the Microsoft Teams JavaScript client library (TeamsJS) to display a [Teams dialog](~/tabs/what-are-tabs.md) using Adaptive Card or a nested `<iframe>`. + The TeamsJS *tasks* namespace is renamed to *dialog*, and the following APIs are renamed: | Original namespace `tasks` | New namespace `dialog` | Additionally, this capability is split into two main subcapabilities, `dialog.ur ##### *teamsCore* namespace -To generalize the TeamsJS library to run other Microsoft 365 hosts such as Microsoft 365 app and Outlook, Teams-specific functionality (originally in the *global* namespace) has been moved to a *teamsCore* namespace: +To generalize the TeamsJS library to run other Microsoft 365 hosts such as Microsoft 365 app and Outlook, Teams-specific functionality (originally in the *global* namespace) is moved to a *teamsCore* namespace: | Original namespace `global (window)` | New namespace `teamsCore` | | - | - | To generalize the TeamsJS library to run other Microsoft 365 hosts such as Micro #### Updates to the *Context* interface -The `Context` interface has been moved to the `app` namespace and updated to group similar properties for better scalability as it runs in Outlook and Microsoft 365 app, in addition to Teams. +The `Context` interface is moved to the `app` namespace and updated to group similar properties for better scalability as it runs in Outlook and Microsoft 365 app, in addition to Teams. A new property `app.Context.app.host.name` is added to enable tabs to differentiate user experience depending on the host application. To run in Outlook and Microsoft 365 app, your app needs to depend on the [npm pa After completion, the utility will have updated your `package.json` file with the TeamsJS version 2.x.x (`@microsoft/teams-js@2.0.0` or later) dependency, and your `*.js/.ts` and `*.jsx/.tsx` files will be updated with: > [!div class="checklist"]+> > * `package.json` references to TeamsJS version 2.x.x > * Import statements for TeamsJS version 2.x.x > * [Function, Enum, and Interface calls](#apis-organized-into-capabilities) to TeamsJS version 2.x.x Open your app manifest and update the `$schema` and `manifestVersion` with the f } ``` - If you used Teams Toolkit to create your personal app, you can also use it to validate the changes to your app manifest file and identify any errors. Open the command palette `Ctrl+Shift+P` and find **Teams: Validate manifest file** or select the option from the Deployment menu of the Teams Toolkit (look for the Teams icon on the left side of Visual Studio Code). |