SOCIAL LOGIN Magento - Installation Instruction Document Contents This Integration Guide Is Useful for All Magento Versions
Total Page:16
File Type:pdf, Size:1020Kb
SOCIAL LOGIN Magento - Installation Instruction Document Contents This integration guide is useful for all Magento versions. 1. Purpose of the document 1 2. Who can use this document? 1 3. Introduction to Social Login Services 1 4. Functionality Social Login Services 2 5. Installation of Social Login Services at Magento Extension 3 5.1. Magento Installation 3 6. Configuration of Social Login Services at Magento Extension 4 6.1. Log in to Magento Admin Panel 4 6.2. Configuration into Magento Admin Panel 4 6.3. Steps to add Social Log In Block 6 6.4. Displaying Social Login Icons on pages 8 7. Conclusion 9 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 Note: 6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION • After clicking on the configuration button you will get the below window. All these information will be provided by Annex Cloud. • After click on insert widget button, the widget will add into editor window as shown in • Click on General link under Social Annex tab as shown in the following screenshot. • After adding all details, click on “Save Config” button at right corner. below screenshot. 6.1. Log in to Magento Admin Panel • You have to enter the username and password in following login window of Magento. 6.3. Steps to add social log in block • To add Social Login block, navigate to Content > Blocks as shown in below screenshot. • After click on insert widget button, you will get the dropdown list to select widget which is shown in below screenshot. • After that, fill the details in the following setting section, as shown in the following image: • Select widget “Socialannex – Social Login” from widget type drop-down box and click 6.2. Configuration into Magento Admin Panel • Secret key on ‘Insert Widget’ button. • Click on “Save Block” button which is highlighted using the blue box in the above • After login, navigate to Stores > Configuration as shown in the following image. • Access token url screenshot. • Get user info url • After that click on “Add New Block” button in the right corner. It will show the 6.4. Displaying Social Login Icons on pages screen as below. • Add the following script within the phtml (Magento file type) page where you wish to • Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the display social login buttons. editor as shown in the following screenshot. 4 Note: 6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION • After clicking on the configuration button you will get the below window. All these information will be provided by Annex Cloud. • After click on insert widget button, the widget will add into editor window as shown in • Click on General link under Social Annex tab as shown in the following screenshot. • After adding all details, click on “Save Config” button at right corner. below screenshot. 6.1. Log in to Magento Admin Panel • You have to enter the username and password in following login window of Magento. 6.3. Steps to add social log in block • To add Social Login block, navigate to Content > Blocks as shown in below screenshot. • After click on insert widget button, you will get the dropdown list to select widget which is shown in below screenshot. • After that, fill the details in the following setting section, as shown in the following image: • Select widget “Socialannex – Social Login” from widget type drop-down box and click 6.2. Configuration into Magento Admin Panel • Secret key on ‘Insert Widget’ button. • Click on “Save Block” button which is highlighted using the blue box in the above • After login, navigate to Stores > Configuration as shown in the following image. • Access token url screenshot. • Get user info url • After that click on “Add New Block” button in the right corner. It will show the 6.4. Displaying Social Login Icons on pages screen as below. • Add the following script within the phtml (Magento file type) page where you wish to • Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the display social login buttons. editor as shown in the following screenshot. 5 Note: 6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION • After clicking on the configuration button you will get the below window. All these information will be provided by Annex Cloud. • After click on insert widget button, the widget will add into editor window as shown in • Click on General link under Social Annex tab as shown in the following screenshot. • After adding all details, click on “Save Config” button at right corner. below screenshot. 6.1. Log in to Magento Admin Panel • You have to enter the username and password in following login window of Magento. 6.3. Steps to add social log in block • To add Social Login block, navigate to Content > Blocks as shown in below screenshot. • After click on insert widget button, you will get the dropdown list to select widget which is shown in below screenshot. • After that, fill the details in the following setting section, as shown in the following image: • Select widget “Socialannex – Social Login” from widget type drop-down box and click 6.2. Configuration into Magento Admin Panel • Secret key on ‘Insert Widget’ button. • Click on “Save Block” button which is highlighted using the blue box in the above • After login, navigate to Stores > Configuration as shown in the following image. • Access token url screenshot. • Get user info url • After that click on “Add New Block” button in the right corner. It will show the 6.4. Displaying Social Login Icons on pages screen as below. • Add the following script within the phtml (Magento file type) page where you wish to • Fill block title, identifier, select ‘all store views’ and click on insert widget icon in the display social login buttons. editor as shown in the following screenshot. 6 Note: 6. CONFIGURATION OF SOCIAL LOGIN SERVICES AT MAGENTO EXTENSION • After clicking on the configuration button you will get the below window. All these information will be provided by Annex Cloud. • After click on insert widget button, the widget will add into editor window as shown in • Click on General link under Social Annex tab as shown in the following screenshot.