Google Sign-In for BPD

Overview

Google Sign-In is a secure (OAuth 2.0) login method that aims to reduce friction and "login fatigue" for your users. Instead of signing in to your website with an email address and password, your customers can login with their Google account — the same account they already use for Gmail, Docs, Google+, and other Google services. 

This article will guide you through the implementation of Google Sign-In for your site. 

Create a Client ID

To enable Google Sign-In, you'll need a Google API Console project & Client ID.

Follow the steps below, or use Google's guide to get started - https://developers.google.com/identity/sign-in/web/devconsole-project 

1. Go to https://console.developers.google.com/project/_/apiui/apis/library and login to your Google account. 
   
   
2. Select your API project from the dropdown, or create a new one. 
   
    or 
   
   
3. Select the Credentials menu, and the OAuth consent screen tab.
   
   
4. Select the email address, enter your product (website) name, and Save. You can populate optional fields now too, if you choose. 
   
   
   
5. From the Create credentials dropdown, select OAuth client ID. 
   
   
   
6. Select Web application and enter your site name and JavaScript origins. See below for further info.
   
7. Click Create, and you now have a Client ID! Copy this down somewhere. 

Configure Google Sign-In 

 Now it's time to set up your website. 

1. In the CMS, navigate to Settings → Feature Settings. 
   
   
2. Edit the Third Party Login feature. 
   
   
   
3. Toggle the following options on/off as required:
   
   
   • Use Registration Page - this directs users to additional registration fields after they login to Google. 
     
     
     
   • Allow Linking To Existing Users - this allows a user to login with Google, then link that login to an existing account on your site (if they have one).
     This retains all of the user's order history, favourites, etc, with the benefit of a quick Google sign-in.
     
     
     
     
4. Copy and paste your Google Client ID into the Sign-In Client ID field. 
   
   
5. Copy and paste the following into the Token Info Endpoint field: https://www.googleapis.com/oauth2/v3/tokeninfo?id_token={0}
   
   
6. Enable Google Sign-In with the toggle, then Save! 
   

 

Optional Customisations

Change the text on the Registration / Link User page here: 

1. Navigate to Content → Standard Pages.

2. Search for and select the Third Party Login Registration template. 
3. Edit the Third Party Login Registration Fields widget. 
4. You can update the headings, button labels, and prompts here. 
   
   

 

 

Change the heading on the Login pop-up here: 

1. Navigate to Content → Theme Layout.
2. Edit the Login Logout Modal widget.
3. Select the Titles tab to update the headings.