Google Login Add-On

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000036962-google-login-add-on

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 Edit API 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 "yourdomain.com" with the final domain that the website will be hosted on)
  • YOURDOMAIN.com (IMPORTANT: Replace "yourdomain.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", make sure that the The User Type is automatically set to External, then click on 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 three scopes to select are:

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



Click on "Update" and then Save and Continue:




The "Test Users" screen, fill in any of the test users accounts 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 - Enter the name for this Google Login. 
  3. Authorized JavaScript origins - 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 (Important: If the Google Maps API is already setup you do not need to copy the API key). The Client ID will be required.




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


 


Scroll down until the option shows up and paste the and ID:


  1. API Key - Will only be required if you have not set up Google Maps.
  2. Client ID - Google Developer Client ID

   



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!