{"id":856,"date":"2024-03-02T14:47:33","date_gmt":"2024-03-02T17:47:33","guid":{"rendered":"https:\/\/thiagosantos.com\/blog\/?p=856"},"modified":"2024-03-02T14:58:23","modified_gmt":"2024-03-02T17:58:23","slug":"microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao","status":"publish","type":"post","link":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/","title":{"rendered":"Microsoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o"},"content":{"rendered":"\n

Desenvolvendo recentemente um meio de integrar um aplicativo web j\u00e1 existente ao Microsoft Teams, me deparei com a necessidade de que a notifica\u00e7\u00e3o do Teams ao direcionar para o aplicativo instalado dentro do Teams tamb\u00e9m passasse um par\u00e2metro extra para que o aplicativo existente pudesse tratar esse par\u00e2metro e redirecionar o usu\u00e1rio para \u00e1rea correta.<\/p>\n\n\n\n

Foi custoso achar uma resposta para isso, mas acabei com a ajuda de um colega e dessa maravilhosa p\u00e1gina https:\/\/microsoft.github.io\/app-camp\/aad\/Deeplink\/<\/a> conseguir passar par\u00e2metro para dentro da aplica\u00e7\u00e3o quando abre atrav\u00e9s da Notifica\u00e7\u00e3o.<\/p>\n\n\n\n\n\n\n\n

Quando voc\u00ea envia uma notifica\u00e7\u00e3o para o usu\u00e1rio do seu aplicativo no Teams voc\u00ea tem a possibilidade de estabelecer duas formas de ao clicar na notifica\u00e7\u00e3o o usu\u00e1rio ser direcionado para o seu aplicativo direto utilizando o source no item topic como text ou entityURL e passando o value ou o webUrl como no exemplo abaixo.<\/p>\n\n\n

\n\/\/Corpo do envio da notifica\u00e7\u00e3o\n\/\/POST https:\/\/graph.microsoft.com\/v1.0\/teamwork\/sendActivityNotificationToRecipients\n{    \n   "topic": {\n       "source": "entityUrl",\n       "value": "https:\/\/graph.microsoft.com\/v1.0\/appCatalogs\/teamsApps\/{teams_app_id}"\n   },\n\n    "activityType": "novaNotificacao",\n    "previewText": {\n        "content": "Temos uma nova informa\u00e7\u00e3o para voc\u00ea!!"\n    },\n    "recipients": [\n        {\n            "@odata.type": "microsoft.graph.aadUserNotificationRecipient",\n            "userId": "617310a6-9d5d-4459-b268-07802596d419"\n        }\n    ]\n}\n<\/pre><\/div>\n\n\n
Utilizando o entityUrl \u00e9 o jeito mais simples de ao clicar na notifica\u00e7\u00e3o o seu usu\u00e1rio seja redirecionado para o seu aplicativo dentro do Teams. Acontece que atrav\u00e9s desse m\u00e9todo n\u00e3o \u00e9 poss\u00edvel passar par\u00e2metros nem especificar em qual das abas do seu aplicativo voc\u00ea quer que abra inicialmente. O jeito \u00e9 usar o modo text passando o weburl. O webURL \u00e9 uma url do Teams que no entanto utiliza o ID do Teams que \u00e9 gerado quando envia o aplicativo para a loja de aplicativos da organiza\u00e7\u00e3o, seguido do entityId \u00e9 que a aba a qual voc\u00ea quer abrir dentro do seu aplicativo. No c\u00f3digo abaixo fica mais f\u00e1cil de entender.<\/p>\n\n\n
\n\/\/Corpo do envio da notifica\u00e7\u00e3o\n\/\/POST https:\/\/graph.microsoft.com\/v1.0\/teamwork\/sendActivityNotificationToRecipients\n{\n    "topic": {\n        "source": "text",\n        "webUrl": "https:\/\/teams.microsoft.com\/l\/entity\/{uploaded_teams_app_id}\/{entity_id}?context=%7B%22subEntityId%22:%22https:\/\/exemplo.com.br\/timeline\/post\/1406%22%7D"\n    },\n    "activityType": "novaNotificacao",\n    "previewText": {        \n        "content": "Temos uma nova informa\u00e7\u00e3o para voc\u00ea!!"\n    ]},   \n    "recipients": [\n        {\n            "@odata.type": "microsoft.graph.aadUserNotificationRecipient",\n            "userId": "617310a6-9d5d-4459-b268-07802596d419"\n        }\n    ]\n}\n<\/pre><\/div>\n\n\n
A sacada para o envio de um par\u00e2metro seu para dentro do seu aplicativo \u00e9 utilizar o par\u00e2metro “context” onde um JSON no formato {“subEntityId”:”XXXXX”} \u00e9 passado o valor do subEntityId que pode ser um valor n\u00famero, uma string ou at\u00e9 um objeto \u00e9 recuperado atrav\u00e9s do Teams JS SDK, mas para confus\u00e3o geral o par\u00e2metro dentro do objeto do contexto \u00e9 “context.page.subPageId”, chora.<\/p>\n\n\n
\n\/\/dentro da sua aplica\u00e7\u00e3o\n\/\/....\ntry{\n\n    await app.initialize();\n    const context = app.getContext();\n    const parametro_passado = context.page.subPageId; \/\/:)        \n\n}\n\/\/...\n<\/pre><\/div>\n\n\n
Resumindo: voc\u00ea passa o contexto utilizando o subEntityId e recupera atrav\u00e9s do Teams JS SDK utilizando o objeto de contexto no “context.page.subPageId”.<\/p>\n\n\n\n
Dai com o par\u00e2metro em m\u00e3os voc\u00ea faz o que precisa fazer antes da aplica\u00e7\u00e3o carregar. No contexto voc\u00ea pode passar uma URL e configurar o seu app para redirecionar o parametro_passado com o valor da URl. Isso simplifica bastante o desenvolvimento e redirecionamento interno.<\/p>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
Uma sacada de como passar par\u00e2metros para o seu aplicativo no Microsoft Teams<\/p>\n","protected":false},"author":1,"featured_media":860,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[216,217,215,214,213],"class_list":["post-856","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-deeplink","tag-deeplink-microsoft-teams","tag-microsoft-teams","tag-notificacao","tag-teams"],"yoast_head":"\nMicrosoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o - Pereira, Thiago Santos.<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Microsoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o - Pereira, Thiago Santos.\" \/>\n<meta property=\"og:description\" content=\"Uma sacada de como passar par\u00e2metros para o seu aplicativo no Microsoft Teams\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/\" \/>\n<meta property=\"og:site_name\" content=\"Pereira, Thiago Santos.\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-02T17:47:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-03-02T17:58:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pereira, Thiago Santos\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pereira, Thiago Santos\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/\",\"url\":\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/\",\"name\":\"Microsoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o - Pereira, Thiago Santos.\",\"isPartOf\":{\"@id\":\"https:\/\/thiagosantos.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg\",\"datePublished\":\"2024-03-02T17:47:33+00:00\",\"dateModified\":\"2024-03-02T17:58:23+00:00\",\"author\":{\"@id\":\"https:\/\/thiagosantos.com\/blog\/#\/schema\/person\/56683334c52027e200fd9270c17c629d\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/#primaryimage\",\"url\":\"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg\",\"contentUrl\":\"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg\",\"width\":1024,\"height\":576},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/thiagosantos.com\/blog\/#website\",\"url\":\"https:\/\/thiagosantos.com\/blog\/\",\"name\":\"Pereira, Thiago Santos.\",\"description\":\"the fun of code.\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/thiagosantos.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/thiagosantos.com\/blog\/#\/schema\/person\/56683334c52027e200fd9270c17c629d\",\"name\":\"Pereira, Thiago Santos\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/thiagosantos.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ed936469f86e5f07085e7540b2c0a115?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ed936469f86e5f07085e7540b2c0a115?s=96&d=mm&r=g\",\"caption\":\"Pereira, Thiago Santos\"},\"description\":\"Um cara que mora no Rio e n\u00e3o sabe nadar.\",\"sameAs\":[\"http:\/\/thiagosantos.com\"],\"url\":\"https:\/\/thiagosantos.com\/blog\/author\/admin\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Microsoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o - Pereira, Thiago Santos.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/","og_locale":"pt_BR","og_type":"article","og_title":"Microsoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o - Pereira, Thiago Santos.","og_description":"Uma sacada de como passar par\u00e2metros para o seu aplicativo no Microsoft Teams","og_url":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/","og_site_name":"Pereira, Thiago Santos.","article_published_time":"2024-03-02T17:47:33+00:00","article_modified_time":"2024-03-02T17:58:23+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg","type":"image\/jpeg"}],"author":"Pereira, Thiago Santos","twitter_misc":{"Escrito por":"Pereira, Thiago Santos","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/","url":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/","name":"Microsoft Teams: Deeplink pro seu App atrav\u00e9s da Notifica\u00e7\u00e3o - Pereira, Thiago Santos.","isPartOf":{"@id":"https:\/\/thiagosantos.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/#primaryimage"},"image":{"@id":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/#primaryimage"},"thumbnailUrl":"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg","datePublished":"2024-03-02T17:47:33+00:00","dateModified":"2024-03-02T17:58:23+00:00","author":{"@id":"https:\/\/thiagosantos.com\/blog\/#\/schema\/person\/56683334c52027e200fd9270c17c629d"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagosantos.com\/blog\/856\/javascript\/microsoft-teams-deeplink-pro-seu-app-atraves-da-notificacao\/#primaryimage","url":"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg","contentUrl":"https:\/\/thiagosantos.com\/blog\/wp-content\/uploads\/\/2024\/03\/Teams-Logo-1024x576-1.jpg","width":1024,"height":576},{"@type":"WebSite","@id":"https:\/\/thiagosantos.com\/blog\/#website","url":"https:\/\/thiagosantos.com\/blog\/","name":"Pereira, Thiago Santos.","description":"the fun of code.","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thiagosantos.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/thiagosantos.com\/blog\/#\/schema\/person\/56683334c52027e200fd9270c17c629d","name":"Pereira, Thiago Santos","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/thiagosantos.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ed936469f86e5f07085e7540b2c0a115?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ed936469f86e5f07085e7540b2c0a115?s=96&d=mm&r=g","caption":"Pereira, Thiago Santos"},"description":"Um cara que mora no Rio e n\u00e3o sabe nadar.","sameAs":["http:\/\/thiagosantos.com"],"url":"https:\/\/thiagosantos.com\/blog\/author\/admin\/"}]}},"_links":{"self":[{"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/posts\/856","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/comments?post=856"}],"version-history":[{"count":4,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/posts\/856\/revisions"}],"predecessor-version":[{"id":862,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/posts\/856\/revisions\/862"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/media\/860"}],"wp:attachment":[{"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/media?parent=856"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/categories?post=856"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thiagosantos.com\/blog\/wp-json\/wp\/v2\/tags?post=856"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}