Google Login Add-On

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

The One-Click Google Login add-on allows users to register or log in to the website using their Google account.


This works with the default Brilliant Directories login and registration system. Existing members can also connect or remove their linked Google account from inside the 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. The add-on can also be purchased individually: One-Click Google Login Add-On


This setup requires a Google Cloud project and a Google OAuth Client ID.


If Google Maps is already set up for the website, use the same Google Cloud project. This keeps the Google settings for the website in one place.


The Google setup screens are managed by Google and may look different depending on the account, project, or Google Cloud updates. The steps below focus on the settings needed for Brilliant Directories.


Step 1 - Open Google Cloud

Log in to the Google account being used for the website and open Google Cloud:



Make sure the correct Google Cloud project is selected at the top of the page.


Step 2 - Create the API Key

If Google Maps is already set up for the website, this step can be skipped because the website should already have a Google API key.


If an API key has not been created yet, open the Google Cloud Credentials page:



  1. Click Create Credentials.
  2. Select API Key.
  3. Name the key something easy to recognize, such as Google Login.
  4. Copy the API key.

After the API key is created, add the correct HTTP referrers so Google knows which website domains are allowed to use the key.



For help editing HTTP referrers, see this article: Google Maps Issues: Editing HTTP Referrers


Step 3 - Branding Details

In Google Auth Platform, open the Branding section.



Complete the required branding fields for the website.


  • App name: The website or brand name users will recognize.
  • User support email: The email users can contact for help.
  • App domain: Add the website homepage, privacy policy, and terms of service URLs.
  • Authorized domains: Add the website domain used for Google Login.
  • Developer contact information: Add the email Google can use for project notices.



Save the branding settings before continuing.


Step 4 - Create OAuth Client ID

Open the Google Auth Platform Clients page:


Open Google Auth Platform Clients


  1. Click Create Client.
  2. For application type, select Web application.
  3. Enter a name for the client, such as Google Login.
  4. Add the website domain under Authorized JavaScript origins.
  5. Create the client.
  6. Copy the Client ID.

The authorized JavaScript origin should use the live website domain with HTTPS.



Example:

  • https://www.example.com


Replace example.com with the website’s live domain.


Step 5 - Add Scopes

Open the Data Access section in Google Auth Platform.


Add the following scopes:


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



These scopes allow Google Login to confirm the user’s basic profile information and email address.


Step 6 - Enable the People API

Open the Google People API page:


Open Google People API


Make sure the correct Google Cloud project is selected, then click Enable.


Step 7 - Copy the Key and ID

After the Google setup is complete, copy the details that need to be added to the Brilliant Directories admin.


  1. API Key: Only needed if a Google API key has not already been added for Google Maps.
  2. Client ID: Required for Google Login.



Step 8 - Add the Google Details

Log in to the Brilliant Directories admin and go to:


  1. Click on Settings
  2. Go to the General Settings
  3. The field to add the Google details is in the Integrations tab



Add the Google details:


  1. API Key: Add the API key if one has not already been added for Google Maps.
  2. Client ID: Add the Google Developer Client ID.


Make sure Google Login is enabled in the Integrations settings, then save the changes.


Step 9 - Allow Google Login

After the Google details are added in the admin, enable Google Login for the membership plans that should offer this option.


Go to:

  1. Finance
  2. Membership Plans
  3. Edit the membership plan
  4. Enable Sign In with Google
  5. Save the changes



Live Buttons

Once Google Login is set up and enabled, the Google Login button will display on the website.