SOCIAL LOGINMagento - Installation Instruction Document

Contents

1

1

1

2

3

3

4

4

4

6

8

9

1. Purpose of the document

2. Who can use this document?

3. Introduction to Social Login Services

4. Functionality Social Login Services

5. Installation of Social Login Services at Magento Extension

5.1. Magento Installation

6. Configuration of Social Login Services at Magento Extension

6.1. Log in to Magento Admin Panel

6.2. Configuration into Magento Admin Panel

6.3. Steps to add Social Log In Block

6.4. Displaying Social Login Icons on pages

7. Conclusion

This integration guide is useful for all Magento versions.

1. PURPOSE OF THE DOCUMENT:

This document provides comprehensive guidelines and step-by-step instructions to

client or site admin who will configure the Social Login services on e-commerce website

for Magento extension.

2. WHO CAN USE THIS DOCUMENT?

This document is most useful for client or site admin who will configure the Social Login

services at Magento Extension.

3. INTRODUCTION TO SOCIAL LOGIN SERVICES

• Every e-commerce website has their own log services for user and some of the

websites integrates this login system with Social networking sites.

• Social Login is a login service of Annex Cloud. Using social network account login

credentials, the user can log into the client site.

• Social Login gives the option to users to link an existing site account with one or more

social accounts.

• This tool reduces the number of accounts creating steps and pre-fill fields with social

data to ultimately increase conversions.

• When returning to your site, users will be able to login with more flexibility, and with

all of their information in one place.

• In socialannex, each service has an id. Social Login (module) service id is 13.

• Following social networks are integrated into social login.

• Facebook

• Google

• Amazon

• PayPal

1

4. FUNCTIONALITY SOCIAL LOGIN SERVICES:

Social Login is working as below:

1. As soon as load the asynchronous JavaScript on the page, it shows the login buttons

in div, which has id as show_provider or show_provider_small.

2. Click on any provider login button, It will open the popup in which it shows login page

of particular social network. E.g. user clicks on the Facebook button.

3. It will show the login page of Facebook in the popup. Enter the Facebook account

email id and password and click on submit button.

4. Facebook will ask for user permission for the new user only at first time. Click on

allow button.

5. The user login session will set on site and it will redirect to the user’s profile page.

• Using these above Social Login steps, the user will be registered and log in on e-com-

merce site.

• In some exceptional case, social network not returns the email id. In this situation,

Social Login works in a different way:

1. Social Login opens another popup to enter the email id.

2. After entering the email id, Social Login sends email on entered email id

with a verification code.

3. The user has to go on a social network site and have to open the email. Copy the

verification code from email and pest it in verification code input box of popup an

click on submit button.

4. Social Login will verify the entered code and if it is valid then only it set the login

session and redirect to the user profile page. If the code is not valid, then it will show

the message that code is not valid and the process ends without login.

2

5. INSTALLATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION

For Magento site, we provide Social Login Magento extension. There are simple steps to

integrate Magento extension.

5.1. Magento Installation

Follow below steps for Social Login Magento Installation -

• Copy Socialannex folder to /app/code on the server. (Create code folder if it is

not available)

• Open file “app/etc/config.php” and add 'Socialannex_SocialLogin' => 1 at the end

of array like shown in the following screenshot.

• Open Command line user interface (CMD) and go to the magento2 root folder.

• Run command “php bin/magento setup:upgrade” on CMD.

3

6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION

6.1. Log in to Magento Admin Panel

• You have to enter the username and password in following login window of Magento.

6.2. Configuration into Magento Admin Panel

• After login, navigate to Stores > Configuration as shown in the following image.

• After clicking on the configuration button you will get the below window.

• Click on General link under Social Annex tab as shown in the following screenshot.

• After that, fill the details in the following setting section, as shown in the following image:

• Secret key

• Access token url

• Get user info url

Note:

All these information will be provided by Annex Cloud.

• After adding all details, click on “Save Config” button at right corner.

6.3. Steps to add social log in block

• To add Social Login block, navigate to Content > Blocks as shown in below screenshot.

• After that click on “Add New Block” button in the right corner. It will show the

screen as below.

• Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the

editor as shown in the following screenshot.

• After click on insert widget button, you will get the dropdown list to select widget

which is shown in below screenshot.

• Select widget “Socialannex – Social Login” from widget type drop-down box and click

on ‘Insert Widget’ button.

• After click on insert widget button, the widget will add into editor window as shown in

below screenshot.

• Click on “Save Block” button which is highlighted using the blue box in the above

screenshot.

6.4. Displaying Social Login Icons on pages

• Add the following script within the phtml (Magento file type) page where you wish to

display social login buttons.

4

6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION

6.1. Log in to Magento Admin Panel

• You have to enter the username and password in following login window of Magento.

6.2. Configuration into Magento Admin Panel

• After login, navigate to Stores > Configuration as shown in the following image.

• After clicking on the configuration button you will get the below window.

• Click on General link under Social Annex tab as shown in the following screenshot.

• After that, fill the details in the following setting section, as shown in the following image:

• Secret key

• Access token url

• Get user info url

Note:

All these information will be provided by Annex Cloud.

• After adding all details, click on “Save Config” button at right corner.

6.3. Steps to add social log in block

