Upload
others
View
12
Download
0
Embed Size (px)
Citation preview
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
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 3
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 4
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 5
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
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 6
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 7
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 8
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 9
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:
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 10
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 11
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”:
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 12
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:
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 13
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:
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 14
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 15
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.
GoogleLogin Documentation
http://isenselabs.com
http://isenselabs.com/users/support 16
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!