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

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 nine sections : General, Buttons Block, reCAPTCHA, Facebook, Twitter, Google, Linkedin, Yahoo and Live.

General

Set Enable Extension to "Yes" to enable the extension in the storefront

Set Enable Popup to "Yes" to enables customers to login and register with their social account on popup window. The social buttons will display on login and register area

In the Display Customer Photo field, set to "Yes" to display customer photo from social network in your website header

In After Login Success Redirect To field, select the page where user will be redirected after each successful login

In the After Success Registration Redirect To field, select the page where user will be redirected after each successful registration

In Send password to customer after registered field, set to "Yes" to send the auto-generated password to customer email address after account registered

Buttons Block

In the Social Buttons Template field, select the template to display social buttons. If "List" social buttons will show as list. If "Grid" social buttons will show as grid

Defines the Login Description to appear before the social login buttons.

Defines the Register Description to appear before the social registration buttons.

In the Display Social Buttons on Popup in field, choose to display the social buttons on Login Block, Register Block or Both Login and Register Block.

Specify the Block Selectors to Display Login buttons. For example, to display button on header hompage use .cms-home .header.content selector

Specify the Number of button to display to display on account login and create area.

Defines the View More Text to display on view more button. Eg "View More". This will show if the Number of button to display is lower than the max buttons available.

Set the Social Buttons Sort Order to appear on customer account login and create. Drag drop to set the order.

reCAPTCHA

Set Enable reCAPTCHA V2 to "Yes" to enable reCAPTCHA in the account login and register popup.

Specify the reCAPTCHA Site Key and Secret Key. Create your reCAPTCHA API keys here

Select the reCAPTCHA Theme, Type and Size. Check Google reCAPTCHA Documentation for more details

In the Display on Popup In list, select each block where the reCAPTCHA is to be available.

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 Valid OAuth Redirect URIs for Valid OAuth Redirect URIs field when registering with Facebook API.

In the Login Button Text enter the text that will be displayed on Facebook login button.

In the Register Button Text enter the text that will be displayed on Facebook registration button.

Image Icon allows you to upload your icon image if you wish to use your own image icon.

Button Color allows you to set the color of the Facebook button.

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 Callback URL while creating your Twitter social login application.

In the Login Button Text enter the text that will be displayed on Twitter login button.

In the Register Button Text enter the text that will be displayed on Twitter registration button.

Image Icon lets you select the small icon for Twitter button.

Button Color allows you to set the color of the Twitter button.

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 Authorized redirect URIs link for the Authorized redirect URIs field when registering with Google API.

In the Login Button Text enter the text that will be displayed on Google login button.

In the Register Button Text enter the text that will be displayed on Google registration button.

Image Icon lets you select the small icon for Google button.

Button Color allows you to set the color of the Google button.

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 Redirect URL(s) link for Redirect URL(s) field when registering with Linkedin API.

In the Login Button Text enter the text that will be displayed on LinkedIn login button.

In the Register Button Text enter the text that will be displayed on LinkedIn registration button.

Image Icon lets you select the small icon for LinkedIn button.

Button Color allows you to set the color of the LinkedIn button.

Yahoo

Set Enabled to "Yes", to enable Yahoo Login functionality. Please, check the How to Configure Yahoo API to learn how to create and set up Yahoo application properly.

In the Client ID field specify the Client ID provided to you after the Yahoo application has been created.

In the Client Secret field enter the secret key provided to you after Yahoo application has been created.

Please use the Callback Domain link for Callback Domain field when registering with Yahoo API.

In the Login Button Text enter the text that will be displayed on Yahoo login button.

In the Register Button Text enter the text that will be displayed on Yahoo registration button.

Image Icon lets you select the small icon for Yahoo button.

Button Color allows you to set the color of the Yahoo button.

Live

Set Enabled to "Yes", to enable Live Login functionality. Please, check the How to Configure Live API to learn how to create and set up Live application properly.

In the Client ID field specify the Client ID provided to you after the Live application has been created.

In the Client Secret field enter the secret key provided to you after Live application has been created.

Please use the Callback Domain link for Callback Domain field when registering with Live API.

In the Login Button Text enter the text that will be displayed on Live login button.

In the Register Button Text enter the text that will be displayed on Live registration button.

Image Icon lets you select the small icon for Live button.

Button Color allows you to set the color of the Live button.

Managing Social Accounts

The extension provides an overview on all social accounts customers have linked to the store. To view all social accounts, please go to MARKETING ⟶ Social Login by Ulmod ⟶ Manage Social Accounts.

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

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 Configure Yahoo API

To register a new Yahoo API Application, please follow the step-by step instructions below:

Go to ttps://developer.yahoo.com/apps.

Click on Create an App.

Enter the Application Name and choose Web Application in the Application Type

Fill out the Description, Home Page URL, Callback Domain and click on Create App

Copy the Client ID (Consumer Key) and Client Secret(Consumer Secret) and insert it under the extension settings in STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Yahoo.

How Configure Microsoft Live API

To register a new Microsoft Live API Application, please follow the step-by step instructions below:

Go to Microsoft Live App

Click on Create an App.

Login or create a new Microsoft account

Click on Add an app button, and set Name of the Application

Use Generate New Password and Generate New Key Pair to get Application Secrets, then insert it under the extension settings in STORES ⟶ Configuration ⟶ ULMOD EXTENSIONS ⟶ Social Login ⟶ Live.

Next, enter your website URL to connect Microsoft Live with your site

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