Social Login for Magento 2
Introduction
The extension allows customers to register and log in on your store using their existing social accounts IDs. Customers can log in and registration via popup. reCAPTCHA supported to avoid spam account.
Installation
Please make sure that you have installed the additional hybridauth plugin before installing the extension.
Install Hybridauth
To install Hybridauth, add the following entry to the composer.json file in the root of your Magento 2 project
{
"require" : {
"hybridauth/hybridauth" : "3.3.*"
}
}
From the command line, run this :
php composer.phar install
Or
php composer.phar update
to install Hybridauth and its dependencies.
Composer will download the latest version of Hybridauth Library and place it inside the /vendor/ directory.
For more information, please check the Hybridauth Documentation
Install the Extension
The extension has 2 separate ways of installation, via Composer or by copying the code.
Please follow this Installation Guide to install the extension.
Extension Configuration
Configuration Settings
To access the configuration settings of the extension, log into the Magento Admin panel and go to STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login.
The module’s configuration contain 8 sections :General, reCAPTCHA, Facebook, Twitter, Google, LinkedIn, Amazon, Instagram.
General
Set Enable to "Yes" to enable the extension in the storefront
In the Show Social Login Buttons On field, Choose where to place the social login
Set Enable Popup Login to allow customers to login and register with their social account on popup window.
Choose the Buttons Position On Popup top or right
In the After Login/Register Success Redirect To field, select the page where user will be redirected after each successful registration
reCAPTCHA
Set Enabled to "Yes" to enable Invisible reCAPTCHA in the account login and register
Specify the Insivible reCAPTCHA Site Key and Secret Key. Create your reCAPTCHA API keys here
In the Invisible reCAPTCHA Language enter your language. Leave empty to allow Google to detect a language of user agent or please set needed value from the following list of languages
Set Enable In Customer Login Form to enable the Invisible reCAPTCHA in customer login form
Set Enable In Customer Registration Form to enable the Invisible reCAPTCHA in customer registration form
In the Forms Actions for Invisible reCAPTCHA specify the action url of the forms to enable the invisible reCAPTCHA, one url per line.
Eg:
Customer Login Form : customer/account/loginPost
Customer Registration Form : customer/account/createpost
Set Enabled to "Yes", to enable Facebook Login functionality. Please, check the How to Configure Facebook API to learn how to create and set up Facebook application properly.
In the App ID field specify the Facebook application ID
In the App Secret field enter the secret key provided to you after the Facebook application has been created
Please use the provided Valid OAuth Redirect URIs for Valid OAuth Redirect URIs field when registering with Facebook API
Define the Sort Order of the button in storefront
Set Enabled to "Yes", to enable Twitter Login functionality. Please, check the How to Configure Twitter API to learn how to create and set up Twitter application properly.
In the Consumer Key (API Key) field specify the Consumer Key (API Key) provided to you after the Twitter application has been created.
In the Consumer Secret (API Secret ) field enter the secret key provided to you after Twitter application has been created.
Please use the provided Callback URL while creating your Twitter social login application.
Define the Sort Order of the button in storefront
Set Enabled to "Yes", to enable Google Login functionality. Please, check the How to Configure Google API to learn how to create and set up Google application properly.
In the Client ID field specify the Client ID provided to you after the Google application has been created.
In the Client Secret field enter the secret key provided to you after Google application has been created.
Please use the provided Authorized redirect URIs link for the Authorized redirect URIs field when registering with Google API.
Define the Sort Order of the button in storefront
Set Enabled to "Yes", to enable LinkedIn Login functionality. Please, check the How to Configure LinkedIn API to learn how to create and set up LinkedIn application properly.
In the Client ID field specify the Client ID provided to you after the LinkedIn application has been created.
In the Client Secret field enter the secret key provided to you after LinkedIn application has been created.
Please use the provided Redirect URL(s) link for Redirect URL(s) field when registering with Linkedin API.
Define the Sort Order of the button in storefront
Set Enabled to "Yes", to enable Instagram Login functionality. Please, check the How to Configure Instagram API to learn how to create and set up Instagram application properly.
In the Client ID field specify the Client ID provided to you after the Instagram application has been created.
In the Client Secret field enter the secret key provided to you after Instagram application has been created.
Please use the provided Valid redirect URIs link for redirect URIs field when registering with Instagram API.
Define the Sort Order of the button in storefront
Amazon
Set Enabled to "Yes", to enable Amazon Login functionality. Please, check the How to Configure Amazon API to learn how to create and set up Amazon application properly.
In the Client ID field specify the Client ID provided to you after the Amazon application has been created.
In the Client Secret field enter the secret key provided to you after Amazon application has been created.
Please use the provided Allowed Return URLs link for Allowed Return URLs field when registering with Amazon API.
Define the Sort Order of the button in storefront
Managing Social Accounts
To view social accounts type used per customer, please go to CUSTOMERS ⟶ Customers ⟶ All Customers. the "Social Account" column appear on the grid the login type per customer
Social Login Report
To estimate the performance of each social network, please go to REPORTS ⟶ Customers ⟶ Social Login by Ulmod. A detailed report of the number of customers, ordered items and revenue per login type.
Frontend View
Once the Social Login are created, they will display in the storefront on the selected pages.
Pop Up
Example of Login Buttons displaying in the Popup
Example of Register Buttons displaying in the Popup
Example of Social Login Buttons in the customer account login page
Example of Social Login Buttons in the customer account register page
Example of Social Login Buttons in the checkout cart page
Example of Social Login Buttons in the checkout page
Example of Linking/Unlinking buttons in customer account (My Account)
Responsive design
The extension is responsive to mobile devices and work great regardless the type of screen or device used to view your store
Extension Configuration
How Configure Facebook API
To enable authentication with this provider and to register a new Facebook API Application, follow the steps below:
Step 1
Go to https://developers.facebook.com click on "Apps" and select "Add a New App".
Enter the name of the Application.
Specify your contact email.
Click "Create App ID"
Step 2
Navigate to "Facebook Login" and press the "Set Up" button.
Step 3
Select "Web" from the offered platforms.
Step 4
Go to "Settings" and select "Basic" from the menu on the left-hand side
Enter the url in App Domains, Site URL and URL Privacy Policy fields. They should match with the current hostname yourdomain.com.
Step 5
Complete the GDPR information
Input the website address into the "Site URL" field.
Step 6
Go to "Facebook Login" section. Then, Select the "Settings" tab.
Indicate your "Valid OAuth Redirect URIs" for this application. This URL can be found in the "OAuth Redirect URI" field, under the extension setting in the amin panel
Click the "Save Changes" button.
Step 7
Click on "Basic" in the menu on the left-hand side. Then, copy the "App ID" to your clipboard.
Copy the "App Secret" to your clipboard.
Step 8
Click on "App Review" section in the menu on the left side.
Select "Yes" for your application to become public.
How Configure Twitter API
To register a new Twitter API Application, please follow the step-by step instructions below:
Step 1
Step 2
Indicate the Name, Description and Website for your application.
Indicate the "Callback URL" for this application. This URL can be found in the "Callback URL" field, under the extension setting in the amin panel
Step 3
Go to "Keys and Access Tokens" section.
Copy the "Consumer Key (API Key)" and "Consumer Secret (API Secret)" of the application and insert it under the extension settings in STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Twitter..
How Configure Google API
To register a new Google API Application, please follow the step-by step instructions below:
Step 1
Go to https://console.developers.google.com
On the sidebar click on the "Credentials" tab
Next, click "Create Project"
Step 2
Fill out the Project Name.
Step 3
On the Dashboard sidebar, click Library, then Filter By Social
Choose Google + API.
Next, enable Google + API.
Step 4
Once the project is created. In the sidebar, Click on Credentials, then select the OAuth consent screen tab. Specify the Email Address and Product Name, then press Save.
Step 5
In the sidebar, click on Credentials tab.
Click on "Create credentials" drop-down list. Then, select OAuth client ID.
Step 6
Select Web application as your application type.
Fill out the Name field
Enter your website domain in the Authorized JavaScript origins field.
Provide the Authorized redirect URIs.
Step 7
Once you have registered, copy trhe Client ID and Client Secret and insert it under the extension settings in STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Google.
How Configure LinkedIn API
To register a new LinkedIn API Application, please follow the step-by step instructions below:
Step 1
Go to https://www.linkedin.com/secure/developer
Click on Create Application
Fill out all required fields such as Company Name, Logo, Email Company,… and click on Sumit button
Step 2
Go to My App option from the top of Dashboard page, and choose the created App to get the authentication keys
Copy the Client ID and Client Secret and insert it under the extension settings in STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ LinkedIn.
How To Configure Instagram API
To register a new Instagram API Application, please follow the step-by step instructions below:
Step 1
Go to https://www.instagram.com/developer/
Login to your Instagram account or create one. Then click on Manage Clients
Then click on Register a New Client.
Step 2
Fill out the Application Name, Description, Website(which should be your website). Fill our http://localhost in the field Valid redirect URIs and press enter to confirm that field.
Step 3
Go to Manage Clients and click to MANAGE
Step 4
Copy the Client ID and Client Secret and insert it under the extension settings in STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Instagram.
In the Valid redirect URIs: field, paste the URL given in the Configuration tab of the module : STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Instagram ⟶ Valid redirect URIs
How To Configure Amazon API
To register a new Amazon API Application, please follow the step-by step instructions below:
Step 1
Go to https://login.amazon.com/website
Login to your Amazon account or create one
Then click on the Register new application. In the application form add the following information about your product:
Name: specify the name of your application
Description: specify a description that helps you differentiate each of your Login with Amazon apps. Not displayed to users
Privacy Notice URL: specify the URL address of your application's privacy policy
Logo Image(Optional): upload a logo to display on the sign-in when users log into your website or mobile app
Click the Save button
Step 2
Expand the Web Settings tab
Copy the Client ID and Client Secret and insert it under the extension settings at STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Amazon.
In the Allowed Return URLs: field, paste the URL given in the Configuration tab of the module : STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Amazon ⟶ Allowed Return URLs:
Extension Support
Need Help?
Ulmod Support team is always ready to assist you, no matter which part of the world you are in. If something does happen and you think you might be experiencing an issue or bug, please contact us via [email protected] or submit a ticket from our Helpdesk Ticket and we will help you out.
Got Questions?
Should you have any questions or feature suggestions, please Contact Us. Your feedback is welcome!