Integrating Snapplify Authentication on Wordpress

This article outlines how to add the Snapplify Cloud Service for authentication on a Wordpress website.

If your users already have a Snapplify account, or a Microsoft or Google account, you can make the process of logging in even easier for them. With Snapplify Authentication, signing in is as simple as clicking a button.

 

To enable Snapplify Authentication on your Wordpress website:

Install a third-party Oauth plugin, such as this one, into your Wordpress website.

Once installed, our team will supply you with your personalised ‘Client Secret’, which is a unique password to be used for the Oauth integration. Please contact help@snapplify.com with the following information required for integration purposes:

Value	Description	Example
Application	This is the name of the provider.	Snapplify
Display App Name	This is the text to be displayed on the sign in button.	SIGN IN WITH SNAPPLIFY
Redirect / Callback URL	This is the URL for the website you are integrating Oauth.	https://YOURWEBSITEURL/
Client ID	The Client ID is supplied by Snapplify, based on your customer name.	YOURWEBSITEURL
Client Secret	The ‘Client Secret’ supplied by Snapplify is a unique password used for API correspondence.	Contact help@snapplify.com for your ‘Client Secret’.
Scope	This can be left blank if you have standard integration requirements.	N/A
Authorize Endpoint	Endpoint used for sign in authorisation.	https://auth.snapplify.com/oauth/authorize
Access Token Endpoint	Endpoint used for token.	https://auth.snapplify.com/oauth/token
Get User Info Endpoint	Endpoint used for returning successful user information.	https://auth.snapplify.com/api/userinfo
Client Authentication	HTTP Basic is recommended for usage with Snapplify.	N/A
Login button	‘Show on login’ should be selected for usage with Snapplify. This will display the login button for Snapplify users to sign in.	N/A

Snapplify branding guidelines

Usage of the Snapplify sign in button should be consistent with other sign in options, with equal prominence and size. 

The OAuth plugin above uses Font Awesome to display the lock. Unfortunately, the plugin does not allow a user to change this icon. You will have to change two areas manually:

1. Change the CSS that displays the SnappStar in the plugin resources folder:
   
   

   yoururl.com/wp-content/plugins/wp-content/plugins/miniorange-oauth-oidc-single-sign-on/resources/css/font-awesome.css?version=4.8

   
   Change the “.fa-lock:before” class from the Font Awesome Lock to the SnappStar:
   
   

   .fa-lock:before { content:url(https://cdn.snapplify.com/latest/img/snappstar.png); }

   
   If the SnappStar does not display properly, you should resize it, either in your CSS or by uploading a resized version.
2. Change the CSS that renders the button in the plugin page (Customisations) to the following:
   
   

   background: #fff; color: #343434; border: 1px solid #cccccc; text-transform: uppercase; width: 100%; max-width: 460px; height: 60px; display: -webkit-inline-box; display: inline-flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; font-size: 16px

Adding the button to your login screen

If you are using the OAuth plugin linked above, it will only show the login button on your /wp-admin login screen, and front-end users will not be able to log in using it. The plugin does, however, have an option to add the button as a widget (in your sidebar, or footer, wherever your widgets are used) and creates a shortcode for this. You can use the do_shortcode Wordpress function to display the widget shortcode on your login pages.

Example for OAuth Plugin: echo do_shortcode('[mo_oauth_login]')

Which templates do I need to edit?

Each Wordpress theme and website works differently. Woocommerce users will need to change the login template and upload it to their theme templates that override the basic template.
Remember that you would have to change each template where a login form is visible (e.g. a pop-up or the checkout page if you run a shop).

Other front-end login forms should also be easily editable by using the shortcode and function above.