Overview


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.


How To Get This Add-On
  1. Websites with the VIP Add-Ons Club automatically have this add-on available:
    Join The VIP Add-Ons Club
  2. Purchase Individually: One-Click Google Login Add-On


Enabling the Add-On


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 the Google Maps API is already setup, 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 to know what the final domain of the website will be for this step.


Enter the following one at a time:


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

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

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

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



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



(REMEMBER: Do not add "YOURDOMAIN.com" to the list. What will be there is the final domain of the 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" and then Save and Continue:




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:

 


Scroll down until these options show up 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 there are further questions feel free to reach out to [email protected].