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 Access, signing in is as simple as clicking a button.
Learn more about the benefits of Snapplify Access here.
To enable Snapplify Access 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 | The endpoint used for sign-in authorisation. | |
Access Token Endpoint | The endpoint used for the token. | |
Get User Info Endpoint | The endpoint used for returning successful user information. | |
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.
| Image | Details |
 | This button needs to be the same height and width as other buttons used for OAuth purposes. https://cdn.snapplify.com/latest/img/snappstar.png |
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, 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, using the shortcode and function above.
Need to add Snapplify Access to your Moodle website? This article will show you how. You can also integrate Snapplify Access for Single Sign On.
Need help? Use the live chat in the bottom right corner of your screen or email us at help@snapplify.com.
