SOCIAL LOGIN USER GUIDE Version 1.0

Transcription

1 Phone: SOCIAL LOGIN USER GUIDE Version 1.0

2 Table of Contents 1. INTRODUCTION HOW TO USE Show Social Login buttons at many positions in front-end Customer can login to web-shop by many social network accounts HOW TO CONFIGURE General configuration Specified configuration Show the Social Login buttons in the different positions...55 Social Login v1.0 User Guide 2

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! 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 Social Login v1.0 User Guide 3

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 Social Login v1.0 User Guide 4

5 Show the Social Login buttons below Customer registration form Social Login v1.0 User Guide 5

6 2.2. Customer can log in to web-shop by many social network accounts Log in using Facebook account Social Login v1.0 User Guide 6

7 Log in using Instagram account Social Login v1.0 User Guide 7

8 Log in using Twitter account Social Login v1.0 User Guide 8

9 Log in using Amazon account Social Login v1.0 User Guide 9

10 Log in using Google account Social Login v1.0 User Guide 10

11 Log in using Yahoo account Social Login v1.0 User Guide 11

12 Log in using LinkedIn account Log in using MyOpenId account Social Login v1.0 User Guide 12

13 Social Login v1.0 User Guide 13

14 Log in using LiveJournal account Log in using AOL account Social Login v1.0 User Guide 14

15 Log in using WordPress account Log in using Clavid account Social Login v1.0 User Guide 15

16 Log in using Orange account Log in using FoursQuare account Social Login v1.0 User Guide 16

17 Log in using Live account Social Login v1.0 User Guide 17

18 Log in using StackExchange account Log in using Vk account Social Login v1.0 User Guide 18

19 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 Specified configuration 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 Facebook application ID (*) Social Login v1.0 User Guide 19

20 3 Application Secret c04561f15ce948 Facebook application secret (*) 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 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? 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. Social Login v1.0 User Guide 20

21 Fill in the required fields and click on the Create App button. Facebook provides you with the Application ID, Application Secret. Social Login v1.0 User Guide 21

22 Get the Application ID, App Secret and fill them into the fields of Facebook Login Configuration section Instagram Login Configuration Go to System > Configuration Select Social Login tab Select Instagram Login Configuration section The configuration fields are listed as follows No Field Sample Description 1 Active Yes Show/Hide Instagram Login button 2 Client ID d2b4b9adbbb0 Instagram application ID (*) 3 Client Secret f506f959f Instagram application Secret (*) Social Login v1.0 User Guide 22

23 4 Redirect Url /sociallogin/dev/index.php/admin/ Use this link for redirect url field when registering with Instagram API sociallogin/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 (*) 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. Social Login v1.0 User Guide 23

24 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 Social Login v1.0 User Guide 24

25 Get Client ID and Client Secret to fill in corresponding fields in Instagram Login Configuration section Social Login v1.0 User Guide 25

26 Twitter Login Configuration Go to Social Login > Settings Select Twitter Login Configuration section The configuration fields are listed as follows No Field Sample Description 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}}, Message displayed after customers log in by Twitter account please login, otherwise register a new account to connect to Twitter 5 Sort Order 2 The order of buttons displaying in the Social Login v1.0 User Guide 26

27 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. Social Login v1.0 User Guide 27

28 Social Login v1.0 User Guide 28

29 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 Amazon Login Configuration Go to System > Configuration Select Social Login tab Select Amazon Login Configuration section The configuration fields are listed as follows Social Login v1.0 User Guide 29

30 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 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 After filling data into the configuration fields, click on the Save Config button (*) 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 Social Login v1.0 User Guide 30

31 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 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 Please use this link for redirect url field when Social Login v1.0 User Guide 31

32 dbox/sociallogin/index.php/sociallogin/g registering with Google API ologin/user/ 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 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? 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. Social Login v1.0 User Guide 32

33 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. Social Login v1.0 User Guide 33

