How to create my Google app?

To set a Google connector on your PrestaShop website, first go to the configuration of your Social Login module and click the "Social login buttons configuration" tab. On the line of the Google connector, click on the pencil button to configure the connector ("edit" column):



Select YES to activate the connector display on your site: 



To fill out the following information you must create a Google application.

To do that, follow the following procedure:


First of all, click here to reach the credentials tab of the Google for developers interface and Log in(*).


Be careful you must log in with a gmail address to which you agree to receive messages from your customers, if needed. Indeed, Google will redirect the visitors to this email address if they want to contact you via the consent screen (see below) that will appear at the click on the Google login button.
Google provides only one alternative to this: log in with the gmail address you want and then, when you configure the consent screen, indicate the email address of a Google Group you are admin of.


Click "Create" to create a new project:



Enter a name for the project, for example "Google app project" and click "Create":



Then, check that you are well inside the project you just created by checking the name of the tab, next to the "Google APIs" logo (if this is not the name of the project you just created, select it by clicking on the little black arrow). Also check in the left menu that you are in the "Credentials" tab:



Click "Create credentials" and select "OAuth client ID":


First, you are going to configure the screen that will appear to your users when they click the Google login button.

To do that, click "Configure consent screen":



As it's written, the consent screen "tells your users who is requesting access to their data and what kind of data you're asking to access." This is a consequence of the coming into effect of the General Data Protection Regulation (GDPR). It's now required to explicitly get the agreement of your users if you want to use their data.

You're first asked for the "Application name". It's strongly recommended to enter the name of your shop so that your visitors understand right away who is asking consent to collect some of their data.

Be careful: if you add your shop logo, your app must be submitted for approval which may take many days... We advise you not to import your logo if you want the login button to work right away.



Enter the email address of your support service (with which you have logged in, see the note at the beginning of the FAQ) or the "Google Group" email address that you manage.

In the "Scopes for Google APIs" section do not touch anything. Google simply indicates that by default it gives you access to the email address and the name of your user.
Do not add other scopes otherwise you will have to wait for Google to validate your app and this can take a long time ... Anyway, to create the Google quick connect button, all you need is the email address and the name of your users (which they are approved by default by Google), so it is useless to ask for other data.



Enter the name of your domain, the URL of your website home page, the one of your policy privacy and the one of your terms of service (note that the last two URLs can be the same). Finally click "Save":



You arrive on a screen asking you to select the type of your app. Select "Web Application":



You have now to fill out a small form that will allow Google to make the link between your site and the created app. You are going to indicate the "callback" URL, that is the URL to which your customers will be redirected after they have clicked the Google login button.

Give a name, for example "Web Client Mary's shop" (be careful this name must be different from your app):



Do not put anything in the "Authorized JavaScript origins" field.

In "Authorized redirect URLs" field you have to copy and paste the callback URL that is given in the module. Return in the connector configuration in the module and on the "Callback URL" field click "Copy to clipboard":



Return in the app configuration and paste this URL in the "Authorized redirect URLs" field:



Be careful: once the callback URL is filled, before clicking "Create", click outside the field so that Google saves this URL. Then click "Create".


A modale appears with your client ID and your client secret code. Copy each of them and paste them into the connector configuration in the module:



Close the modale and click on your project name (next to the Google APIs logo):



A modale appears in which you can find the number assigned to your project. Copy it and paste it in the connector configuration in the module:



Click "Update".

Still in the module, click on the "Connectors Position Management (native hooks)" tab and choose the desired location for your Google Connector, for example the "Login Page" hook(*). Click the pencil icon in the "Edit" column and drag and drop the Google Connector to this location:



Click "Update" and do the same for all the positions where you want to see the Google connector.


(*)This is just an example but, of course, to define the connector position, you can use the advanced position tool or the shortcode generator.


Finally go to your site and test the Google login button. If a screen like the one below appears, it means that the application works:



Please note that if you click on the name of the application or the domain name (it may be the name of the domain that appears instead of the name of the application), you access, among other things, the e-mail address you entered when configuring the authorization screen:


Other FAQs in this category