Child pages
  • Social Login - Magento 2
Skip to end of metadata
Go to start of metadata

Icon

Firefox user notice:

Please use different web browser to view this document.

Sorry for the inconvenience.

Social Login - Magento 2

Magento 2 Social Login provides online shoppers with quick registration and authorization possibilities through social login buttons. A social login block can be added to login, register, cart, and checkout pages of a website. Add up to nine login options. Place a social login block in custom page positions as a widget. Define the display order of login options individually on each page. View all the linked social accounts from a single table. 

Compatibility: Magento Open Source 2.1.X - 2.3.X, Magento Commerce 2.1.X - 2.3.X

Product Page

Thank you for choosing Aheadworks!


Installing Social Login

Command Line Installation

1. Backup your web directory and store database;

2. Download the Social Login installation package;

 3. Upload the contents of the Social Login installation package to your store root directory;

 4. Navigate to your store root folder in the SSH console of your server:

cd path_to_the_store_root_folder

run the following command:

php -f bin/magento module:enable Aheadworks_SocialLogin

then:

php -f bin/magento setup:upgrade

after:

php -f bin/magento setup:static-content:deploy

5. Flush the store cache; log out from the backend and log in again.

Icon

Make sure the installation is done from under the FTP administrator account. Otherwise make sure to set 775 permissions to the store root directory after the extension is deployed.

Composer Installation

1. Log in to your customer account at https://ecommerce.aheadworks.com and navigate to Account -> Composer access;

2. Configure your store to work with the Aheadworks Composer repository:

Add the Composer repository to composer.json by running:

composer config repositories.aheadworks composer https://dist.aheadworks.com/ in the Magento installation root.

Use the provided key pair as a login and pass. You can optionally save them to the global composer auth file.

 3. You can start using AW Composer now.

 For extension names, navigate to Account -> Composer access.

 4. Open the root Magento directory on your server and send Composer the following command:

composer require <component-name>:<version>

Note: Use the previously copied component 's name and version.

 5. Make sure that Composer finished the installation without errors. Flush the store cache, log out, and log into the backend again.


Configuring Social Network Applications  

Twitter 

1. Create an account on Twitter

 Click to view details

Twitter Sign Up

If you are new to Twitter, first, you will need to create an account.

The account is registered with the email address. Make sure to fill in all the fields and follow the registration steps provided by Twitter.

2. Register a Twitter application

 Click to view details

 On the Twitter Apps page, click .

Twitter Application Details

Fill in all the fields suggested:

  • Name;
  • Description;
  • Website (the address of your store homepage);
  • Callback URL.

In the 'Callback URL' field, paste the homepage URL of your store and the /social/account/callback/provider/twitter/ path right after (see the example in the picture below):

Twitter Callback URL

Having dealt with the app's credentials, read and agree to the Developer Agreement and click .

The application is now created.

3. Get the API Key and Secret

 Click to view details

On the newly created application's screen, click the 'Keys and Access Tokens' tab:

Twitter Keys and Access Tokens

  • Find and copy the Consumer Key and Consumer Secret;
  • Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login;
  • Paste the Consumer Key and Secret into the appropriate fields of the Twitter configuration section.

That's it. Once enabled, the corresponding Twitter button will appear in the set social login block of your store.

 

Facebook 

1. Create an account on Facebook

 Click to view details

Facebook Sign Up

If you are new to Facebook, you will first need to create an account.

Make sure to fill in all the fields and follow the registration steps provided by Facebook.

2. Register a Facebook application

 Click to view details
  1. In the upper right-hand corner of the screen, click My Apps and then click Add a New App.
  2. In the appeared popup, provide the Display Name and Contact Email.

The application is now created.

3. Get the API Key and Secret

 Click to view details

In the upper right-hand corner of the screen, click My Apps, and select the newly created application:

Selecting the Created Facebook Application

You are now in the application dashboard. Click Facebook Login under Products and choose Settings.

Facebook Login Settings

Make sure that your Facebook redirect URL(s) is (are) listed in Valid OAuth Redirect URls and the 'Use Strict Mode for Redirect URls' option is set to Yes.

Icon

Starting from March 2018, all OAuth apps require a Valid OAuth redirect URIs list. Thus, each OAuth app redirect will be accepted only for URIs included in the list.

For example, if https://greg-stemp.rpxnow.com/facebook/callback is the only URI in the list, then redirects to https://greg-stemp.rpxnow.com/facebook/callback/tokens or https://greg-stemp.rpxnow.com/facebook/callback/redirects will no longer be allowed.

If your app references a URI that is not in the list, the login attempt will fail.

