MAGENTO 1 SOCIAL LOGIN - Marketplace · social accounts such as Facebook, Google, Yahoo, Twitter, LinkedIn, etc. Why don’t you enable them to use such accounts to log in by using

MAGENTO 1

SOCIAL LOGIN

(Version 3.1)

USER GUIDE

Social Login version 3.1

1

_________________________________________________________________________________

Confidential Information Notice Copyright2016. All Rights Reserved. Any unauthorized reproduction of this document is prohibited. This document and the information it contains constitute a trade secret of Magestore and may not be reproduced or disclosed to non-authorized users without the prior written permission from Magestore. Permitted reproductions, in whole or in part, shall bear this notice.


2

_________________________________________________________________________________

Table of content

1. INTRODUCTION ............................................................................................ 4

Feature Full List ............................................................................................ 4

For Customers.................................................................................................... 4

For Admin ........................................................................................................... 4

Others ................................................................................................................. 4

2. HOW TO USE.................................................................................................. 5

2.1. Show Social Login buttons at many positions in front-end ............... 5

2.2. Customer can log in to web-shop by many social network accounts

........................................................................................................................ 6

3. HOW TO CONFIGURE .................................................................................. 14

3.1. General configuration ......................................................................... 14

3.2. Specified configuration ....................................................................... 14

3.2.1. Facebook Login Configuration ............................................................. 14

3.2.2 Instagram Login Configuration ............................................................. 17

3.2.3. Twitter Login Configuration.................................................................. 20

3.2.4. Amazon Login Configuration ............................................................... 22

3.2.5. Google Login Configuration ................................................................. 25

3.2.6. LinkedIn Login Configuration ............................................................... 29

3.2.7. Yahoo Login Configuration ................................................................... 32

3.2.8. AOL Login Configuration ...................................................................... 34

3.2.9. WordPress Login Configuration ........................................................... 35


3

_________________________________________________________________________________

3.2.10. MyOpenId Login Configuration ......................................................... 36

3.2.11. Livejournal Login Configuration ........................................................ 36

3.2.12. Clavid Login Configuration ................................................................. 37

3.2.13. Orange Login Configuration ............................................................... 37

3.2.14. FoursQuare Login Configuration ....................................................... 38

3.2.15. Windows Live Login Configuration .................................................... 41

3.2.16. Persona Login Configuration ............................................................. 43

3.2.17. Stack Exchange Login Configuration ................................................. 44

3.2.18. Vk Login Configuration ....................................................................... 44

3.3. Show the Social Login buttons in the different positions ............... 47


4

_________________________________________________________________________________

1. Introduction

The fact that a lot of information is required when creating a new account can

discourage Customers from doing so on your site. However, most of them already have

social accounts such as Facebook, Google, Yahoo, Twitter, LinkedIn, etc. Why don’t you

enable them to use such accounts to log in by using our Social Login extension?

Customers just need to click on the account button they like, and then enter their

username and password!

Feature Full List

For Customers

Able to choose one among up to 18 types of social accounts to log in. Just need to

enter their usernames and passwords to log in. No other information is required.

If Customers already signed in their social account, System will automatically use

the information from their social account to log in.

A new password will be sent to customers to use as a separate account for the site

after they sign in by social accounts.

Able to choose to register a new account as normal

For Admin

Able to change the order of social login buttons in frontend

Put the Social Login bar in different positions

Others

Responsive Magento Social Login extension

Social Login is 100% open-source

Support multiple websites

Support multiple currencies

Support multiple languages

Support multiple store views

License Certificate valid for 1 live Magento installation and unlimited test Magento

installations (No license key required)

Easy to install and configure

User-friendly interface


5

_________________________________________________________________________________

2. How to use

2.1. Show Social Login buttons at many positions in front-end

Show the Social Login buttons in the Header

Show the Social Login buttons below Customer login form

Show the Social Login buttons below Customer registration for


6

_________________________________________________________________________________

