Grant tab device permission
Microsoft Teams app that requires device permissions, such as location, camera, or microphone access, now require 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'll see the following output:
Ensure you install the following tools and set up your development environment:
|Microsoft Teams||Microsoft Teams to collaborate with everyone you work with through apps for chat, meetings, call and all in one place.|
|Microsoft 365 developer account||Access to Teams account with the appropriate permissions to install an app.|
|Visual Studio 2022 version 17.3
ASP.NET and web development workload.
|You can install the enterprise version in Visual Studio 2022, and install the workloads.|
|ngrok||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
After downloading ngrok, sign up and install authtoken.
Set up local environment
Open Microsoft Teams Samples.
From the dropdown menu, select Open with GitHub Desktop.
Set up tunnel for local web server
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:
ngrok http --host-header=localhost 3000
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.
Set up manifest file
manifest.jsonin cloned repository.
manifest.jsonin Visual Studio and make the following changes:
<<BASE_URI_DOMAIN>>with your ngrok URL in
<<BASE_URI_DOMAIN>>with your ngrok URL excluding
Build and run client app using npm
In your cloned repository, go to samples > tab-device-permissions > nodejs.
Open a new Command Prompt window, change the current directory to the copied
Run the following command in the Command Prompt to download packages and dependencies:
Run the following command in the Command Prompt to start the app:
You can see the following output in the browser:
Add tab device permission to Teams
In your cloned repository, go to samples > tab-device-permissions > nodejs > appPackage.
Create a .zip with the following files that are present in the
Go to Microsoft Teams.
Select Apps > Manage your apps.
Select Upload an app and select Upload a custom app.
Select Open to upload the .zip file that you created in the
Select Device Permission Tab to see the following output:
Test your app
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.
Did you come up with something like this?
You've completed the tutorial and now you can grant tab device permission at Teams.
Have an issue with this section? If so, please give us some feedback so we can improve this section.
Submit and view feedback for