Microsoft Teams - Custom App, can't load Webpage/2nd Tab

Question

I am creating a Custom Teams App, that simply loads a few webpages:

https://www.itcompany.co.nz

https://itcompany.itclientportal.com/ClientPortal/Login.aspx

Note: ITCOMPANY is just a placeholder so I could create this post publically, I can get it to load the itcompany.co.nz , but all I get is a blank screen when attempting to navigate to the 2nd tab (https://itcompany.itclientportal.com/ClientPortal/Login.aspx).

Note: the ClientPortal is just a login screen, there is no SSO etc.

Not sure what I am doing wrong here, hoping I can get some assistance on what I could be missing.

Note: If I change the URL to: https://www.google.co.nz, it does the same thing (doesn't load). refused to connect error, these URLs were added automatically to the allowed domains list by App Studio.

{
"$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.8/MicrosoftTeams.schema.json",
"manifestVersion": "1.8",
"version": "1.0.0",
"id": "05db8546-1517-4306-8dda-7278e8272226",
"packageName": "com.microsoft.teams.m365lp",
"developer": {
    "name": "IT Company Limited",
    "websiteUrl": "https://www.itcompany.co.nz",
    "privacyUrl": "https://www.itcompany.co.nz",
    "termsOfUseUrl": "https://www.itcompany.co.nz",
    "mpnId": "CA01101011"
},
"icons": {
    "color": "color.png",
    "outline": "outline.png"
},
"name": {
    "short": "IT COMPANY",
    "full": "At IT COMPANY, we solve your IT problems!"
},
"description": {
    "short": "IT COMPANY",
    "full": "At IT COMPANY, we solve your IT problems!"
},
"accentColor": "#8B8B8B",
"staticTabs": [
    {
        "entityId": "201911011330",
        "name": "IT COMPANY",
        "contentUrl": "https://www.itcompany.co.nz/",
        "websiteUrl": "https://www.itcompany.co.nz/",
        "scopes": [
            "personal"
        ]
    },
    {
        "entityId": "201911011335",
        "name": "IT COMPANY Support Portal",
        "contentUrl": "https://itcompany.itclientportal.com/ClientPortal/Login.aspx",
        "websiteUrl": "https://itcompany.itclientportal.com/ClientPortal/Login.aspx",
        "scopes": [
            "personal"
        ]
    }
],
"permissions": [
    "identity",
    "messageTeamMembers"
],
"validDomains": [
    "www.itcompany.co.nz",
    "itcompany.itclientportal.com",
    "*.itclientportal.com",
    "*.login.microsoftonline.com",
    "*.sharepoint.com",
    "*.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
]

Try remove "*.itclientportal.com" from the validDomains. I doubt it's the real issue, but it's worth a try as it's basically causing a duplicate with "itcompany.itclientportal.com" — Hilton Giesenow

Hilton Giesenow Hilton Giesenow · Accepted Answer · 2020-12-26T17:21:59

When you include a custom tab in an app in Teams, that tab is supposed to reference the Teams Javascript SDK. See specifically here:

Additionally, you need to add the Teams JavaScript client SDK to your page, and call microsoftTeams.initialize() after your page loads. Doing so will tell Teams to display your page, give you access to Teams-specific information (for example if the Teams client is running the dark theme), and allow you to take action based on the results.

Microsoft Teams - Custom App, can't load Webpage/2nd Tab

1 Answers