How to fix the authentication issues with personal apps using SharePoint pages

SharePoint has been out there forever and I’m sure you have a lot of content on it that you would love to start seeing on Microsoft Teams.

Vesa Juvonen did an amazing video covering a typical scenario of how SharePoint and Teams can be integrated without writing code but unfortunately the solution fails when used on the desktop Microsoft Teams client.

The with this solution is that the SharePoint page is not doing the authentication and the user ends up in a blank page, as shown in the following image.

In order to make it work you will need to modify it either by editing the manifest.json or by adding extra properties to it using he app studio.

Note: This article does not cover the process of creating the app. If you want to see how this can be done watch the original video here.

The modifications made to the solution are documented here and you should be able to use them without any problem, in the following image you have highlighted all the necessary additions to the manifest.

Since the original video describe the process as a no code solution I’m providing the steps

  1. Start by opening the app on the app studio
  2. Edit your tabs and modify the content url to the following format
    https://handsonsp.sharepoint.com/_layouts/15/teamslogon.aspx?spfx=true&dest=/sites/projects/SitePages/It's-all-about-communication.aspx


    The link to the actual page is added as a relative URL after the query string dest.

  3. Leave the website url with the default SharePoint link

  4. On the domains and permissions add the following domains manually by clicking in the Add button

    *.login.microsoftonline.com
    *.sharepoint.com
    *.sharepoint-df.com
    spoppe-a.akamaihd.net
    spoprod-a.akamaihd.net
    resourceseng.blob.core.windows.net
    msft.spoppe.com
    
  5. On the domains and permissions scroll down and add the following value to the AAD App-ID field
    00000003-0000-0ff1-ce00-000000000000

    This app already exists on your azure and is used also by the SPFx web parts on Microsoft Teams

  6. On the domain permission add the URL to your SharePoint portal to the Single-Sign-On filed
  7. Save the app and install it, the following animation demonstrates how it will work now when used on the Microsoft Teams desktop client


Business vector created by rawpixel.com – www.freepik.com


5 Responses to “How to fix the authentication issues with personal apps using SharePoint pages”

  1. […] How to fix the authentication issues with personal apps using SharePoint pages | João Ferreira (Beezy Inc) […]

    Reply
  2. Ravi

    October 27, 2020

    Hi,

    Thank you for the post. Is it possible to provide open an Azure AD authenticated web sites in the personal app tab just like the SharePoint site?

    Thanks!
    Ravi

    Reply
    • João Ferreira

      October 28, 2020

      Hi Ravi,

      Yes it’s possible as long as your website handles the authentication, this link might be useful if you are looking to implement a solution outside of SharePoint.

      Have a nice day 🙂

      Reply
  3. Saulius

    April 8, 2021

    Hi João,
    how it should work if I would also want to have a message extension with SSO in the same app? I would need to use different AAD App-ID and resource for my bot SSO. Is there a workaround for this or I would need to use different apps for tabs with SharePoint pages SSO and different for message extensions?

    Thanks
    Saulius

    Reply
    • João Ferreira

      May 18, 2021

      Hi Saulius,

      I think the answer to what you are looking for is here in this video with a step by step instructions on how to create a messaging extension using SPFx

      Hope this helps

      Reply

Leave a Reply


I've been working with Microsoft Technologies over the last ten years, mainly focused on creating collaboration and productivity solutions that drive the adoption of Microsoft Modern Workplace.

%d bloggers like this: