To allow your website visitors to register quickly and easily using their Google account, you'll need to sign into your Google Developer Account to authorize and authenticate your website to speak to Google to use their Sign-On Button on your Registration form.
Begin by navigating to the Google API Console.
https://console.developers.google.com/
Log in to your Google Account. If this is your first time here, a popup asking to accept the Terms and Conditions will appear.
Once you have signed in, select Enabled APIs & services on the left side menu. Click Create Project.
A New Project will open. Set any name you want, and click Create.
Your project's name will now appear at the top left of the screen. With this selected we can now let your visitors authenticate their sign in on to your website.
Click OAuth consent screen on the left side panel.
You will be asked to choose how you want to configure and register your app. Select External then click Create.
OAuth Consent Screen
This OAuth consent screen will allow your visitors to choose whether they want to grant access to their private data, as well as give them a link to your terms of service and privacy policy.
- App information - The name should accurately reflect your website and be consistent with the application name users see elsewhere. This should be your own name, brand, or domain. The User Support email is were users can contact you. Your logo can also be added (optional) by selecting Browse.
- App Domain - Here you will add the link to your home page, privacy policy link, and terms of service link for the users reference.
- Authorized Domains - Select Add Domain.
- Enter your domain name here. For example: woahthatsmyhome.com.
- Developer contact information - Enter your email address here. These email addresses are for Google to notify you about any changes to your project.
- Click Save and Continue.
Scopes
The next page gives the option to customize the scopes. This option is not necessary for set up. Scroll down to the bottom and click Save and Continue.
Test Users
The next page gives the option to set up Test users. This option is not necessary for set up. Scroll down to the bottom and click Save and Continue.
Summary
The next page will show the summary of your selections. Click Back to Dashboard.
Next, click Credentials on the left side panel. At the top of the Credentials page, click Create Credentials.
Here we will generate your Google OAuth 2.0 Client ID and Client Secret which are the tokens your website will need.
Click OAuth client ID.
Application Type
On the Create OAuth client ID page, select the Application Type drop down menu then select Web application from the list.
The page will now populate the sections for Name, Authorized JavaScript origins, and Authorized redirect URIs.
Name
Enter a name here for your OAuth 2.0 client. Choose any name you want. This name is only used to identify the client in the console and will not be shown to end users.
Authorized JavaScript origins
In the Authorized JavaScript origins section, click the Add URI button.
Click into the field to enter your full website URL. Example: https://mywebsite.com
Authorized redirect URIs
This section is for use with requests from a web server and is not required for set up.
Click Create at the bottom of the page.
Your Client ID and Client Secret have been generated and you can now copy them over to your website. You can access these again as needed by going to the Credentials page and clicking on the client ID from the list.
Select OK and go back to the OAuth consent screen. Under Publishing status, Testing, select PUBLISH APP.
A pop-up will appear informing you that verification is not required. Select OK then the verification status will switch to "verification not required".
Next, log in to your iHOUSEweb Admin Menu using the Admin Menu link at the bottom of your website.
Once signed in, in the left side menu click Settings then Visitor Registration.
On the Visitor Registration page, scroll down to the Social Sign-in Apps section.
In the subsection titled Include Google single sign-on for simple registration, insert the Client ID and Client Secret into correct fields. The checkbox that says Include Google sign-on for simple registration should be checked.
Scroll to the bottom of the page and click Save Settings to finalize your changes.
Your website's registration form is now enabled with the Google single sign-on button. When a client selects to Log In or Sign Up in on your website, they will see the option to Sign in with Google.