2.2. Customer can log in to web-shop by many social network accounts

Log in using Facebook account

Log in using Instagram account


7

_________________________________________________________________________________

Log in using Twitter account


8

_________________________________________________________________________________

Log in using Amazon account

Log in using Google account

Log in using Yahoo account


9

_________________________________________________________________________________

Log in using LinkedIn account

Log in using MyOpenId account


10

_________________________________________________________________________________

Log in using LiveJournal account

Log in using AOL account

Log in using WordPress account


11

_________________________________________________________________________________

Log in using Clavid account


12

_________________________________________________________________________________

Log in using Orange account

Log in using FoursQuare account


13

_________________________________________________________________________________

Log in using Live account

Log in using StackExchange account

Log in using Vk account


14

_________________________________________________________________________________

3. How to configure

3.1. General configuration

Go to System > Configuration

Select Social Login tab

Select General Configuration section

The configuration fields are listed as follows

No Field Sample Description

1 Active Yes Activate/ Deactivate extension

2 Shown Position Header Position of Social Login buttons in frontend

3 Shown Direction Left to Right Direction of Social Login buttons in frontend

4 Number of visible

buttons

4 The number of button visible, others will be

shown only when customer hovers “Other

login”

After filling data into the configuration fields, click on the Save Config button to save your

work.

3.2. Specified configuration

3.2.1. Facebook Login Configuration

Go to Social Login > Settings

Select Facebook Login Configuration section



1 Active Yes Show/ Hide Facebook Login button

2 Application ID 124951910915… Facebook application ID (*)

3 Application Secret c04561f15ce9489

4...

Facebook application secret (*)

4 Send Password To

Customer

Yes Send account info to customer after logging

in by using Facebook Login

5 Sort order 1 The order of buttons displaying in the list


15

_________________________________________________________________________________


work.

(*) How do I get the Facebook application ID and application secret?

Step 1: Go to page: https://developers.facebook.com/apps/?action=create and then

choose “Add a New app”

After that, you need to fill in your contact email and choose the category of app you are

creating (Apps for Pages). Remember to click “Skip quick start”

https://developers.facebook.com/apps/?action=create


16

_________________________________________________________________________________

Step 2: After clicking creating App ID, you will be moved to a setting page in which you

have to fill in your app domain, contact email and Site URL (please click “+Add Platform”)

In this step, please notice that although your app has been created, it can only get your

account information. If you want to get information from other Facebook accounts, you

have to publicize your app. This means you need to go to “App Review” tab and choose

“Yes”


17

_________________________________________________________________________________

Step 3: After finishing, let’s come back to “Settings” page or “Dashboard” page to get your

App ID and App Secret

3.2.2 Instagram Login Configuration



Select Instagram Login Configuration section



1 Active Yes Show/Hide Instagram Login button

2 Client ID d2b4b9adbbb0… Instagram application ID (*)

3 Client Secret f506f959f736460… Instagram application Secret (*)

4 Redirect Url http://demo.magestore.com/so

cial-

login/dev/index.php/admin/soci

allogin/Instagramlogin/login/

Use this link for redirect url field when

registering with Instagram API

5 Sort Order 3 The order of buttons displaying in the

list

After filling data into the configuration fields, click on Save Config button


18

_________________________________________________________________________________

(*) How do I get Instagram Client Id and Client Secret?

Step 1: Go to page: http://instagram.com/developer/clients/manage/ and click “Register a

New Client”

Step 2: Fill in required information.

http://instagram.com/developer/clients/manage/


19

_________________________________________________________________________________

Notice that when you are required to provide the valid redirect URLs, it is in the backend –

Instagram tab that you can get this link.


20

_________________________________________________________________________________

Step 3: After finishing these 2 steps, you will see a notification appearing right after the

title Manage Clients that you have registered successfully. You can get your app ID and

client secret on the same page.

3.2.3. Twitter Login Configuration


Select Twitter Login Configuration section



