How to pass custom query parameters to the tab using deep link

Question

In my team app, I defined a staticTab like:

"staticTabs": [
        {
            "entityId": "auth",
            "name": "auth",
            "contentUrl": "https://www.example.com/",
            "scopes": [
                "personal"
            ]
        }
    ],

I want to pass some custom query parameters to the content tab using deep link when sending notification to users in teams:

    entityWebUrl=f"https://www.example.com/?auth=username"
    deeplink=f"https://teams.microsoft.com/l/entity/{APP_ID}/{entityId}?webUrl={entityWebUrl}"

    payload = {
        "topic": {
            "source": "text",
            "value": "auth",
            "webUrl": deeplink
        },
...

In my app, I parse the params with:

const search = new URLSearchParams(window.location.search);
  const params = [];
  search.forEach((value, name) => {
    console.log(`${name}: ${value}`);
    params.push({ name: name, value: value });
  });

But it does not seem working. The content tab does not get the username. Can anyone help what I am missing? Thank you!

Answer 1

You need to encode the webUrl while preparing the deeplink.

Also, if you want to get the passed parameters, you can use like below:

const urlParams = new URLSearchParams(decodeURIComponent(window.location.search));

Reference code sample link: https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/meetings-token-app/nodejs/client/src/components/ContentBubble.js

https://github.com/OfficeDev/Microsoft-Teams-Samples/blob/main/samples/meetings-token-app/csharp/ClientApp/public/contentBubble.html