Difference between revisions of "Configuring Sign-In using Google"

From WHMCS Documentation

(Configuring Sign-In with Google)
 
(6 intermediate revisions by 4 users not shown)
Line 1: Line 1:
This article is part of the [[Sign-In Integrations]] feature.
+
Enabling the Google [[Sign-In Integrations]] enables visitors and customers to register, sign in, and connect their Google accounts with your WHMCS installation for faster signup and automatic sign-in.
  
==Purpose==
+
[[File:Signinintegrationslogin3.png|600px]]
  
Enabling the Google Sign In Integration enables visitors and customers to register, sign in and connect their Google accounts with your WHMCS installation for faster sign-up and automatic sign-in.
+
== Configuring Sign-In with Google ==
  
[[File:Signinintegrationslogin.png]]
+
Google Sign-In Integration requires a Google Developer Project and API credentials. You can create this using your existing Google account. Users will only see the app name you define and will not see anything relating to the account you use to create the project.
  
==Configuring Sign-In with Google==
+
To do this:
  
<html><a href="https://vimeo.com/236651329" class="docs-video-tutorial"><em>Watch the video tutorial for this feature</em><span>&nbsp;<img src="https://assets.whmcs.com/icons/youtube.png">&nbsp;</span></a></html>
+
# Visit <tt>https://console.developers.google.com/</tt>.
 +
# Log in to your Google account. <div class="docs-alert-warning">Changing the Google account you use to create the app requires users to reauthenticate and relink their accounts.</div>
 +
# Choose '''Select a  project''' on the top menu.<br/>[[File:Google-cloud-select-project.png]]<br/><br/>
 +
# Choose '''New Project'''.<br/>[[File:Google-sign-in-2.png|600px]]<br/><br/>
 +
# Enter a project name.<br/>[[File:Google-sign-in-3.png|600px]]<br/><br/>
 +
# Click '''Create'''.
 +
# Select '''Credentials''' in the left sidebar.
 +
# Choose '''Create Credentials'''.<br/>[[File:Google-sign-in-5.png|600px]]<br/><br/>
 +
# Select '''OAuth client ID'''.
 +
# Click '''Configure Consent Screen'''.
 +
# Select '''External'''.<br/>[[File:Google-sign-in-6.png|600px]]<br/><br/>
 +
# Click '''Create'''.
 +
# Add app information details.<br/>[[File:Google-sign-in-7.png|600px]]<br/><br/>
 +
# Add an app domain.<br/>[[File:Google-sign-in-8.png|600px]]<br/><br/>
 +
# Add authorised domains.<br/>[[File:Google-sign-in-9.png|600px]]<br/><br/>
 +
# Add developer contact information.<br/>[[File:Google-sign-in-10.png|600px]]<br/><br/>
 +
# Click '''Save and Continue'''.
 +
# Select '''Credentials''' in the left sidebar.
 +
# Choose '''Create Credentials'''.
 +
# Select '''OAuth client ID'''.
 +
# Choose '''Web Application'''.<br/>[[File:Google-sign-in-11.png|600px]]<br/><br/>
 +
# Enter a name for your OAuth 2.0 client.
 +
# Enter your full root domain in '''Authorized JavaScript origins'''.<br/>[[File:Google-sign-in-12.png|600px]]<br/><br/>
 +
# Enter your full root domain in '''Authorized redirect URI'''.<br/>[[File:Google-sign-in-13.png|600px]]<br/><br/>
 +
# Click '''Create'''.
 +
# Save your client ID and secret, which you will use to activate Google Sign-In within WHMCS. <br/>[[File:Google-sign-in-14.png|600px]]<br/><br/>
 +
# Log in to the WHMCS [[Admin Area]].
 +
# Navigate to '''Configuration (<i class="fa fa-wrench" aria-hidden="true"></i>) > System Settings > [[Sign-In Integrations]]''' or, prior to WHMCS 8.0, '''Setup > Sign-In Integrations'''.
 +
# Select '''Activate''' under the Google heading.
 +
# Enter your Google Client ID and Client Secret.
 +
# Click '''Save & Activate'''.
  
There are 2 steps required to setup Sign-In with Google:
+
WHMCS will attempt to validate the details you have entered. If the client ID and secret are valid and successfully authenticate with the Google API, the values will be saved.
  
# Create a Google Developer Project and Retrieve API Credentials
+
For troubleshooting help, see [[Troubleshooting Sign-In using Google]].
# Activate Google Sign In within WHMCS
 
 
 
===Create a Google Developer Project and Retrieve API Credentials===
 
 
 
Google Sign In Integration requires a Google Developer Project and API Credential Set.  You can create this using your existing Google account. Users will only see the App Name you define and not see anything relating to the account you use to create the project.
 
 
 
<div class="docs-alert-warning">Be aware that the Google account under which you create the app can not be changed without requiring users to re-authenticate and re-link their accounts so it is important to set the app up under an account that you will always have access to.</div>
 
 
 
