product documentation - isenselabs...product documentation december, 2015 googlelogin googlelogin...

Product Documentation

December, 2015

GoogleLogin

GoogleLogin for OpenCart, created by iSenseLabs

© 2015, iSenseLabs

isenselabs.com

GoogleLogin Documentation

http://isenselabs.com

http://isenselabs.com/users/support 2

Table of Contents

Table of Contents ....................................................................................................................... 2

Chapter 1: Introduction ............................................................................................................. 3

How to use this document ..................................................................................................... 3

Chapter 2: Installation instructions ........................................................................................... 4

Chapter 3: Getting started & Setup of GoogleLogin .................................................................. 5

What is GoogleLogin? ............................................................................................................. 5

Setup of GoogleLogin ............................................................................................................. 5

Chapter 4: Modifying styles & admin-side functionality ........................................................... 7

Styling the button ................................................................................................................... 7

Admin side functionality ........................................................................................................ 8

Chapter 5: Set positions for the button on the front-end ......................................................... 9

Assigning the module to layout/s .......................................................................................... 9

Further positioning with CSS ................................................................................................ 10

Chapter 6: Getting Google Client ID & Secret keys.................................................................. 11

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

Getting the keys from Google .............................................................................................. 11

Chapter 7: Uninstalling GoogleLogin ....................................................................................... 15

Chapter 8: Getting support ...................................................................................................... 16

Getting support .................................................................................................................... 16




Chapter 1: Introduction

Welcome! Thank you for your purchase of GoogleLogin. This document will teach you all

you need to know about the GoogleLogin extension.

How to use this document

The information you need is divided into chapters. In some sections you might notice some

of these two types of paragraphs:

Note: The blue paragraphs contain information which is good to be aware of. They are

intended for all types of users.

Important: The red paragraphs contain important information, which we strongly advise

users to read.




Chapter 2: Installation instructions

These installation instructions assume that you have either a fresh or a customized

installation of OpenCart 2.0 or a newer version.

Warning: If your OpenCart is not a fresh installation, files and database backup is highly

recommended.

1) Unzip the downloaded ZIP file into a new folder.

2) Login to your OpenCart admin panel and go to Extensions > Extension Installer. Upload

the file googlelogin.ocmod.zip, which is in the folder you created in Step 1.

Note: If you receive an error "Could not connect as...", this means that your OpenCart FTP

settings are not properly configured, or FTP is not enabled on your server. To resolve this,

follow these steps:

2.1) Go to System > Settings > Edit > FTP and update your FTP settings. After you are done,

try uploading googlelogin.ocmod.zip again. If it does not work and you receive the same

error "Could not connect as...", follow the next step.

2.2) Go to this link:

http://www.opencart.com/index.php?route=extension/extension/info&extension_id=1889

2 and download and install the Quickfix for the OpenCart Extension Installer. After you are

done, try uploading googlelogin.ocmod.zip again.

3) Go to Extensions > Modules and click the "Install" button on GoogleLogin. This action

should redirect you to your Modifications list.

4) If you, for some reason, do not get redirected to your Modifications, go to Extensions >

Modifications and click the "Refresh" button on the top right in order to rebuild your

modification cache. Otherwise, just click "Refresh".

5) Congratulations! GoogleLogin is now installed.






Chapter 3: Getting started & Setup of GoogleLogin

What is GoogleLogin?

GoogleLogin is an OpenCart module designed to give the customers of your store the option

of logging in with their Google credentials, thus saving them time on the matter of creating

a specific account for your store.

Setup of GoogleLogin

In order to enable the module, you have to navigate to its settings. To do so, go to

Extensions -> Modules, find GoogleLogin in the module list and click the blue ‘Edit’ button

with the pencil in it as shown:

The page you have just entered is the one you will use to create the actual button you will

assign to layouts and make visible on the front-end. Initially, it looks like that:

In the Module name field, enter the unique name of your module and click the green Save

button in the top right corner. Now go back to the Module List page and find the module by




the name of GoogleLogin > {UniqueNameOfYourModule} where the text in the curly

brackets is the name you have set for your module. Access its settings like you did for

GoogleLogin earlier. You will be redirected to an identical to the previous one Module

Settings page. The third field there is a drop-down menu one with the options of Enabled

and Disabled. In order to start configuring your module, choose Enabled and a set of fields

should appear.




Chapter 4: Modifying styles & admin-side functionality

Styling the button

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

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 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:

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.




Chapter 5: 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 with the pencil in it:

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 drop-

down menu. Adjust its position from the Position and Sort Order columns. Content Top and

0 are the values used for the example:

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:




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.

Note: Mind 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.




Chapter 6: 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”:

https://cloud.google.com/console/project




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:

Next, go back to the Credentials tab, click on Add credentials and choose OAuth 2.0 client

ID from the drop-down menu:




In the newly-opened page, select the Web application radio 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 URL in the rectangle shown in the

image:

Now, go back to the application creating page and paste the link in the Authorized redirect

URI field as shown:

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:




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 one

containing the Redirect URI:

Congratulations! Save your module’s settings and you will have a completely functional

GoogleLogin button for your website.




Chapter 7: Uninstalling GoogleLogin

This process describes how to uninstall GoogleLogin from your store.

Warning: This action cannot be reversed. It is highly recommended that you create a file

and database backup just in case.

To uninstall GoogleLogin, navigate to Extensions ->Modules and find the GoogleLogin

module (the main one, without any “>” after its name). In the Action column, there should

be a red Uninstall button. Upon clicking it, you will be asked whether you are sure you want

to proceed. Provided you confirm, the module will be uninstalled from your website.

Warning: Once you have uninstalled the module, you lose all the information related to it.

That said, if you have not done the above-mentioned backup, there is no way to retrieve the

deleted information.




Chapter 8: Getting support

Getting support

If you have a valid iSenseLabs license for the GoogleLogin module, this means you have

access to the iSenseLabs support system on the following address:

http://isenselabs.com/users/support

If you have any questions, comments or recommendations, feel free to open up a support

ticket in our system via the Support tab of the module. A support specialist will assist you as

soon as possible.

Thank you for using our product!

http://isenselabs.com/users/support

product documentation - isenselabs...product documentation december, 2015 googlelogin googlelogin...

Documents