This way, when creating a new key on the Facebook app, your input must have the following format:

https://[Your domain name]/social/account/callback/provider/facebook

Save the changes.

4. Activate the app

 Click to view details

Proceed to the application basic settings by clicking App Review under Dashboard.

In the menu provided, set Make Auth0 App public? to Yes.

That's it. Once enabled, the corresponding Facebook button will appear in the set social login block of your store.

 

Google 

1. Create an account on Google

 Click to view details

Google Sign Up

If you are new to Google, you will first need to create an account.

Make sure to fill in all the fields and follow the registration steps provided by Google.

2. Register a Google application

 Click to view details

In the Google Developers Console, create a new project by clicking Select a project in the upper panel of the screen:

Creating a New Google Project

  • In the appeared pop up window, click New Project;
  • Type in the name of the project and click ;
  • Click the 'APIs & Services' block on the left-hand panel;

  • Navigate to Credentials > OAuth consent screen;
  • Fill in the 'Application name' field;
  • Paste the homepage URL of your store into the 'Application Homepage link' field (without index.php);
  • Click ;
  • In the 'Credentials' window, expand and select OAuth client ID.

Creating Credentials for the New Google App

  • On the credentials page, select Web application as an Application Type;
  • Type in the name of the application in the 'Name' field;
  • Paste the homepage URL of your store and the /social/account/callback/provider/google/ path right after into the 'Authorized redirect URLs' field (see the example in the picture below).

Setting Google App Credentials

  • Click .

You will see the 'OAuth client' pop up window. Do not close it yet.

3. Get the API Key and Secret

 Clik to view details

Copy the Client ID and Cliend Secret from the 'OAuth client' pop up window:

Google OAuth Client Parameters

  • Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS> Social Login;
  • Paste the Client ID into the 'Consumer Key' field and the Client Secret into the 'Consumer Secret' field of the Google configuration section.

That's it. Once enabled, the corresponding Google button will appear in the set social login block of your store.

 

LinkedIn

1. Create an account on LinkedIn

 Click to view details

LinkedIn Sign Up

If you are new to LinkedIn, you will first need to create an account.

The account is registered with your email address. Make sure to fill in all the fields and follow the registration steps provided by LinkedIn.

2. Register a LinkedIn application

 Click to view details

On the LinkedIn Developers page, click .

Fill in all the required fields.

Paste the homepage URL of your store into the 'Website URL' field.

Having done with the app's credentials, read and agree to the LinkedIn API Terms of Use and click .

The application is created. You are now redirected to the newly created application page.

Paste the homepage URL of your store into the 'Authorized Redirect URLs' field under OAuth 2.0

LinkedIn Authorized Redirect URLs

Next, click  .Then click .

The application is now registered.

3. Get the API Key and Secret

 Click to view details

On the newly created application page, find the 'Authentication Keys' section:

LinkedIn Authentication Keys

  • Find and copy the Client ID and Client Secret;
  • Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login;
  • Paste the Client ID into the 'Consumer Key' field and the Client Secret into the 'Consumer Secret' field of the LinkedIn configuration section.

That's it. Once enabled, the corresponding LinkedIn button will appear in the set social login block of your store.

 

Instagram 

1. Create an account on Instagram

 Click to view details

Instagram Sign Up

If you are new to Instagram, you will first need to create an account.

The account is registered with your email address. Make sure to fill in all the fields and follow the registration steps provided by Instagram.

2. Register an Instagram application

 Click to view details

 On the Instagram Developers page, click .

Registering an Instagram Application

Fill in all the fields required.

Paste the homepage URL of your store into the 'Your website' field. Type in your phone number and define the reason for registering the app.

Setting Instagram App Credentials

When done, read and agree to the Instagram API Terms of Use and Brand Guidelines and click .

The application is now created. Now you will need to add an app client to get the required Instagram API credentials.

Click on the Instagram Developers page dashboard.

3. Register a New Client

 Click to view details

On the 'Manage Client' page, click .

Registering a New Instagram Client

Fill in all the fields required.

Paste the homepage URL of your store and the /social/account/callback/provider/instagram/ path right after into the 'Valid redirect URIs' field and click  (see the example in the picture below).

Instagram Client ID and Secret

You will be redirected back to the 'Manage Clients' page with the new client listed and the client info available.

  • Find and copy the Client ID and Client Secret;
  • Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login;
  • Paste the Client ID into the 'Consumer Key' field and the Client Secret into the 'Consumer Secret' field of the Instagram configuration section.

That's it. Once enabled, the corresponding Instagram button will appear in the set social login block of your store.

 

Odnoklassniki

1. Create an account on Odnoklassniki

 Click to view details

