User Tools

Site Tools


Sidebar

magento_2:social_login

For more details see the Social Login for Magento 2 extension page.

Guide for Social Login for Magento 2

Social Login extension significantly fastens the registration process for customers. It improves customers' shopping experience and collects consumers' social profile data.

  • AJAX pop-up for the login/register purpose
  • AJAX login pop-up on the cart and checkout pages
  • 4 positions of the social login bar
  • Redirect after login
  • Included reCAPTCHA
  • Supports Google, Facebook, Twitter, Instagram, LinkedIn, Amazon, Paypal, Twitch

Before Configuration

Prior to enabling the Social Login for Magento 2 extension, please make sure that you have installed the additional hybridauth plugin.

Install Hybridauth

To install Hybridauth, you can use Composer.

Add the following entry to the composer.json file in the root of your project.

{
    "require" : {
        "hybridauth/hybridauth" : "2.13.*"
    }
}

Via Composer, run a command to install Hybridauth and its dependencies:

$ php composer.phar install

Composer will download the latest version of Hybridauth Library and locate it in the /vendor/ directory.

For more information, check the Hybridauth 3 Documentation.

General Settings

To configure the Social Login for Magento 2 extension, go to Stores → Configuration → Amasty extensions → Social Login and expand the General Settings section.

Enable Social Login - Set to Yes to enable the display of social media buttons, which allow to login via social networks.

If after enabling the extension, you receive the following notification: Additional Social Login package is not installed. Please, run the following command in the SSH: composer require hybridauth/hybridauth, then install the missing plugin.

Add Social Login to - Use multi-select to add social media login to various places on the website.

Available locations:

  • Login Popup
  • Above customer login form
  • Below customer login form
  • Above customer registration form
  • Below customer registration form
  • Shopping cart page

Login Buttons Shape - Make the Social Login Buttons catchy by specifying the shape: round, rectangular or square for 3 and more buttons enabled.

Enable AJAX popup - Set to Yes to enable the AJAX pop-up for the registration and login.

Login Button Position - Choose the place to display social login buttons.

Available positions:

  • Top
  • Bottom
  • Right
  • Left

Redirect after Login - Select the necessary page, where to direct customers after their social login.

  • Stay on the current page
  • To custom URL
  • Refresh Current Page

Google

Enabled - Set to Yes to enable the display of the Google login button.

To create Google App, go to https://cloud.google.com/console/project.

Click on the CREATE PROJECT button and configure your app settings.

Specify your project name. The project ID will be generated automatically.

Go to the Credentials tab and create a client ID to integrate your website with Google.

Insert your website URL in the required field. In the field Authorized Redirect URLs add /amajaxlogin/google/index/ to your website URL. Then, press the Create button.

Please copy the Client ID and Client Secret.

Insert your API KEY (Client ID) and API Secret (Client Secret) in the appropriate fields in the backend and save the configuration.

Import customers' gender from Google

This extension can also automatically import customers' gender from Google. To make that feature work, first, go to the Magento Configuration→Customers→Customer Configuration→Name and Address Options and enable corresponding Gender switch.

After you enabled Gender for customer data, go to the Google Cloud and edit your API settings. In the Scopes for Google APIs add the user.birthday.read and user.addresses.read, by clicking at the Add Scope button as shown below.

You can see all imported data on the All Customers grid, which you can find at the backend via going to the Customers → All Customers. Also, it will be displayed at each customer's account page.

Facebook

Enabled - Set to Yes to enable the display of the Facebook login button.

To create a Facebook app, go to Facebook Developers

Register as a developer and choose Add New App in the My Apps drop-down.

Choose Facebook Login among the products available for adding.

Specify the Display Name and Contact Email for your app. After that, click the Create App ID button.

Then, go to the Settings → Basic tab to configure your app.

The App ID and App Secret will be generated automatically. Fill in the App Domains field and choose your app Category.

Click on the Add Platform button to choose the platform for your social apps.

After clicking on the Add Platform button you’ll see the grid with various platform types. Please select Web.

After specifying the platform type, insert your website URL here and click on the Save Changes button.

Enable the Client OAuth Login and fill in the Valid OAuth redirect URIs on the Facebook Login → Settings tab.

To apply the configuration, change the Status from In development to Live.

Insert your API Key and API Secret in general extension settings and Save the configuration.

Import customers' date of birth and gender from Facebook

You can import users' date of birth and gender from Facebook. With the date of birth, you can automatically verify customers' age.

To make that feature work, first, go to the Magento Configuration→Customers→Customer Configuration→Name and Address Options and enable corresponding Show Date of Birth and Gender switches.

After that, go to the Facebook Developers application dashboard, which you created before. Click on the App Review → Permissions and Features

On this tab, search for the user_gender and user_birthday permissions. Then submit the request of approval, according to the Facebook requirements.

All successfully approved requests will be displayed at the App Review → My Permissions tab, where you can easily manage them.

You can see all imported data on the All Customers grid, which you can find at the backend via going to the Customers → All Customers. Also, it will be displayed at each customer's account page.

Twitter

Enabled - Set to Yes to enable the display of the Twitter login button.

To create a Twitter App, go to https://apps.twitter.com/.

Click to the Create New App button to create a new Twitter app.

Specify your App name and give a detailed description of the application in App name and Application Description fields. Then, specify your website URL in the Website URL field. In the Callback URLs field specify your website URL and add /amajaxlogin/twitter/ to it.