34 Get Client ID and Client Secret to fill in corresponding fields in Google Login Configuration section Social Login v1.0 User Guide 34

35 LinkedIn Login Configuration Go to Social Login > Settings Select LinkedIn Login Configuration section The configuration fields are listed as follows No Field Sample Description 1 Active Yes Show/ Hide Linkedin Login button 2 Client API 7gxz5hdq4h8e LinkedIn Consumer Key (*) 3 Client Secret KF2zb7tzMvXIv LinkedIn Consumer Secret (*) cu8 4 Send Password To Customer Yes Send account info to customer after logging in by using LinkedIn account 5 Confirm password No Require password to be confirmed or not 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 the LinkedIn Consumer Key and Consumer Secret? Click on the Register link in the LinkedIn Login configuration section to register your application on LinkedIn Social Login v1.0 User Guide 35

36 Fill your web-shop info into the fields and click on the Join LinkedIn button Social Login v1.0 User Guide 36

37 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 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 Social Login v1.0 User Guide 37

38 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. (*) 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. Social Login v1.0 User Guide 38

39 Fill your web-shop info into the fields and click on Get API Key button. Social Login v1.0 User Guide 39

40 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. Social Login v1.0 User Guide 40

41 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 AOL Login Configuration Go to Social Login > Settings Select AOL Login Configuration section The configuration fields are listed as follows Social Login v1.0 User Guide 41

42 No Field Sample Description 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 After filling data into the configuration fields, click on the Save Config button 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 Yes Send password info to customer after logging Social Login v1.0 User Guide 42

43 To 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 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 Customer Yes Send password info to customer after logging in by using MyOpenId account 3 Sort Order 7 The order of buttons displaying in the list Social Login v1.0 User Guide 43

44 After filling data into the configuration fields, click on the Save Config button 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 Customer Yes Send account info to customer after logging in by using Livejournal 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 v1.0 User Guide 44

45 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 Customer Yes Send account info to customer after logging 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 Orange Login Configuration Go to Social Login > Settings Select Orange Login Configuration section The configuration fields are listed as follows No Field Sample Description 1 Active Yes Show/Hide Orange Login button 2 Send Password To Customer Yes Send account info to customer after logging in by using Orange account Social Login v1.0 User Guide 45

46 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 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 bmdka5j5r FoursQuare Client Key (*) Ae7 3 Client Secret 7Db82kVbLE FoursQuare Client Secret (*) Kav2 4 Send Password To Yes Send account info to customer after logging in by using AOL account Customer 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. Social Login v1.0 User Guide 46

47 (*) 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. Social Login v1.0 User Guide 47

48 FoursQuare provides you with the Client Key and Client Secret. Get them and fill in corresponding fields in FoursQuare Login Configuration. Social Login v1.0 User Guide 48

49 Windows Live Login Configuration Go to Social Login > Settings Social Login v1.0 User Guide 49

50 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? Click on the Register link in the Windows Live Login configuration section to register your application on Windows Live. Social Login v1.0 User Guide 50

51 Then, you click on the My apps link Next, enter Application name. Social Login v1.0 User Guide 51

52 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. Social Login v1.0 User Guide 52

53 Persona Login Configuration Go to Social Login > Settings Select Persona Login Configuration section The configuration fields are listed as following No Field Sample Description 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 Sort Order 15 The order of buttons displaying in the list After filling data into the configuration fields, click on the Save Config button 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 Social Login v1.0 User Guide 53

54 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 Sort Order 15 The order of buttons displaying in the list After filling data into the configuration fields, click on the Save Config button 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 Vk application Key (*) 3 Secure Key VGqJFZ0Uozvmjpq RthyS 4 Send Password To Yes Customer Vk secure Key (*) Send password info to customer after logging in by using Vk Social Login v1.0 User Guide 54

55 Login 5 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? 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 Social Login v1.0 User Guide 55

56 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. Social Login v1.0 User Guide 56

57 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 v1.0 User Guide 57