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

  1. Install a third-party OAuth plugin, such as this one, into your Wordpress website.
  2. 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 URLThis 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.

https://auth.snapplify.com/oauth/authorize

Access Token Endpoint

The endpoint used for the token.

https://auth.snapplify.com/oauth/token

Get User Info Endpoint

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


ImageDetails

This button needs to be the same height and width as other buttons used for OAuth purposes.

The SnappStar logo can be retrieved here: 

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:


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