How to Add Sign In with Google, One Tap

How to Add Sign In with Google, One Tap

Sign In With Google, One Tap is a feature that allows users to sign in to websites with their Google account with just one tap. One Tap uses Google's strong security infrastructure to protect users' accounts, and it eliminates the need for users to remember and enter passwords.

To use One Tap, users need to have a Google account and have enabled two-factor authentication for their account. When a user tries to sign in to a website that supports One Tap, they will be prompted to approve the login request from their Google account. If the user approves the request, they will be signed in just by clicking the Google button.

There are three steps to complete the connection from Google to your MemberGate site.

1. Complete the OAuth Consent Form

2. Create the Client ID and Client Secret

3. Add the Client ID and Client Secret to your MemberGate site

Follow the guidelines in each tab below to complete the tasks.

Google OAuth Consent

Both Sign In With Google and One Tap include a consent screen which tells users that your website is requesting access to their data as well as the data type. The consent screen also includes terms and any privacy policy that apply.

Follow these steps to fill the details for your site:

Open the OAuth consent page of the Google APIs console.

Fill out the form and click the “Save” button.

Suggested text for the fields:

  • Application Name - Name of your Website ie. MemberGate
  • Application Logo - An image of your logo or other identifiable graphic so users know it is for your specific website.
  • Support Email - Enter the email address used for the webmaster email on your MemberGate website.
  • Scopes for Google APIs - Select default scope (email, profile, openid)
  • Authorized Domains - Enter the url of your MemberGate website ie. https://www.yoursitename.com
  • Application Homepage link - Enter the url of your MemberGate website ie. https://www.yoursitename.com
  • Application Privacy Policy link - enter the url for the privacy policy on your MemberGate website
  • Application Terms of Service link (optional) - enter the url for the terms of service page on your MemberGate website.

Google API Client ID

Once the consent authorization has been completed, the next step is to generate the Client ID information which will be used to connect the application to your MemberGate site.

Credentials

Visit your Google API Console page and click on 'Credentials' in the left sidebar.

OAuth client ID

Select the 'OAuth client ID' and for Application type select Web application to create a new client ID

Authorized JavaScript origins

Enter the full url of your site ie https://www.yoursitename.com

Save

Click Save to generate the Client ID and Secret.

Connect the Google One Tap to MemberGate

The very last step is to add the Google Client ID and Client Secret to your MemberGate control panel to connect the Google application to your MemberGate site.

Single Sign-on

The connection settings can be found in the control panel on the right sidebar under API Service Settings Single Sign-on

Client ID

From Google API Console, 'copy the Client ID' from the 'Credentials' page under 'Additional Information' and paste it into the 'Client ID' field in the MemberGate control panel.

Client Secret

From Google API Console, copy the 'Client Secret' from the 'Credentials' page and paste it into the 'Client Secret' field in the MemberGate control panel.

Save

Click on the button.

The Google One Tap button should now appear on your login page.