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:

1. Log into your account on thewebconsole.com
2. Navigate to Settings > Account Settings > Plugins
3. There are currently two options: Login With Facebook or Login With Google - click the install button under your desired option (screenshot)
4. Click the Yes button on the alert popup
5. 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)
6. In a new tab/window, follow the steps in one of the sections below before returning to complete steps 7 and 8
7. Once you have generated an App Id and App Secret, you can return to this tab/window to paste these into the relevant fields
8. Select a New Users Group (optional) and click the Next button to finish installing the single sign-on plugin

Installing Facebook single sign-on:

1. Log into your Facebook account and navigate to https://developers.facebook.com/
2. Click My Apps
3. Click the Create App button
4. Select the Build Connect Experiences option and click the Continue button (screenshot)
5. Enter an App Display Name (e.g. "Website single sign-on") and click the Create App button (screenshot)
6. You should be directed to an Add Products to Your App screen - find the Facebook Login option and click the Set Up button (screenshot) 
7. Select the Web platform (screenshot)
8. Enter your Site URL and click the Save button (screenshot)
9. Proceed through sections 2-4 by clicking the Next button
10. Once you reach section 5, click Settings under Facebook Login on the left hand side (screenshot)
11. 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)
12. 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)
13. Navigate to Settings > Basic on the left hand side menu (screenshot)
14. Copy the App ID and paste it into the App Id field in the backend of thewebconsole (screenshot)
15. 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)
16. Select a New Users Group (optional) and click the Next button (screenshot)
17. Facebook single sign-on has been successfully installed (screenshot)

Installing Google single sign-on:

1. Log into your Google account and navigate to https://console.developers.google.com/
2. From the dashboard, click the Select a project dropdown menu and in the popup that appears click New Project (screenshot)
3. 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)
4. Once the project is created, navigate to OAuth consent screen on the left hand menu (screenshot)
5. For User Type select Internal and click the CREATE button (screenshot)
6. On the OAUTH consent screen page, fill out the below sections and then click SAVE AND CONTINUE:
   1. App information (screenshot):
      1. App name: The name of the app asking for consent e.g. "Single sign on for website" 
      2. User support email: For users to contact you with questions about their consent e.g. your email address
      3. App logo: Optional
   2. App domain (screenshot):
      1. Application home page: Provide users a link to your home page e.g. https://www.thewebplayground.com.au
      2. Application privacy policy link: Provide users a link to your public privacy policy e.g. https://www.thewebplayground.com.au/privacy-policy.html
      3. 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
   3. Authorized domains (screenshot):
      1. Your domain e.g. thewebplayground.com.au
   4. Developer contact information (screenshot)
7. On the Scopes page, you can click SAVE AND CONTINUE again at the bottom
8. On the Summary page, you can click BACK TO DASHBOARD at the bottom
9. Click Credentials on the left hand side (screenshot)
10. Click the CREATE CREDENTIALS button and then select OAuth client ID (screenshot)
11. For Application type, select Web applciation and enter an appropriate Name (screenshot) 
12. 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)
13. Click the CREATE or SAVE button
14. Copy the Client ID and paste it into the App Id field in the backend of thewebconsole (screenshot)
15. Copy the Client Secret and paste it into the App Secret field in the backend of thewebconsole (screenshot)
16. Select a New Users Group (optional) and click the Next button (screenshot)
17. Google single sign-on has been successfully installed (screenshot)