I was recently developing a Microsoft Teams application and ran into some issues during implementation where the requirement was to configure a teams app that contained, a Power Apps application and a modern SharePoint page as two separate tabs in the same app.

At the face of it, this seemed like a very easy to implement app and could be achieved by modifying the manifest and include two static tabs, only to realize that this didn’t seem so simple as I thought it was.

The challenge was authentication.

We know that a SharePoint page can be added as a Teams tab by modifying the manifest and adding the following to the manifest to achieve SSO

Content URL – https://[domainUrl]/_layouts/15/teamslogon.aspx?SPFX=true&dest=[pageUrl]

Valid Domains – sample.onmicrosoft.com

Web Application Info object with two attributes – id : 00000003-0000-0ff1-ce00-000000000000 and  resource: [domainUrl]

The complete manifest would look like this

{
    "$schema": "https://developer.microsoft.com/en-us/json-schemas/teams/v1.6/MicrosoftTeams.schema.json",
    "manifestVersion": "1.6",
    "version": "1.0.0",
    "showLoadingIndicator": false,
    "id": "7ad6f150-cba8-4c39-81ce-c4da8e4100d9",
    "packageName": "com.mytenant.portal.app",
    "developer": {
        "name": "Test App",
        "websiteUrl": "https://www.mytenant.com",
        "privacyUrl": "https://www.mytenant.com/privacy",
        "termsOfUseUrl": "https://www.mytenant.com/temsofuse"
    },
    "icons": {
        "color": "color.png",
        "outline": "outline.png"
    },
    "name": {
        "short": "Portal App",
        "full": "Our modern portal"
    },
    "description": {
        "short": "My first portal application",
        "full": "My awesome portal application to embed modern SharePoint to our Teams setup"
    },
    "accentColor": "#FFFFFF",
    "staticTabs": [
        {
            "entityId": "19991",
            "name": "Portal",
            "contentUrl": "https://mytenant.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/theperspective/SitePages/Home.aspx",
            "scopes": [
                "personal"
            ]
        }
    ],
    "permissions": [
        "identity",
        "messageTeamMembers"
    ],
    "validDomains": [
        "mytenant.sharepoint.com"
    ],
    "webApplicationInfo": {
        "id": "00000003-0000-0ff1-ce00-000000000000",
        "resource": "https://mytenant.sharepoint.com"
    }
} 

If we wanted to add a Power Apps application as another tab in the same app, we would have to modify the manifest to include another static tab and include the following json to the existing manifest

{
      "entityId": "c93d8c62-65b4-45b1-ad40-9bad889d315d",
      "name": "Move Mail",
      "contentUrl": "https://apps.powerapps.com/play/c93d8c62-65b4-45b1-ad40-9bad889d315d?tenantId=aabad8dd-1b74-4873-8416-847c79c39b62&source=teamstab&locale={locale}&channelId={channelId}&channelType={channelType}&chatId={chatId}&groupId={groupId}&hostClientType={hostClientType}&isFullScreen={isFullScreen}&subEntityId={subEntityId}&teamId={teamId}&teamType={teamType}&theme={theme}&userTeamRole={userTeamRole}",
      "websiteUrl": "https://apps.powerapps.com/play/c93d8c62-65b4-45b1-ad40-9bad889d315d?tenantId=aabad8dd-1b74-4873-8416-847c79c39b62",
      "scopes": ["personal"]
}

"validDomains": [ "mytenant.sharepoint.com","*.powerapps.com"]


"webApplicationInfo":{
    "id": "9362bc14-3e81-4ef9-8b77-f1c40afe68e0",
    "resource": "https://apps.powerapps.com"
  } 

Wait, how am I supposed to add another entry to the webApplicationInfo object as I already have one? The webApplicationInfo object isn’t an array, so how is anyone supposed to achieve seamless authentication across a Power Apps app and a SharePoint page in one Teams app.

I reached a dead end here.

Do you know of any other way that this issue can be resolved? If yes, please mention it in the comments section of this post. I will be happy to learn!

Popular Posts

• Building Your M365 Governance Strategy: What you can do with an E3 License
• Azure Logic Apps – Computer Vision – Microsoft User Research Study
• Use msal-browser in SPFx solutions to access Graph API
• msal-browser – BrowserAuthError: monitor_window_timeout
• How To Publish Power Virtual Agent Bot to a custom website

About the Author:

I am Kunal Kankariya, a Microsoft 365 Solution Architect and a Microsoft Certified Trainer offering 11+ years’ experience in comprehensive architecture and adoption of Microsoft 365 Solutions. An attentive collaborator and communicator from project conception to completion. I am creative in devising solutions to improve business operations and meet clients’ technical needs maximizing the Microsoft product capabilities and minimizing customizations.

I am a seasoned team leader possessing the technical and interpersonal skills to provide exceptional project guidance to delivery and business adoption. I am a Microsoft certified expert and a prolific speaker at various events on evolving Microsoft technologies.

With a passion for designing solutions based on Microsoft 365, I have helped numerous Fortune 500 companies enable their digital transformation journey and enhance customer experience.

This blog is to share knowledge that I possess on all topics that relate to Microsoft 365. Keep learning folks!

Reference:

Kankariya, K. (2020). Configure A Teams App With Power Apps And SharePoint As Two Separate Tabs. Available at: https://kksimplifies.com/configure-a-teams-app/ [Accessed: 25th November 2020].

Check out more great Microsoft Teams Content here or join our mailing list to stay up to date.