social login · social login will verify the entered code and if it is valid then only it set the...
TRANSCRIPT
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.
• 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