1 Active Yes Show/ Hide Twitter Login button

2 Client ID hCDOZSI5J5RAe7… Twitter Consumer Key (*)

3 Client Secret UbJRjdzf5mGfIWI… Twitter Consumer Secret (*)

4 Login Notice If you have an account on

{{store}}, please login,

otherwise register a new

account to connect to

Twitter

Message displayed after customers log

in by Twitter account

5 Sort Order 2 The order of buttons displaying in the list


21

_________________________________________________________________________________

After filling data into the configuration fields, click on the Save Config button

(*) How do I get the Twitter Consumer ID and Application Secret?

It’s much easier to create an application with Twitter

Step 1: Let’s go to page https://apps.twitter.com/app/new and fill in your app information.

In order to get callback URL that is required, please take it from your backend.

At the end of the setting page, you will see a box with the Twitter developer agreement on

which you need to tick Yes.

https://apps.twitter.com/app/new


22

_________________________________________________________________________________

Step 2: Click “Keys and Access Tokens” tab to get Consumer Key and Consumer Secret

3.2.4. Amazon Login Configuration



23

_________________________________________________________________________________


Select Amazon Login Configuration section



1 Active Yes Show/Hide Amazon Login

button

2 Client ID amzn1.application… Amazon application ID (*)

3 Client Secret 7aa4a8c4f5bed1e6c Amazon application Secret (*)

4 Allowed Return URLs https://demo.magestore.co

m

Use this link for Allowed Return

URLs field when registering

with Amazon API

5 Send Password To

Customer

Yes Allow sending password to

customer after successful

register

6 Sort Order 4 The order of buttons displaying

in the list


(*) How do I get Amazon Client Id and Client Secret?

Before getting started, remember that Amazon only works with https protocol. This means

your website cannot connect with Amazon if it doesn’t have a sever that uses https

protocol.

Step 1: Go to Amazon manage app page: https://login.amazon.com/manageApps and

click “Register new application”:

https://demo.magestore.com/

https://demo.magestore.com/

https://login.amazon.com/manageApps


24

_________________________________________________________________________________

Fill in your name, description and Privacy Notice URL which actually is your domain:

In Web settings section, there are 2 optional field which are “Allowed JavaScript Origins”

and “Allowed Return URLs”. Actually they are your domain and your website URL

respectively..


25

_________________________________________________________________________________

Step 2: Get your Client ID and Client Secret

3.2.5. Google Login Configuration


Select Google Login Configuration section



1 Active Yes Show/ Hide Google Login button

2 Client ID bMDKA5J5RAe7… Google Client ID (*)

3 Redirect URL http://demo-

extension.magestore.com/sa

ndbox/social-

login/index.php/sociallogin/g

ologin/user/

Please use this link for redirect

url field when registering with

Google API


26

_________________________________________________________________________________

4 Client Secret 7Db82kVbLEKav2… Google Client Secret (*)

5 Send Password To

Customer

Yes Send account info to customers

after logging in by using Google

account

6 Sort Order 3 The order of buttons displaying in

the list


work.

(*) How do I get the Google Consumer Key and Consumer Secret?

Step 1: Go to https://cloud.google.com/console or

https://console.developers.google.com/project and then click “Create project” as

demonstrated below.

After that, fill in your Project Name and then click Create:

https://cloud.google.com/console

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


27

_________________________________________________________________________________

Step 2: Come to Dashboard and “Enable and manges APIs”

Step 3: Click “Credentials” tab and you will see 3 subtitles as demonstrated below. Please

click “OAuth consent screen” tab on which you need to fill in your Product name shown to

users and then click Save.


28

_________________________________________________________________________________

Step 4: Back to the subtitle Credential, after clicking “add credentials” button, you will see

several choices. Please Choose “OAuth client ID” and “Web application” afterwards.

Then, fill in all information required.


29

_________________________________________________________________________________

Note that you need to get “Authorized redirect URIs” from your backend

