MAGENTO 1
SOCIAL LOGIN (Version 3.1)
USER GUIDE
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.
_________________________________________________________________________________ Social Login version 3.1
1
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 _________________________________________________________________________________ Social Login version 3.1
2
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
_________________________________________________________________________________ Social Login version 3.1
3
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
_________________________________________________________________________________ Social Login version 3.1
4
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
_________________________________________________________________________________ Social Login version 3.1
5
2.2. Customer can log in to web-shop by many social network accounts
Log in using Facebook account
Log in using Instagram account
_________________________________________________________________________________ Social Login version 3.1
6
Log in using Twitter account
_________________________________________________________________________________ Social Login version 3.1
7
Log in using Amazon account
Log in using Google account
Log in using Yahoo account
_________________________________________________________________________________ Social Login version 3.1
8
Log in using LinkedIn account
Log in using MyOpenId account
_________________________________________________________________________________ Social Login version 3.1
9
Log in using LiveJournal account
Log in using AOL account
Log in using WordPress account
_________________________________________________________________________________ Social Login version 3.1
10
Log in using Clavid account
_________________________________________________________________________________ Social Login version 3.1
11
Log in using Orange account
Log in using FoursQuare account
_________________________________________________________________________________ Social Login version 3.1
12
Log in using Live account
Log in using StackExchange account
Log in using Vk account
_________________________________________________________________________________ Social Login version 3.1
13
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 4
The number of button visible, others will be
buttons
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
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/ Hide Facebook Login button
2
Application ID
124951910915…
Facebook application ID (*)
3
Application Secret
c04561f15ce9489
Facebook application secret (*)
4... 4
5
Send Password To Yes
Send account info to customer after logging
Customer
in by using Facebook Login
Sort order
1
The order of buttons displaying in the list
_________________________________________________________________________________ Social Login version 3.1
14
After filling data into the configuration fields, click on the Save Config button to save your 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”
_________________________________________________________________________________ Social Login version 3.1
15
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”
_________________________________________________________________________________ Social Login version 3.1
16
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
No
Go to System > Configuration
Select Social Login tab
Select Instagram Login Configuration section
The configuration fields are listed as follows Field
Sample
1
Active
Yes
2
Client ID
3
Client Secret
f506f959f736460…
4
Redirect Url
http://demo.magestore.com/so
d2b4b9adbbb0…
cial-
Description Show/Hide Instagram Login button Instagram application ID (*) Instagram application Secret (*)
Use this link for redirect url field when registering with Instagram API
login/dev/index.php/admin/soci allogin/Instagramlogin/login/ 5
Sort Order
3
The order of buttons displaying in the list
After filling data into the configuration fields, click on Save Config button
_________________________________________________________________________________ Social Login version 3.1
17
(*) 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.
_________________________________________________________________________________ Social Login version 3.1
18
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.
_________________________________________________________________________________ Social Login version 3.1
19
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
No
Go to Social Login > Settings
Select Twitter Login Configuration section
The configuration fields are listed as follows
Field
Sample Yes
Description
1
Active
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,
Show/ Hide Twitter Login button
Message displayed after customers log in by Twitter account
otherwise register a new account to connect to Twitter 5
Sort Order
2
The order of buttons displaying in the list
_________________________________________________________________________________ Social Login version 3.1
20
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.
_________________________________________________________________________________ Social Login version 3.1
21
Step 2: Click “Keys and Access Tokens” tab to get Consumer Key and Consumer Secret
3.2.4. Amazon Login Configuration
Go to System > Configuration
_________________________________________________________________________________ Social Login version 3.1
22
Select Social Login tab
Select Amazon Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
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
Use this link for Allowed Return
m
URLs field when registering with Amazon API
5
Send
Password
To Yes
Customer
Allow
sending
customer
after
password
to
successful
register 6
Sort Order
4
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 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”:
_________________________________________________________________________________ Social Login version 3.1
23
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..
_________________________________________________________________________________ Social Login version 3.1
24
Step 2: Get your Client ID and Client Secret
3.2.5. Google Login Configuration
Go to Social Login > Settings
Select Google Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/ Hide Google Login button
2
Client ID
bMDKA5J5RAe7…
Google Client ID (*)
3
Redirect URL
http://demo-
Please use this link for redirect
extension.magestore.com/sa
url field when registering with
ndbox/social-
Google API
login/index.php/sociallogin/g ologin/user/
_________________________________________________________________________________ Social Login version 3.1
25
7Db82kVbLEKav2…
Google Client Secret (*)
4
Client Secret
5
Send Password To Yes
Send account info to customers
Customer
after logging in by using Google account
6
Sort Order
3
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button to save your 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:
_________________________________________________________________________________ Social Login version 3.1
26
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.
_________________________________________________________________________________ Social Login version 3.1
27
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.
_________________________________________________________________________________ Social Login version 3.1
28
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
Go to Social Login > Settings
Select LinkedIn Login Configuration section
The configuration fields are listed as follows
_________________________________________________________________________________ Social Login version 3.1
29
No
Field
Sample
Description
1
Active
Yes
Show/ Hide Linkedin Login button
2
Client API
7gxz5hdq4h8e
LinkedIn Consumer Key (*)
3
Client Secret
KF2zb7tzMvXIvcu
LinkedIn Consumer Secret (*)
8 4
Send
Password Yes
To Customer 5
Confirm
Send account info to customer after logging in by using LinkedIn account
No
Require password to be confirmed or not
4
The order of buttons displaying in the list
password 6
Sort Order
After filling data into the configuration fields, click on the Save Config button
(*) 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”
_________________________________________________________________________________ Social Login version 3.1
30
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.
_________________________________________________________________________________ Social Login version 3.1
31
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
Go to Social Login > Settings
Select Yahoo Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/ Hide Yahoo Login button
2
Application ID
CbMx…
Yahoo application ID (*)
3
Send
Password Yes
To Customer
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.
_________________________________________________________________________________ Social Login version 3.1
32
(*) 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”
_________________________________________________________________________________ Social Login version 3.1
33
Step 2: Get your Client ID and Client Secret:
3.2.8. AOL Login Configuration
Go to Social Login > Settings
Select AOL Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/Hide AOL Login button
2
Send Password To Yes
Send account info to customer after logging
Customer
in by using AOL account
3
Sort Order
6
The order of buttons displaying in the list
_________________________________________________________________________________ Social Login version 3.1
34
After filling data into the configuration fields, click on the Save Config button.
3.2.9. WordPress Login Configuration
Go to Social Login > Settings
Select WordPress Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/Hide WordPress Login button
2
Send Password To Yes
Send password info to customer after logging
Customer
in by using AOL account
3
Sort Order
7
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
_________________________________________________________________________________ Social Login version 3.1
35
3.2.10. MyOpenId Login Configuration
Go to Social Login > Settings
Select MyOpenId Login Configuration section
The configuration fields are listed as following
No
Field
Sample
Description
1
Active
Yes
Show/Hide MyOpenId Login button
2
Send Password To Yes
Send password info to customer after logging
Customer
in by using MyOpenId account
3
Sort Order
7
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.11. Livejournal Login Configuration
Go to Social Login > Settings
Select Livejournal Login Configuration section
The configuration fields are listed as following
No
Field
Sample
Description
1
Active
Yes
Show/Hide Livejournal Login button
2
Send Password To Yes
Send account info to customer after logging
Customer
in by using Livejournal account
3
Sort Order
7
The order of buttons displaying in the list
_________________________________________________________________________________ Social Login version 3.1
36
After filling data into the configuration fields, click on the Save Config button.
3.2.12. Clavid Login Configuration
Go to Social Login > Settings
Select Clavid Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/Hide Clavid Login button
2
Send Password To Yes
Send account info to customer after logging
Customer
in by using Clavid account
3
Sort Order
10
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button. 3.2.13. Orange Login Configuration
Go to Social Login > Settings
Select Orange Login Configuration section
_________________________________________________________________________________ Social Login version 3.1
37
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/Hide Orange Login button
2
Send Password To Yes
Send account info to customer after logging
Customer
in by using Orange account
3
Sort Order
11
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button. 3.2.14. FoursQuare Login Configuration
Go to Social Login > Settings
Select FoursQuare Login Configuration section
The configuration fields are listed as following
No
Field
Sample
Description
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 Yes
To Customer
Send account info to customer after logging in by using AOL account
_________________________________________________________________________________ Social Login version 3.1
38
5
Sort Order
12
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 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:
_________________________________________________________________________________ Social Login version 3.1
39
Step 2: Save and get app’s client and secret:
_________________________________________________________________________________ Social Login version 3.1
40
3.2.15. Windows Live Login Configuration
Go to Social Login > Settings
Select Windows Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
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
After filling data into the configuration fields, click on the Save Config button
(*) 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
_________________________________________________________________________________ Social Login version 3.1
41
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
_________________________________________________________________________________ Social Login version 3.1
42
3.2.16. Persona Login Configuration
Go to Social Login > Settings
Select Persona Login Configuration section
The configuration fields are listed as following
No
Field
1
Active
2
Send
Password
Sample Yes
Show/Hide Persona Login button
Yes
Send password info to customer after logging
To Customer 3
Sort Order
Description
in by using Persona Login 15
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
_________________________________________________________________________________ Social Login version 3.1
43
3.2.17. Stack Exchange Login Configuration
Go to Social Login > Settings
Select Stack Exchange Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/Hide Stack Exchange Login button
2
Send
Password Yes
To Customer 3
Sort Order
Send account info to customer after logging in by using Stack Exchange Login
15
The order of buttons displaying in the list
After filling data into the configuration fields, click on the Save Config button.
3.2.18. Vk Login Configuration
Go to Social Login > Settings
Select Vk Login Configuration section
The configuration fields are listed as follows
No
Field
Sample
Description
1
Active
Yes
Show/Hide Windows Live Login button
2
App ID
4125434
Vk application Key (*)
3
Secure Key
VGqJFZ0UozvmjpqRthyS
Vk secure Key (*)
_________________________________________________________________________________ Social Login version 3.1
44
4
5
Send Password To Yes
Send password info to customer
Customer
after logging in by using Vk Login
Sort Order
20
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 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:
_________________________________________________________________________________ Social Login version 3.1
45
Step 3: Click my app and start your setting:
You can get your Application ID and Secure key on “Settings” tab:
_________________________________________________________________________________ Social Login version 3.1
46
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.
_________________________________________________________________________________ Social Login version 3.1
47
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.
_________________________________________________________________________________ Social Login version 3.1
48
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.
_________________________________________________________________________________ Social Login version 3.1
49
