Social Login for Magento 2

Social Login

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" : "2.13.*"
    }
}

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

Facebook

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

Twitter

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

Google

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

LinkedIn

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

Instagram

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:

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"

Navigate to "Facebook Login" and press the "Set Up" button.

Select "Web" from the offered platforms.

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.

Complete the GDPR information

Input the website address into the "Site URL" field.

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.

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.

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:

Go to https://dev.twitter.com/apps

Click "Create New App."

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

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:

Go to https://console.developers.google.com

On the sidebar click on the "Credentials" tab

Next, click "Create Project"

Fill out the Project Name.

On the Dashboard sidebar, click Library, then Filter By Social

Choose Google + API.

Next, enable Google + API.

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.

In the sidebar, click on Credentials tab.

Click on "Create credentials" drop-down list. Then, select OAuth client ID.

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.

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:

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

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:

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.

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:

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

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!

Extension Product Page