Odnoklassniki Sign Up

If you are new to Odnoklassniki, you will first need to create an account.

The account is registered with a phone number. Make sure to fill in all the fields and follow the registration steps provided by Odnoklassniki.

2. Register an Odnoklassniki application

 Click to view details

On your Odnoklassniki page, navigate to Games.

Games Section

Click My uploads in the left navigation menu and then click Add App.

My Uploads Menu

On the 'App settings' page, enter the app's title and click .

Odnoklassniki App Settings

Paste the homepage URL of your store and the /social/account/callback/provider/odnoklassniki/ path right after to the 'List of permitted redirect_uro' field.

Having done with the app credentials, click .

The application is now created.

3. Get the API Key and Secret

 Click to view details

Once the app is registered, you will receive an email from the Odnoklassniki team to the email address connected to your account.

This very email will contain the Consumer Key (Application ID), Consumer Secret (Secret Key), and Public Key.

Odnoklassniki Email Example

  • Copy the Application ID to the 'Consument Key (Application ID)' field of the social login settings in the Magento backend;
  • Copy the Public key to the 'Public Key' field of the social login settings in the Magento backend;
  • Copy the Secret key to the 'Consumer Secret (Secret Key)' field of the social login settings in the Magento backend.

That's it. Once you have saved the store configuration, the corresponding Odnoklassniki button will appear in the set social login block of your store.

 

Vkontakte

1. Create an account on Vkontakte

 Click to view details

Vkontakte Sign Up

If you are new to Vkontakte, you will first need to create an account.

The account is registered with a email address or phone number. Make sure to fill in all the fields and follow the registration steps provided by Vkontakte.

2. Register a Vkontakte application

 Click to view details

Navigate to the VKDevelopers page and get to the 'My apps' page.

My Apps Section

Click to start creating the app.

Creating a New Vkontakte App

  • Name the application in the 'Title' field;
  • Select Website as a platform;
  • Paste your store homepage URL into the 'Site address' field;
  • Specify the store's Base domain.

Click . The application is now created.

Now proceed to the app settings page and specify the Authorized redirect URI.

Paste the homepage URL of your store and the /social/account/callback/provider/vk/ path right after into the 'Authorized redirect URI' field (see the example in the picture below).

Vkontakte Application Settings

Click . Now you will need to paste the Application ID and Secure key to the Social Login extension settings in your store backend.

3. Get the Application ID and Secret key

 Click to view details

Once App is registered and configured, navigate to the settings page of the application to get the required credentials.

  • Copy the Application ID to the 'Consumer Key (API Key)' field of the extension settings in the Magento backend;
  • Copy the Secret key to the 'Consumer Secret (API Secret)' field of the extension settings in the Magento backend.

That's it. Once you have saved the configuration, the corresponding Vkontakte button will appear in the set social login block of your store.

 

Pinterest (https stores only)

1. Create an account on Pinterest

 Click to view details

Pinterest Sign Up

If you are new to Pinterest, you will first need to create an account.

The account is registered with the email address. Make sure to fill in all the fields and follow the registration steps provided by Pinterest.

2. Register a Pinterest application

 Click to view details

 On the Pinterest Apps page, read and agree to the Developer terms and click .

Creating a New Pinterest App

Fill in the app's name and description and click .

The app is now created.

Now, scroll the page down to the 'Platforms' block and paste your store URL into the 'Web' fields.

Paste the homepage URL of your store and the /social/account/callback/provider/pinterest/ path right after into the 'Redirect URIs' field.

Once done, click Save and scroll back to the top of the page.

3. Get the API Key and Secret

 Click to view details

At the top of the page of the created app:

  • Navigate to your store backend Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login;
  • Copy the App ID and paste it into the Pinterest 'Consumer Key (API Key)' field of the extension settings;
  • Copy App secret and paste it into the Pinterest 'Consumer Secret (API Secret)' field of the extension settings.
  • Don't forget to enable Pinterest and save the changes.

Pinterest App Credentials

That's it. The corresponding Pinterest button will appear in the set social login blocks of your store.

 

PayPal

1. Create an account on PayPal.

 Click to view details

PayPal Sign Up

 

If you are new to PayPal, you will first need to create an account.
Make sure to fill in all the fields and follow the registration steps provided by PayPal.

2. Register a PayPal application

 Click to view details

Creating a New PayPal App

  • Enter the app's name and click Create App to complete the process.

Icon

In the top right-hand corner of the page, you can toggle between the sandbox and live app information.