1. Visit https://console.developers.google.com/ <br>
 
2. If not logged in, login to your Google account <br>
 
3. Under the Project selector, choose '''Create project'''
 
 
 
[[File:Googlesignin1.png]]
 
 
 
4. Enter a Project Name and click '''Create''' (This name is private to you)
 
 
 
[[File:Googlesignin2.png]]
 
 
 
5. Next you will be taken to the project dashboard.  From here, select '''Credentials''' in the left sidebar.
 
 
 
[[File:Googlesignin3.png]]
 
 
 
6. Before creating credentials, you must complete the ''OAuth consent screen'' configuration. Select this tab and enter a product name, homepage url and logo url (the name and logo you define here will be what users see when being asked to authorize access).  Once complete, hit '''Save'''.
 
 
 
[[File:Googlesignin4.png]]
 
 
 
7. If not returned automatically, now return to the ''Credentials'' tab and select '''Create credentials > OAuth client ID'''.
 
 
 
[[File:Googlesignin5.png]]
 
 
 
8. On the following screen, choose '''Web application'''
 
 
 
[[File:Googlesignin6.png]]
 
 
 
9. Next you will be asked to provide a name for the credential set (this is not visible to the public) and the authorized JavaScript origins and redirect URIs.  Enter your full root domain in both the authorized JavaScript origin and redirect URI boxes.  In the example here we are using "https://demo.whmcs.com".  Then hit '''Create'''.
 
 
 
[[File:Googlesignin7.png]]
 
 
 
10. Your Client ID and secret will then be displayed. These are the values you will need to activate Google Sign In within WHMCS so store these in a safe place.
 
 
 
[[File:Googlesignin8.png]]
 
 
 
You can now proceed to Activate Google Sign In within WHMCS.
 
 
 
===Activate Google Sign In within WHMCS===
 
 
 
# Login to the WHMCS Admin Area
 
# Navigate to Setup > Sign-In Integrations
 
# Select Activate under the Google heading
 
# Enter your Google Client ID and secret where requested
 
# Click Save & Activate
 
 
 
WHMCS will attempt to validate and test the details you have entered. If the Client ID and secret are valid and successfully authenticate with the Google API, the values will be saved and the modal will close.
 
 
 
Congratulations! Google Sign In is now enabled.
 
 
 
==Troubleshooting==
 
 
 
For troubleshooting help, please refer to [[Troubleshooting Sign-In using Google]]
 

Latest revision as of 14:00, 24 October 2023

Enabling the Google Sign-In Integrations enables visitors and customers to register, sign in, and connect their Google accounts with your WHMCS installation for faster signup and automatic sign-in.

Signinintegrationslogin3.png

Configuring Sign-In with Google

Google Sign-In Integration requires a Google Developer Project and API credentials. You can create this using your existing Google account. Users will only see the app name you define and will not see anything relating to the account you use to create the project.

To do this:

  1. Visit https://console.developers.google.com/.
  2. Log in to your Google account.
    Changing the Google account you use to create the app requires users to reauthenticate and relink their accounts.
  3. Choose Select a project on the top menu.
    Google-cloud-select-project.png

  4. Choose New Project.
    Google-sign-in-2.png

  5. Enter a project name.
    Google-sign-in-3.png

  6. Click Create.
  7. Select Credentials in the left sidebar.
  8. Choose Create Credentials.
    Google-sign-in-5.png

  9. Select OAuth client ID.
  10. Click Configure Consent Screen.
  11. Select External.
    Google-sign-in-6.png

  12. Click Create.
  13. Add app information details.
    Google-sign-in-7.png

  14. Add an app domain.
    Google-sign-in-8.png

  15. Add authorised domains.
    Google-sign-in-9.png

  16. Add developer contact information.
    Google-sign-in-10.png

  17. Click Save and Continue.
  18. Select Credentials in the left sidebar.
  19. Choose Create Credentials.
  20. Select OAuth client ID.
  21. Choose Web Application.
    Google-sign-in-11.png

  22. Enter a name for your OAuth 2.0 client.
  23. Enter your full root domain in Authorized JavaScript origins.
    Google-sign-in-12.png

  24. Enter your full root domain in Authorized redirect URI.
    Google-sign-in-13.png

  25. Click Create.
  26. Save your client ID and secret, which you will use to activate Google Sign-In within WHMCS.
    Google-sign-in-14.png

  27. Log in to the WHMCS Admin Area.
  28. Navigate to Configuration () > System Settings > Sign-In Integrations or, prior to WHMCS 8.0, Setup > Sign-In Integrations.
  29. Select Activate under the Google heading.
  30. Enter your Google Client ID and Client Secret.
  31. Click Save & Activate.

WHMCS will attempt to validate the details you have entered. If the client ID and secret are valid and successfully authenticate with the Google API, the values will be saved.

For troubleshooting help, see Troubleshooting Sign-In using Google.