User Tools

Site Tools


Sidebar

magento_2:social_login

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

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.
In Social Login v.1.7.0 we added the support of the Hybridauth v3.

That means that after extension installation or update to version 1.7.0 or higher, you need to update your Hybridauth. To do so, please run the following command:

composer require hybridauth/hybridauth:~3.3

After upgrade to 1.7.0 version, you'll see the setting option Use New Redirect URI in Configuration → Social Login → General Settings. If you used previous Social apps configurations, the Use New Redirect URI option will be set to No by default.

If you switch this option to Yes, old Redirect Uri settings will be refreshed and you'll need to re-configure the app and insert the Redirect URLs anew, to re-connect extension to socials.

For new modules installation, the Use New Redirect Uri option is set to Yes by default. Please proceed with configuring the extension as described in the User Guide.

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

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

After login via social button, you can redirect customers to the registration form to fill in the necessary data. To do that, you have to set at least one attribute with required values. To do that, please navigate to the Stores → Attributes → Customer.

When creating a new attribute, please note that you have to set the Values Required to Yes, as shown in the example below.

Also, for the attribute to display at the Registration form, in the Storefront Properties block the attribute should be allowed for displaying on the frontend. Also, include the attribute for displaying on the frontend.

Use New Redirect URI - if you updated the extension, the option will be set to No by default. If you installed the extension version 1.7.0 or higher, the option will be automatically set to Yes. Learn more in the Before Configuration - about Hybridauth section of the User Guide. Note that this setting will be applied to all social networks you use for social login.

New Redirect URL - in this field you'll see the URL of your store, that will be used for redirects after social login.

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 Authorized Redirect URLs field, add an URL from the module configuration page, depending on your redirect url setting. 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.

For instant access to your store backend and easy onboarding of new team members try Google Account Login for Magento 2.

Facebook

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

To create a Facebook app, go to Facebook Developers
Use the video guide to set up Facebook login

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 Authorized Redirect URLs add URL from the module configuration page, depending on your redirect url setting.

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 configure the connection to Instagram, first, you have to adjust an app in your Facebook Developer account. Then, adjust the necessary settings for the Instagram app itself. The user manual will guide you through both steps.

To configure the Instagram social login connection, you have to get a Facebook Developer account.

First, go to My Apps → Add a New App via Facebook for developers navigation panel.

Then, click the Add a New App button and proceed filling-in the required information.

You have to enter all necessary information, as marked by Facebook. Please keep in mind that the Settings → Basic tab has to contain the mandatory info on Platform. To configure that, please scroll to the very end of the form.

Then, click the + Add Platform button and select the Website one, as shown on the screenshot below. After that, you'll be asked to enter the website URL.

For the second part of the configuration process, please click on the Products + button on the Settings page of your app.

Then, find the Instagram icon and press Add button.

After that, in the Instagram → Basic Display tab you can configure the necessary credentials to connect your application to Social Login module for quick login. Use the Instagram App ID as Consumer Key (API Key) and Instagram App Secret as Consumer Secret (API Secret) in Instagram configs block in Social Login settings.

The Instagram social login will be available for all website visitors only AFTER app activation (publishing to LIVE). To do that, please click the tumbler 'In development' to change the status to 'Live', as shown in the screenshot below.

In development mode, customers will be unable to login to your website using their Instagram account.

Note that, you can test the Instagram API connection with test user accounts.

The Instagram API doesn't return the email that is necessary for user registration. Therefore, at first login attempt, the user will be redirected to the 'Create an Account' page.

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.

Apple ID (Add-On)

With this extension, you can enable the log in via Apple ID on your website.

The feature can be enabled only after purchasing a Login with Apple ID for Social Login Add-On

Configuration

To configure the extension, it is required to have an Apple Developer account. If you don't have it, please go to the Apple Developer page to create one. Note that account creation and its approve might take some time.

To configure the module, navigate to the Apple ID section of Social Login.

Set the Enabled to Yes to allow logging in via Apple ID.

Enter the Apple Team ID, Client ID, Key ID that were previously generated at the Apple Developer account.

Learn how to configure the Client ID and the Key ID in appropriate sections of this User Manual.

To find the Apple Team ID, please go to your Apple Developer Account, Membership tab. The ID will be located as shown in the screenshot below.