PayPal Sandbox App Settings - 1Insert the return URL addresses both into the 'Sandbox' and 'Live' fields. The return URL should be of the following type: http://[Your doamin name]/index.php/social/account/callback/provider/paypal/ 
  • Deselect all the checkboxes except Log In with PayPal and fill in all the information requested when you choose Advanced Options. Finally, save all the changes you have made.

PayPal Sandbox App Settings - 2

3. Get the API Key and Secret

 Click to view details
  • Copy the Client ID and Secret from the corresponding fields in the Sandbox API Credentials;

PayPal Sandbox API Credentials

 

Icon

When making API calls, you need to use the sandbox or live account's client ID and secret credentials for authorization.

The sandbox credentials are applied for testing. For live transactions, live credentials are to be applied. By the way, for live transactions, you need to upgrade from a personal to business PayPal account.

 

  • Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login;
  • Paste the Client ID into the Consumer Key field and the Client Secret into the Consumer Secret field of the configuration section.

That's it. Once enabled, the corresponding PayPal button will appear in the set social login block of your store.

 


Getting Around

The Social Login extension is ready for work right after installation. It comes with a set of social login blocks that can be enabled separately for register, login, shopping cart, and checkout pages.

The blocks can contain up to nine login buttons: PayPal, Odnoklassniki, Vk, Pinterest, Instagram, LinkedIn, Google, Facebook, and Twitter. With the social login buttons, customers can log in to a website with one click (provided that they are already logged into the corresponding social network).

Social Login Options

How an account is created?

Whenever customers click a social login button, they get redirected to the corresponding social network page. At the social network page, they need to confirm that they want to use their social accounts to log in to the store.

Once confirmed, customer is taken back to the store. The account is created.

Extension Configuration

The extension introduces its settings section in Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login.

Extension Settings

Within this section, you can decide on which store pages social login blocks should be displayed. Additionally, you can include/exclude the required social networks from the social login block.

The section comes with the following settings:

  • Enable Social Login - enables/disables the extension's output;
  • Login Blocks - enables/disables the default login blocks and allows adding custom blocks;
  • Twitter/Facebook/Google/LinkedIn/Instagram/Pinterest/Vk/Odnoklassniki/Paypal - these sections allow enabling/disabling particular social networks for logging-in purposes and store appropriate consumer keys and secrets.

Managing Social Accounts

Another section the extension introduces to the store backend is 'Social Accounts' found under Customers > Social Login by aheadWorks > Social Accounts.

Social Accounts Grid

Customer Area

At the frontend of the store, the Social Login extension introduces the 'My Social Accounts' customer account section.

My Social Accounts Tab in a Customer Account

In this section, customers can view and manage their social accounts (by linking new and unlinking current ones).

Having linked a social account, customers can log in to the store in one click and then proceed to the catalog.

 


Adding a Social Login Widget

Widget Layout Update

New login blocks can be added to custom positions through the native Magento widget functionality.

To add a new widget, navigate to Content > Elements > Widgets and click .

Enabling the Social Login Widget

Choose Social Login in the 'Type' dropdown and click .

On the widget options page, configure the widget as per your requirements:

  • Define the widget's name;
  • Store view;
  • Position.

Once the widget is saved, new social login block will be displayed in the position set.

Adding the Widget to Website Pages

To add the widget to a particular CMS page of your store, the first thing you need to do is to create a new login block.

Navigate to the extension settings in Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login.

Adding the Social Login Widget to Website Pages

In the 'Login Blocks' configuration section:

  • Click ;
  • Name the new Login Block ('Page widget' as per illustration);
  • Click .

After the login block is added, navigate to Content > Elements > Pages and add new or select the existing page:

Widget Options

In the content field of the page, select the required position:

  • click ;
  • Set Widget Type to Social Login;
  • In the Widget Options, select the new Login Block you created ('Page widget' as per illustration);
  • Click .

Now you can save the CMS page, and the Login Block will be displayed in the required position.


Uninstalling Social Login

Manual Removal

1. Disable the module by executing the following commands:

php bin/magento module:disable Aheadworks_SocialLogin
php bin/magento setup:upgrade

2. Remove the extension files from the following folder:

app/code/Aheadworks/SocialLogin

Automatic Removal (via Composer)

1. Disable the module by executing the following commands:

php bin/magento module:uninstall Aheadworks_SocialLogin


Product Page

Need Customization?

Magento 2 Custom Development Services by Aheadworks


You can always find the latest version of the software, full documentation, demos, screenshots, and reviews on http://ecommerce.aheadworks.com
License agreement: http://ecommerce.aheadworks.com/LICENSE-M1.txt
Contact Us: http://ecommerce.aheadworks.com/contacts/
Copyright © 2019 Aheadworks Co. http://www.aheadworks.com

  • No labels