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 on Instagram

Expand
titleClick to view details

If you are new to Instagram 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 the Instagram.

Panel

2. Register Instagram application

Expand
titleClick to view details

 At the Instagram Developers page click button.

Fill in all the fields suggested.

In the field Your website field paste the homepage URL of your store. Type in your Phone number and define the reason for registering an App.


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

The application is now created. You are now redirected back to the Instagram Developers page. Now, it will be required to add an App client to get the required Instagram API credentials.

Click button at the Instagram Developers page dashboard.

Panel

3. Register New Client

Expand
titleClick to view details

At the Manage Client page click button.

Fill in all the fields suggested.

In the Valid redirect URIs paste the homepage URL of your store and /social/account/callback/provider/instagram/ path right after, and click  button. (refer to the screenshot above for example):

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

  • Find and copy Client ID and Client Secret;
  • 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 Instagram configuration section.

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

Column
width50%

 

Registering ok.com app

Section
Column
width50%
Panel

1. Create an account on Odnoklassniki

Expand
titleClick to view details

Image Added

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

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

Panel

2. Register Odnoklassniki application

Expand
titleClick to view details

At your page in Odnoklassniki navigate to Games:

Image Added

Click My uploads in the left navigation menu, and click Add App:

Image Added

At the App settings page enter the App title and click Image Added button.

Image Added

In the field List of permitted redirect_uro field paste the homepage URL of your store and /social/account/callback/provider/odnoklassniki/ path right after (refer to the screenshot above for example):

After done with the App credentials, click Image Added button.

The application is now created.

Panel

3. Get API Key and Secret

Expand
titleClick to view details

Once App is registered you should receive an email from Odnoklassniki team to the email address connected with your account.

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

Image Added

  • Copy Application ID to Consument Key (Application ID) field of Social Login settings in your Magento backend;
  • Copy Public key to Public Key field of Social Login settings in your Magento backend;
  • Copy Secret key to Consumer Secret (Secret Key) field of Social Login settings in your Magento backend.

That's it. Once you save store configuration the Odnoklassniki button will appear at the set Social Login blocks of your store.

Column
width50%

 

Registering vk.com app

Section
Column
width50%
Panel

1. Create an account on Vkontakte

Expand
titleClick to view details

Image Added

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

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

Panel

2. Register Vkontakte application

Expand
titleClick to view details

Navigate to VKDevelopers page and get to My apps page.

Image Added

Click Image Added button to start creating an App.

Image Added

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

Click Image Added button. The application is created.

 

Now, proceed to the App settings page and specify Authorized redirect URI:

Image Added

In the field Authorized redirect URI field paste the homepage URL of your store and /social/account/callback/provider/vk/ path right after (refer to the screenshot above for example).

Click Image Added button. Now you will need to paste Application ID and Secure key to Social Login extension settings at your store backend.

Panel

3. Get Application ID and Secret key

Expand
titleClick to view details

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

  • Copy Application ID to Consumer Key (API Key) field of Social Login settings in your Magento backend;
  • Copy Secret key to Consumer Secret (API Secret) field of Social Login settings in your Magento backend.

That's it. Once you save store configuration the Vkontakte button will appear at the set Social Login blocks of your store.

Column
width50%

 

...

Getting Around

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.

...