-
Notifications
You must be signed in to change notification settings - Fork 498
/
sbs-tab-device-permissions.yml
252 lines (150 loc) · 12.4 KB
/
sbs-tab-device-permissions.yml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
### YamlMime:Tutorial
title: Grant tab device permission
metadata:
title: Grant tab device permission
description: Learn how to give tab device permissions such as location, camera and microphone access for Microsoft Teams apps.
audience: Developer
level: Beginner
ms.date: 12/24/2021
ms.topic: interactive-tutorial
nextTutorialHref: concepts/device-capabilities/browser-device-permissions.md
nextTutorialTitle: Read more on Device permissions for browser
ms.custom: mvc
ms.localizationpriority: high
items:
- durationInMinutes: 1
content: |
Microsoft Teams app that requires device permissions, such as location, camera, or microphone access, now requires users to manually grant permission in the web browser. Previously, the browser handled how to grant access permissions, but now these permissions are handled in Teams.
This step-by-step guide helps you grant tab device permission in Teams. You can see the following output:
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/output-grant-tab.png" alt-text="Screenshot shows the final output of grant tab device permission.":::
- title: Prerequisites
durationInMinutes: 1
content: |
Ensure that you install the following tools and set up your development environment:
*| | Install | For using... |
| --- | --- | --- |
| | [Microsoft Teams](https://www.microsoft.com/microsoft-teams/download-app) | Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, and call-all in one place.|
| | [Microsoft 365 developer account](/microsoftteams/platform/concepts/build-and-test/prepare-your-o365-tenant) | Access to Teams account with the appropriate permissions to install an app. |
| | [Visual Studio 2022](https://visualstudio.microsoft.com) | You can install the enterprise version in Visual Studio 2022, and install the ASP.NET and web development workloads. Use the latest version. |
| | [Node.js and npm](https://nodejs.org/) | Back-end JavaScript runtime environment. For more information, see [Node.js version compatibility table for project type](~/toolkit/build-environments.md#nodejs-version-compatibility-table-for-project-type).|
| | [ngrok](https://ngrok.com/download) | Teams app features (conversational bots, message extensions, and incoming webhooks) require inbound connections. A tunnel connects your development system to Teams. It isn't required for apps that only include tabs. This package is installed within the project directory (using npm `devDependencies`). |
> [!NOTE]
> After downloading ngrok, sign up and install [authtoken](https://ngrok.com/download).
- title: Set up local environment
durationInMinutes: 1
content: |
1. Open [Microsoft Teams Samples](https://github.com/OfficeDev/Microsoft-Teams-Samples).
1. Select **Code**. From the dropdown menu, select **Open with GitHub Desktop**.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/clone-repository-tab-device.png" alt-text="cloning the repository":::
1. Select **Clone**.
- title: Set up tunnel for local web server
durationInMinutes: 1
content: |
Use ngrok or Command Prompt to create a tunnel to your locally running web server's publicly available HTTPS endpoints. Run the following command in ngrok:
```bash
ngrok http --host-header=localhost 3000
```
> [!TIP]
> If you encounter **ERR_NGROK_4018**, follow the steps, as displayed in the Command Prompt to sign up and authenticate ngrok. Then run the `ngrok http --host-header=localhost 3000` command.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/ngrok-tab-device_1.png" alt-text=" ngrok tunnelling":::
- title: Set up manifest file
durationInMinutes: 1
content: |
1. Go to the **manifest.json** file in cloned repository.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/manifestjson-tab-device_1.png" alt-text="manifest file":::
1. Open **manifest.json** file in Visual Studio and make the following changes:
- Replace `<<BASE_URI_DOMAIN>>` with your ngrok URL in `websiteUrl`, `privacyUrl`, `termsOfUseUrl`, and `contentUrl`.
- Replace `<<BASE_URI_DOMAIN>>` with your ngrok URL excluding `https://` in `validDomains`.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/tab-device-VS-update1_1.png" alt-text="update ngrok in visual studio":::
- title: Build and run client app using npm
durationInMinutes: 1
content: |
1. In your cloned repository, go to **samples** > **tab-device-permissions** > **nodejs**.
1. Copy the **nodejs** folder path.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/nodejs-path.png" alt-text="Screenshot shows the nodejs path.":::
1. Open a new **Command Prompt** window, change the current directory to the copied **nodejs** path.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/nodejs-new-folder-path-tab-device.png" alt-text="copy the path":::
1. Run the following command in the **Command Prompt** to download packages and dependencies:
```Command-Prompt
npm install
```
1. Run the following command in the **Command Prompt** to start the app:
```Command-Prompt
npm start
```
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/npm-start-install1.png" alt-text="install and start npm":::
1. You can see the following output in the browser:
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/sbs-react_1.png" alt-text="Browser output":::
- title: Add tab device permission to Teams
durationInMinutes: 1
content: |
# [Desktop](#tab/desktop)
1. In your cloned repository, go to **samples** > **tab-device-permissions** > **nodejs** > **appPackage**.
1. Create a .zip file with the following files that are present in the **appPackage** folder:
* manifest.json
* outline.png
* color.png
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/manifest-zip-tab-device1_1.png" alt-text="create a zip":::
1. In the Teams client, select the **Apps** icon.
1. Select **Manage your apps**.
1. Select **Upload an app**.
1. Look for the option to **Upload a custom app**. If you see the option, custom app upload is enabled.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/upload-a-custom-app.png" alt-text="Screenshot shows the option to upload a custom app in Teams.":::
> [!NOTE]
> Contact your Teams administrator, if you don't find the option to upload a custom app.
1. Select **Open** to upload the .zip file that you created in the **appPackage** folder.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/manifest-folder-upload-tab-device1_2.png" alt-text="add the manifest zip":::
1. Select **Add**.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/tab-device-permission.png" alt-text="Screenshot shows the add tab device permission":::
1. Select **Device permission tab** to see the following output:
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/tab-device-permission-in-teams.png" alt-text="Screenshot shows the device permission tab." lightbox="../msteams-platform/assets/images/tab-device-permission/device-permission-tab.png":::
# [Browser](#tab/Browser)
1. In your cloned repository, go to **samples** > **tab-device-permissions** > **nodejs** > **appPackage**.
1. Create a .zip with the following files that are present in the **appPackage** folder:
* manifest.json
* outline.png
* color.png
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/manifest-zip-tab-device1_1.png" alt-text="create a zip":::
1. Go to **Microsoft Teams**, select the **Apps** icon.
1. Select **Manage your apps**.
1. Select **Upload an app**.
1. Look for the option to **Upload a custom app**. If you see the option, custom app upload is enabled.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/upload-a-custom-app.png" alt-text="Screenshot shows the option to upload a custom app in Teams.":::
> [!NOTE]
> Contact your Teams administrator, if you don't find the option to upload a custom app.
1. Select **Open** to upload the .zip file that you created in the **appPackage** folder.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/manifest-folder-upload-tab-device1_1.png" alt-text="add the manifest zip":::
1. Select **Add**.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/tab-device-permission.png" alt-text="add the app tab device permission":::
1. Select **Device Permission Tab** to see the following output:
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/mobile-browser-tab.png" alt-text="screenshot shows the browser tab device permission." lightbox="../msteams-platform/assets/images/tab-device-permission/mobile-browser-tab-device.png":::
# [Mobile](#tab/mobile)
Open Teams in mobile to see the following outputs:
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/mobile-teams-output1_1.png" alt-text="mobile tab device":::
- title: Test your app
durationInMinutes: 1
content: |
After you successfully upload the app into Teams, you must test the app to ensure the tab device permission app enables user to grant the permission.
# [Desktop](#tab/Desktop)
Select **App Permission** icon to test the app on desktop.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/desktop-teams-test-your-app.png" alt-text="screenshot shows the desktop screen of device permission tab." lightbox="../msteams-platform/assets/images/tab-device-permission/desktop-tab-device-permission.png":::
The **Tab Device Permission** window appears to allow access to the permission requests.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/tab-device-permission-window.png" alt-text="Screenshot shows the tab device permission window popup.":::
# [Browser](#tab/Browser)
Select **App Permission** icon to test the app in browser.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/browser-app-permission.png" alt-text="Screenshot shows the browser app permission." lightbox="../msteams-platform/assets/images/tab-device-permission/browser-app-permission-icon.png":::
The **Tab Device Permission** window appears to allow access to the permission requests.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/tab-device-permission-window.png" alt-text="Screenshot shows the browser tab device permission.":::
# [Mobile](#tab/Mobile)
To test the app on mobile, the following pop-up windows are displayed:
* Select **ALLOW** if you want to grant permission.
* Select **DENY** if you don't want to grant permission.
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/prompt-mobile-app1.png" alt-text="mobile output":::
---
- title: Complete challenge
durationInMinutes: 1
content: |
Did you come up with something like this?
:::image type="content" source="../msteams-platform/assets/images/tab-device-permission/output-grant-tab.png" alt-text="Screenshot shows the final output screen for grant tab device permission.":::
- content: |
You've completed the tutorial and now you can grant tab device permission at Teams.