Google Login Add-On

Link: https://support.brilliantdirectories.com/support/solutions/articles/12000036962

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


Step 1: Enabling the Add-On


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


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


Important

  • If the Google Maps API is already setup, use the same project.
  • If the Google Maps API is already setup, skip to the OAuth Consent section to continue this process.


Credentials & API Key

On the APIs & Services page go to Credentials.



Then click on Create Credentials and select API Key.




Click on Edit API key.




Enter a name for this API key into the "Name" field.  We are going to name the key "Google Login" for this tutorial. 


Key Restrictions

Select HTTP referrers (web sites) and enter the proper domains into the "ADD AN ITEM" field. 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.YOURDOMAIN123.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.

  • *.YOURDOMAIN123.com (IMPORTANT: Replace "yourdomain123.com" with the final domain that the website will be hosted on)
  • YOURDOMAIN123.com (IMPORTANT: Replace "yourdomain123.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 "YOURDOMAIN123.com" to the list. What will be there is the final domain of the website in the list instead)


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



Step 2: OAuth Consent

Click on "OAuth consent screen". 



The Google Auth Platform needs to be configured. Click on "Get started".



This button will redirect to the "Overview" tab. There are 4 project configuration steps to complete.


  1. App Information: Fill in the App name and User support email. 
  2. Audience: Select External.
  3. Contact Information: These email addresses are for Google to send notifications about any changes to the project.
  4. Finish: Agree to the Google API Services: User Data Policy.



Step 3: Branding

After completing these steps, go to the "Branding" tab and fill out the following fields.

  • App information: This shows in the consent screen, and helps end users know how to contact you. Enter the App name and the User support email.
  • App domain: To protect the website and its users, Google only allows apps using OAuth to use Authorized Domains. The following information will be shown to the users on the consent screen. Enter the website home page, privacy policy, and the terms of service links.

  • Authorized domains: When a domain is used on the consent screen or in an OAuth client’s configuration, it must be pre-registered here. If the app needs to go through verification, please go to the Google Search Console to check if the domains are authorized.

  • Developer contact information: These email addresses are for Google to notify you about any changes to your project.


Step 4: Audience

Under "Test Users", fill in any of the test users accounts if necessary:


Step 5: OAuth client ID

In the "Clients" tab, create the OAuth client ID.


Fill in the following:

  1. Application Type - Web Application
  2. Name - Enter the name for this Google Login. 
  3. Authorized JavaScript origins - Website Domain




Step 6: Data Access

Add the "Scopes" by clicking on "ADD OR REMOVE SCOPES".



The three scopes to select are:

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




Step 7: People API

Back in the APIs & Services section, click on "+ Enable APIs and Services" or "Library".




Search for the Google People API and enable it.






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.



Step 8: Add Keys to Website

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.


Step 9: Allow Google Login

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




Live Buttons

Google Login is now setup!