Module Settings Overview

In this tab, we will go over the module settings you have to configure to get GoogleLogin working on your OpenCart store.

Modifying Styles & Admin-Side Functionality

Styling the button

The following fields are the ones responsible for your button's appearance:

button

Button Preview: This is the field where you will be able to preview your button. Initially, it is either empty or just a hyperlink with the name set in the Button Name field.

Button Design: This drop-down field has 4 pre-made buttons that you can use - Standard, Blue Style, Metro and Rounded. Browse them and see how each one looks in the Preview field.

Wrap Button into Widget: This is a Yes/No field that determines whether your button will be fit into a box-like panel. Set it to Yes and see its function in the Preview field.

Wrapper Title: This field appears if the latter is set to Yes and allows you to determine the title of the panel.

Button Name: You can set the label of your button here. It is Login with Google by default.

On the bottom of the page there is a text area by the name of Custom CSS. It is for everybody who is familiar with CSS and wants to add some custom styles to his/her button. By default, the styles added to the button are:

".googleButton { margin: 0 0 20px 0; }"

You can change them if you feel fluent enough in CSS. Otherwise, leave them as they are or contact the iSenseLabs Support team if you need help with positioning your button.

Admin Side Functionality

On the user side the function of the button is easily summarized as an alternative tool for logging in. On the admin side, however, functions may be slightly modified depending on the admin's preferences. You can do that using the fields immediately after those for styles:

customer_groups

Use OpenCart's Customer Group Settings: If you leave this box unchecked, all users that log in to your website by means of the Google Login button will be assigned to a chosen customer group, which you can set from the Assign to Customer Group field below. If you check the box, OpenCart's default settings will be applied.

New User Required Details: This is a field with multiple checkboxes. Check the boxes for the information you want new users to be required to provide when they log in via the Google Login button.

Set positions for the button on the front-end

Alright, you have the button styled and its functions set as desired by the admin. It is time to find place for it on the front-end. To do so, the module has to be assigned to layouts using OpenCart's functionality.

Assigning the module to layout/s

To assign the module to the desired layouts, navigate to System > Design > Layouts. Choose the layout you want the button to be present on. Most people want the button on the Account and Checkout pages, so the Account layout will be used for the example. Locate the Account row and click its blue Edit button.

Upon clicking the button, you will be redirected to the Account layout edit page. There are two tables. In the bottom one, click the blue Plus button. A new row should appear. In the Module column, choose GoogleLogin > {UniqueNameOfYourModule} from the dropdown menu. Adjust its position from the Position and Sort Order columns.

Do this for as many layouts as you like. The button with the settings from the example will look as follows on the front-end:

button_register

Further positioning with CSS

For those acquainted with CSS, there is a way to further determine the position of their button. This is done from the Selector field in the module settings of your unique-named module.

login

NoteMind the checkbox. It has to be checked in order for selectors to apply.

Important If you experience any problems or simply do not have the knowledge to position your button exactly where you want to, do not hesitate to contact iSenseLabs Support team on the matter.

Getting Google Client ID & Secret Keys

The button is already visible on the front-end but you might have noticed that nothing happens when you click it. This is because you have not connected the button to the Google API.

What are APIs and why are you going to use them?

In programming, APIs (Application Programming Interfaces) have a lot of applications with the general purpose of making programmers' lives easier. In our case, we use the Google Identity Toolkit API mainly for security reasons. The keys you are about to get are unique for each user and usually act both as a unique identifier and a secret token for authentication. Their purpose is to prevent malicious user from guessing the usernames and passwords that go through the application.

Getting the Keys from Google

First off, you need to go to https://cloud.google.com/console/project. If you are not logged in with your Google credentials, you will be redirected to the Google login page. Upon logging in, you will enter the Google Cloud Platform. Create a new project by clicking on the blue Create project button.

Enter a name for your project and click the Create button. You will automatically access your project's dashboard. Click on the panel titled Use Google APIs:

google_apis

Next, click on Credentials from the navigation bar on the left. Then go to the OAuth consent screen tab, fill in the Product name shown to users field and click the save button as shown:

oauth

Next, go back to the Credentials tab, click on Add credentials and choose OAuth 2.0 client ID from the drop-down menu:

credentials

In the newly-opened page, select the Web application button and a set of fields should appear. In the Name field, enter any name for your application and leave it like that. Now, it is time to get the redirect URI from your admin panel. Access your unique module's settings. In the "Login Settings" tab, right below the Status field (provided it is enabled), there is a field by the name of Redirect URI. Copy the URI from there.

Now, go back to the application creating page and paste the link in the Authorized redirect URI field as shown:

web_application

Once you have chosen the type of application, typed in a name for it and pasted the Redirect URI, click the Create button on the bottom and a pop-up window with two keys will appear:

oauth_id

Copy the top one and paste it in your module's settings Google Client ID field and the bottom one in the Google Client Secret field. The fields are located right below the Redirect URI field.

Congratulations! Save your module's settings and you will have a completely functional GoogleLogin button for your website.