Adding a WordPress tab to Microsoft Teams and use Single Sign-on

Use this guide if you want to add a new (personal) tab to Microsoft Teams that loads (a page from) your WordPress intranet / website and expect users to be signed in automatically (SSO) with their Office 365 / Azure AD work or school account with the help of the WordPress + Office 365 plugin.

Before you start

Important

Begin 2020 Chrome launched with new default settings for the SameSite cookie attribute. These changes may dramatically impact third-party cookie tracking, loosely akin to Safari's ITP. Previously, when the SameSite cookie attribute was omitted, browsers would share cookies with no domain limitations and thus third-party cookies could fire (is SameSite=None). Nowadays, more and more browsers only share cookies without a SameSite attribute when the domain in URL bar equals the cookie’s domain (first-party, is SameSite=Lax).

Basically this means that loading your WordPress site as an App or a Tab in Microsoft Teams in a browser is still possible as long as you do not require your users to sign in to view (private) pages and posts. If you do require users to sign in (e.g. with Microsoft with the help of one of the WPO365 plugins), however, then you may notice that this is impossible because the WordPress authentication cookies are by default no longer included by the browser. As a result the WPO365 login window keeps popping up.

To overcome this problem you can try to install the WPO365 | SAMESITE plugin. It will override the pluggable WordPress function wp_set_auth_cookie to always set SameSite=None to enable third-party usage of cookies.

Perform the following steps to install the plugin:

  • Go to WP Admin > Plugins > Add new and search for WPO365.
  • Click Install to install the plugin.
  • Click Activate to activate the plugin.

Option 1: Adding a tab

By far the easiest way to integrate your WordPress based information portal into any Team's channel would be by manually adding a new Website app to the channel and set its URL to the address of your WordPress based information portal.

  • Launch the Teams desktop app (or alternatively open the web app https://teams.microsoft.com).
  • Navigate to the Team of your choice and select the Channel where you would like to add a tab that displays information from your WordPress website that requires users to Sign in with Microsoft.
  • From the top navigation click + to add a new Tab.
  • From the Tabs for your team section select Website.
  • Enter a Name for your Tab e.g. Information Portal.
  • Enter the URL of your WordPress based intranet / website.
  • Click Save.

When a user now navigates to the Team, selects a Channel and clicks the newly added Tab, he / she will be automatically signed in as follows:

  • First the WPO365 loading bars are displayed and the WPO365 plugin initializes its Single sign-on capability.
  • Then a popup is shown and either closes immediately automatically or the user must select his / her login account when there are multiple accounts to choose from.
  • And finally - once the popup is closed - the Tab's content page is rendering the content from your WordPress website that requires users to Sign in with Microsoft.

Option 2: Build your custom app using App Studio

If you want to provide access to a WordPress based information portal to all (users of all) Teams, manually adding a new Tab to a Channel is simply not an option. In this case you would want to develop your own Microsoft Teams app. (Microsoft Teams) App Studio makes it easy to start creating or integrating your own Microsoft Teams apps (see https://docs.microsoft.com/en-us/microsoftteams/platform/concepts/build-and-test/app-studio-overview for details on how to get started).

What follows below is by no means an instruction on how to build your custom app for Microsoft Teams. It simply shows you a working configuration of a custom app for Microsoft Teams that adds a Personal Tab that pulls its content from a WordPress website that requires its users to Sign in with Microsoft.

  • Install App Studio (refer to Microsoft's documentation, using the link above).
  • Open App Studio.
  • Select Manifest Editor.
  • Click + Create a new app.
  • Complete the App Details.

Important Do not check the option to show a Loading Indicator as this will hide the integrated WPO365 login screen.

  • From Capabilities, select Tabs and add a new personal tab.

Important For a more streamlined login experience (whereby the user isn't asked to enter his Office 365 / Azure AD user name) add ?login_hint={loginHint} to your WordPress website's URL.

  • On the Domains and Permissions tab ensure that your WordPress website's domain has been added. You do not need to fill out the rest of the information. The plugin uses it's own Open Connect ID Single sign-on authentication flow to sign in the user into the website.

  • Continue to Test and distribute and download the app.
  • In the main navigation on the left, click  ... > More apps > Upload custom app and upload your own app.
  • Once uploaded the app can be found in the Built for ... section and from there you can install your own app to Microsoft Teams.
  • To open the app, open the ... apps menu from the main navigation. You should now be able to see your own app and can open it from there.

When you click to open your app, you'll see a Sign in with Microsoft button. You must click this to start the Single sign-on workflow. Then a popup is shown and either closes immediately automatically or the user must select his / her login account when there are multiple accounts to choose from. 

Unfortunately, Microsoft Teams tries to protect its user by limiting the options for opening popups and redirecting users. Therefore the button cannot be omitted.

 

And finally - once the popup is closed - the Tab's content page is rendering the content from your WordPress website that requires users to Sign in with Microsoft.

Empty Cache

When you develop an App with the App Studio and you made changes to your WordPress website you will notice that Microsoft Teams has aggressively cached your WordPress website. Perform the following steps to empty the cache.

  • Uninstall your App.
  • Quit Microsoft Teams (not only close / minimize it).
  • Open Windows Explorer and type %appdata% to open the AppData\Roaming folder.
  • Double-click the Microsoft folder to open it.
  • Double-click the Teams folder to open it.
  • Double-click the Cache folder to open it.
  • Delete its contents.
  • Start Microsoft Teams again.

Known limitations

  • Some plugin capabilities e.g. Dual login may not work as expected whe n the WordPress website is loaded inside a (personal) Teams Tab.
  • Teams may prevent some pages from loading correctly because of limitations that apply to loading content in iframes.
  • When visiting https://teams.microsoft.com with a Safari browser, the popup renders as a new browser tab. This may be caused by an issue that maybe resolved in a future release of the Microsoft Teams (JavaScript) SDK.
  • Please provide feedback if you experience any unexpected behavior.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.