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

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.

  • 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.

Known limitations

  • Some plugin capabilities e.g. Dual login may not work as expected when 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.