Child pages
  • Social Login - Magento 2

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Section
Column
width50%
Panel

1. Create an account at Facebook

Expand
titleClick to view details

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.

Panel

2. Register Facebook application

Expand
titleClick to view details

At the Facebook for Developers page click button.

  • Select Website platform for your App:

  • Name the application at the Quick Start for Website screen and click button;
  • Choose the category for the application and click button;
  • Scroll down to the Tell us about your website block, paste your store homepage URL and click button;
  • Scroll down once again to the Next Steps section and click Login block:

The application is now created.

Panel

3. Get API Key and Secret

Expand
titleClick to view details

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

You are now at the application dashboard:

  • Find and copy App ID and App Secret;
  • Navigate to your store backend Stores > Configuration > aheadWorks extensions > Social Login;
  • Paste the App ID into the Consumer Key field and App Secret into the Consumer Secret field of the Facebook configuration section.
Panel

4. Activate app

Expand
titleClick to view details

Proceed to the application basic settings:

Fill in the App Domains field and Contact Email field. These are the must to activate the application.

Navigate to App Review section and click the switch.

 

That's it. Once enabled the Facebook button will appear at the set Social Login blocks of your store.

Column
width50%

 

Registering Google

...

App

Section
Column
width50%
Panel

1. Create an account at Google

Expand
titleClick to view details

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.

Panel

2. Register Google application

Expand
titleClick to view details

At the Google Developers Console create new project by clicking Select a project in the upper right-hand corner of the screen:

  • Type in the name of the project and click button;
  • Click Use google APIs block:

  • Navigate to Credentials > OAuth consent screen:

  • Fill in the Product name shown to users field;
  • In the field Homepage URL paste the homepage URL of your store (without index.php);
  • Click button;
  • In the APIs Credentials window click button and select OAuth client ID:

  • At the Credentials page select Web application as an Application Type;
  • Type in the name of the application in the Name field;
  • In the field Authorized redirect URLs field paste the homepage URL of your store and /social/account/callback/provider/google/ path right after (refer to the screenshot below for example):

  • Click button.

You will be displayed with an OAuth client pop up. Do not close the pop up yet.

Panel

3. Get API Key and Secret

Expand
titleClik to view details

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

  • Navigate to your store backend Stores > Configuration > aheadWorks extensions > Social Login;
  • Paste the Client ID into the Consumer Key field and Client Secret into the Consumer Secret field of the Google configuration section.

That's it. Once enabled the Google + button will appear at the set Social Login blocks of your store.

Column
width50%

 

...

Section

Social Login extension is ready for work right after installation. It comes with a set of four Social Login Blocks that can be enabled separately and displayed at the following pages (click the name of the page to see how it looks):

Expand
titleCreate new customer account

Expand
titleLogin

Expand
titleShopping Cart

Expand
titleCheckout

The blocks can contain up to four social network login buttons: Twitter, Facebook, Google, LinkedIn; allowing customers for one click login (providing they are already logged into the corresponding social network).

How is the account at the store created?

Whenever customer clicks a social login button he is redirected to the appropriate social network page. At the social network page customer has to confirm that he wants to use the social account to log in to the store.

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

  • For Facebook and Google - the account at the store is created with the email associated with the social account;
  • For Twitter and LinkedIn - the account at the store is created with a service email generated on spot by the social network (this is Twitter and LinkedIn peculiarity).

Configuration

The extension introduces its settings section to the Stores > Configuration > aheadWorks extensions > Social Login:

 

The settings section should already be familiar to you if you followed the installation instructions and registered social network applications. Within this section store administrator can decide on which store pages the Social Login blocks should be displayed. Additionally administrator can include/exclude 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 default login blocks and allows adding custom blocks;
  • Twitter/Facebook/Google/LinkedIn - these sections allow enabling/disabling particular social networks for logging in purposes and store appropriate Consumer Keys and Secrets.

Social Accounts management

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

 

Social Accounts section provides an overview on all social accounts customers have linked to the store:

  • Click  button to see though the columns available and customize the Social Accounts grid, some columns may be excessive and some relevant to your current tasks;
  • Click  button to look for the social accounts matching a set of attributes;
  • Click  button to save the perfect Social Accounts grid look you found to quickly load it whenever required.

Customer area

At the frontend of the store Social Login extension introduces My Social Accounts customer account section:

 

The section allows customer to look through, link and unlink social network accounts to the store account.

Linking a social account lets customers log in to the store in one click and proceed to the catalog.

 

These are all the pages extension introduces to the store. In the next chapter the instructions on how to add new Login Blocks to the custom positions will be provided.

...