Website Management Tab
How to add single sign-on to your website
Single sign-on (SSO) is an authentication scheme that allows users to log into a system using an existing independent account. We have added the ability for clients to install single sign-on functionality to their websites so users can log into password protected areas using their personal Facebook and Google accounts.
How to add single sign-on functionality to your website:
- Log into your account on thewebconsole.com
- Navigate to Settings > Account Settings > Plugins
- There are currently two options: Login With Facebook or Login With Google - click the install button under your desired option (screenshot)
- Click the Yes button on the alert popup
- Whether you selected Facebook or Google, you will be required to generate and add an App Id and App Secret in order to install the plug-in (screenshot)
- In a new tab/window, follow the steps in one of the sections below before returning to complete steps 7 and 8
- Once you have generated an App Id and App Secret, you can return to this tab/window to paste these into the relevant fields
- Select a New Users Group (optional) and click the Next button to finish installing the single sign-on plugin
Installing Facebook single sign-on:
- Log into your Facebook account and navigate to https://developers.facebook.com/
- Click My Apps
- Click the Create App button
- Select the Build Connect Experiences option and click the Continue button (screenshot)
- Enter an App Display Name (e.g. "Website single sign-on") and click the Create App button (screenshot)
- You should be directed to an Add Products to Your App screen - find the Facebook Login option and click the Set Up button (screenshot)
- Select the Web platform (screenshot)
- Enter your Site URL and click the Save button (screenshot)
- Proceed through sections 2-4 by clicking the Next button
- Once you reach section 5, click Settings under Facebook Login on the left hand side (screenshot)
- In the Client OAuth Settings section, enter your website URL in the Valid OAuth Redirect URIs field and add "/contact/sso/callback/type/facebook" to the end of it e.g. https://www.thewebplayground.com.au/contact/sso/callback/type/facebook (screenshot)
- In the Deauthorize section, enter your website URL in the Deauthorize Callback URL field and add "/contact/sso/callback/type/facebook" to the end of it e.g. https://www.thewebplayground.com.au/contact/sso/callback/type/facebook (screenshot)
- Navigate to Settings > Basic on the left hand side menu (screenshot)
- Copy the App ID and paste it into the App Id field in the backend of thewebconsole (screenshot)
- Copy the App Secret (click the Show button and enter your Facebook password again if required) and paste this into the App Secret field in the backend of thewebconsole (screenshot)
- Select a New Users Group (optional) and click the Next button (screenshot)
- Facebook single sign-on has been successfully installed (screenshot)
Installing Google single sign-on:
- Log into your Google account and navigate to https://console.developers.google.com/
- From the dashboard, click the Select a project dropdown menu and in the popup that appears click New Project (screenshot)
- Enter an appropriate Project Name (e.g. "Single sign on for website") and click the Create button. Note: depending on how your Google account is set up, you may have to select or create an organization for this project to belong to (screenshot)
- Once the project is created, navigate to OAuth consent screen on the left hand menu (screenshot)
- For User Type select Internal and click the CREATE button (screenshot)
- On the OAUTH consent screen page, fill out the below sections and then click SAVE AND CONTINUE:
- App information (screenshot):
- App name: The name of the app asking for consent e.g. "Single sign on for website"
- User support email: For users to contact you with questions about their consent e.g. your email address
- App logo: Optional
- App domain (screenshot):
- Application home page: Provide users a link to your home page e.g. https://www.thewebplayground.com.au
- Application privacy policy link: Provide users a link to your public privacy policy e.g. https://www.thewebplayground.com.au/privacy-policy.html
- Application terms of service link: Provide users a link to your public terms of service e.g. https://www.thewebplayground.com.au/terms-of-service.html
- Authorized domains (screenshot):
- Your domain e.g. thewebplayground.com.au
- Developer contact information (screenshot)
- App information (screenshot):
- On the Scopes page, you can click SAVE AND CONTINUE again at the bottom
- On the Summary page, you can click BACK TO DASHBOARD at the bottom
- Click Credentials on the left hand side (screenshot)
- Click the CREATE CREDENTIALS button and then select OAuth client ID (screenshot)
- For Application type, select Web applciation and enter an appropriate Name (screenshot)
- For Authorised redirect URIs, enter your website URL and add "/contact/sso/callback/type/google" to the end of it e.g. https://www.thewebplayground.com.au/contact/sso/callback/type/google (screenshot)
- Click the CREATE or SAVE button
- Copy the Client ID and paste it into the App Id field in the backend of thewebconsole (screenshot)
- Copy the Client Secret and paste it into the App Secret field in the backend of thewebconsole (screenshot)
- Select a New Users Group (optional) and click the Next button (screenshot)
- Google single sign-on has been successfully installed (screenshot)
Last Modified: 22 June 2022