Step 5: Get your Client IP and Client Secret

3.2.6. LinkedIn Login Configuration


Select LinkedIn Login Configuration section



30

_________________________________________________________________________________


1 Active Yes Show/ Hide Linkedin Login button

2 Client API 7gxz5hdq4h8e LinkedIn Consumer Key (*)

3 Client Secret KF2zb7tzMvXIvcu

8

LinkedIn Consumer Secret (*)

4 Send Password

To Customer


in by using LinkedIn account

5 Confirm

password

No Require password to be confirmed or not



(*) How do I get the LinkedIn Consumer Key and Consumer Secret?

Step 1: Go to page: https://www.linkedin.com/secure/developer and click “Create

application”

https://www.linkedin.com/secure/developer


31

_________________________________________________________________________________

Please fill in required information. Note that the app logo must be of same height and

width

After that, tick “LinkedIn API terms of Use” and submit your form.


32

_________________________________________________________________________________

Step 2: Get Client ID and Client Secret. You will see some other fields but there’s no need

for you to fill in

3.2.7. Yahoo Login Configuration


Select Yahoo Login Configuration section



1 Active Yes Show/ Hide Yahoo Login button

2 Application ID CbMx… Yahoo application ID (*)

3 Send Password

To Customer

Yes Send account info to customer after

logging in by using Yahoo account

4 Consumer Key bMDKA5J5RAe7… Yahoo Consumer Key (*)

5 Consumer Secret 7Db82kVbLEKav2… Yahoo Consumer Secret (*)

6 Sort Order 6 The order of buttons displaying in the

list

After filling data into the configuration fields, click on the Save Config button.


33

_________________________________________________________________________________

(*) How do I get the Yahoo Application ID, Consumer Key and Consumer Secret?

Step 1: Go to page: https://developer.yahoo.com/apps/create/

Then, create application by filling in all required information.

In the field API permissions, please tick “Profiles/Read Write Public and Private”

https://developer.yahoo.com/apps/create/


34

_________________________________________________________________________________

Step 2: Get your Client ID and Client Secret:

3.2.8. AOL Login Configuration


Select AOL Login Configuration section



1 Active Yes Show/Hide AOL Login button

2 Send Password To

Customer


in by using AOL account



35

_________________________________________________________________________________


3.2.9. WordPress Login Configuration


Select WordPress Login Configuration section



1 Active Yes Show/Hide WordPress Login button

2 Send Password To

Customer

Yes Send password info to customer after logging

in by using AOL account




36

_________________________________________________________________________________

3.2.10. MyOpenId Login Configuration


Select MyOpenId Login Configuration section

The configuration fields are listed as following


1 Active Yes Show/Hide MyOpenId Login button

2 Send Password To

Customer


in by using MyOpenId account



3.2.11. Livejournal Login Configuration


Select Livejournal Login Configuration section



1 Active Yes Show/Hide Livejournal Login button

2 Send Password To

Customer


in by using Livejournal account



37

_________________________________________________________________________________


3.2.12. Clavid Login Configuration


Select Clavid Login Configuration section



1 Active Yes Show/Hide Clavid Login button

2 Send Password To

Customer


in by using Clavid account



3.2.13. Orange Login Configuration


Select Orange Login Configuration section


38

_________________________________________________________________________________



1 Active Yes Show/Hide Orange Login button

2 Send Password To

Customer


in by using Orange account



3.2.14. FoursQuare Login Configuration


Select FoursQuare Login Configuration section



1

Active Yes Show/Hide FoursQuare Login button

2 Client Key bMDKA5J5RAe7

…

FoursQuare Client Key (*)

3

Client Secret 7Db82kVbLEKav2

…

FoursQuare Client Secret (*)

4 Send Password

To Customer

Yes Send account info to customer after

logging in by using AOL account


39

_________________________________________________________________________________



(*) How do I get the FoursQuare Client Key and Client Secret?

Step 1: Go to page: https://foursquare.com/developers/apps or this page:

https://foursquare.com/developers/register and click “Create a new app

You will be required to fill in your website’s information:

You can skip other information as below:

https://foursquare.com/developers/apps

https://foursquare.com/developers/register


40

_________________________________________________________________________________

Step 2: Save and get app’s client and secret:


41

_________________________________________________________________________________

3.2.15. Windows Live Login Configuration


Select Windows Login Configuration section



1 Active Yes Show/Hide Windows Live Login button

2 Client Key bMDKA5J5RAe7… Windows Live Client Key (*)

3 Client Secret 7Db82kVbLEKav2… Windows Live Client Secret (*)



(*) How do I get the Windows Live Client Key and Client Secret?

Step 1: Go to this page: https://account.live.com/developers/applications/create

Then, fill in your App name

https://account.live.com/developers/applications/create


42

_________________________________________________________________________________

Step 2: Get Rediect URLs from your backend and set it into “Rediect URLs” box

Step 3: Get “Application Id” and “Application Secret” at header


43

_________________________________________________________________________________

3.2.16. Persona Login Configuration


Select Persona Login Configuration section



1 Active Yes Show/Hide Persona Login button

2 Send Password

To Customer


in by using Persona Login




44

_________________________________________________________________________________

3.2.17. Stack Exchange Login Configuration


Select Stack Exchange Login Configuration section



1 Active Yes Show/Hide Stack Exchange Login button

2 Send Password

To Customer

Yes Send account info to customer after logging in

by using Stack Exchange Login



3.2.18. Vk Login Configuration


Select Vk Login Configuration section



1 Active Yes Show/Hide Windows Live Login

button

2 App ID 4125434 Vk application Key (*)

3 Secure Key VGqJFZ0UozvmjpqRthyS Vk secure Key (*)


45

_________________________________________________________________________________

4 Send Password To

Customer

Yes Send password info to customer

after logging in by using Vk Login

5 Sort Order 20 The order of buttons displaying in

the list


(*) How do I get the Vk App ID and Secure Key?

Step 1: Go to page: http://vk.com/editapp?act=create and then fill in the required

information as below:

Step 2: You need to fill in your phone number and then get the confirmation code:

http://vk.com/editapp?act=create


46

_________________________________________________________________________________

Step 3: Click my app and start your setting:

You can get your Application ID and Secure key on “Settings” tab:


47

_________________________________________________________________________________

3.3. Show the Social Login buttons in the different positions

The extension allows you to choose among 5 positions to show the Social Login

buttons as following.

Header

Above customer login form

Below customer login form

Above customer registration form

Below customer registration form

Also, you can show the Social Login buttons in other positions by following these

steps below.

Open the file .phtml which contains the position that you want to show login

buttons.

Insert the code below into that file.

<?php echo $this->getLayout()->createBlock("Magestore\Sociallogin\Block\Buttons")-

>setTemplate("Magestore_Sociallogin::buttons.phtml")->setNumberButtonShow(4)-

>toHtml(); ?>


48

_________________________________________________________________________________

Another way

In back-end, open the CMS page which contains the position that you want to

show login buttons.

You can put a social login button block on a CMS page. Here is an example

that we put a login block with 4 buttons. Replace "4" in this code with the

number of buttons you want to show.

{{block class="Magestore\Sociallogin\Block\Buttons" name="buttons.sociallogin"

template="Magestore_Sociallogin::buttons.phtml" number_button_show="4"}}

After finishing your configuration, click on the Save Config button to save your work.


49

_________________________________________________________________________________

Contact us:

www.magestore.com

magestore.zendesk.com

[email protected]

+1-606-657-0768

1750 Montgomery Street 1st Floor,

San Francisco, CA 94111, United States.

Documents

MAGENTO 1 SOCIAL LOGIN - Marketplace · social accounts such as Facebook, Google, Yahoo, Twitter, LinkedIn, etc. Why don’t you enable them to use such accounts to log in by using