• To add Social Login block, navigate to Content > Blocks as shown in below screenshot.

• After that click on “Add New Block” button in the right corner. It will show the

screen as below.

• Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the

editor as shown in the following screenshot.

• After click on insert widget button, you will get the dropdown list to select widget

which is shown in below screenshot.

• Select widget “Socialannex – Social Login” from widget type drop-down box and click

on ‘Insert Widget’ button.

• After click on insert widget button, the widget will add into editor window as shown in

below screenshot.

• Click on “Save Block” button which is highlighted using the blue box in the above

screenshot.

6.4. Displaying Social Login Icons on pages

• Add the following script within the phtml (Magento file type) page where you wish to

display social login buttons.

5

6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION

6.1. Log in to Magento Admin Panel

• You have to enter the username and password in following login window of Magento.

6.2. Configuration into Magento Admin Panel

• After login, navigate to Stores > Configuration as shown in the following image.

• After clicking on the configuration button you will get the below window.

• Click on General link under Social Annex tab as shown in the following screenshot.

• After that, fill the details in the following setting section, as shown in the following image:

• Secret key

• Access token url

• Get user info url

Note:

All these information will be provided by Annex Cloud.

• After adding all details, click on “Save Config” button at right corner.

6.3. Steps to add social log in block

• To add Social Login block, navigate to Content > Blocks as shown in below screenshot.

• After that click on “Add New Block” button in the right corner. It will show the

screen as below.

• Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the

editor as shown in the following screenshot.

• After click on insert widget button, you will get the dropdown list to select widget

which is shown in below screenshot.

• Select widget “Socialannex – Social Login” from widget type drop-down box and click

on ‘Insert Widget’ button.

• After click on insert widget button, the widget will add into editor window as shown in

below screenshot.

• Click on “Save Block” button which is highlighted using the blue box in the above

screenshot.

6.4. Displaying Social Login Icons on pages

• Add the following script within the phtml (Magento file type) page where you wish to

display social login buttons.

6

6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION

6.1. Log in to Magento Admin Panel

• You have to enter the username and password in following login window of Magento.

6.2. Configuration into Magento Admin Panel

• After login, navigate to Stores > Configuration as shown in the following image.

• After clicking on the configuration button you will get the below window.

• Click on General link under Social Annex tab as shown in the following screenshot.

• After that, fill the details in the following setting section, as shown in the following image:

• Secret key

• Access token url

• Get user info url

Note:

All these information will be provided by Annex Cloud.

• After adding all details, click on “Save Config” button at right corner.

6.3. Steps to add social log in block

• To add Social Login block, navigate to Content > Blocks as shown in below screenshot.

• After that click on “Add New Block” button in the right corner. It will show the

screen as below.

• Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the

editor as shown in the following screenshot.

• After click on insert widget button, you will get the dropdown list to select widget

which is shown in below screenshot.

• Select widget “Socialannex – Social Login” from widget type drop-down box and click

on ‘Insert Widget’ button.

• After click on insert widget button, the widget will add into editor window as shown in

below screenshot.

• Click on “Save Block” button which is highlighted using the blue box in the above

screenshot.

6.4. Displaying Social Login Icons on pages

• Add the following script within the phtml (Magento file type) page where you wish to

display social login buttons.

7

6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION

6.1. Log in to Magento Admin Panel

• You have to enter the username and password in following login window of Magento.

6.2. Configuration into Magento Admin Panel

• After login, navigate to Stores > Configuration as shown in the following image.

• After clicking on the configuration button you will get the below window.

• Click on General link under Social Annex tab as shown in the following screenshot.

• After that, fill the details in the following setting section, as shown in the following image:

• Secret key

• Access token url

• Get user info url

Note:

All these information will be provided by Annex Cloud.

• After adding all details, click on “Save Config” button at right corner.

6.3. Steps to add social log in block

• To add Social Login block, navigate to Content > Blocks as shown in below screenshot.

• After that click on “Add New Block” button in the right corner. It will show the

screen as below.

• Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the

editor as shown in the following screenshot.

• After click on insert widget button, you will get the dropdown list to select widget

which is shown in below screenshot.

• Select widget “Socialannex – Social Login” from widget type drop-down box and click

on ‘Insert Widget’ button.

• After click on insert widget button, the widget will add into editor window as shown in

below screenshot.

• Click on “Save Block” button which is highlighted using the blue box in the above

screenshot.

6.4. Displaying Social Login Icons on pages

• Add the following script within the phtml (Magento file type) page where you wish to

display social login buttons.

<! -- SocialAnnex: SocialLogin --> <?php echo $block->getLayout ()->createBlock('Magento\Cms\Block\Block')->setBlockId('sa_login')->toHtml();?> <! -- SocialAnnex: SocialLogin -->

• You can add above step to any page, where you want to display login buttons.

8

Note:

To display large buttons use "show_provider" as div id. By default, it shows small buttons

("show_provider_small" div id).

CONCLUSION

This document contains the instructions to site admin or client who will configure the

Social login services at e-commerce website at Magento Extension.

This document includes a stepwise approach to installing and configure Social login

services on eCommerce website at Magento Extension.

With the reference of this instructions, site admin or client can easily configure Social

Login services at e-commerce Website.

9