In order to use this great tool on your website please follow the steps below:
1. Navigate to https://accounts.google.com/Login and login to the Google account you will be using with your site
2. After logging in, navigate to https://console.developers.google.com/apis/library
3. Click on Project - Create a project in the upper-left hand portion of the screen, or use an already existing project:
If you already set up your Google Maps API, you can use the same project.
4. Once the project is created click on APIs & Services and go to Credentials.
If you already set up your Google Maps API Skip to Step 15 to continue this process:
5. Then click on Create Credentials and select API Key:
6. Click on Restrict Key
7. Enter a name for this API key into the "Name" field. We are going to leave the default name "API key 1" for this tutorial, but you can use anything you like:
8. Select HTTP referrers (web sites):
9. The next step is to enter the proper domains into the "Accept requests from these HTTP referrers (web sites)" field:
10. 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.ilovebrilliant.com. It is very important that you know what the final domain of your website will be for this step.
Enter the following one at a time to the "Accept requests from these HTTP referrers (web sites)" field. Press ENTER after typing in each domain to add it to the list:
*.directoryup.com - this is needed if your site is NOT live yet.
*.managemydirectory.com - Important: It is needed in order for your admin pages to work with the maps.
managemydirectory.com - Important: It is needed in order for your admin pages to work with the maps.
*.ilovebrilliant.com (IMPORTANT: Replace "ilovebrilliant.com" with the final domain that YOUR website will be hosted on)
ilovebrilliant.com (IMPORTANT: Replace "ilovebrilliant.com" with the final domain that YOUR website will be hosted on)
After you have completed the above, you should see the following:
(REMEMBER: You will not see "ilovebrilliant.com" in the list. You will see the final domain of YOUR website in the list instead)
11. Leave the option on "Don't restrict key" and click on "Save":
12. After this is created, please click on Configure Consent Screen:
13. Select External and Create:
14. Fill out the fields and click on save (make sure to include https):
15. Go back to the Credentials page, from here create credentials again and select OAuth client ID:
16. Select Web Application and input your website's URL (make sure to include https):
17. Click on Ok next.
18. Click on Dashboard
19. Search for the word Google People API and enable it.
20. Go back to Credentials and copy the API key and Client ID
21. Go back to your admin page and go to Settings - General Setting - Integrations tab in here you can paste the key provided for you:
a. Paste the API Key inot the Google Developer Key.
b. Paste the Client ID into the Google Developer Client ID.
22. Click Save.
You also have the option to Enable the Google Login, if this is set to Yes your login form will contain this option:
If it's set to No, they will not have the ability to use the Google login but they can still use their Google account to sign up.
Also, if there isn't a key in the field, this option will never show up on the login form.
23. Once this is set up, you will need to go to Finance - Manage Products and edit the levels you wish to grant this to.
24. Click on Additional Settings Tab and make sure this is set to YES.
25. Make sure to Save Product Details, even if it's already set to Yes.
Your Google Login is now setup!
If this isn't working after you have followed these steps, please make sure the following widgets are deactivated:
Bootstrap Theme - Success Page - Free Member Sign Up
Bootstrap Theme Framework
Bootstrap Theme - Account - Member Dashboard
The forms that will be set back to default in order to make this work are:
Sign Up - Free Member
WHMCS - Paid Signup