This article outlines how to add the Snapplify Cloud Service for authentication on a Wordpress website.
This article is for SITE ADMINISTRATORS. 💻💚
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.
👩👨 Integrating Snapplify Authentication on your website is easy: simply install an Oath plugin then contact us for some key information. ✅
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:
- 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. - 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.
Need to add Snapplify Authentication to your Moodle website? This article will show you how.
Need help? Use the live chat in the bottom right corner of your screen or email us at help@snapplify.com.