social login - marketplace.magento.com · twitter provides you with the api key and api secret. get...

[email protected]

[email protected]

Phone: +1-415-954-7137

SOCIAL LOGIN

USER GUIDE

Version 1.0

mailto:[email protected]

mailto:[email protected]

Copyright (c) 2009-2016 www.magestore.com

Social Login v1.0 User Guide 2

Table of Contents

1. INTRODUCTION ............................................................................... 3

2. HOW TO USE ..................................................................................... 4

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

2.2. Customer can login to web-shop by many social network accounts............... 6

3. HOW TO CONFIGURE .................................................................. 11

3.1. General configuration ...................................................................................19

3.2. Specified configuration ..................................................................................19

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



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!

FEATURES 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

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



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 form



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

Log in using Facebook account



Log in using Instagram account



Log in using Twitter account



Log in using Amazon account



Log in using Google account



Log in using Yahoo account



Log in using LinkedIn account

Log in using MyOpenId account



Log in using LiveJournal account

Log in using AOL account



Log in using WordPress account

Log in using Clavid account



Log in using Orange account

Log in using FoursQuare account



Log in using Live account



Log in using StackExchange account

Log in using Vk account



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 c04561f15ce948

94...

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


your work.

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

You can get Facebook Application ID and Application Secret by following these steps

below.

Click on the Register link at the Facebook Login Configuration section to

register your Facebook Application. You will be redirected to the Facebook

Application page.



Fill in the required fields and click on the Create App button.

Facebook provides you with the Application ID, Application Secret.



Get the Application ID, App Secret and fill them into the fields of Facebook

Login Configuration section.

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

/social-

login/dev/index.php/admin/

sociallogin/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

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

Click on the Register link in the Instagram Login Configuration section to

register your application on Instagram

Click on the Register Your Application button if you have already logged in. If

not, you have to login to Instagram first.



Then, click on the Register a New Client button

Fill in your Application information, then click on the Register button.

Website: your website

OAuth redirec_url: use this link for redirect url field when registering

with Instagram API



Get Client ID and Client Secret to fill in corresponding fields in Instagram

Login Configuration section



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

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

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

Click on the Register link in the Twitter Login configuration section to register

your Twitter application. You will be redirected to the Twitter application page.

Fill your web-shop info into the required fields and click on the Create your

Twitter application button.



Twitter provides you with the API Key and API Secret.

Get the API key and API secret to fill into the corresponding fields of the Twitter

Login configuration section.

3.2.4. Amazon Login Configuration



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?

Click on the Register link in the Amazon Login Configuration section to

register your application on Amazon



You will be redirected to an Amazon guide page. In this guide you will be shown

how to add Login with Amazon to your website or web service. After completing

this guide you should have a working Login with Amazon button on your website

to allow users to log in with their Amazon credentials.

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/san

Please use this link for

redirect url field when



dbox/social-

login/index.php/sociallogin/g

ologin/user/

registering with Google

API

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


your work.

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

Click on the Register link in the Google Login configuration section to register

your web-shop on Google. You will be redirected to the Google registration page.



After creating a project successfully, click on the project link. In the Project

Dashboard, go to APIS & AUTH > Credentials > Create New Client ID. Then,

fill your web-shop information in.



Get Client ID and Client Secret to fill in corresponding fields in Google Login

Configuration section



3.2.6. LinkedIn Login Configuration


Select LinkedIn Login Configuration section



1 Active Yes Show/ Hide Linkedin Login button

2 Client API 7gxz5hdq4h8e LinkedIn Consumer Key (*)

3 Client Secret KF2zb7tzMvXIv

cu8

LinkedIn Consumer Secret (*)

4 Send Password To

Customer


logging in by using LinkedIn account

5 Confirm password No Require password to be confirmed or not


list


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

Click on the Register link in the LinkedIn Login configuration section to register

your application on LinkedIn



Fill your web-shop info into the fields and click on the Join LinkedIn button



After successful registration, you will be redirected to the page below

Click on the Add New Application link. Enter your web-shop information and get Client

API and Client Secret to fill in the corresponding fields in LinkedIn Login

Configuration section.

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


logging in by using Yahoo account

4 Consumer Key bMDKA5J5RAe7… Yahoo Consumer Key (*)

5 Consumer

Secret

7Db82kVbLEKav2… Yahoo Consumer Secret (*)


list

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

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

Click on the Register link in the Yahoo Login configuration section to register

your application on Yahoo.



Fill your web-shop info into the fields and click on Get API Key button.



In the Permissions section, change Social Directory (Profiles) option from None

to Read/Write Public and Private and click on the Save and Change Consumer

Key button.



Yahoo provides you with the Application ID, Consumer Key and Consumer

Secret.

Get the Application ID, Consumer Key and Consumer Secret to fill into the fields

of the Yahoo Login configuration section.

3.2.8. AOL Login Configuration


Select AOL Login Configuration section





1 Active Yes Show/Hide AOL Login button

2 Send Password

To Customer

Yes Send account info to customer after logging

in by using AOL account

3 Sort Order 6 The order of buttons displaying in the list


3.2.9. WordPress Login Configuration


Select WordPress Login Configuration section



1 Active Yes Show/Hide WordPress Login button

2 Send Password Yes Send password info to customer after logging



To Customer in by using AOL account



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

Yes Send password info to customer after logging

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





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



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 bMDKA5J5R

Ae7…

FoursQuare Client Key (*)

3 Client Secret 7Db82kVbLE

Kav2…

FoursQuare Client Secret (*)

4 Send

Password To

Customer


logging in by using AOL account

5 Sort Order 12 The order of buttons displaying in

the list




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

Click on the Register link in the FoursQuare Login Configuration section to

register your application on FoursQuare

Fill your web-shop info into the fields and click on the Save Changes button.



FoursQuare provides you with the Client Key and Client Secret. Get them and fill

in corresponding fields in FoursQuare Login Configuration.



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 (*)

5 Sort Order 13 The order of buttons displaying in

the list


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

Click on the Register link in the Windows Live Login configuration section to

register your application on Windows Live.



Then, you click on the My apps link

Next, enter Application name.



Windows Live provides you with the Client Key and Client Secret. Here you need

to enter redirect domain on the Redirect domain box

Get the Client ID and Client secret to fill in corresponding fields in Windows Live

Login Configuration.



3.2.16. Persona Login Configuration


Select Persona Login Configuration section



1 Active Yes Show/Hide Persona Login button

2 Send Password

To Customer

Yes Send password info to customer after

logging in by using Persona Login



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


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 VGqJFZ0Uozvmjpq

RthyS

Vk secure Key (*)

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?

Click on the Register link in the Vk Login Configuration section to register your

application on Vk.

Fill your web-shop information, then click on the Connect Application button



Get Application ID and Secure Key to fill in corresponding fields in Vk Login

Configuration section

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(); ?>

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.

-------------------------------------------------THE END--------------------------------------------

social login - marketplace.magento.com · twitter provides you with the api key and api secret. get...

Documents