Choose the Key(*.p8 file). You can obtain it when creating the Private Key for Client Authentication at the Developer account.

Define the Valid Redirect URI - the page on your website to which user will be redirected after a successful authorisation.

Set the Sort Order to decide in which order the 'Login with Apple ID' button will be displayed.

Create credentials in developer account

The Apple may charge some fees for participating in the Apple Developer Program. Learn more about it here.

Sign in to the Apple Developer Portal and click on Certificates, Identifiers and Profiles.

Create an App ID

First, you will need to create an App ID. In the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Identifiers. Then, click the blue plus icon.

On the next page, enter the description and Bundle ID for the AppID.

Please note that description is more for the internal use, so you can name it any way you want. The best practice is to use the descriptive naming so that you can easily understand to which website the App ID belongs.

On the screenshot example above, the Description name is Social Login Connection for the example.store Bundle ID. The Bundle ID is best when it’s a reverse-dns style string.

Then, scroll down the 'Capabilities' to find the 'Sign In with Apple' checkbox. Enable it by ticking the checkbox. Then, press the Continue button in the upper-right corner. Save the App ID.

Create a Services ID

Then, separately create the Services ID. The flow is similar to the App IDs creation. First, go to the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Identifiers. Then, click the blue plus icon to create a new identifier. This time, choose the Services IDs option, as shown in the screenshot below.

The Services ID will identify the particular instance of your app and is used as the OAuth client_id.

In the next step, please enter the Description that the user will see during the login flow and the Identifier which becomes the OAuth client_id. similarly, check the Sign In with Apple checkbox.

Then, click on the Configure button next to the Sign In with Apple checkbox. This is the stage where you define the domain your app is running on, and the redirect URLs used during the OAuth flow.

This is the way the configuration pop-up will look like. Make sure that the App ID you created on the previous step is chosen as the Primary App ID. If this is the first App ID you’ve made that uses Sign In with Apple, most likely it will already be selected.

Please kindly note that Apple doesn't allow the localhost URLs in this step. So if you enter an IP address like 111.0.0.1, it will fail later in the flow. Please use a real domain name here.

Save the entered data by clicking on the Next → Save → Continue → Register buttons to finalize the Services ID configuration.

Create a Private Key for Client Authentication

Third, you will need to create Key ID. In the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Keys. Then, click the blue plus icon.

Enter the key name, similarly to the example on the screenshot below. Remember to tick the Sign In with Apple checkbox and configure all required options.

Then, press Continue. In the next step, link the Primary App ID in the dropdown to the App ID you created earlier.

Press the Save → Register buttons in order to proceed with the successful configuration.

After a successful key configuration, Apple will generate a new private key for you. You will be offered to download the Key file in the '*.p8' format.

Please keep in mind that you can download the Key file ONLY ONCE. Please, make sure you saved the file in a secured place so that you can get back to it later if necessary.

Lastly, check the key information to find your Key ID which you'll need to configure the extension in the Magento 2 backend.

Download and save the Key file. Then, upload in it the Apple ID configurations.

After a successful Key ID verification, the file will no longer be stored at your Magento server. This is to prevent creating excessive files on a server.
Please take into consideration that all Apple Developer credentials that you have created will be valid for 6 months, as designed by Apple guidelines. Please timely update all necessary API credentials to guarantee proper add-on functioning.

Frontend example

This is an example of the Login via Apple ID button on the frontend.

If a customer wants to register via Face ID or Touch ID, the systems will scan all existing users by ID. If no user profile matches the requested ID, a customer will receive the notification with the following text: “Sorry. We cannot find your email. Please sign in, enter My Account → My Social Accounts tab and link your Apple Social Account.”

The screenshot above displays the example of a successful Apple account connection. After that, a customer will be able to log in via Touch ID or Face ID.

If a customer logins directly via Apple ID by entering their email, they'll proceed through the standard authorization process. Based on individual's Apple account preferences, authorization might include two-factor authentication. If this user doesn't have an existing account, a new account will be automatically created based on a provided Apple ID email. In such cases, the default username will be New User. The username can be changed later in the Customer Account settings.

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

Rate the user guide
 stars  from 2 votes (Details)
magento_2/social_login.txt · Last modified: 2020/06/25 18:14 by tihomirova