Go to the Keys and tokens tab and copy the API key and the API secret key.

Specify the necessary access and additional permissions on the Permissions tab.

Insert the API key and the API secret key, obtained from the Keys and tokens tab, to the fields in the backend.

Instagram

Enabled - Set to Yes to enable the display of the Instagram login button.

To create Instagram App, please, go to https://instagram.com/developer/.

Hit the Manage Clients button and click on the Register a New Client.

Expand the Details tab and specify the Application Name and the Description for your app.

In the Valid redirect URLs paste the URL given in the Configuration tab of the module.

Click on the Register button.

The Client Info tab will appear. Copy the Client ID and the Client Secret and fill in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the extension backend.

LinkedIn

Enabled - Set to Yes to enable the display of the LinkedIn login button.

To create LinkedIn App, go to https://www.linkedin.com/secure/developer.

Go to the My Apps and click on the Create Application.

Specify your Company and Application Name, Description, Website URL, your Business Email and Phone. Don’t forget to set an Application logo.

Click on the Submit button.

From the Dashboard page go to the My Apps tab to see the created application.

Click on the application to find out the information needed.

Copy the Client ID and the Client Secret and paste it in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the module settings. Save the configuration.

Amazon

Enabled - Set to Yes to enable the display of the Amazon login button.

To create Amazon App, please, go to https://login.amazon.com/website

Click on the Register new application. In the application form add the following information about your product:

Name - specify the name that will be displayed when the customers agree to share personal information with your product.

Description - this tab differentiates Logins with Amazon Applications. The users don’t see the description.

Privacy Notice URL - fill in the link to the privacy policy of your company. The users will see this link on the login screen.

Logo Image - To provide the sign-in screen with a special logo, download an image of the following extensions: JPEG, PNG, GIF.

Hit the Save button.

Look at the example of the registration form:

Expand the Web Settings tab.

The values for Client ID and Client Secret will be generated automatically. Click the Show Secret button to reveal and copy it. In Allowed JavaScript Origins and Allowed Return URLs specify the information that is given in the settings of the module.

Copy the Client ID and the Client Secret and paste it in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the module settings. Save the configuration.

Paypal

Enabled - Set to Yes to enable the display of the Paypal login button.

To create Paypal App, go to https://developer.paypal.com/developer.

Register as a developer and click Create App in the REST API apps.

Specify App Name and your Sandbox developer account. Then hit the Create App button.

To see Live App Settings click Live button above all the tabs.

Find Live Return URL in the Valid Callback URL tab on the module general setting page. Copy it and paste here.

Approve your app following this guide.

After the successful identification, you will see a tick near Email address.

The values for Client ID and Client Secret will be generated automatically.

Copy the information and fill in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the module settings. Save the configuration.

Social Login for Magento 2 allows collecting authentiс customer data safely as it is equipped with reCAPTCHA. Let your admins enable reCAPTCHA in the login/register process and forgot password pages or pop-up to avert spam accounts. Easily customize the type and design of reCAPTCHA from the Magento 2 backend.

Twitch

Enabled - Set to Yes to enable the display of the Twitch login button.

To create Twitch App, go to https://dev.twitch.tv/.

Click on the Register Your Application button to authorize login with Twitch account.

Fill in all fields. The data for OAuth Redirect URL is the Valid Callback URL from the backend. Click the Create button to proceed.

After you created an extension, click on the Manage button.

Copy your API KEY (Client ID) and API Secret (Client Secret) in the appropriate fields in the backend and save the configuration.

Analytics Dashboard

To have a better understanding of your customer base with intuitive UI, chart and table, go to Customers → All customers.

Easily analyze data while monitoring the number of customers, purchased items and revenue by social login.

Use a handy Social Login Chart to better target strategy through audience segmentation.

Monitor all your customers in one place and track them by the following data: name. email, login type, phone, zip, country, state/province and registration date.

You can easily find any customer in one click by filling in a keyword in the Search tab.

You can perform mass actions right in the grid. Tick needed customers and then choose the Action from the dropdown menu to apply:

  • Delete
  • Edit
  • Subscribe to Newsletter
  • Unsubscribe from Newsletter
  • Assign a Customer Group.

The extension allows to download the list of your customers with the detailed data. Just click the Export and get the file.

You can also Add New Customer right from the admin panel.

Hit the Add New Customer button and specify the account information.

Please specify a customer name and email, then associate it with the website and customer group to send welcome email form.

To add the address, expand the Addresses tab.

Here you can specify default billing or shipping addresses for a related customer.

After adding necessary information hit the Save Customer button.

Ajax Pop-Up

Comfort your customers with an accessible AJAX pop-up that offers one-click login and registration. Set the Social Login bar position: below, above and in the header of any page. Use color and style configuration to match your brand style.

Keep customers from abandoning the checkout with handy password restore pop-up. It appears when a customer clicks on the “Forget Your Password” text button on the login pop-up. No more redirecting - the customer will remain on the same page during the whole password restoring process.

Social Buttons Design

Customize social buttons design to fit your original style. Choose the buttons’ shape according to your preferences:

  • Round for all buttons used;
  • Rectangular for 2 or fewer buttons used;
  • Square for 3 and more buttons enabled.

Increase the number of completed orders with Amasty Abandoned Cart Emails extension.

Find out how to install the Social Login extension via Composer.

Rate the user guide
 stars  from 1 votes (Details)
magento_2/social_login.txt · Last modified: 2019/09/06 10:14 by arhipenko