Criar assinatura de documentos em reunião
A assinatura de reuniões é uma aplicação de exemplo do Microsoft Teams que permite aos utilizadores assinar documentos em cenários em tempo real. Proporciona uma experiência melhorada ao permitir que os utilizadores revejam e assinem documentos numa única sessão durante as reuniões. Este exemplo permite que os utilizadores assinem documentos eletronicamente com a identidade atual do inquilino. Os utilizadores podem assinar os seguintes documentos durante as reuniões:
- Contratos de compra.
- Notas de encomenda.
O modelo também é aplicável a outros cenários, como para rever e aprovar exemplos de código e documentos colaborativos. Os utilizadores podem personalizar para incorporar outros tipos de assinaturas:
- Assinaturas manuscritas.
- Assinaturas baseadas em certificados.
Este guia passo a passo ajuda-o a criar uma aplicação de assinatura de documentos na reunião. Verá o seguinte resultado depois de concluir este guia:
Pré-requisitos
Certifique-se de que instala as seguintes ferramentas para configurar o seu ambiente de desenvolvimento:
| Instalar | Para usar... | |
|---|---|---|
| Microsoft Teams | Microsoft Teams para colaborar com todas as pessoas com quem trabalha através de aplicações para chat, reuniões e ligar para todos num único local. | |
|
Visual Studio 2022 |
Pode instalar a versão empresarial no Visual Studio 2022 e instalar as cargas de trabalho de desenvolvimento web e ASP.NET. Utilize a versão mais recente. | |
| SDK .NET Core | Enlaces personalizados para depuração local e implementações de aplicações das Funções do Azure. Utilize a versão mais recente ou instale a versão portátil. | |
| Túnel de desenvolvimento | As funcionalidades da aplicação Teams (bots de conversação, extensões de mensagens e webhooks recebidos) precisam de ligações de entrada. Um túnel liga o seu sistema de desenvolvimento ao Teams. O túnel Dev é uma ferramenta avançada para abrir de forma segura o seu localhost na Internet e controlar quem tem acesso. O túnel Dev está disponível no Visual Studio 2022 versão 17.7.0 ou posterior. ou também pode utilizar o ngrok como um túnel para ligar o seu sistema de desenvolvimento ao Teams. Não é necessário para aplicações que incluam apenas separadores. Este pacote é instalado no diretório do projeto (com npm devDependencies). |
|
| Conta de programador do Microsoft 365 | Acesso à conta do Teams com as permissões adequadas para instalar uma aplicação. |
Observação
Depois de transferir o ngrok, inscreva-se e instale o authtoken.
Dica
Certifique-se de que a conta do Microsoft Teams não é uma conta de convidado.
Configurar o seu inquilino de desenvolvimento do Teams
Um inquilino é como um espaço ou um contentor para a sua organização no Teams, onde conversa, partilha ficheiros e executa reuniões. Este espaço também é onde carrega e testa a sua aplicação personalizada. Vamos verificar se está pronto para programar com o inquilino.
Verificar a opção de carregamento de aplicações personalizadas
Depois de criar o aplicativo, você deve carregar seu aplicativo no Teams sem distribuí-lo. Este processo é conhecido como carregamento de aplicações personalizadas. Inicie sessão na sua conta do Microsoft 365 para ver esta opção.
Observação
O carregamento de aplicações personalizadas é necessário para pré-visualizar e testar aplicações no ambiente local do Teams. Ative o carregamento de aplicações personalizadas para pré-visualizar e testar a sua aplicação no Teams localmente.
Já tem um inquilino e tem acesso de administrador? Vamos verificar se tem mesmo!
Para verificar o carregamento de aplicações no Teams:
No cliente do Teams, selecione o ícone Aplicações .
Selecione Gerenciar seus aplicativos.
Selecione Carregar uma aplicação.
Procure a opção Carregar uma aplicação personalizada. Se vir a opção, o carregamento de aplicações personalizadas está ativado.
Observação
Contacte o administrador do Teams se não encontrar a opção para carregar uma aplicação personalizada.
Configurar o ambiente local
Abra Microsoft-Teams-Samples.
Selecione Código.
No menu pendente, selecione Abrir com o GitHub Desktop.
Selecione Clonar.
Atualizar o registo da aplicação Microsoft Entra
Os passos seguintes ajudam-no a criar e registar o bot no portal do Azure:
- Crie e registe o seu ID do Microsoft Entra.
- Crie o segredo do cliente para ativar a autenticação SSO do bot.
- Adicione o canal do Teams para implementar o bot.
- Crie um túnel para os pontos finais do servidor Web com o túnel dev (recomendado) ou o ngrok.
- Adicione o ponto final de mensagens ao túnel dev que criou.
Adicionar Registo de aplicações
Acesse o portal do Azure.
Selecione Registros de aplicativos.
Selecione + Novo registo.
Introduza o nome da sua aplicação.
Selecione Contas em qualquer diretório organizacional (Qualquer inquilino do Microsoft Entra ID – Multi-inquilino).
Selecione Registrar.
A sua aplicação está registada no Microsoft Entra ID. É apresentada a página de descrição geral da aplicação.
Observação
Guarde o ID da aplicação do ID da Aplicação (cliente) e do ID do Diretório (inquilino) para utilização adicional.
Criar um túnel
Abra o Visual Studio.
Selecione Criar um novo projeto.
Na caixa de pesquisa, introduza ASP.NET. Nos resultados da pesquisa, selecione ASP.NET Core Web App.
Selecione Avançar.
Introduza Nome do projeto e selecione Seguinte.
Selecione Criar.
É apresentada uma janela de descrição geral.
Na lista pendente de depuração, selecione Túneis de Desenvolvimento (sem túnel ativo)>Criar um Túnel....
Uma janela pop-up será exibida.
Atualize os seguintes detalhes na janela de pop-up:
- Conta: introduza uma conta Microsoft ou GitHub.
- Nome: introduza um nome para o túnel.
- Tipo de Túnel: na lista pendente, selecione Temporário.
- Acesso: na lista pendente, selecione Público.
Selecione OK.
É apresentada uma janela de pop-up que mostra que o túnel dev foi criado com êxito.
Selecione OK.
Pode encontrar o túnel que criou na lista pendente de depuração da seguinte forma:
Selecione F5 para executar a aplicação no modo de depuração.
Se for apresentada uma caixa de diálogo Aviso de Segurança , selecione Sim.
Uma janela pop-up será exibida.
Selecione Continuar.
A home page do túnel dev é aberta numa nova janela do browser e o túnel dev está agora ativo.
Aceda ao Visual Studio e selecione Ver > Saída.
No menu pendente Consola de saída , selecione Túneis Dev.
A consola Output (Saída ) mostra o URL do túnel dev.
Adicionar uma autenticação Web
No painel esquerdo, em Gerir, selecione Autenticação.
Selecione Adicionar uma Web de plataforma>.
Introduza o URI de redirecionamento para a sua aplicação ao acrescentar
auth-endao nome de domínio completamente qualificado. Por exemplo:https://your-devtunnel-domain/auth-endouhttps://your-ngrok-domain/auth-end.Em Concessão implícita e fluxos híbridos, selecione as caixas de verificação Tokens de acesso e tokens de ID .
Selecione Configurar.
Em Web, selecione Adicionar URI.
Digite
https://token.botframework.com/.auth/web/redirect.Selecione Salvar.
Criar um segredo do cliente
No painel esquerdo, em Gerir, selecione Certificados & segredos.
Em Segredos do cliente, selecione + Novo segredo do cliente.
É apresentada a janela Adicionar um segredo do cliente .
Introduza Descrição.
Selecione Adicionar.
Em Valor, selecione Copiar para a área de transferência para guardar o valor do segredo do cliente para utilização adicional.
Adicionar permissões de API
No painel esquerdo, selecione Permissões da API.
Observação
Os utilizadores só precisam de dar consentimento a estas permissões se a aplicação Microsoft Entra estiver registada num inquilino diferente.
Selecione + Adicionar uma permissão.
Selecione Microsoft Graph.
Selecione Permissões delegadas.
Selecione as seguintes permissões:
- Permissões> de OpenIde-mail, offline_access, openid, perfil.
- Utilizador>User.Read, User.ReadBasic.All
Selecione Adicionar permissões.
Adicionar URI do ID da Aplicação
No painel esquerdo, em Gerir, selecione Expor uma API.
Junto a URI do ID da Aplicação, selecione Adicionar.
Atualize o URI do ID da Aplicação no
api://your-devtunnel-domain/botid-{AppID}formato ouapi://your-ngrok-domain/botid-{AppID}e selecione Guardar.
A imagem seguinte mostra o nome de domínio:
Adicionar um âmbito
No painel esquerdo, em Gerir, selecione Expor uma API.
Selecione + Adicionar um âmbito.
Introduza access_as_user como o Nome do âmbito.
Em Quem pode consentir?, selecione Administradores e utilizadores.
Atualize os valores dos restantes campos da seguinte forma:
Introduza O Teams pode aceder ao perfil do utilizador como Nome a apresentar do consentimento do administrador.
Introduza Permite que o Teams chame as APIs Web da aplicação como o utilizador atual como Descrição do consentimento do administrador.
Introduza O Teams pode aceder ao perfil de utilizador e fazer pedidos em nome do utilizador como Nome a apresentar do consentimento do utilizador.
Introduza Ativar o Teams para chamar as APIs desta aplicação com os mesmos direitos que o utilizador que aDescrição do consentimento do utilizador.
Verifique se o Estado está definido como Habilitado.
Selecione Adicionar escopo.
A imagem seguinte mostra os campos e os valores:
Observação
O Nome do âmbito tem de corresponder ao URI do ID da Aplicação com
/access_as_useracrescentado no final.
Adicionar aplicação cliente
No painel esquerdo, em Gerir, selecione Expor uma API.
Em Aplicações cliente autorizadas, identifique as aplicações que pretende autorizar para a aplicação Web da sua aplicação.
Selecione + Adicionar uma aplicação cliente.
Adicione o Teams para dispositivos móveis ou de ambiente de trabalho e a aplicação Web do Teams.
Para dispositivos móveis ou de ambiente de trabalho do Teams: introduza o ID de Cliente como
1fec8e78-bce4-4aaf-ab1b-5451cc387264.
Para a Web do Teams: introduza o ID de Cliente como
5e3ce6c0-2b1f-4285-8d4b-75ee78787346.
Selecione a caixa de verificação Âmbitos autorizados .
Selecione Adicionar aplicativo.
A imagem seguinte apresenta o ID de Cliente:
Criar o bot
Criar um recurso de bot do Azure
Observação
Se já estiver a testar o bot no Teams, termine sessão nesta aplicação e no Teams. Para ver esta alteração, inicie sessão novamente.
Vá para a Página Inicial.
Selecione + Criar um recurso.
Na caixa de pesquisa, introduza Azure Bot.
Selecione Enter.
Selecione Bot do Azure.
Selecione Criar.
Introduza o nome do bot no Identificador do bot.
Selecione sua Assinatura na lista suspensa.
Selecione seu Grupo de recursos na lista suspensa.
Se não tiver um grupo de recursos existente, pode criar um novo grupo de recursos. Para criar um novo grupo de recursos, siga estes passos:
- Selecione Criar novo.
- Introduza o nome do recurso e selecione OK.
- Selecione uma localização na lista pendente Nova localização do grupo de recursos .
Em Preços, selecione Alterar plano.
Selecione Fo Gratuito>Selecionar.
Em ID da Aplicação Microsoft, selecione Tipo de Aplicação como Multi-Inquilino.
No Tipo de criação, selecione Utilizar registo de aplicações existente.
Introduza o ID da Aplicação.
Observação
Não pode criar mais do que um bot com o mesmo ID da Aplicação Microsoft.
Selecione Rever + criar.
Após a validação passar, selecione Criar.
O bot demora alguns minutos a aprovisionar.
Selecione Vá para o recurso.
Criou com êxito o bot do Azure.
Adicionar um canal do Teams
No painel esquerdo, selecione Canais.
Em Canais Disponíveis, selecione Microsoft Teams.
Selecione a caixa de verificação para aceitar os Termos de Serviço.
Selecione Concordar.
Selecione Aplicar.
Para adicionar um ponto final de mensagens
Utilize o URL do túnel de desenvolvimento na Consola de saída como ponto final de mensagens.
No painel esquerdo, em Definições, selecione Configuração.
Atualize o ponto final de Mensagens no formato
https://your-devtunnel-domain/api/messages.
Selecione Aplicar.
Configurou com êxito um bot no Azure Bot Service.
Observação
Se a chave de Instrumentação do Application Insights mostrar um erro, atualize com o ID da Aplicação.
Configurar definições de aplicações, ficheiros de manifesto e env
Depois de configurar a aplicação Microsoft Entra, tem de configurar os detalhes da aplicação nas definições da aplicação, no manifesto e no ficheiro env.
Para configurar as definições da aplicação
Aceda ao ficheiro appsettings.json no repositório clonado.
Abra o ficheiro appsettings.json e atualize as seguintes informações:
- Defina
"ClientId"para o ID da Aplicação Microsoft da sua aplicação. - Defina
"ClientSecret"como o Valor do segredo do cliente da sua aplicação. - Defina
"Audience"como o URI do ID da Aplicação da sua aplicação.
- Defina
Para configurar o ficheiro de manifesto da aplicação
Aceda ao ficheiro manifest.json no repositório clonado.
Abra o ficheiro manifest.json e atualize as seguintes informações.
- Defina
"ID"como ID da Aplicação Microsoft. - Substitua todas as ocorrências de pelo nome de
"deployment-url"domínio ngrok ou devtunnel completamente qualificado. - Substitua todas as ocorrências de
"aad-id"pelo ID da Aplicação Microsoft da sua aplicação.
- Defina
Para configurar o ficheiro env
Aceda ao ficheiro .env no repositório clonado.
Abra o ficheiro .env e atualize as seguintes informações.
- Defina
REACT_APP_AAD_CLIENT_IDpara o ID da Aplicação Microsoft da sua aplicação. - Defina
REACT_APP_MSA_ONLY_CLIENTpara o ID da Aplicação Microsoft da sua aplicação. - Defina
REACT_APP_MSA_ONLY_SCOPEcomo o Valor do segredo do cliente da sua aplicação.
- Defina
Criar e executar o serviço
Para criar e executar o serviço com o Visual Studio.
Abra o Visual Studio.
Aceda a Ficheiro>Abrir>Projeto/Solução....
Abra o ficheiro MeetingSigning.sln no Visual Studio.
Pressione F5 para executar o projeto.
Selecione Sim se a caixa de diálogo a seguir for exibida:
É aberta a página Web seguinte.
Adicionar a aplicação Assinatura de Reunião ao Teams
No seu repositório clonado, aceda a > Source MeetingSigning.Web > AppManifest.
Crie um ficheiro .zip com os seguintes ficheiros que estão presentes na pasta AppManifest :
- manifest.json
- outlineIcon.png
- colorIcon.png
Crie uma reunião no Teams com alguns apresentadores e participantes.
Ingresse na reunião.
Após o início da reunião, selecione Aplicações.
Na janela de pop-up, selecione Gerir aplicações.
Selecione Carregar uma aplicação.
Selecione o ficheiro .zip que criou na pasta AppManifest e selecione Abrir.
Selecione Adicionar.
Agora, a aplicação de assinatura da reunião é adicionada à reunião.
Volte à página de detalhes da reunião e selecione AplicaçãoDe Assinatura de Reuniãode Aplicações>.
Selecione Salvar.
A aplicação Assinatura da Reunião está visível na janela da reunião.
Aceda ao chat da reunião no Teams, selecione o separador Assinatura da Reunião e, em seguida, selecione Criar Documentos.
Introduza os seguintes detalhes na janela Assinatura da Reunião.
- Selecione os documentos necessários que pretende rever.
- Introduza visualizadores dos documentos.
- Introduza os signatários dos documentos.
- Selecione Concluído.
Selecione Consentimento para dar permissão à aplicação para aceder aos dados da sua conta.
Inicie sessão no Teams com as suas credenciais e selecione Iniciar sessão.
No Teams, receberá uma notificação para criar o documento com êxito.
Volte à reunião do Teams e agora pode ver os documentos no painel lateral.
Selecione Partilhar para reunião para partilhar o documento em reunião.
A imagem seguinte mostra o documento partilhado na reunião.
Desafio completo
Encontrou algo assim?
Parabéns!
Parabéns! Concluiu o tutorial para criar a aplicação Assinatura na Reunião !
Tem algum problema com essa seção? Se tiver, envie seus comentários para que possamos melhorar esta seção.