Updates from: 03/05/2021 04:50:49
Service Microsoft Docs article Related commit history on GitHub Change details
platform Create Apps For Teams Meetings https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/apps-in-teams-meetings/create-apps-for-teams-meetings.md
export class MyBot extends TeamsActivityHandler {
# [JSON](#tab/json) ```http
-GET /v3/meetings/{meetingId}/participants/{participantId}?tenantId={tenantId}
+GET /v1/meetings/{meetingId}/participants/{participantId}?tenantId={tenantId}
``` The response body is:
The response body is:
#### Response codes
-* **403**: The app is not allowed to get participant information. This is the most common error response and is triggered if the app is not installed in the meeting. For example, if the app is disabled by tenant admin or blocked during live site migration.
+* **403**: The app is not allowed to get participant information. This is the most common error response and is triggered if the app is not installed in the meeting. For example, if the app is disabled by tenant admin or blocked during livesite mitigation.
* **200**: Participant information successfully retrieved. * **401**: Invalid token. * **404**: Participant cannot be found.
The response body is:
### NotificationSignal API
+All users in a meeting receive the notifications sent through the NotificationSignal API.
+ > [!NOTE]
+> Currently, sending targetted notifications is not supported.
> When an in-meeting dialog is invoked, the same content will also be presented as a chat message. #### Query parameters
The response body is:
#### Example
+The `Bot ID` is declared in the manifest and the bot receives a result object. In the following example, the `completionBotId` parameter of the `externalResourceUrl` is optional in the requested payload:
+ > [!NOTE]
->
-The `completionBotId` parameter of the `externalResourceUrl` is optional in the requested payload example. `Bot ID` is declared in the manifest and the bot receives a result object.
-> * The externalResourceUrl width and height parameters must be in pixels. Refer to the [design guidelines](design/designing-apps-in-meetings.md) to ensure the dimensions are within the allowed limits.
+> * The `externalResourceUrl` width and height parameters must be in pixels. To ensure the dimensions are within the allowed limits, see [design guidelines](design/designing-apps-in-meetings.md).
> * The URL is the page loaded as an `<iframe>` in the in-meeting dialog. The domain must be in the app's `validDomains` array in your app manifest. # [C#/.NET](#tab/dotnet)
POST /v3/conversations/{conversationId}/activities
#### Response Codes
-* **201**: activity with signal is successfully sent
-* **401**: invalid token
* **201**: Activity with signal is successfully sent. * **401**: Invalid token. * **403**: The app is unable to send the signal. This can happen due to various reasons such as the tenant admin disables the app, the app is blocked during live site migration, and so on. In this case, the payload contains a detailed error message.
-* **404**: Meeting chat doesn't exist.
+* **404**: Meeting chat does not exist.
## Enable your app for Teams meetings ### Update your app manifest
-The meetings app capabilities are declared in your app manifest via the **configurableTabs** -> **scopes** and **context** arrays. *Scope* defines to whom and *context* defines where your app will be available.
+The meetings app capabilities are declared in your app manifest through the **configurableTabs** -> **scopes** and **context** arrays. *Scope* defines to whom and *context* defines where your app will be available.
> [!NOTE] > Please use [Developer Preview manifest schema](../resources/schem) to try this in your app manifest.
platform Auth Aad Sso Bots https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/authentication/auth-aad-sso-bots.md
The response with the token is sent through an invoke activity with the same sch
The `turnContext.activity.value` is of type [TokenExchangeInvokeRequest](/dotnet/api/microsoft.bot.schema.tokenexchangeinvokerequest?view=botbuilder-dotnet-stable&preserve-view=true) and contains the token that can be further used by your bot. You must store the tokens for performance reasons and refresh them.
+### Token exchange failure
+
+In case of token exchange failure, use the following code:
+
+```json
+{ΓÇïΓÇï
+ "status": "<response code>",
+ "body":
+ {ΓÇïΓÇï
+ "id":"<unique Id>",
+ "connectionName": "<connection Name on the bot (from the OAuth card)>",
+ "failureDetail": "<failure reason if status code is not 200, null otherwise>"
+ }ΓÇïΓÇï
+}ΓÇïΓÇï
+```
+
+To understand what the bot does when the token exchange fails to trigger a consent prompt, see the following steps:
+
+>[!NOTE]
+> No user action is required to be taken as the bot takes the actions when the token exchange fails.
+
+1. The client starts a conversation with the bot triggering an OAuth scenario.
+2. The bot sends back an OAuth card to the client.
+3. The client intercepts the OAuth card before displaying it to the user and checks if it contains a `TokenExchangeResource` property.
+4. If the property exists, the client sends a `TokenExchangeInvokeRequest` to the bot. The client must have an exchangeable token for the user, which must be an Azure AD v2 token and whose audience must be the same as `TokenExchangeResource.Uri` property. The client sends an invoke activity to the bot with the following code:
+
+ ```json
+ {
+ "type": "Invoke",
+ "name": "signin/tokenExchange",
+ "value":
+ {
+ "id": "<any unique Id>",
+ "connectionName": "<connection Name on the skill bot (from the OAuth card)>",
+ "token": "<exchangeable token>"
+ }
+ }
+ ```
+
+5. The bot processes the `TokenExchangeInvokeRequest` and returns a `TokenExchangeInvokeResponse` back to the client. The client must wait till it receives the `TokenExchangeInvokeResponse`.
+
+ ```json
+ {
+ "status": "<response code>",
+ "body":
+ {
+ "id":"<unique Id>",
+ "connectionName": "<connection Name on the skill bot (from the OAuth card)>",
+ "failureDetail": "<failure reason if status code is not 200, null otherwise>"
+ }
+ }
+ ```
+
+6. If the `TokenExchangeInvokeResponse` has a `status` of `200`, then the client does not show the OAuth card. See the [normal flow image](/azure/bot-service/bot-builder-concept-sso?view=azure-bot-service-4.0#sso-components-interaction&preserve-view=true). For any other `status` or if the `TokenExchangeInvokeResponse` is not received, then the client shows the OAuth card to the user. See the [fallback flow image](/azure/bot-service/bot-builder-concept-sso?view=azure-bot-service-4.0#sso-components-interaction&preserve-view=true). This ensures that the SSO flow falls back to normal OAuthCard flow in case of any errors or unmet dependencies like user consent.
++ ### Update the auth sample Open [Teams auth sample](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/46.teams-auth) and then complete the following steps to update it:
Open [Teams auth sample](https://github.com/microsoft/BotBuilder-Samples/tree/ma
3. Update the manifest and ensure that `token.botframework.com` is in the valid domains list. For more information, see [Teams auth sample](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/46.teams-auth). 4. Zip the manifest with the profile images and install it in Teams.
-#### Additional code samples
-
-* [C# sample using the Bot Framework SDK](https://github.com/microsoft/BotBuilder-Samples/tree/main/experimental/teams-sso/csharp_dotnetcore).
+## Code sample
+|**Sample name** | **Description** |**.NET** |
+|-|--|--|
+|Bot framework SDK | Sample for using the bot framework SDK. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/experimental/teams-sso/csharp_dotnetcore)|
platform Conversation Basics https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/conversations/conversation-basics.md
async def on_members_added_activity(
+> [!NOTE]
+> Message splitting occurs when a text message and an attachment are sent in the same activity payload. This activity is split into separate activities by Microsoft Teams, one activity with just a text message and the other with an attachment. As the activity is split, you do not receive the message ID in response, which is used to [update or delete](~/bots/how-to/update-and-delete-bot-messages.md) the message proactively. It is recommended to send separate activities instead of depending on message splitting.
+ ## Teams channel data The `channelData` object contains Teams-specific information and is a definitive source for team and channel IDs. You may need to cache and use these IDs as keys for local storage. The `TeamsActivityHandler` in the SDK, typically pulls out important information from the `channelData` object to make it easily accessible. However, you can always access the original data from the `turnContext` object.
Your bot can send rich text, pictures, and cards. Users can send rich text and p
| Rich text | ✔ | ✔ | | | Pictures | ✔ | ✔ | Maximum 1024×1024 and 1 MB in PNG, JPEG, or GIF format; animated GIF are not supported | | Cards | ✖ | ✔ | See the [Teams Card Reference](~/task-modules-and-cards/cards/cards-reference.md) for supported cards |
-| Emojis | Γ£û | Γ£ö | Teams currently supports emojis via UTF-16 (such as U+1F600 for grinning face) |
+| Emojis | Γ£û | Γ£ö | Teams currently supports emojis through UTF-16 (such as U+1F600 for grinning face) |
## Adding notifications to your message
Use the following code to send a simple adaptive card:
``` To know more about cards and cards in bots, see [cards documentation](~/task-modules-and-cards/what-are-cards.md).
-When a response contains text messages and attachments, both responses are sent separately. The attachment is sent after the text message.
## Code sample+ |**Sample name** | **Description** | **.NETCore** | **JavaScript** | **Python**| |-|--|--|-|--| | Teams Conversation Bot | Messaging and conversation event handling. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/57.teams-conversation-bot)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/57.teams-conversation-bot)| [View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/57.teams-conversation-bot) |
platform Update And Delete Bot Messages https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/bots/how-to/update-and-delete-bot-messages.md
[!INCLUDE [pre-release-label](~/includes/v4-to-v3-pointer-bots.md)]
-## Updating messages
+## Update messages
-Rather than have your messages be static snapshots of data, your bot can dynamically update messages after sending them. You can use dynamic message updates for scenarios such as poll updates, modifying available actions after a button press, or any other asynchronous state change.
+Your bot can dynamically update messages after sending them. You can use dynamic message updates for scenarios such as poll updates, modifying available actions after a button press, or any other asynchronous state change.
-The new message need not match the original in type. For instance, if the original message contained an attachment, the new message can be a simple text message.
+The new message need not match the original in type. For example, if the original message contained an attachment, the new message can be a simple text message.
# [C#/.NET](#tab/dotnet)
-To update an existing message, pass a new `Activity` object with the existing activity ID to the `UpdateActivityAsync` method of the `TurnContext` class. *See* [TurnContextClass](/dotnet/api/microsoft.bot.builder.turncontext?view=botbuilder-dotnet-stable)
+To update an existing message, pass a new `Activity` object with the existing activity ID to the `UpdateActivityAsync` method of the `TurnContext` class. See [TurnContextClass](/dotnet/api/microsoft.bot.builder.turncontext?view=botbuilder-dotnet-stable&preserve-view=true).
```csharp var newActivity = MessageFactory.Text("The new text for the activity");
await turnContext.UpdateActivityAsync(newActivity, cancellationToken);
# [TypeScript/Node.js](#tab/typescript)
-To update an existing message, pass a new `Activity` object with the existing activity ID to the `updateActivity` method of the `TurnContext` object. *See* [updateActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#updateactivity-partial-activity--)
+To update an existing message, pass a new `Activity` object with the existing activity ID to the `updateActivity` method of the `TurnContext` object. See [updateActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#updateactivity-partial-activity--&preserve-view=true).
```typescript const newActivity = MessageFactory.text('The new text for the activity');
await turnContext.updateActivity(newActivity);
# [Python](#tab/python)
-To update an existing message, pass a new `Activity` object with the existing activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](link to Python API ref docs).
+To update an existing message, pass a new `Activity` object with the existing activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](/python/api/botbuilder-core/botbuilder.core.turncontext?view=botbuilder-py-latest).
```python
update_result = await context.update_activity(new_activity)
# [REST API](#tab/rest) >[!NOTE]
->You can develop Teams apps in any web-programming technology and directly call the [Bot Connector service REST APIs](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0). To do so, you'll need to implement [Authentication](/azure/bot-service/rest-api/bot-framework-rest-connector-authentication?view=azure-bot-service-4.0) security procedures with your API requests.
+>You can develop Teams apps in any web-programming technology and directly call the [Bot Connector service REST APIs](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0&preserve-view=true). To do so, you need to implement [Authentication](/azure/bot-service/rest-api/bot-framework-rest-connector-authentication?view=azure-bot-service-4.0&preserve-view=true) security procedures with your API requests.
-To update an existing activity within a conversation, include the `conversationId` and `activityId` in the request endpoint. To complete this scenario, you should cache the activity ID returned by the original POST call.
+To update an existing activity within a conversation, include the `conversationId` and `activityId` in the request endpoint. To complete this scenario, you must cache the activity ID returned by the original POST call.
```http PUT /v3/conversations/{conversationId}/activities/{activityId}
PUT /v3/conversations/{conversationId}/activities/{activityId}
| | | |-|-|
-| **Request body** | An [Activity](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object) object |
-| **Returns** | A [ResourceResponse](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#resourceresponse-object) object |
+| **Request body** | An [Activity](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#activity-object&preserve-view=true) object |
+| **Returns** | A [ResourceResponse](/azure/bot-service/rest-api/bot-framework-rest-connector-api-reference?view=azure-bot-service-4.0#resourceresponse-object&preserve-view=true) object |
-## Deleting messages
+## Update cards
+
+To update the existing card on button selection, you can use `ReplyToId` of incoming activity.
+
+# [C#/.NET](#tab/dotnet)
+
+To update existing card on a button click, pass a new `Activity` object with updated card and `ReplyToId` as activity ID to the `UpdateActivityAsync` method of the `TurnContext` class. See [TurnContextClass](/dotnet/api/microsoft.bot.builder.turncontext?view=botbuilder-dotnet-stable&preserve-view=true).
+```csharp
+var activity = MessageFactory.Attachment(card.ToAttachment());
+activity.Id = turnContext.Activity.ReplyToId;
+await turnContext.UpdateActivityAsync(activity, cancellationToken);
+```
+
+# [TypeScript/Node.js](#tab/typescript)
+
+To update existing card on a button click, pass a new `Activity` object with updated card and `replyToId` as activity ID to the `updateActivity` method of the `TurnContext` object. See [updateActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#updateactivity-partial-activity--&preserve-view=true).
+```typescript
+const message = MessageFactory.attachment(card);
+message.id = context.activity.replyToId;
+await context.updateActivity(message);
+```
+
+# [Python](#tab/python)
+
+To update existing card on a button click, pass a new `Activity` object with updated card and `reply_to_id` as activity ID to the `update_activity` method of the `TurnContext` class. See [TurnContextClass](/python/api/botbuilder-core/botbuilder.core.turncontext?view=botbuilder-py-latest).
+
+```python
+updated_activity = MessageFactory.attachment(CardFactory.hero_card(card))
+updated_activity.id = turn_context.activity.reply_to_id
+await turn_context.update_activity(updated_activity)
+
+```
+
+## Delete messages
In the Bot Framework, every message has its own unique activity identifier. Messages can be deleted using the Bot Framework's `DeleteActivity` method as shown here. # [C#/.NET](#tab/dotnet)
-To delete that message, pass that activity's ID to the `DeleteActivityAsync` method of the `TurnContext` class. *See* [TurnContext.DeleteActivityAsync Method](/dotnet/api/microsoft.bot.builder.turncontext.deleteactivityasync?view=botbuilder-dotnet-stable)
+To delete that message, pass that activity's ID to the `DeleteActivityAsync` method of the `TurnContext` class. See [TurnContext.DeleteActivityAsync Method](/dotnet/api/microsoft.bot.builder.turncontext.deleteactivityasync?view=botbuilder-dotnet-stable&preserve-view=true).
```csharp foreach (var activityId in _list)
foreach (var activityId in _list)
# [TypeScript/Node.js](#tab/typescript)
-To delete that message, pass that activity's ID to the `deleteActivity` method of the `TurnContext` object. *See* [deleteActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#deleteactivity-stringpartial-conversationreference--)
+To delete that message, pass that activity's ID to the `deleteActivity` method of the `TurnContext` object. See [deleteActivity](/javascript/api/botbuilder-core/turncontext?view=botbuilder-ts-latest#deleteactivity-stringpartial-conversationreference--&preserve-view=true).
```typescript for (let i = 0; i < activityIds.length; i++) {
DELETE /v3/conversations/{conversationId}/activities/{activityId}
| **Returns** | An HTTP Status code that indicates the outcome of the operation. Nothing is specified in the body of the response. | +
+## Code samples
+
+The official conversation basics are as follows:
+
+| Sample Name | Description | .NET | JavaScript | Python |
+|:-|:|:--|:-|:--|
+|Teams Conversation Basics | Demonstrates basics of conversations in Teams, including message update and delete.|[.NET&nbsp;Core](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/57.teams-conversation-bot)|[JavaScript](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/57.teams-conversation-bot) | [Python](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/python/57.teams-conversation-bot)|
platform Device Capabilities Overview https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/device-capabilities-overview.md
Title: Overview of device capabilities
-description: Overview of native device capabilities.
-keywords: camera image media microphone mic qr code qrcode bar code barcode scan scanner capabilities native device permissions
+description: Overview of native device capabilities.
+keywords: camera image media microphone mic qr code qrcode bar code barcode scan scanner location map capabilities native device permissions
After getting access to device capabilities, use Teams media capability APIs to
* Capture and share images * Scan QR or barcode using [scanner control](qr-barcode-scanner-capability.md) * Record audio through microphone
-* Share the location information
+* Share location using [location picker](location-capability.md).
platform Location Capability https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/location-capability.md
+
+ Title: Integrate location capabilities
+description: How to use Teams JavaScript client SDK to leverage location capabilities
+keywords: location map capabilities native device permissions
+++
+# Integrate location capabilities
+
+This document guides you on how to integrate the location capabilities of native device with your Teams app.
+
+You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), which provides the tools necessary for your app to access the userΓÇÖs [native device capabilities](native-device-permissions.md). Use the location APIs, such as [getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_) and [showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation_Location___error__SdkError__status__boolean_____void_) to integrate the capabilities within your app.
+
+## Advantages of integrating location capabilities
+
+The main advantage of integrating location capabilities in your Teams apps is that it allows web app developers on Teams platform to leverage location functionality with Microsoft Teams JavaScript client SDK.
+
+Following examples show how the integration of location capabilities is used in different scenarios:
+* In a factory, the supervisor can track the attendance of workers by asking them to take a selfie in the vicinity of the factory and share it through the specified app. The location data also gets captured and sent along with the image.
+* The location capabilities enables the maintenance staff of a service provider to share authentic health data of cellular towers with the management. The management can compare any mismatch between captured location information and the data submitted by maintenance staff.
+
+To integrate location capabilities, you must update the app manifest file and call the APIs. For effective integration, you must have a good understanding of [code snippets](#code-snippets) for calling the location APIs.
+It is important to familiarize yourself with the [API response errors](#error-handling) to handle the errors in your Teams app.
+
+> [!NOTE]
+> Currently, Microsoft Teams support for location capabilities is only available for mobile clients.
+
+## Update manifest
+
+Update your Teams app [manifest.json](../../resources/schem#devicepermissions) file by adding the `devicePermissions` property and specifying `geolocation`. It allows your app to ask for requisite permissions from users before they start using the location capabilities.
+
+``` json
+"devicePermissions": [
+ "geolocation",
+],
+```
+
+> [!NOTE]
+> The **Request Permissions** prompt is automatically displayed when a relevant Teams API is initiated. For more information, see [request device permissions](native-device-permissions.md).
+
+## Location APIs
+
+You must use the following set of APIs to enable your device's location capabilities:
+
+| API | Description |
+| | |
+|[getLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#getLocation_LocationProps___error__SdkError__location__Location_____void_) | Gives userΓÇÖs current device location or opens native location picker and returns the location chosen by the user. |
+|[showLocation](/javascript/api/@microsoft/teams-js/location?view=msteams-client-js-latest#showLocation) | Shows location on map |
+
+> [!NOTE]
+
+> The `getLocation()` API comes along with following [input configurations](https://docs.microsoft.com/en-us/javascript/api/@microsoft/teams-js/locationprops?view=msteams-client-js-latest), `allowChooseLocation` and `showMap`. <br/> If the value of `allowChooseLocation` is *true*, then the users can choose any location of their choice.<br/> If the value is *false*, then the users cannot change their current location.<br/> If the value of `showMap` is *false*, the current location is fetched without displaying the map. `showMap` is ignored if `allowChooseLocation` is set to *true*.
+
+**Web app experience for location capabilities**
+![web app experience for location capabilities](../../assets/images/tabs/location-capability.png)
+
+## Error handling
+
+You must ensure to handle these errors appropriately in your Teams app. The following table lists the error codes and the conditions under which the errors are generated:
+
+|Error code | Error name | Condition|
+| | | -- |
+| **100** | NOT_SUPPORTED_ON_PLATFORM | API is not supported on the current platform.|
+| **500** | INTERNAL_ERROR | Internal error is encountered while performing the required operation.|
+| **1000** | PERMISSION_DENIED |User denied location permissions to the Teams App or the web-app .|
+| **4000** | INVALID_ARGUMENTS | API is invoked with wrong or insufficient mandatory arguments.|
+| **8000** | USER_ABORT |User cancelled the operation.|
+| **9000** | OLD_PLATFORM | User is on old platform build where implementation of the API is not present. Upgrading the build should resolve the issue.|
+
+## Code snippets
+
+**Calling `getLocation` API to retrieve the location:**
+
+```javascript
+let locationProps = {"allowChooseLocation":true,"showMap":true};
+microsoftTeams.location.getLocation(locationProps, (err: microsoftTeams.SdkError, location: microsoftTeams.location.Location) => {
+ if (err) {
+ output(err);
+ return;
+ }
+ output(JSON.stringify(location));
+});
+```
+
+**Calling `showLocation` API to display the location:**
+
+```javascript
+let location = {"latitude":17,"longitude":17};
+microsoftTeams.location.showLocation(location, (err: microsoftTeams.SdkError, result: boolean) => {
+ if (err) {
+ output(err);
+ return;
+ }
+ output(result);
+});
+```
+
+## See also
+
+> [!div class="nextstepaction"]
+> [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)
+
+> [!div class="nextstepaction"]
+> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
platform Mobile Camera Image Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/mobile-camera-image-permissions.md
This document guides you on how to integrate media capabilities. This integration combines the native device capabilities, such as the **camera** and **microphone** with the Teams platform.
-You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), that provides the tools necessary for your app to access a userΓÇÖs [device permissions](native-device-permissions.md). Use suitable **media capability APIs** to integrate the native device capabilities, such as the **camera** and **microphone** with the Teams platform within your Microsoft Teams mobile app, and build a richer experience.
+You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), that provides the tools necessary for your app to access a userΓÇÖs [device permissions](native-device-permissions.md). Use suitable media capability APIs to integrate the native device capabilities, such as the **camera** and **microphone** with the Teams platform within your Microsoft Teams mobile app, and build a richer experience.
## Advantage of integrating media capabilities
The [selectMedia](/javascript/api/@microsoft/teams-js/media?view=msteams-client-
* Scan document, whiteboard, and business cards through the camera. > [!IMPORTANT]
->* The `selectMedia`, `getMedia`, and `viewImages` APIs can be invoked from multiple Teams surfaces such as task modules, tabs, and personal apps. For more details, see [Entry points for Teams apps](../extensibility-points.md).
->* `selectMedia` API has been extended to support mic and audio properties.
+> * The `selectMedia`, `getMedia`, and `viewImages` APIs can be invoked from multiple Teams surfaces, such as task modules, tabs, and personal apps. For more details, see [Entry points for Teams apps](../extensibility-points.md).
+> * `selectMedia` API has been extended to support microphone and audio properties.
You must use the following set of APIs to enable your device's media capabilities: | API | Description | | | |
-| [**selectMedia**](/javascript/api/@microsoft/teams-js/media?view=msteams-client-js-latest#selectMedia_MediaInputs___error__SdkError__attachments__Media_______void_&preserve-view=true) (**Camera)**| This API allows users to **capture or select media from the device camera** and return it to the web-app. The users can edit, crop, rotate, annotate, or draw over images before submission. In response to **selectMedia**, the web-app receives the media IDs of selected images and a thumbnail of the selected media. This API can be further configured through the [ImageProps](/javascript/api/@microsoft/teams-js/imageprops?view=msteams-client-js-latest&preserve-view=true) configuration. |
-| [**selectMedia**](/javascript/api/@microsoft/teams-js/media?view=msteams-client-js-latest#selectMedia_MediaInputs___error__SdkError__attachments__Media_______void_&preserve-view=true) (**Microphone**)| Set the [mediaType](/javascript/api/@microsoft/teams-js/mediatype?view=msteams-client-js-latest&preserve-view=true) to `4` in **selectMedia** API for accessing microphone capability. This API also allows users to record audio from the device microphone and return recorded clips to the web-app. The users can pause, re-record, and play recording preview before submission. In response to **selectMedia**, the web-app receives media IDs of the selected audio recording. <br/> Use `maxDuration`, if you require to configure a duration in minutes for recording the conversation. The current duration for recording is 10 minutes, after which the recording terminates. |
-| [**getMedia**](/javascript/api/@microsoft/teams-js/_media?view=msteams-client-js-latest#getMedia__error__SdkError__blob__Blob_____void_&preserve-view=true)| This API retrieves the media captured by **selectMedia** API in chunks, irrespective of the media size. These chunks are assembled and sent back to the web app as a file or blob. Breaking of media into smaller chunks facilitates large file transfer. |
+| [**selectMedia**](/javascript/api/@microsoft/teams-js/media?view=msteams-client-js-latest#selectMedia_MediaInputs___error__SdkError__attachments__Media_______void_&preserve-view=true) (**Camera)**| This API allows users to **capture or select media from the device camera** and return it to the web-app. The users can edit, crop, rotate, annotate, or draw over images before submission. In response to `selectMedia`, the web-app receives the media IDs of selected images and a thumbnail of the selected media. This API can be further configured through the [ImageProps](/javascript/api/@microsoft/teams-js/imageprops?view=msteams-client-js-latest&preserve-view=true) configuration. |
+| [**selectMedia**](/javascript/api/@microsoft/teams-js/media?view=msteams-client-js-latest#selectMedia_MediaInputs___error__SdkError__attachments__Media_______void_&preserve-view=true) (**Microphone**)| Set the [mediaType](/javascript/api/@microsoft/teams-js/mediatype?view=msteams-client-js-latest&preserve-view=true) to `4` in `selectMedia` API for accessing microphone capability. This API also allows users to record audio from the device microphone and return recorded clips to the web-app. The users can pause, re-record, and play recording preview before submission. In response to **selectMedia**, the web-app receives media IDs of the selected audio recording. <br/> Use `maxDuration`, if you require to configure a duration in minutes for recording the conversation. The current duration for recording is 10 minutes, after which the recording terminates. |
+| [**getMedia**](/javascript/api/@microsoft/teams-js/_media?view=msteams-client-js-latest#getMedia__error__SdkError__blob__Blob_____void_&preserve-view=true)| This API retrieves the media captured by `selectMedia` API in chunks, irrespective of the media size. These chunks are assembled and sent back to the web app as a file or blob. Breaking of media into smaller chunks facilitates large file transfer. |
| [**viewImages**](/javascript/api/@microsoft/teams-js/media?view=msteams-client-js-latest#viewImages_ImageUri_____error___SdkError_____void_&preserve-view=true)| This API enables the user to view images in full-screen mode as a scrollable list.|
microsoftTeams.media.selectMedia(mediaInput, (error: microsoftTeams.SdkError, at
## See also > [!div class="nextstepaction"]
-> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
+> [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
+
+> [!div class="nextstepaction"]
+> [Integrate location capabilities in Teams](location-capability.md)
platform Native Device Permissions https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/native-device-permissions.md
You can enrich your Teams app with native device capabilities, such as camera, m
> [!NOTE] > * To integrate media capabilities within your Microsoft Teams mobile app, see [Integrate media capabilities](mobile-camera-image-permissions.md). > * To integrate QR or barcode scanner capability within your Microsoft Teams mobile app, see [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)
+> * To integrate location capabilities within your Microsoft Teams mobile app, see [Integrate location capabilities](location-capability.md).
## Native device permissions
Device permissions are stored for every login session. It means that if you sign
> [!div class="nextstepaction"] > [Integrate QR or barcode scanner capability in Teams](qr-barcode-scanner-capability.md)+
+> [!div class="nextstepaction"]
+> [Integrate location capabilities in Teams](location-capability.md)
platform Qr Barcode Scanner Capability https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/concepts/device-capabilities/qr-barcode-scanner-capability.md
# Integrate QR or barcode scanner capability
-Barcode is a method of representing data in a visual and machine-readable form. The barcode contains information about a product, such as a type, size, manufacturer, and Country of origin in the form of bars and spaces. The code is read using the optical scanner on your native device camera. For a richer collaborative experience, you can integrate the QR or barcode scanner capability provided in the Teams platform with your Teams app. This document guides you on how to integrate the capability.
+This document guides you on how to integrate the QR or barcode scanner capability.
+
+Barcode is a method of representing data in a visual and machine-readable form. The barcode contains information about a product, such as a type, size, manufacturer, and Country of origin in the form of bars and spaces. The code is read using the optical scanner on your native device camera. For a richer collaborative experience, you can integrate the QR or barcode scanner capability provided in the Teams platform with your Teams app.
You can use [Microsoft Teams JavaScript client SDK](/javascript/api/overview/msteams-client?view=msteams-client-js-latest&preserve-view=true), which provides the tools necessary for your app to access the userΓÇÖs [native device capabilities](native-device-permissions.md). Use the `scanBarCode` API to integrate the scanner capability within your app. ## Advantage of integrating QR or barcode scanner capability
+Following are the advantages of integration of QR or barcode scanner capabilities:
+ * The integration allows web app developers on Teams platform to leverage QR or barcode scanning functionality with Teams JavaScript client SDK. * With this feature, the user only needs to align a QR or barcode within a frame at the center of the scanner UI and the code gets scanned automatically. The stored data is shared back with the calling web app. This avoids the inconvenience and human-errors of entering lengthy product codes or other relevant information manually.
microsoftTeams.media.scanBarCode((error: microsoftTeams.SdkError, decodedText: s
> [!div class="nextstepaction"] > [Integrate media capabilities in Teams](mobile-camera-image-permissions.md)+
+> [!div class="nextstepaction"]
+> [Integrate location capabilities in Teams](location-capability.md)
platform Graph Proactive Bots And Messages https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/graph-api/proactive-bots-and-messages/graph-proactive-bots-and-messages.md
Title: Use Microsoft Graph to enable proactive bot installation and messaging in Teams
+ Title: Use Microsoft Graph to authorize proactive bot installation and messaging in Teams
description: Describes proactive messaging in Teams and how to implement. localization_priority: Normal
keywords: teams proactive messaging chat installation Graph
-# Enable proactive bot installation and proactive messaging in Teams with Microsoft Graph (Public Preview)
+# Proactive installation of apps using Graph API and send messages
>[!IMPORTANT]
-> Microsoft Graph and Microsoft Teams public previews are available for early-access and feedback. Although this release has undergone extensive testing, it is not intended for use in production.
+> Microsoft Graph and Microsoft Teams public previews are available for early access and feedback. Although this release has undergone extensive testing, it is not intended for use in production.
## Proactive messaging in Teams
-Proactive messages are initiated by bots to start conversations with a user. They serve many purposes including sending welcome messages, conducting surveys or polls, and broadcasting organization-wide notifications. Proactive messages in Teams can be delivered as either **ad-hoc** or **dialog-based** conversations:
+Proactive messages are initiated by bots to start conversations with a user. They serve many purposes including sending welcome messages, conducting surveys or polls, and broadcasting organization-wide notifications. Proactive messages in Teams can be delivered as either **ad-hoc** or **dialog-based** conversations:
|Message Type | Description | |-|-- | |Ad-hoc proactive message| The bot interjects a message without interrupting the conversation flow.| |Dialog-based proactive message | The bot creates a new dialog thread, takes control of a conversation, delivers the proactive message, closes, and returns control to the previous dialog.|
-*See*, [Send proactive notifications to users SDK v4](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true)
+See, [Send proactive notifications to users SDK v4](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true).
## Proactive app installation in Teams
-Before your bot can proactively message a user, it needs to be installed either as a personal app, or in a team where the user is a member. At times, you may need to proactively message users that have _not_ installed or previously interacted with your app. For instance, the need to message vital information to everyone in your organization. For such scenarios, you can use the Microsoft Graph API to proactively install your bot for your users.
+Before your bot can proactively message a user, it must be installed either as a personal app or in a team where the user is a member. At times, you need to proactively message users that have not installed or previously interacted with your app. For example, the need to message vital information to everyone in your organization. For such scenarios, you can use the Microsoft Graph API to proactively install your bot for your users.
## Permissions
-Microsoft Graph [teamsAppInstallation resource type](/graph/api/resources/teamsappinstallation?view=graph-rest-1.0&preserve-view=true) permissions allow you to manage your app's installation lifecycle for all user (personal) or team (channel) scopes within the Microsoft Teams platform:
+Microsoft Graph [teamsAppInstallation resource type](/graph/api/resources/teamsappinstallation?view=graph-rest-1.0&preserve-view=true) permissions helps you to manage your app's installation lifecycle for all user (personal) or team (channel) scopes within the Microsoft Teams platform:
|Application permission | Description| |||
To use these permissions, you must add a [webApplicationInfo](../../resources/sc
> [!div class="checklist"] > [!div class="checklist"] >
-> * **id** ΓÇö your Azure AD app id.
+> * **id** ΓÇö your Azure AD app ID.
> * **resource** ΓÇö the resource URL for the app. >- >[!NOTE] >
-> * Your bot requires _application_ not _user delegated_ permissions because the installation is not for yourself but for others.
+> * Your bot requires application and not user delegated permissions because the installation is for others.
>
-> * An Azure AD tenant administrator must [explicitly grant permissions to an application](/graph/security-authorization#grant-permissions-to-an-application). After an application is granted permissions, _all_ members of the Azure AD tenant will gain the granted permissions.
+> * An Azure AD tenant administrator must [explicitly grant permissions to an application](/graph/security-authorization#grant-permissions-to-an-application). After an application is granted permissions, all members of the Azure AD tenant gain the granted permissions.
## Enable proactive app installation and messaging > [!IMPORTANT]
->Microsoft Graph will only install apps published within your organization's [app catalog](../../concepts/deploy-and-publish/overview.md#publish-to-your-organizations-app-catalog) or in [AppSource](https://appsource.microsoft.com/).
+>Microsoft Graph can only install apps published within your organization's [app catalog](../../concepts/deploy-and-publish/overview.md#publish-to-your-organizations-app-catalog) or in [AppSource](https://appsource.microsoft.com/).
### Γ£ö Create and publish your proactive messaging bot for Teams
-To get started, you will need a [bot for Teams](../../bots/how-to/create-a-bot-for-teams.md) with [proactive messaging](../../concepts/bots/bot-conversations/bots-conv-proactive.md) capabilities and [published](../../concepts/deploy-and-publish/overview.md) in your organization's [app catalog](../../concepts/deploy-and-publish/overview.md#publish-to-your-organizations-app-catalog) or in [AppSource](https://appsource.microsoft.com/).
+To get started, you need a [bot for Teams](../../bots/how-to/create-a-bot-for-teams.md) with [proactive messaging](../../concepts/bots/bot-conversations/bots-conv-proactive.md) capabilities that is [published](../../concepts/deploy-and-publish/overview.md) in your organization's [app catalog](../../concepts/deploy-and-publish/overview.md#publish-to-your-organizations-app-catalog) or in [AppSource](https://appsource.microsoft.com/).
>[!TIP]
-> The production-ready [**Company Communicator**](../..//samples/app-templates.md#company-communicator) app template enables broadcast messaging and is a good foundation for building your proactive bot application.
+> The production-ready [**Company Communicator**](../..//samples/app-templates.md#company-communicator) app template permits broadcast messaging and is a good foundation for building your proactive bot application.
### Γ£ö Get the `teamsAppId` for your app
-**1.** You will need the `teamsAppId` for the next steps.
+**1.** You need the `teamsAppId` for the next steps.
The `teamsAppId` can be retrieved from your organization's app catalog:
The `teamsAppId` can be retrieved from your organization's app catalog:
GET https://graph.microsoft.com/v1.0/appCatalogs/teamsApps?$filter=externalId eq '{IdFromManifest}' ```
-The request will return a `teamsApp` object. The returned object's `id` is the app's catalog generated app id and is different from the "id:" that you provided in your Teams app manifest:
+The request must return a `teamsApp` object. The returned object `id` is the app's catalog generated app ID and is different from the ID that you provided in your Teams app manifest:
```json {
The request will return a `teamsApp` object. The returned object's `id` is the
GET https://graph.microsoft.com/v1.0/users/{user-id}/teamwork/installedApps?$expand=teamsApp&$filter=teamsApp/externalId eq '{IdFromManifest}' ```
-**3.** If your app has already been uploaded/sideloaded for a channel in the team scope, you can retrieve the `teamsAppId` as follows:
+**3.** If your app has been uploaded or sideloaded for a channel in the team scope, you can retrieve the `teamsAppId` as follows:
**Microsoft Graph page reference:** [List apps in team](/graph/api/team-list-installedapps?view=graph-rest-v1.0&tabs=http&preserve-view=true)
GET https://graph.microsoft.com/v1.0/teams/{team-id}/installedApps?$expand=teams
``` >[!TIP]
-> You can filter on any of the fields of the [**teamsApp**](/graph/api/resources/teamsapp?view=graph-rest-1.0&preserve-view=true) object to narrow the list of results.
+> To narrow the list of results, you can filter on any of the fields of [**teamsApp**](/graph/api/resources/teamsapp?view=graph-rest-1.0&preserve-view=true) object.
### Γ£ö Determine whether your bot is currently installed for a message recipient
GET https://graph.microsoft.com/v1.0/teams/{team-id}/installedApps?$expand=teams
GET https://graph.microsoft.com/v1.0/users/{user-id}/teamwork/installedApps?$expand=teamsApp&$filter=teamsApp/id eq '{teamsAppId}' ```
-This request will return an empty array if the app is not installed, or an array with a single [teamsAppInstallation](/graph/api/resources/teamsappinstallation?view=graph-rest-v1.0&preserve-view=true) object if it has been installed.
+This request returns an empty array if the app is not installed and an array with a single [teamsAppInstallation](/graph/api/resources/teamsappinstallation?view=graph-rest-v1.0&preserve-view=true) object if the app is installed.
### Γ£ö Install your app
POST https://graph.microsoft.com/v1.0/users/{user-id}/teamwork/installedApps
} ```
-If the user has Microsoft Teams running, they may see the app install immediately. Alternatively, a restart may be necessary to see the installed app.
+If the user has Microsoft Teams running, app installation is seen immediately. A restart may be required to view the installed app.
### Γ£ö Retrieve the conversation **chatId**
-When your app is installed for the user, the bot will receive a `conversationUpdate` [event notification](../../resources/bot-v3/bots-notifications.md#team-member-or-bot-addition) that will contain the necessary information to send the proactive message.
+When your app is installed for the user, the bot receives a `conversationUpdate` [event notification](../../resources/bot-v3/bots-notifications.md#team-member-or-bot-addition) that contains the necessary information to send the proactive message.
The `chatId` can also be retrieved as follows: **Microsoft Graph page reference:** [Get chat](/graph/api/chat-get?view=graph-rest-beta&tabs=http&preserve-view=true)
-**1.** You will need your app's `{teamsAppInstallationId}`. If you don't have it, use the following:
+**1.** You must need your app's `{teamsAppInstallationId}`. If you don't have it, use the following:
**HTTP GET** request:
The **id** property of the response is the `teamsAppInstallationId`.
The **id** property of the response is the `chatId`.
-Alternately, you can retrieve the `chatId` with the request below, but it will require the broader `Chat.Read.All` permission:
+You can also retrieve the `chatId` with the following request but it requires the broader `Chat.Read.All` permission:
**HTTP GET** request (permission ΓÇö `Chat.Read.All`):
GET https://graph.microsoft.com/beta/users/{user-id}/chats?$filter=installedApps
### Γ£ö Send proactive messages
-Once your bot has been added for a user or team and has acquired the necessary user information, it can begin to [send proactive messages](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true).
-
-# [C# / .NET](#tab/csharp)
-
-The following code snippet is from the [Microsoft Bot Framework Samples for C#.](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/csharp_dotnetcore/16.proactive-messages)
-
-```csharp
-using System.Collections.Concurrent;
-using System.Collections.Generic;
-using System.Threading;
-using System.Threading.Tasks;
-using Microsoft.Bot.Builder;
-using Microsoft.Bot.Schema;
-
-namespace Microsoft.BotBuilderSamples
-{
- public class ProactiveBot : ActivityHandler
- {
- // Message to send to users when the bot receives a Conversation Update event
- private const string WelcomeMessage = "Welcome to the Proactive Bot sample. Navigate to http://localhost:3978/api/notify to proactively message everyone who has previously messaged this bot.";
-
- // Dependency injected dictionary for storing ConversationReference objects used in NotifyController to proactively message users
- private readonly ConcurrentDictionary<string, ConversationReference> _conversationReferences;
-
- public ProactiveBot(ConcurrentDictionary<string, ConversationReference> conversationReferences)
- {
- _conversationReferences = conversationReferences;
- }
-
- private void AddConversationReference(Activity activity)
- {
- var conversationReference = activity.GetConversationReference();
- _conversationReferences.AddOrUpdate(conversationReference.User.Id, conversationReference, (key, newValue) => conversationReference);
- }
-
- protected override Task OnConversationUpdateActivityAsync(ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
- {
- AddConversationReference(turnContext.Activity as Activity);
-
- return base.OnConversationUpdateActivityAsync(turnContext, cancellationToken);
- }
-
- protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
- {
- foreach (var member in membersAdded)
- {
- // Greet anyone that was not the target (recipient) of this message.
- if (member.Id != turnContext.Activity.Recipient.Id)
- {
- await turnContext.SendActivityAsync(MessageFactory.Text(WelcomeMessage), cancellationToken);
- }
- }
- }
-
- protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
- {
- AddConversationReference(turnContext.Activity as Activity);
-
- // Echo back what the user said
- await turnContext.SendActivityAsync(MessageFactory.Text($"You sent '{turnContext.Activity.Text}'"), cancellationToken);
- }
- }
-}
-```
-
-# [JavaScript](#tab/javascript)
-
-The following code snippet is from the [Microsoft Bot Framework Samples for JavaScript](https://github.com/microsoft/BotBuilder-Samples/tree/master/samples/javascript_nodejs/16.proactive-messages).
-
-```javascript
-const { ActivityHandler, TurnContext } = require('botbuilder');
-
-class ProactiveBot extends ActivityHandler {
- constructor(conversationReferences) {
- super();
-
- // Dependency injected dictionary for storing ConversationReference objects used in NotifyController to proactively message users
- this.conversationReferences = conversationReferences;
-
- this.onConversationUpdate(async (context, next) => {
- this.addConversationReference(context.activity);
-
- await next();
- });
-
- this.onMembersAdded(async (context, next) => {
- const membersAdded = context.activity.membersAdded;
- for (let cnt = 0; cnt < membersAdded.length; cnt++) {
- if (membersAdded[cnt].id !== context.activity.recipient.id) {
- const welcomeMessage = 'Welcome to the Proactive Bot sample. Navigate to http://localhost:3978/api/notify to proactively message everyone who has previously messaged this bot.';
- await context.sendActivity(welcomeMessage);
- }
- }
-
- // By calling next() you ensure that the next BotHandler is run.
- await next();
- });
-
- this.onMessage(async (context, next) => {
- this.addConversationReference(context.activity);
-
- // Echo back what the user said
- await context.sendActivity(`You sent '${ context.activity.text }'`);
- await next();
- });
- }
-
- addConversationReference(activity) {
- const conversationReference = TurnContext.getConversationReference(activity);
- this.conversationReferences[conversationReference.conversation.id] = conversationReference;
- }
-}
-
-module.exports.ProactiveBot = ProactiveBot;
-
-```
-
+Your bot can [send proactive messages](/azure/bot-service/bot-builder-howto-proactive-message?view=azure-bot-service-4.0&tabs=csharp&preserve-view=true) after the bot has been added for a user or a team and has received all the user information.
## Related topic for Teams administrators >
platform Get Started Use App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/get-started/get-started-use-app-studio.md
App Studio is a Teams app that you can install from the Teams store. It simplifies the creation and registration of an app.
-To install App Studio in Teams, select the **Apps** icon at the bottom of the left-hand bar, and search for **App Studio**.
+Complete the following steps to update the app package:
+
+1. To install App Studio in Teams, select the **Apps** icon at the bottom of the left-hand bar, and search for **App Studio**.
<img width="450px" alt="Finding App Studio in the Store View" src="~/assets/images/get-started/searchforAppStudio.png"/>
-Select the **App Studio** tile and choose **Install**. The App Studio is installed.
+2. Select the **App Studio** tile and choose **Install**. The App Studio is installed.
<img width="450px" alt="Installing App Studio" src="~/assets/images/get-started/InstallingAppStudio.png"/>
-Select the **Manifest editor** tab to create the app package for your Teams app.
+3. To create the app package for your Teams app, select the **Manifest editor** tab in **App Studio**.
<img width="450px" alt="App Studio" src="~/assets/images/get-started/AppStudio.png"/>
-The sample comes with its own pre-made manifest and is designed to build an app package when the project is built. On .NET this is done in Visual Studio, and on Node JS this is done by typing `gulp` at the command line in the root directory of the project.
+The sample comes with its own manifest and is designed to build an app package when the project is built. On .NET this is done in Visual Studio and on Node.js this is done by typing `gulp` at the command line in the root directory of the project.
```bash $ gulp
Build completed. Output in manifest folder
The name of the generated app package is **helloworldapp.zip**. You can search for this file if the location is not clear in the tool you are using.
-Now to modify this app package, select the **Import an existing app** tile in the **Manifest editor**.
+4. Now to modify this app package, select **Import an existing app** in the **Manifest editor**.
<img width="450px" alt="Importing an existing app" src="~/assets/images/get-started/Importinganapp.png"/>
-Click the **Hello World** tile for your newly imported app.
+5. Select the **Hello World** tile for your newly imported app.
<img width="450px" alt="Newly imported app view" src="~/assets/images/get-started/HelloWorldappdetails.png"/>
The following image shows the imported app package in App Studio:
<img width="450px" alt="Importing the app package" src="~/assets/images/get-started/Importinganapp2.png"/>
-There is a list of steps on the left-hand side of the Manifest editor and on the right-hand side, a list of properties that need to be filled in for each of those steps. Since you started with a sample app, much of the information is already filled out. The next steps will walk you through changing the parts that still need to be updated.
+On the left-hand side of the Manifest editor there is a list of steps. On the right-hand side there is a list of properties that need to be filled in for each step. As you started with a sample app, much of the information is already completed. The next steps enable you to update the properties of the Hello World app.
#### App details
-Click on the *App details* entry under *Details*. Click the *Generate* button to create a new app id.
+Select **App details** under **Details**. Select the **Generate** button to create a new App ID.
-Your new app id should look something like: `2322041b-72bf-459d-b107-f4f335bc35bd`.
+Your new App ID is similar to `2322041b-72bf-459d-b107-f4f335bc35bd`.
-Look through the rest of the App details in the right-hand pane, and familiarize yourself with some of the entries such as *Developer information* and *Branding*. These sections are important if you are writing a new app for distribution.
+Go through the app details in the right-hand pane including **Developer information** and **Branding** details. These details are important if you are writing a new app for distribution.
-#### Capabilities: Tabs
+#### Tabs
-Tabs are among the simplest elements to add to a Teams app. The sample app already supports several tabs, and you can enable them as follows.
+It is simple to add tabs to a Teams app. The sample app already supports several tabs, and you can enable them.
##### Team tab
Your app can only have one Team tab.
<img width="450px" alt="Adding a Teams tab" src="~/assets/images/get-started/TeamTab.png"/>
-In this sample, the Team tab is where your configuration page goes. Click on the *...* symbol at the end of the entry and choose *Edit* from the drop-down. Change the URL to `https://yourteamsapp.ngrok.io/configure` where `yourteamsapp.ngrok.io` should be replaced by the URL that you used above when hosting your app.
+In this sample, the Team tab is where your configuration page is displayed. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. Change the URL to `https://yourteamsapp.ngrok.io/configure` where `yourteamsapp.ngrok.io` must be replaced with the URL that you used when [hosting your app](#host-the-sample-app).
##### Personal tabs
-Your app can have up to 16 tabs, including the team tab.
+Your app can have up to 16 tabs, including the Team tab.
-Personal tabs are represented differently from the team tab. You should see *Hello Tab* already listed in the personal tabs list. At the moment it has a placeholder value `com.contoso.helloworld.hellotab`. Click on the *...* symbol at the end of the entry and choose *Edit* from the drop-down. The following dialog will appear.
+Personal tabs are different from the Team tab. **Hello Tab** is already listed in the personal tabs list with a placeholder value `com.contoso.helloworld.hellotab`. Select the **...** symbol of the **Tab configuration url** and choose **Edit** from the drop-down menu. The following dialog box appears:
<img width="450px" alt="Adding a personal tab dialog" src="~/assets/images/get-started/PersonalTab.png"/>
-There are two fields that you need to update with your app URL.
+Update the following boxes with your app URL:
-- Change Content URL to `https://yourteamsapp.ngrok.io/hello`-- Change Website URL to `https://yourteamsapp.ngrok.io/hello`
+- Change the **Content URL** box to `https://yourteamsapp.ngrok.io/hello`
+- Change the **Website URL** box to `https://yourteamsapp.ngrok.io/hello`
-Where `yourteamsapp.ngrok.io` should be replaced by the URL that you used above when hosting your app.
+Replace `yourteamsapp.ngrok.io` by the URL that you used when hosting your app.
#### Bots
-Bots are the most common way to add functionality to your app. The hello world sample already has a bot as part of the sample, but it has not been registered with Microsoft yet.
+It is easy to add the bots functionality to your app. The **Hello World** sample app already has a bot as part of the sample, but you must register it with Microsoft.
<img width="450px" alt="Adding a bot" src="~/assets/images/get-started/Bots.png"/>
-The bot that was imported from the sample does not have an App ID associated with it yet. You will have to create a new bot so that App Studio can create a new App ID and register it with Microsoft. Note that this is the App ID for the bot, which is different from the App ID created for the app. Each bot in an app requires its own App ID.
-
-Click the *delete* button next to the *Imported bot* in the bot list.
-
-Now there are no bots left to show. Click *Setup*. This will display the *Set up a bot* dialog.
-
-<img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/>
+The bot that was imported from the sample does not have an associated App ID. You must create a new bot so that App Studio can create a new App ID and register it with Microsoft.
-Add a bot name such as `Contoso bot`, and select all three buttons under **Scope**.
+> [!NOTE]
+> The App ID created by App Studio for the bot is different from the App ID created for the app. Each bot in an app requires its own App ID.
-Choose *Create bot* to exit the dialog. App Studio registers your bot with Microsoft and displays your new bot in the bot list. Now would be a good time to open a text file in notepad and copy and paste your new bot id into it. You will need this id later.
+Complete the following steps to setup your bot:
-Click *Generate New Password*, and make a note of the password in the same text file you noted your Bot app ID in. This is the only time your password will be shown, so be sure to do this now.
+1. Select **Delete** next to the imported bot in the bot list. Now there are no bots left to show.
+2. Select **Setup** to display the **Set up a bot** dialog box.
-Update the *Bot endpoint address* to `https://yourteamsapp.ngrok.io/api/messages`, where `yourteamsapp.ngrok.io` should be replaced by the URL that you used above when hosting your app.
+<img width="450px" alt="Adding a bot dialog" src="~/assets/images/get-started/Setupbot.png"/>
-Now would be a good time to save your text file if you have not done so already. You will add this information to your hosted app later in this walkthrough, which will allow secure communication with your bot.
+3. Add a bot name **Contoso bot** and select all three check boxes under **Scope**.
+4. Choose **Save** to exit the dialog box. App Studio registers your bot with Microsoft and displays your new bot in the bot list.
+5. Now open a text file in notepad and copy and paste your new bot ID into it.
+6. Click **Generate New Password**, and note the password in the same text file you noted your bot App ID.
+7. Update the **Bot endpoint address** to `https://yourteamsapp.ngrok.io/api/messages`, and replace `yourteamsapp.ngrok.io` with the URL that you used when hosting your app.
+8. Now save your text file as you must add the information from the file to your hosted app to allow secure communication with your bot.
#### Messaging extensions
-Messaging extensions let users ask for information from your service and post that information, in the form of cards, right into the channel conversation. Messaging extensions appear along the bottom of the compose box.
-
-Select **Messaging extensions** under **Capabilities** in the left-hand column of App Studio to configure the messaging extension.
+Messaging extensions let users ask for information from your service and post that information. The information is posted in the form of cards into the channel conversation. Messaging extensions appear at the bottom of the compose box.
-<img width="450px" alt="Adding a messaging extension" src="~/assets/images/get-started/Messagingextensions.png"/>
+Complete the following steps to setup your messaging extension:
-The sample messaging extension is listed in the right-hand pane under **Messaging Extensions**. Select **Delete** again to remove this entry, and then click the *Set up* button following the same steps as you followed for bots. This will display the *Messaging Extension* dialog.
+1. Select **Messaging extensions** under **Capabilities** in the left-hand pane of App Studio to configure the messaging extension.
-Select the *Use existing bot* tab, then *Select from one of my existing bots*. In the drop-down menu, select the bot you created in the section above. Add a *Bot name* and click *Save* to close the dialog.
+<img width="450px" alt="Adding a messaging extension" src="~/assets/images/get-started/Messagingextensions.png"/>
-Under the *Command* section, click *Add*. We're adding a search-based command, so choose the *Allow users to query your service...* option.
+The sample messaging extension is listed in the **Messaging Extensions** pane.
-In the **New command** dialog, enter the following values.
+2. Select **Delete** to remove the messaging extension, select **Set up**, and follow the same steps used for [bots](#bots). The **Messaging Extension** dialog box is displayed.
+3. Select the **Use existing bot** tab and **Select from one of my existing bots**.
+4. Select the bot you created from the drop-down menu. Add a **Bot name** and select **Save** to close the dialog box.
+5. Under the **Command** section, select **Add**. To add a search-based command, select the **Allow users to query your service for information and insert that into a message** option.
+6. In the **New command** dialog box, enter the following values:
-Under *New command*:
+Under **New command**:
-- *Command ID* = getRandomText-- *Title* = Get some random text for fun-- *Description* = Gets some random text and images
+- **Command ID**: Enter random text
+- **Title**: Enter random title
+- **Description**: Enter random description
-Under *Parameter*:
+Under **Parameter**:
-- *Name* = cardTitle-- *Title* = Card title-- *Description* = Card title to use
+- **Name**: Enter the parameter name
+- **Title**: Enter the card title
+- **Description**: Enter card description
-Once you're entered the information, click *Save* to close the dialog.
+7. After you enter the information, select **Save** to close the dialog box.
#### Register your app in Teams
-You have now completed entering the details of your app, but the following two steps remain:
-1. Use the Test and Distribute section of App Studio to install your app in Teams.
-1. Update your hosted application with the App ID and password for your bot. Remember that the sample expects to use the same App ID and password for both the bot and the messaging extension.
+After entering the details of your app, complete the following steps to register your app in Teams:
-Select the **Test and distribute** item under **Finish** in the left-hand column of App Studio.
+1. Use **Test and distribute** of App Studio to install your app in Teams.
+2. Update your hosted application with the App ID and password for your bot. For the sample app, use the same App ID and password for both bot and messaging extension.
+3. Select **Test and distribute** under **Finish** in the left-hand pane of App Studio.
<img width="450px" alt="Testing your app" src="~/assets/images/get-started/Testanddistribute.png"/>
-In order to upload your app to Teams, click the *Install* button under *Test and Distribute*.
+4. To upload your app to Teams, select the **Install** button under **Test and Distribute**.
<img width="450px" alt="Adding a messaging extension dialog" src="~/assets/images/get-started/InstallingHelloWorld.png"/>
-Select the **Search** box in the **Add to a team** section and select a team to add the sample app to. Usually, you can set up a special team for testing.
-
-Select the **Install** button at the bottom of the dialog.
+5. Select the **Search** box in the **Add to a team** section and select a team to add the sample app. You can set up a special team for testing.
+6. Select the **Install** button at the bottom of the dialog box.
-This finishes the App Studio portion of this walkthrough. You should now see your app running in Teams, however, the bot and the messaging extension will not work until you update the hosted applications environment to know what the App IDs and passwords are.
+Your app is now available in Teams. However, the bot and the messaging extension will not work until you update the hosted applications environment with the App IDs and passwords.
<img width="450px" alt="The finished app" src="~/assets/images/get-started/Finishedhelloworld.png"/>
platform Prepare Environment https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/includes/prepare-environment.md
## Prepare your development environment
-The first thing to do is to prepare your development environment. Make sure custom app uploading is enabled for the Office 365 organization where you want to build your app. If you need a dedicated development tenant, you can sign up for the [Office 365 developer program](https://developer.microsoft.com/office/dev-program). For more information, see [setup your development environment](~/concepts/build-and-test/prepare-your-o365-tenant.md).
+The first thing to do is to prepare your development environment. Custom app uploading must be enabled for the Office 365 organization where you want to build your app. If you need a dedicated development tenant, you can sign up for the [Office 365 developer program](https://developer.microsoft.com/office/dev-program). For more information, see [setup your development environment](~/concepts/build-and-test/prepare-your-o365-tenant.md).
platform Add Authentication https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/add-authentication.md
At this point, the window closes and control is passed to the Teams client. The
} ```
-## Samples
-For sample code showing the messaging-extensions authentication process, see:
-
-[Microsoft Teams messaging-extensions authentication sample](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/52.teams-messaging-extensions-search-auth-config)
+## Code sample
+|**Sample name** | **Description** |**.NET** | **Node.js**|
+|-|--|--|-|
+|Messaging extensions - auth and config | A Messaging Extension that has a configuration page, accepts search requests, and returns results after the user has signed in. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/52.teams-messaging-extensions-search-auth-config)|[View](https://github.com/microsoft/BotBuilder-Samples/blob/main/samples/javascript_nodejs/52.teams-messaging-extensions-search-auth-config)|
platform Define Search Command https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/messaging-extensions/how-to/search-commands/define-search-command.md
Messaging extension search commands allow your users to search external systems and insert the results of that search into a message in the form of a card.
-[!Note] Result card size limit is 28kb. If the result card size is over 28kb, it will not be sent.
+> [!NOTE]
+> The result card size limit is 28 KB. The card is not sent if its size exceeds 28 KB.
## Choose messaging extension invoke locations
Now that you've decided how users will interact with your search command, it is
### Create a command using App Studio
-The following steps assume you've already [created a messaging extension](~/messaging-extensions/how-to/create-messaging-extension.md).
+The prerequisite to create a search command is that you must already create a messaging extension. For information on how to create a messaging extension, see [create a messaging extension](~/messaging-extensions/how-to/create-messaging-extension.md).
-1. From the Microsoft Teams client, open **App Studio** and select the **Manifest Editor** tab.
-2. If you've already created your app package in App Studio, chose it from the list. If not, you can import an existing app package.
-3. Select the **Add** button in the Command section.
-4. Choose **Allow users to query your service for information and insert that into a message**.
-5. Add a **Command Id** and a **Title**.
-6. Select where you want your search command to be triggered from. Selecting **message** does not currently alter the behavior of your search command.
-7. Add your search parameter.
-8. Select **Save**.
+**To create a search command**
+1. From the Microsoft Teams client, open **App Studio**, and select the **Manifest editor** tab.
+1. If you already created an app package in the **App Studio**, choose it from the list. If you have not created an app package, import an existing one.
+1. After importing an app package, select **Messaging extensions** under **Capabilities**.
+1. Select **Add** in the **Command** section in the messaging extensions page.
+1. Choose **Allow users to query your service for information and insert that into a message**.
+1. Add a **Command Id** and a **Title**.
+1. Select the location from where your search command must be triggered. Selecting **message** does not currently alter the behavior of your search command.
+1. Add your search parameter and select **Save**.
+
### Manually create a command To manually add your messaging extension search command to your app manifest, you'll need to add the following parameters to your `composeExtension.commands` array of objects.
platform Auth Aad Sso https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-aad-sso.md
microsoftTeams.authentication.getAuthToken(authTokenRequest);
When you call `getAuthToken` - and additional user consent is required (for user-level permissions) - we will show a dialog to the user encouraging them to grant additional consent.
-Once you've received the access token in the success callback you can decode the access token to view the claims associated with that token. (Optionally, you can manually copy/paste the access token into a tool such as [JWT.io](https://jwt.io/) to inspect its contents). If you are not receiving the UPN (User Principal Name) in the returned access token, you can add it as an [optional claim](https://docs.microsoft.com/azure/active-directory/develop/active-directory-optional-claims) in Azure AD.
+After you receive the access token in the success callback, you can decode the access token to view the claims associated with that token. Optionally, you can manually copy and paste the access token into a tool, such as [jwt.ms](https://jwt.ms/) to inspect its contents. If you are not receiving the User Principal Name (UPN) in the returned access token, you can add it as an [optional claim](https://docs.microsoft.com/azure/active-directory/develop/active-directory-optional-claims) in Azure AD.
<p> <img src="~/assets/images/tabs/tabs-sso-prompt.png" alt="Tab single sign-on SSO dialog prompt" width="75%"/>
platform Auth Flow Tab https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-flow-tab.md
keywords: teams authentication flow tabs
# Microsoft Teams authentication flow for tabs
-> [!Note]
-> For authentication to work for your tab on mobile clients, you need to ensure you're using at least the 1.4.1 version of the Teams JavaScript SDK.
-> Teams SDK launches separate window for authentication flow and hence samesite attribute can be set to 'Lax'. Currently, SameSite=None is not supported by the Teams desktop client or older versions of Chrome or Safari.
+> [!NOTE]
+> For authentication to work for your tab on mobile clients, you must ensure you are using at least 1.4.1 version of the Microsoft Teams JavaScript SDK.
+> Teams SDK launches separate window for authentication flow. Set the `SameSite` attribute to **Lax**. Teams desktop client or older versions of Chrome or Safari do not support `SameSite`=None.
-OAuth 2.0 is an open standard for authentication and authorization used by Azure AD and many other identity providers. A basic understanding of OAuth 2.0 is a prerequisite for working with authentication in Teams; [here's a good overview](https://aaronparecki.com/oauth-2-simplified/) that's easier to follow than the [formal specification](https://oauth.net/2/). Authentication flow for tabs and bots are a little different because tabs are very similar to websites so they can use OAuth 2.0 directly; bots are not and must do a few things differently, but the core concepts are identical.
+OAuth 2.0 is an open standard for authentication and authorization used by Azure Active Directory (AAD) and many other identity providers. A basic understanding of OAuth 2.0 is a prerequisite for working with authentication in Teams. For more information, see [OAuth 2 simplified](https://aaronparecki.com/oauth-2-simplified/) that is easier to follow than the [formal specification](https://oauth.net/2/). Authentication flow for tabs and bots are different because tabs are similar to websites so they can use OAuth 2.0 directly. Bots do a few things differently, but the core concepts are identical.
-*See*, [Initiate authentication flow for tabs](~/tabs/how-to/authentication/auth-tab-aad.md#initiate-authentication-flow) for an example of authentication flow for tabs and bots using Node and the [OAuth 2.0 implicit grant type](https://oauth.net/2/grant-types/implicit/).
+For an example of authentication flow for tabs and bots using Node and the [OAuth 2.0 implicit grant type](https://oauth.net/2/grant-types/implicit/), see [initiate authentication flow for tabs](~/tabs/how-to/authentication/auth-tab-aad.md#initiate-authentication-flow).
+
+> [!NOTE]
+> Before showing a **Login** button to the user and calling the `microsoftTeams.authentication.authenticate` API in response to selecting the button, you must wait for the SDK initialization to complete. You can pass a callback to the `microsoftTeams.initialize` API that is called when initialization completes.
![Tab authentication sequence diagram](~/assets/images/authentication/tab_auth_sequence_diagram.png)
-1. The user interacts with the content on the tab configuration or content page, commonly a button labeled "Sign in" or "Log in".
-2. The tab constructs the URL for its auth start page, optionally using information from URL placeholders or by calling `microsoftTeams.getContext()` Teams client SDK method to streamline the authentication experience for the user. For example, when authenticating with Azure AD, if the `login_hint` parameter is set to the user's email address, the user may not even have to sign in if they have done so recently, because Azure AD will use the user's cached credentials if possible: the popup will flash briefly and then disappear.
+1. The user interacts with the content on the tab configuration or content page, commonly a **Sign in** or **Log in** button.
+2. The tab constructs the URL for its auth start page. Optionally, it uses information from URL placeholders or calls `microsoftTeams.getContext()` Teams client SDK method to streamline the authentication experience for the user. For example, when authenticating with AAD, if the `login_hint` parameter is set to the user's email address, the user does not have to sign in if they have done so recently. This is because AAD uses the user's cached credentials. The pop-up window is shown briefly and then disappears.
3. The tab then calls the `microsoftTeams.authentication.authenticate()` method and registers the `successCallback` and `failureCallback` functions.
-4. Teams opens the start page in an iframe in a pop-up window. The start page generates random `state` data, saves it for future validation, and redirects to the identity provider's `/authorize` endpoint such as `https://login.microsoftonline.com/<tenant ID>/oauth2/authorize` for Azure AD. Replace `<tenant id>` with your own tenant id (context.tid).
- * Like other application auth flows in Teams, the start page must be on a domain that's in its `validDomains` list, and on the same domain as the post-login redirect page.
- * **IMPORTANT**: The OAuth 2.0 implicit grant flow calls for a `state` parameter in the authentication request which contains unique session data to prevent a [cross-site request forgery attack](https://en.wikipedia.org/wiki/Cross-site_request_forgery). The examples below use a randomly-generated GUID for the `state` data.
+4. Teams opens the start page in an iframe in a pop-up window. The start page generates random `state` data, saves it for future validation, and redirects to the identity provider's `/authorize` endpoint, such as `https://login.microsoftonline.com/<tenant ID>/oauth2/authorize` for Azure AD. Replace `<tenant id>` with your own tenant id that is context.tid.
+Similar to other application auth flows in Teams, the start page must be on a domain that is in its `validDomains` list, and on the same domain as the post sign in redirect page.
+
+ > [!NOTE]
+ > The OAuth 2.0 implicit grant flow calls for a `state` parameter in the authentication request, which contains unique session data to prevent a [cross-site request forgery attack](https://en.wikipedia.org/wiki/Cross-site_request_forgery). The examples use a randomly-generated GUID for the `state` data.
+ 5. On the provider's site, the user signs in and grants access to the tab. 6. The provider takes the user to the tab's OAuth 2.0 redirect page with an access token. 7. The tab checks that the returned `state` value matches what was saved earlier, and calls `microsoftTeams.authentication.notifySuccess()`, which in turn calls the `successCallback` function registered in step 3. 8. Teams closes the pop-up window.
-9. The tab either displays configuration UI or refreshes or reloads the tabs content, depending on where the user started from.
+9. The tab either displays configuration UI, refreshes, or reloads the tabs content, depending on where the user started from.
## Treat tab context as hints
-Although the tab context provides helpful information regarding the user, don't use this information to authenticate the user whether you get it as URL parameters to your tab content URL or by calling the `microsoftTeams.getContext()` function in the Microsoft Teams client SDK. A malicious actor could invoke your tab content URL with its own parameters, and a web page impersonating Microsoft Teams could load your tab content URL in an iframe and return its own data to the `getContext()` function. You should treat the identity-related information in the tab context simply as hints and validate them before use. Refer to the notes in [Navigate to the authorization page from your popup page](~/tabs/how-to/authentication/auth-tab-aad.md#navigate-to-the-authorization-page-from-your-popup-page).
+Although the tab context provides helpful information regarding the user, do not use this information to authenticate the user. Do authenticate the user even if you get the information as URL parameters to your tab content URL or by calling the `microsoftTeams.getContext()` function in the Microsoft Teams client SDK. A malicious actor can invoke your tab content URL with its own parameters. The actor can also invoke a web page impersonating Microsoft Teams to load your tab content URL in an iframe and return its own data to the `getContext()` function. You must treat the identity-related information in the tab context simply as hints and validate them before use. Refer to the notes in [navigate to the authorization page from your pop-up page](~/tabs/how-to/authentication/auth-tab-aad.md#navigate-to-the-authorization-page-from-your-popup-page).
## Samples
-For sample code showing the tab authentication process see:
+For sample code showing the tab authentication process, see:
-* [Microsoft Teams tab authentication sample (Node)](https://github.com/OfficeDev/microsoft-teams-sample-complete-node)
-* [Microsoft Teams tab authentication sample (C#)](https://github.com/OfficeDev/microsoft-teams-sample-complete-csharp)
+* [Teams tab authentication sample (Node)](https://github.com/OfficeDev/microsoft-teams-sample-complete-node)
+* [Teams tab authentication sample (C#)](https://github.com/OfficeDev/microsoft-teams-sample-complete-csharp)
## More details
-For a detailed implementation walkthrough for tab authentication targeting Azure Active Directory see:
+For a detailed implementation for tab authentication using AAD, see:
-* [Authenticate a user in a Microsoft Teams tab](~/tabs/how-to/authentication/auth-tab-AAD.md)
+* [Authenticate a user in a Teams tab](~/tabs/how-to/authentication/auth-tab-AAD.md)
* [Silent authentication](~/tabs/how-to/authentication/auth-silent-AAD.md)
platform Auth Silent Aad https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/how-to/authentication/auth-silent-aad.md
keywords: teams authentication SSO silent AAD
# Silent authentication > [!NOTE]
-> For authentication to work for your tab on mobile clients, you need to ensure you're using at least the 1.4.1 version of the Teams JavaScript SDK.
+> For authentication to work for your tab on mobile clients, ensure you are using at least 1.4.1 version of the Teams JavaScript SDK.
-Silent authentication in Azure Active Directory (Azure AD) minimizes the number of times a user needs to enter their login credentials by silently refreshing the authentication token. (For true single sign-on support, view our [SSO Documentation](~/tabs/how-to/authentication/auth-aad-sso.md))
+Silent authentication in Azure Active Directory (AAD) minimizes the number of times a user enters their sign in credentials by silently refreshing the authentication token. For true single sign-on support, see [SSO documentation](~/tabs/how-to/authentication/auth-aad-sso.md).
-If you want to keep your code completely client-side, you can use the [Azure Active Directory Authentication Library](/azure/active-directory/develop/active-directory-authentication-libraries) for JavaScript to attempt to acquire an Azure AD access token silently. This means that the user may never see a popup dialog if they have signed in recently.
+If you want to keep your code completely client-side, you can use the [AAD authentication library](/azure/active-directory/develop/active-directory-authentication-libraries) for JavaScript to get an AAD access token silently. If the user has signed in recently, they never see a popup dialog box.
Even though the ADAL.js library is optimized for AngularJS applications, it also works with pure JavaScript single-page applications. > [!NOTE]
-> Currently, silent authentication only works for tabs. It does not yet work when signing in from a bot.
+> Currently, silent authentication only works for tabs. It does not work when signing in from a bot.
## How silent authentication works
-The ADAL.js library creates a hidden iframe for OAuth 2.0 implicit grant flow, but it specifies `prompt=none` so that Azure AD never shows the login page. If user interaction is required because the user needs to log in or grant access to the application, Azure AD will immediately return an error that ADAL.js then reports to your app. At this point your app can show a login button if needed.
+The ADAL.js library creates a hidden iframe for OAuth 2.0 implicit grant flow. But the library specifies `prompt=none`, so Azure AD never shows the sign in page. If user interaction is required because the user needs to sign in or grant access to the application, AAD immediately returns an error that ADAL.js reports to your app. At this point your app can show a sign in button if required.
## How to do silent authentication
-The code in this article comes from the Teams sample app [Microsoft Teams Authentication Sample (Node)](https://github.com/OfficeDev/microsoft-teams-sample-complete-node).
+The code in this article comes from the Teams sample app that is [Teams authentication sample node](https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/app-auth/nodejs/src/views/tab/silent/silent.hbs).
### include and configure ADAL
Include the ADAL.js library in your tab pages and configure ADAL with your clien
### Get the user context
-In the tab's content page, call `microsoftTeams.getContext()` to get a login hint for the current user. This will be used as a login_hint in the call to Azure AD.
+In the tab's content page, call `microsoftTeams.getContext()` to get a sign in hint for the current user. This is used as a loginHint in the call to AAD.
```javascript // Set up extra query parameters for ADAL
if (loginHint) {
### Authenticate
-If ADAL has an unexpired token cached for the user, use that. Otherwise, attempt to get a token silently by calling `acquireToken(resource, callback)`. ADAL.js will call your callback function with the requested token, or an error if authentication fails.
+If ADAL has an unexpired token cached for the user, use the token. Alternately, attempt to get a token silently by calling `acquireToken(resource, callback)`. ADAL.js will call your callback function with the requested token, or give an error if authentication fails.
-If you get an error in the callback function, show a login button and fall back to an explicit login.
+If you get an error in the callback function, show a sign in button and fall back to an explicit sign in.
```javascript let authContext = new AuthenticationContext(config); // from the ADAL.js library
authContext.acquireToken(config.clientId, function (errDesc, token, err, tokenTy
### Process the return value
-Let ADAL.js take care of parsing the result from Azure AD by calling `AuthenticationContext.handleWindowCallback(hash)` in the login callback page.
+ADAL.js parses the result from AAD by calling `AuthenticationContext.handleWindowCallback(hash)` in the sign in callback page.
-Check that we have a valid user and call `microsoftTeams.authentication.notifySuccess()` or `microsoftTeams.authentication.notifyFailure()` to report status back to your main tab content page.
+Check that you have a valid user and call `microsoftTeams.authentication.notifySuccess()` or `microsoftTeams.authentication.notifyFailure()` to report the status to your main tab content page.
```javascript if (authContext.isCallback(window.location.hash)) {
platform What Are Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tabs/what-are-tabs.md
Apps that are [distributed through Appsource](~/concepts/deploy-and-publish/apps
> [!div class="nextstepaction"] > [Learn more: Integrate QR or barcode scanner capability in Teams](../concepts/device-capabilities/qr-barcode-scanner-capability.md)
+> [!div class="nextstepaction"]
+> [Learn more: Integrate location capabilities in Teams](../concepts/device-capabilities/location-capability.md)
platform Cards Format https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/cards/cards-format.md
You can include an inline image with any Teams card. Images an be formatted as
There are two card types that support Markdown in Teams: > [!div class="checklist"]
-> * **Adaptive Cards**: Markdown is supported in Adaptive Card `Textblock` field, as well as `Fact.Title` and `Fact.Value`. HTML is not supported in adaptive cards.
+> * **Adaptive cards**: Markdown is supported in Adaptive card `Textblock` field, as well as `Fact.Title` and `Fact.Value`. HTML is not supported in Adaptive cards.
> * **O365 Connector Cards**: Markdown and limited HTML is supported in Office 365 Connector cards in the text fields.
-# [**Markdown formatting: Adaptive Cards**](#tab/adaptive-md)
+# [**Markdown formatting: Adaptive cards**](#tab/adaptive-md)
The supported styles for `Textblock`, `Fact.Title` and `Fact.Value` are:
The following Markdown tags are not supported:
> [!IMPORTANT] > Adaptive cards do not support HTML formatting.
-### Newlines for Adaptive Cards
+### Newlines for Adaptive cards
In lists you can use the `\r` or `\n` escape sequences for newlines. Using `\n\n` in a list will cause the next element in the list to be indented. If you need newlines elsewhere in the textblock, use `\n\n`.
-### Mobile and desktop differences for Adaptive Cards
+### Mobile and desktop differences for Adaptive cards
Formatting is slightly different between the desktop and the mobile versions of Teams.
-On the desktop, Adaptive Card Markdown formatting appears like this in both web browsers and in the Teams client application:
+On the desktop, Adaptive card Markdown formatting appears like this in both web browsers and in the Teams client application:
-![Adaptive Card Markdown formatting in the desktop client](../../assets/images/cards/Adaptive-markdown-desktop-client.png)
+![Adaptive card Markdown formatting in the desktop client](../../assets/images/cards/Adaptive-markdown-desktop-client.png)
-On iOS, Adaptive Card Markdown formatting appears like this:
+On iOS, Adaptive card Markdown formatting appears like this:
-![Adaptive Card Markdown formatting in iOS](../../assets/images/cards/Adaptive-markdown-iOS-75.png)
+![Adaptive card Markdown formatting in iOS](../../assets/images/cards/Adaptive-markdown-iOS-75.png)
On Android, Adaptive Card Markdown formatting appears like this:
-![Adaptive Card Markdown formatting in Android](../../assets/images/cards/Adaptive-markdown-Android.png)
+![Adaptive card Markdown formatting in Android](../../assets/images/cards/Adaptive-markdown-Android.png)
-### More information on Adaptive Cards
+### More information on Adaptive cards
[Text features in Adaptive cards](/adaptive-cards/create/textfeatures) The date and localization features mentioned in this topic are not supported in Teams.
The date and localization features mentioned in this topic are not supported in
### Mention support within Adaptive cards v1.2
-Card based mentions are supported in Web, Desktop and mobile clients. You can add @ mentions within an adaptive card body for bots and messaging extension responses. To add @ mentions in cards, follow the same notification logic and rendering as that of message based [mentions in channel and group chat conversations](../../bots/how-to/conversations/channel-and-group-conversations.md#working-with-mentions ).
+Card based mentions are supported in Web, Desktop and mobile clients. You can add @ mentions within an Adaptive card body for bots and messaging extension responses. To add @ mentions in cards, follow the same notification logic and rendering as that of message based [mentions in channel and group chat conversations](../../bots/how-to/conversations/channel-and-group-conversations.md#working-with-mentions ).
Bots and messaging extensions can include mentions within the card content in [TextBlock](https://adaptivecards.io/explorer/TextBlock.html) and [FactSet](https://adaptivecards.io/explorer/FactSet.html) elements.
Bots and messaging extensions can include mentions within the card content in [T
> * [Media elements](https://adaptivecards.io/explorer/Media.html) are currently not supported in Adaptive cards v1.2 on the Teams platform. > * Channel & Team mentions are not supported in bot messages.
-### Constructing mentions
+#### Constructing mentions
-To include a mention in an Adaptive Card your app needs to include the following elements
+To include a mention in an Adaptive card your app needs to include the following elements
-* `<at>username</at>` in the supported adaptive card elements
+* `<at>username</at>` in the supported Adaptive card elements
* The `mention` object inside of an `msteams` property in the card content, which includes the Teams user id of the user being mentioned
-### Sample Adaptive card with a mention
+#### Sample Adaptive card with a mention
``` json {
To include a mention in an Adaptive Card your app needs to include the following
} ``` +
+### Information masking in Adaptive cards
+Use the information masking property to mask specific information, such as password or sensitive information from users.
+
+> [!NOTE]
+> The information masking property is currently available in the developer preview only.
+
+#### Mask information
+To mask information in Adaptive cards, add the `isMasked` property to **type** `Input.Text`, and set its value to *true*.
+
+#### Sample Adaptive card with masking property
+
+```json
+{
+ "type": "Input.Text",
+ "id": "secretThing",
+ "style": "password",
+ "isMasked": true
+ },
+```
+
+The following image is an example of masking information in Adaptive cards:
+
+![Masking information image](../../assets/images/cards/masking-information-view.png)
+
+### Full width Adaptive card
+You can use the `msteams` property to expand the width of an Adaptive card and make use of additional canvas space. For information on how to use the property, see the following example:
+
+#### Constructing full width cards
+To make a full width Adaptive card the `width` object in `msteams` property in the card content must be set to `Full`.
+In addition, your app must include the following elements:
+
+#### Sample adaptive card with full width
+
+``` json
+{
+ "type": "AdaptiveCard",
+ "body": [{
+ "type": "Container",
+ "items": [{
+ "type": "TextBlock",
+ "text": "Digest card",
+ "size": "Large",
+ "weight": "Bolder"
+ }]
+ }],
+
+ "msteams": {
+ "width": "Full"
+ },
+ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
+ "version": "1.2"
+}
+```
+
+A full width Adaptive Card appears as follows:
+![Full width Adaptive Card view](../../assets/images/cards/full-width-adaptive-card.png)
+
+If you have not set the `width` property to *Full*, then the default view of the Adaptive Card is as follows:
+![Small width Adaptive Card view](../../assets/images/cards/small-width-adaptive-card.png)
+++ # [**Markdown formatting: O365 Connector Cards**](#tab/connector-md) Connector cards support limited Markdown and HTML formatting. HTML support is described in the last section.
platform Task Modules Tabs https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/task-modules/task-modules-tabs.md
To invoke a task module from a tab use `microsoftTeams.tasks.startTask()` passin
## Example: Invoking a task module
-The code below is adapted from [the task module sample](~/task-modules-and-cards/what-are-task-modules.md#task-module-samples). Here's what the task module looks like:
+The code below is adapted from [the task module sample](~/task-modules-and-cards/what-are-task-modules.md#code-sample). Here's what the task module looks like:
![Task Module - Custom Form](~/assets/images/task-module/task-module-custom-form.png)
platform What Are Task Modules https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/task-modules-and-cards/what-are-task-modules.md
With HTML/JavaScript-based task modules it is your responsibility to ensure your
Microsoft Teams will ensure that keyboard navigation works properly from the task module header into your HTML and vice-versa.
-## Task module samples
+## Code sample
+|**Sample name** | **Description** | **.NET** | **Node.js**|
+|-|--|--|-|
+|Task module sample (Bots-V4) | Samples for creating task modules. |[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/csharp)|[View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-task-module/nodejs)|
+|Task module sample (Tabs + Bots-V3) | Samples for creating task modules. |[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/csharp_dotnetcore/54.teams-task-module)|[View](https://github.com/microsoft/BotBuilder-Samples/tree/main/samples/javascript_nodejs/54.teams-task-module)|
+
-* [Node.js/TypeScript sample](https://github.com/OfficeDev/microsoft-teams-sample-task-module-nodejs)
-* [C#/.NET sample](https://github.com/OfficeDev/microsoft-teams-sample-task-module-csharp)
> [!div class="nextstepaction"] > [Learn more: Request device permissions](../concepts/device-capabilities/native-device-permissions.md)
Microsoft Teams will ensure that keyboard navigation works properly from the tas
> [!div class="nextstepaction"] > [Learn more: Integrate QR or barcode scanner capability in Teams](../concepts/device-capabilities/qr-barcode-scanner-capability.md)+
+> [!div class="nextstepaction"]
+> [Learn more: Integrate location capabilities in Teams](../concepts/device-capabilities/location-capability.md)
platform Ugradeteamsusingyeoman https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/UgradeTeamsUsingYeoman.md
+
+ Title: Tutorial - Upgrade Teams using Microsoft Teams Yeoman generator
+description: Learn how to use Microsoft Teams Yeoman generator to upgrade Teams.
+++
+# Upgrade Teams using Microsoft Teams Yeoman generator
+This tutorial helps you to upgrade your current Microsoft Teams app version to the latest version using the Microsoft Teams Yeoman generator.
+
+## Get current version of Teams
+```PowerShell
+ yo teams --version
+```
+
+## Update Teams
+The yo command lists out various options ranging from creating project to updating generator. Use the following command to select update generator:
+```PowerShell
+ yo
+```
+
+Use the arrow keys to choose **Update Generators**.
+![image of YoSelectUpdatGen](~/assets/images/Update-Teams/YoSelectUpdateGen.png)
+
+The list displays all the available generators. To select or unselect Teams version from the available options, use the **space bar** and choose a specific generator.
+![image of UseSpaceToSelectGenerators](~/assets/images/Update-Teams/UseSpaceToSelectGenerators.png)
+
+It takes few seconds to minutes for Teams installation to complete.
+
+After the installation is complete, use the following command to check the installed version:
+
+```PowerShell
+yo teams --version
+```
+
+![image of FindVersionAfterInstallation](~/assets/images/Update-Teams/FindVersionAfterInstallation.png)
+
+Congrats! You have upgraded Microsoft Teams.
+
platform Get Started Dotnet App Studio https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/tutorials/get-started-dotnet-app-studio.md
Last updated 11/09/2018
# Create your first Teams app using C# or .NET
-This tutorial helps you to create a Microsoft Teams app using C# or .NET.
+This tutorial helps you to create a Microsoft Teams app using C# or .NET. To do this, you must:
+
+* Prepare your environment
+* Get prerequisites
+* Download the sample
+* Build and run the sample
+* Host the sample app
+* Update the credentials for your hosted app
+* Configure the app tab
[!include [prepare your environment](~/includes/prepare-environment.md)]
This tutorial helps you to create a Microsoft Teams app using C# or .NET.
## Get prerequisites
-To complete this tutorial, you need to get the following tools:
+To complete this tutorial, you need to install the following tools:
- [Install Git](https://git-scm.com/downloads)-- [Install Visual Studio](https://www.visualstudio.com/downloads/). You can install the free community edition.-
-During installation, if there is an option to add `git` to the PATH, choose it.
+- [Install Visual Studio](https://www.visualstudio.com/downloads/)
-In a terminal window, run the following command to verify your `git` installation:
+You can install the free community edition of Visual Studio. During installation, if there is an option to add `git` to the path, select it. In a terminal window, run the following command to verify your `git` installation:
```bash $ git --version
git version 2.17.1.windows.2
``` > [!NOTE]
-> Use a suitable terminal window on your platform. These examples use Bash but run on most platforms.
+> Use a suitable terminal window on your platform. These examples use Git Bash but can be run on most platforms.
-Make sure to launch the latest version of Visual Studio and install any updates.
+Open the latest version of Visual Studio and install any updates.
You can use the same terminal window to run the commands in this tutorial.
You can use the same terminal window to run the commands in this tutorial.
## Download the sample
-You can get started with a simple [Hello, World!](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-hello-world/csharp) sample in C#. In a terminal window, run the following command to clone the sample repository to your local machine:
+You can get started with a simple [Hello, World!](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/app-hello-world/csharp) sample in C#. In a terminal window, run the following command to clone the sample repository to your computer:
```bash git clone https://github.com/OfficeDev/Microsoft-Teams-Samples.git ``` > [!TIP]
-> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/Microsoft-Teams-Samples) to modify and save your changes to GitHub for reference.
+> You can [fork](https://help.github.com/articles/fork-a-repo/) this [repo](https://github.com/OfficeDev/Microsoft-Teams-Samples) to modify and save your changes to GitHub.
<a name="BuildRun"></a> ## Build and run the sample
-After the repo is cloned, use Visual Studio to open the solution file `Microsoft.Teams.Samples.HelloWorld.sln` from the **Microsoft-Teams-Samples/samples/app-hello-world/csharp** directory of the sample and select `Build Solution` from the `Build` menu. To run the sample press `F5` or choose `Start Debugging` from the `Debug` menu.
+After the repo is cloned, use Visual Studio to open the solution file **Microsoft.Teams.Samples.HelloWorld.sln** from the **Microsoft-Teams-Samples/samples/app-hello-world/csharp** directory of the sample. Then, select **Build Solution** from the **Build** menu. To run the sample, press **F5** or select **Start Debugging** from the **Debug** menu.
-When the app starts, a browser window opens with the root of the app launched. You can navigate to the following URLs to verify that all the app URLs are loading:
+When the app starts, a browser window opens with the root of the app launched. You can go to the following URLs to verify that all the app URLs are loading:
- [https://localhost:44327/](https://localhost:44327/) - [https://localhost:44327/hello](https://localhost:44327/hello)
When the app starts, a browser window opens with the root of the app launched. Y
<a name="HostSample"></a> > [!Note]
-> If you receive an error `Could not find a part of the path … bin\roslyn\csc.exe`, update the package with the command `Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r`. For more information, see [this question on StackOverflow](https://stackoverflow.com/questions/32780315).
+> If you receive an error `Could not find a part of the path … bin\roslyn\csc.exe`, update the package with the command `Update-Package Microsoft.CodeDom.Providers.DotNetCompilerPlatform -r`. For more information, see [this question on Stack Overflow](https://stackoverflow.com/questions/32780315).
## Host the sample app
-Apps in Microsoft Teams are web applications that provide one or more capabilities. For the Teams platform to load your app, your app must be reachable from the internet. To make your app reachable from the internet, you need to host your app. You can either host it in Microsoft Azure for free or create a tunnel to the local process on your development machine using `ngrok`. When you finish hosting your app, note its root URL. For example, `https://yourteamsapp.ngrok.io` or `https://yourteamsapp.azurewebsites.net`.
+Apps in Microsoft Teams are web applications that provide one or more capabilities. For the Teams platform to load your app, your app must be available on the internet. To do this, you need to host your app. You can either host it in Microsoft Azure for free or create a tunnel to the local process on your computer using `ngrok`. After you host your app, note its root URL, such as `https://yourteamsapp.ngrok.io` or `https://yourteamsapp.azurewebsites.net`.
### Tunnel using ngrok
-For quick testing, you can run the app on your local machine and create a tunnel to it through a web endpoint. [ngrok](https://ngrok.com) is a free tool with which you can get a web address such as `https://d0ac14a5.ngrok.io`. You can [download and install](https://ngrok.com/download) ngrok. Make sure you add it to a location in your `PATH`.
+For quick testing, you can run the app on your computer and create a tunnel to it through a web endpoint. [`ngrok`](https://ngrok.com) is a free tool with which you can get a web address, such as `https://d0ac14a5.ngrok.io`. You can [download and install](https://ngrok.com/download) ngrok and add it to a location in your `PATH`.
-After you install ngrok, open a new terminal window and run the following command to create a tunnel:
+After you install `ngrok`, open a new terminal window and run the following command to create a tunnel:
```bash ngrok http 44327 -host-header=localhost:44327 ```
-The sample uses port 44327 be sure to specify it.
-
-Ngrok listens to requests from the internet and routes them to your app running on port 44327. To verify, open your browser and go to `https://d0ac14a5.ngrok.io/hello` to load your app's hello page. Instead of this URL, use the forwarding address displayed by ngrok in your console session.
+`Ngrok` listens to requests from the internet and routes them to your app running on port 44327. To verify, open your browser and go to `https://d0ac14a5.ngrok.io/hello` to load your app's hello page. Instead of this URL, use the forwarding address displayed by `ngrok` in your console session.
> [!NOTE]
-> If you have used a different port in the [build and run](#build-and-run-the-sample) step, make sure you use the same port number to setup the `ngrok` tunnel.
+> If you have used a different port in the [build and run](#build-and-run-the-sample) step, ensure you use the same port number to setup the `ngrok` tunnel.
> [!TIP]
-> It is a good idea to run `ngrok` in a different terminal window. This is done to keep ngrok from running without interfering with the app, which you have to stop, rebuild, and rerun. The `ngrok` session provides useful debugging information in this window.
+> It is a good idea to run `ngrok` in a different terminal window. This is done to keep `ngrok` from running without interfering with the app. You have to stop, rebuild, and rerun the app. The `ngrok` session provides useful debugging information in this window.
-The app is only available during the current session on your development machine. If the machine is shut down or goes to sleep, the service is no longer available. Remember this when you share the app for testing to other users. If you have to restart the service, the app returns a new address and you must update every location that uses that address. The paid version of ngrok does not have this limitation.
+The app is only available during the current session on your computer. If the machine is shut down or goes to sleep, the service is no longer available. Remember this when you share the app for testing to other users. If you have to restart the service, the app returns a new address and you must update every location that uses that address. The paid version of `ngrok` does not have this limitation.
### Host in Azure
-Microsoft Azure hosts your .NET application on a free tier using shared infrastructure. This is sufficient to run the `Hello World` sample. For more information, see [creating a new free account](https://azure.microsoft.com/free/).
+Microsoft Azure hosts your .NET application on a free tier using shared infrastructure. This is sufficient to run the `Hello World` sample. For more information, see [creating a new free Azure account](https://azure.microsoft.com/free/).
Visual Studio has built-in support for app deployment to different providers, including Azure.
Visual Studio has built-in support for app deployment to different providers, in
## Update the credentials for your hosted app
-The sample app requires the following environment variables to be set to the values you made a note of earlier.
+The sample app requires the environment variables to be set to the values that you saved in the [text file](~/includes/get-started/get-started-use-app-studio.md#bots).
-Open up the appsettings.json file. Update the *MicrosoftAppId* value with your Bot ID that you saved earlier. Update the *MicrosoftAppPassword* with the Bot password you saved earlier.
+Open the appsettings.json file. Update the **MicrosoftAppId** value with your bot ID that you saved in the text file. Update the **MicrosoftAppPassword** with the bot password you saved.
<img width="560px" alt="Setting the keys" src="~/assets/images/get-started/get-started-net-azure-add-keys.png"/>
-Once these changes are made, rebuild the app. If you are using ngrok, run the app locally, and if you are hosting in Azure redeploy the app.
+After these changes are made, rebuild the app. If you are using ngrok, run the app locally, and if you are hosting in Azure, redeploy the app.
## Configure the app tab
-Once you install the app into a team, you will need to configure it to show content. Go to a channel in the team where you installed the sample app and click on the **'+'** button to add a new tab. You can then choose `Hello World` from the **Add a tab** list. You will then be presented with a configuration dialog. This dialog will let you choose which tab to display in this channel. Once you select the tab and click on `Save` then you can see the `Hello World` tab loaded with the tab you chose.
+Once you install the app into a team, you must configure it to show content. Go to a channel in the team where you installed the sample app and select the **'+'** button to add a new tab. Choose **Hello World** from the **Add a tab** list. A configuration dialog box is displayed that enables you to choose the tab to display in this channel. After you select the tab and select **Save** the `Hello World` tab is loaded with the tab.
<img width="530px" alt="Screenshot of configure" src="~/assets/images/samples-hello-world-tab-configure.png" /> ### Test your bot in Teams
-You can now interact with the bot in Teams. Choose a channel in the team where you registered your app and type `@your-bot-name`. This is called an **\@mention**. Whatever message you send to the bot will be sent back to you as a reply.
+Now you can test the bot in Teams. Select a channel in the team where you registered your app and type `@your-bot-name`. This is called an **\@mention**. The bot replies to any message that you send.
<img width="450px" alt="Bot responses" src="~/assets/images/samples-hello-world-bot.png" /> ### Test your messaging extension
-To test your messaging extension, you can click on the three dots below the input box in your conversation view. A menu will pop up with the **'Hello World'** app in it. When you click it, you will see a bunch of random texts showing up. You can choose any one of them and it is inserted into your conversation.
+To test your messaging extension, you can select **...** below the input box in your conversation view. A menu with the **'Hello World'** app is displayed. When you select it, a set of random texts is displayed. You can select one of the random text and that is inserted into your conversation.
<img width="530px" alt="Messaging extension menu" src="~/assets/images/samples-hello-world-messaging-extensions-menu.png" /> <img width="530px" alt="Messaging extension result" src="~/assets/images/samples-hello-world-messaging-extensions-result.png" />
-Choose one of the random texts, and you will see a card formatted and ready to send with your own message at the bottom.
+Select one of the random text. A card formatted and ready to send with your own message is shown.
<img width="530px" alt="Messaging extension send" src="~/assets/images/samples-hello-world-messaging-extensions-send.png" />
platform Add Outgoing Webhook https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/add-outgoing-webhook.md
Responses from your outgoing webhooks appear in the same reply chain as the orig
>* The next dialog window displays an [Hash-based Message Authentication Code (HMAC)](https://security.stackexchange.com/questions/20129/how-and-when-do-i-use-hmac/20301) security token that is used to authenticate calls between Teams and the designated outside service. >* The outgoing webhook is available to the team's users, only if the URL is valid and the server and client authentication tokens are equal for example, an HMAC handshake.
-## Code samples
+## Code sample
+|**Sample name** | **Description** | **.NET** | **Node.js** |
+|-||--|-|
+| Outgoing webhooks | Samples to create **Custom Bots** to be used in Microsoft Teams.| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/outgoing-webhook/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/outgoing-webhook/nodejs)|
-You can view outgoing webhook code samples on GitHub:
-
-### Node.js
-
-[OfficeDev/msteams-samples-outgoing-webhook-nodejs](https://github.com/OfficeDev/msteams-samples-outgoing-webhook-nodejs)
-
-### C\#
-
-[OfficeDev/microsoft-teams-sample-outgoing-webhook](https://github.com/OfficeDev/microsoft-teams-sample-outgoing-webhook)
platform Connectors Creating https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/webhooks-and-connectors/how-to/connectors-creating.md
Once you've uploaded your app package, to configure and use the connector in a T
1. Select the **Set up a connector** bar from the bottom right corner of dialog window. 1. The connector will be available in the section &#9679;&#9679;&#9679; => *More options* => *Connectors* => *All* => *Connectors for you team* for that team. You can navigate by scrolling to this section or search for the connector app. 1. To configure or modify the connector select the **Configure** bar.+
+## Code sample
+|**Sample name** | **Description** | **.NET** | **Node.js** |
+|-||--|-|
+| Connectors | Sample Office 365 Connector generating notifications to teams channel.| [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-todo-notification/csharp) | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-github-notification/nodejs)|
+| Generic connectors sample |Sample code for a generic connector that's easy to customize for any system which supports webhooks.| | [View](https://github.com/OfficeDev/Microsoft-Teams-Samples/tree/main/samples/connector-generic/nodejs)|
platform Whats New https://github.com/MicrosoftDocs/msteams-docs/commits/master/msteams-platform/whats-new.md
The change log lists changes to the Microsoft Teams platform and this document s
| **Date** | **Notes** | **Changed topics** | | -- | | |
+|03/04/2021|Information masking in Adaptive cards is in developer preview.| [Information masking in Adaptive cards](task-modules-and-cards/cards/cards-format.md#information-masking-in-adaptive-cards) |
+|02/19/2021|New: Added location capabilities. <br/> Update: Location capabilities information is added in the device capabilities overview, native device permissions, integrate media capabilities and QR or barcode scanner capability files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md), [Integrate location capabilities](concepts/device-capabilities/location-capability.md) |
+|02/18/2021|New: Added QR or barcode scanner capability. <br/> Update: QR or barcode scanner capability information is added in the device capabilities overview, native device permissions and integrate media capabilities files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md), [Integrate QR or barcode scanner capability](concepts/device-capabilities/qr-barcode-scanner-capability.md) |
|02/09/2021|New: Added device capabilities overview. <br/> Update: Microphone capability information is added in the native device permissions and integrate media capabilities files.|[Overview](concepts/device-capabilities/device-capabilities-overview.md), [Request device permissions](concepts/device-capabilities/native-device-permissions.md), [Integrate media capabilities](concepts/device-capabilities/mobile-camera-image-permissions.md)| |11/30/2020|New: Identity platform integration with Teams Toolkit and Visual Studio Code for tabs|[Single sign-on authentication with Teams Toolkit and Visual Studio Code for tabs](toolkit/visual-studio-code-tab-sso.md)| |11/16/2020|Teams app manifest updated to version 1.8|[Reference: Manifest schema for Microsoft Teams](resources/schem)|