Solicitar permissões de dispositivo para seu aplicativo do Teams

Você pode enriquecer seu aplicativo Teams com recursos nativos do dispositivo, como câmera, microfone e localização. Este documento orienta você sobre como solicitar o consentimento do usuário e acessar as permissões do dispositivo nativo.

Permissões de dispositivo nativo

Você deve solicitar as permissões do dispositivo para acessar as funcionalidades nativas do dispositivo. As permissões do dispositivo funcionam de maneira semelhante para todas as construções de aplicativo, como guias, caixas de diálogo (chamadas de módulos de tarefa no TeamsJS v1.x) ou extensões de mensagem. O usuário deve ir para a página de permissões nas configurações do Teams para gerenciar permissões de dispositivo. Ao acessar os recursos do dispositivo, você pode criar experiências mais avançadas na plataforma do Teams, como:

• Captura e exibição de imagens
• Digitalize o código de barras
• Grave e compartilhe vídeos curtos
• Gravar memorandos de áudio e salvá-los para uso posterior
• Usar as informações de localização do usuário para exibir informações relevantes

Acesse Permissões de acesso

A biblioteca de cliente JavaScript do Microsoft Teams fornece as ferramentas necessárias para que seu aplicativo Teams acesse as permissões de dispositivo do usuário e crie uma experiência mais avançada.

Embora o acesso a esses recursos seja padrão em navegadores da Web modernos, você deve informar o Teams sobre os recursos usados atualizando o manifesto do aplicativo. Essa atualização permite que você solicite permissões enquanto seu aplicativo é executado na área de trabalho do Teams.

Gerenciar permissões

Um usuário pode gerenciar permissões de dispositivo nas configurações do Teams selecionando Permitir ou Negar permissões para aplicativos específicos.

Especificar permissões

Atualize o manifest.json do seu dispositivo adicionando devicePermissions e especificando qual das cinco propriedades a seguir você usa em seu aplicativo:

"devicePermissions": [
    "media",
    "geolocation",
    "notifications",
    "midi",
    "openExternal"
],

Cada propriedade permite que você solicite que os usuários solicitem seu consentimento:

Para obter mais informações, consulte o manifesto do aplicativo.

Verificar permissões do seu aplicativo

Depois de adicionar devicePermissions ao manifesto do aplicativo, verifique as permissões usando a API de permissões HTML5 sem causar um prompt:

// Different query options:
navigator.permissions.query({ name: 'camera' });
navigator.permissions.query({ name: 'microphone' });
navigator.permissions.query({ name: 'geolocation' });
navigator.permissions.query({ name: 'notifications' });
navigator.permissions.query({ name: 'midi', sysex: true });

// Example:
navigator.permissions.query({name:'geolocation'}).then(function(result) {
  if (result.state == 'granted') {
    // Access granted
  } else if (result.state == 'prompt') {
    // Access has not been granted
  }
});

Usar APIs do Teams para obter permissões de dispositivo

Aproveite o HTML5 apropriado ou a API do Teams para exibir um prompt para obter consentimento para acessar permissões de dispositivo.

Por exemplo:

• Para solicitar que o usuário acesse sua localização, ligue getCurrentPosition()para:

  navigator.geolocation.getCurrentPosition(function (position) { /*... */ });
  

• Para solicitar que o usuário acesse sua câmera na área de trabalho ou na Web, você deve chamar getUserMedia():

  navigator.mediaDevices.getUserMedia({ audio: true, video: true });
  

• Para capturar as imagens no celular, o celular do Teams pede permissão quando você liga captureImage():

          function captureImage() {
          microsoftTeams.media.captureImage((error, files) => {
              // If there's any error, an alert shows the error message/code
              if (error) {
                  if (error.message) {
                      alert(" ErrorCode: " + error.errorCode + error.message);
                  } else {
                      alert(" ErrorCode: " + error.errorCode);
                  }
              } else if (files) {
                  image = files[0].content;
                  // Adding this image string in src attr of image tag will display the image on web page.
                  let imageString = "data:" + item.mimeType + ";base64," + image;
              }
          });
      } 
  

• As notificações avisam o usuário quando você chama:requestPermission()

  Notification.requestPermission(function(result) { /* ... */ });
  

• Para usar a câmera ou acessar a galeria de fotos, o aplicativo Teams pede permissão quando você liga selectMedia():

   function selectMedia() {
   microsoftTeams.media.selectMedia(mediaInput, (error, attachments) => {
       // If there's any error, an alert shows the error message/code
       if (error) {
           if (error.message) {
               alert(" ErrorCode: " + error.errorCode + error.message);
           } else {
               alert(" ErrorCode: " + error.errorCode);
           }
       } else if (attachments) {
           // creating image array which contains image string for all attached images. 
           const imageArray = attachments.map((item, index) => {
               return ("data:" + item.mimeType + ";base64," + item.preview)
           })
       }
   });
  } 
  

• Para usar o microfone, o Aplicativo móvel do Teams solicita permissão quando você chama selectMedia():

   function selectMedia() {
   microsoftTeams.media.selectMedia({ maxMediaCount: 1, mediaType: microsoftTeams.media.MediaType.Audio }, (error: microsoftTeams.SdkError, attachments: microsoftTeams.media.Media[]) => {
       // If there's any error, an alert shows the error message/code
       if (error) {
           if (error.message) {
               alert(" ErrorCode: " + error.errorCode + error.message);
           } else {
               alert(" ErrorCode: " + error.errorCode);
           }
       }
  
       if (attachments) {
           // taking the first attachment  
           let audioResult = attachments[0];
  
           // setting audio string which can be used in Video tag
           let audioData = "data:" + audioResult.mimeType + ";base64," + audioResult.preview
       }
   });
   }
  

• Para solicitar que o usuário compartilhe a localização na interface do mapa, o aplicativo Teams pede permissão quando você chama:getLocation()

  • TeamsJS v2
  • TeamsJS v1

  function getLocation() {
    location.getLocation({ allowChooseLocation: true, showMap: true }).then((location) => { 
        let currentLocation = JSON.stringify(location);
    }).catch((error) => { /*Error getting location*/ })} 
  

Veja como as solicitações de permissões do dispositivo aparecem para os usuários em dispositivos móveis e desktops.

Comportamento de permissão em sessões de login

As permissões do dispositivo são armazenadas para cada sessão de entrada. Isso significa que se você entrar em outra instância do Teams, por exemplo, em outro computador, as permissões de dispositivo de suas sessões anteriores não estarão disponíveis. Portanto, você deve consentir novamente as permissões de dispositivo para a nova sessão. Isso também significa que, se você sair do Teams ou mudar de locatário no Teams, as permissões do seu dispositivo serão excluídas da sessão de entrada anterior.

Exemplo de código

Próxima etapa

Confira também

• Funcionalidades de dispositivo
• Integrar recursos de mídia
• Integre o recurso de scanner QR ou de código de barras no Teams
• Integrar funcionalidades de localização no Teams
• APIs de aplicativos de reunião