Add Single Sign-on button anywhere (shortcode)

Through the years, WPO365 has always provided developers and website administrators with ways to customize the login button. Starting with version 33.0, a new feature that allows you to customize the SSO (Single Sign-on) button through a simple user interface, has been added to the plugin's Login / Logout configuration page.

Customize Login Button

• Hide Sign in with Microsoft button on login page If checked, the SSO button will not be added to the default / custom login form. 
• Hide Microsoft Logo If checked, the Microsoft logo will not be displayed.
• Display text Customize the SSO button's label (default "Sign in with Microsoft").
• Foreground color Change the color of the display text (default "#5E5E5E", must be a hexadecimal color code).
• Background color Change the background color of the SSO button (default "#FFFFFF", must be a hexadecimal color code).
• Hide border If checked, the SSO button's border width will be set to 0 pixel.
• Border color Change the border color of the SSO button (default "#8C8C8C", must be a hexadecimal color code).

Add SSO button using the [wpo365-sso-button] shortcode

If you want - for example - to add the customized SSO button to a custom login page or to your theme's header and that location supports WordPress shortcodes, then you can copy the shortcode [wpo365-sso-button] to your clipboard and paste it anywhere. 

Creating your own custom SSO button

There might be situations, where the out-of-the-box SSO button - even when customized - does not meet your needs. For example, if you want to set a fixed URL where users should be redirected to after they successfully signed in with Microsoft. Or if you are using Azure AD B2C and you want to send your users to a specific User Flow endpoint. In that case, you can follow along with the examples provided in this article to create your own SSO button using HTML, CSS and a tiny bit of JavaScript.

Front-end prerequisite(s)

The SSO button requires a global JavaScript function and WPO365 ensures that this function is made available by enqueueing a JavaScript file called "pintra-redirect.js". If this file is not loaded, then clicking the SSO button result in an error that can be viewed - for example - in your browser's Developer Console.

Whenever WPO365 is responsible for rendering the SSO button - for example on the login page and when using the shortcode [wpo365-sso-button] - it will ensure that these client-side prerequisites are enqueued. If you need to enqueue it yourself, you can use the shortcode [wpo365-redirect-script]

Troubleshoot

• If you are using a customized login page and the default out-of-the-box WPO365 login button is not shown, then it's likely that your login page does not trigger the built-in WordPress login_form filter. If that is the case, you should add the button using one of the options introduced in this article.