The One-Click Social Login add-on gives users the ability to easily register and login to the website using their existing Facebook and Google account.


This seamlessly integrates with the default login and registration system. The existing users can add or remove their linked social accounts at any time from within their member dashboard.



1. Login to the Google account that is being used for the website.


2. After logging in, navigate to https://console.cloud.google.com/apis


Important: If the Google Maps API is already setup, use the same project.


3. Once the project is selected click on APIs & Services and go to Credentials:



** Important: If you already set up your Google Maps API, Skip to Step 9 to continue this process:


4.  Then click on Create Credentials and select API Key:



5. Click on Restrict Key



6. Enter a name for this API key into the "Name" field.  We are going to name the key "Google Login" for this tutorial. Select HTTP referrers (web sites) and enter the proper domains into the "ADD AN ITEM" field:



7. THIS STEP IS EXTREMELY IMPORTANT, PLEASE BE SURE TO COMPLETE THIS CORRECTLY


For the purposes of this tutorial, let's imagine that the domain of my website will be on is http://www.YOURDOMAIN.com.  It is very important that you know what the final domain of your website will be for this step.


Enter the following one at a time:


  • *.directoryup.com - this is needed if your site is NOT live yet.

  • *.managemydirectory.com - Important: It is needed in order for your admin pages to work with the key.

  • managemydirectory.com - Important: It is needed in order for your admin pages to work with the key.

  • *.YOURDOMAIN.com (IMPORTANT: Replace "ilovebrilliant.com" with the final domain that YOUR website will be hosted on)
  • YOURDOMAIN.com (IMPORTANT: Replace "ilovebrilliant.com" with the final domain that YOUR website will be hosted on)



After completing the above, this is how the section will look:



(REMEMBER: You will not see "YOURDOMAIN.com" in the list.  What will be there is the final domain of YOUR website in the list instead)


8. Leave the following option on "Don't restrict key" and click on "Save":


9. Click on "OAuth consent screen" and then "Edit App":


10. Inside "Edit App" fill out the "App Domain" section, click on "Save and Continue":



Inside the "Scopes" page click on "ADD OR REMOVE SCOPES":



The two scopes to select are:

  • .../auth/userinfo.email
  • .../auth/userinfo.profile


Click on "Update"




The "Optional Info" screen, fill in any of the optional information if necessary:



Lastly, the "Summary" page will show all of the information entered in the last 3 screens:



11. Go back to the Credentials page, click on "Create Credentials" again and select OAuth client ID:



12. Fill in the following:


  1. Application Type - Web Application
  2. Name - Google Login
  3. Authorized JavaScript origins - Website Domain
  4. Authorized redirect URIs - Website Domain




13. Click on "Ok":




14. Click on "Dashboard" and "+ Enable APIs and Services":



15. Search for the People API and enable it:





16. Go back to Credentials and copy the API key and Client ID



17. Go back to the admin dashboard of the site and go to Settings >> General Setting >> Integrations and paste the key and ID:


  1. API Key - Google Developer Key
  2. Client ID - Google Developer Client ID

   


Click Save.



Make sure to enable the Google Login:



If it's set to No, users will not have the ability to use the Google login but they can still use their Google account to sign up.


18. Once this is set up, go to Finance >> Membership Plans and enable the setting "Sign In with Google" to allow for Google Login. 

Click on Member's Dashboard or search for the setting "Sign In with Google" to make sure this is set to "YES":




Make sure to Save.



Google Login is now setup! 




-------------------------------------


If this isn't working after you have followed these steps, please make sure the following widgets are deactivated:


Bootstrap Theme - Success Page - Free Member Sign Up
Bootstrap Theme Framework

Bootstrap Theme - Account - Member Dashboard


The forms that will be set back to default in order to make this work are:


Sign Up - Free Member

WHMCS - Paid Signup