1. Snapplify Knowledge Base
  2. Cloud Services for Partners

Integrating Snapplify Authentication on Wordpress

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. 

sign in button

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.

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.