How to add SharePoint Pages in a static tab with authentication?

Copper Contributor

Hello,

 

I have a huge problem. My client is using Teams as their central communication tool. There are no SharePoint structures. But integrate some public information like training, news etc. we want to integrate some SharePoint Pages in a static tab (personal app).

 

This would be the perfect solution to place an icon in the left pane in teams that leads to all the important resources.

 

The problem is, that Teams don't forward your authentication when you call a page from a tab. If the user already has a cookie it works. This renders the solution useless.

 

Is there anyone with the same problem or someone having a solution?

 

Is it possible to create a hosted web page that authenticates the user and redirect to desired page?

 

Any help on this topic is appreciated.

12 Replies

Please refer these doc for adding sharepoint pages to teams tabs : 

Using a Microsoft Teams tab as a SharePoint Framework web part for Authentcation in Tabs please refer this doc here Microsoft Teams  authentication flow for Bots.

@robby_o365 

Check out the article for requirements for tab pages in Microsoft Teams. This might point you in the right direction. 


https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-requirements

 

I don't want to assume anything, so here is the link to Static Tabs and SharePoint webparts:

 

https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-static
https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/tabs/tabs-in-sharepoint

 

@robby_o365 As far as I know, there currently is no solution for this. If the user isn't authenticated in SharePoint, the personal/static tab should redirect to the login screen and then redirect you back to your SharePoint page after login. Is this the behavior you are experiencing?

 

All the links, while helpful when actually developing a custom web application, won't help you with pages that come from SharePoint. It's a known scenario but no solution is available, and I'm not sure if it's in the works.

@robby_o365

 

Like @Yannick Reekmans said: the other articles are relevant only when developing your own application/page but don't really help when using a SharePoint page.

 

That being said, I bumped into the same issue and got it to work.

The biggest part of the solution came from Wajeed in the following StackOverflow thread:

https://stackoverflow.com/questions/57593508/sharepoint-page-not-loading-in-personal-tab-of-static-a...

However, since he reffered to 'microsoft.sharepoint.com' and 'teams' path in the url's he provided, I got confused and failed at first.
Then I found the following article which helped me get all the variables correct:

https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/creating-team-manifest-manua...

 

TL/DR;

Add/Edit the following snippet into your manifest file:

"staticTabs": [
    {
      "entityId": "TestTabId",
      "name": "Test Tab",
      "contentUrl": "https://{tenantname}.sharepoint.com/sites/{site}/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/{site}/SitePages/{page}.aspx",
      "scopes": ["personal"],
      "websiteUrl": "https://fullwebsite.website.com/about"
    }
  ],
  "validDomains": [
    "*.login.microsoftonline.com",
    "{tenantname}.sharepoint.com",
    "{tenantname}.sharepoint-df.com",
    "spoppe-a.akamaihd.net",
    "spoprod-a.akamaihd.net",
    "resourceseng.blob.core.windows.net",
    "msft.spoppe.com"
  ],
  "webApplicationInfo": {
    "resource": "https://{tenantname}.sharepoint.com",
    "id": "00000003-0000-0ff1-ce00-000000000000"
  }

where:

- {tenantname} should be replaced with the name of your tenant

- {site} should be the url portion reffering to the correct site collection

- {page} should be the url portion reffering to the sharepoint page you would like to load

 

Hope it helps!

 

With kind regards,

 

Stijn Brouwers

@Stijn Brouwers I knew about this workaround at the time I replied, but was asked (by Microsoft) not to share it. At the time, I flagged this thread with them to let them know it is a valid use case.

This was shared with MVP's for internal testing, as this was not considered stable nor supported. Haven't heard that this has changed. @Wajeed-MSFT is from MS, so I guess we can use it now...

 

Maybe @Jethro Seghers / @Jethro SEGHERS can share more?

FYI, I checked with the responsible person inside MS and this is currently not supported. As long as it is not in docs, it's not supported. It works in some/most cases apparently but more work needs to happen to make it stable, and be a better experience overall.

I found this recent YouTube video that walks thru adding personal tabs to an app manifest using the App Studio inside Teams.

https://www.youtube.com/watch?v=WyB4MBQwICs&list=PL6AXe4uV2Of5QN7_6sB1eJ_XzT6sZJpNR&index=5&t=0s

 

After following along I can't seem to get it to authenticate the signed in user to render SharePoint pages.

 

There are SSO settings in the App Studio but in the recent Teams Community Call covering SSO it wasn't clear that this would work for Personal Tabs.

 

I guess my question is would registering an app with delegated privileges for Graph 'Director.AccessAsUser.All' give the Personal Tab the authentication to render the SharePoint page? Would that be enough?

 

Update: I was able to successfully render the Sharepoint page by registering an app with AAD (Directory.AccessAsUser.All - Admin Consented) Give the system time to settle the authentications and add the credentials to the 'Domains and permissions' section of the App Studio.

crf5200_0-1582338663272.png

 

After 24 Hours of the custom app working in Teams Desktop it no longer renders the SharePoint pages. It still works in Teams Online. Not sure where the issue lies.

 

@Yannick Reekmans Hi, I have the similar problem to authenticate a user when opening a SharePoint Page in a static tab. In my specific scenario, I trying to build a multi-tenant app that can lead user to the SharePoint Page of their tenant, that means user from different tenant will be led to different SharePoint Page of their own tenant.

There is a SSO solution for authentication in one SharePoint Page, but it won't work in my case, because the URL of the SharePoint Page might differ from different tenant users.

 

Do you have any idea to solve this problem?

@chengji If you check the example manifest on the page you link to, they use the {teamSiteDomain} and {teamSitePath} tokens. While the docs aren't clear about this, you can leave them as is in your manifest and they will be translated automatically when your app is run in Teams.
By using these tokens you can make your app multi tenant.
Thanks! It works!
I just leave the "webApplicationInfo" as is in my App Manifest file, and SSO will work silently when user open an SharePoint Page in a tab.

// manifest.json
{
...
"webApplicationInfo": {
"resource": "https://{teamSiteDomain}",
"id": "00000003-0000-0ff1-ce00-000000000000"
}
}
Great to hear that, and thanks for letting me know!