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 for viewing this document.

Sorry for the incoivenenice.

Social Login - Magento 2

Thank you for choosing aheadWorks!


 

Installing Social Login

To install the extension follow the instructions below:

1. Backup your web directory and store database;

2. Download social Login installation package;

 3. Upload 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:

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 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.

 

Registering Twitter App

1. Create an account on Twitter

 Click to view details

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

2. Register Twitter application

 Click to view details

 At the Twitter Apps page click button.

Fill in all the fields suggested:

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

In the field Callback URL field paste the homepage URL of your store and /social/account/callback/provider/twitter/ path right after (refer to the screenshot below for example):

After done with the App credentials, read and agree to the Developer Agreement and hit button.

The application is now created.

3. Get API Key and Secret

 Click to view details

At the newly created application screen click Keys and Access Tokens tab:

  • Find and copy Consumer Key and Consumer Secret;
  • Navigate to your store backend 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 Twitter button will appear at the set Social Login blocks of your store.

 

Registering Facebook App

1. Create an account at Facebook

 Click 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.

2. Register Facebook application

 Click 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.

3. Get 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:

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.

4. Activate app

 Click 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.

 

Registering Google+ App

1. Create an account at Google

 Click 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.

2. Register Google application

 Click 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.

3. Get API Key and Secret

 Clik 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.

 

Registering LinkedIn App

1. Create an account on LinkedIn

 Click to view details

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

2. Register LinkedIn application

 Click to view details

 At the LinkedIn Developers page click button.

Fill in all the fields suggested.

In the field Website URL field paste the homepage URL of your store.

After done with the App credentials, read and agree to the LinkedIn API Terms of Use and hit button.

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

 

In the block OAuth 2.0 field

Click button.

The application is now ready.

3. Get API Key and Secret

 Click to view details

At the newly created application screen find Authentication Keys section:

  • 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 LinkedIn configuration section.

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

 

Registering Instagram app

1. Create an account on Instagram

 Click 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.

2. Register Instagram application

 Click 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.

3. Register New Client

 Click 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.

 

Registering ok.com app

1. Create an account on Odnoklassniki

 Click to view details

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.

2. Register Odnoklassniki application

 Click to view details

At your page in Odnoklassniki navigate to Games:

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

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

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 button.

The application is now created.

3. Get API Key and Secret

 Click 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.


  • 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.

 

Registering vk.com app

1. Create an account on Vkontakte

 Click to view details

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.

2. Register Vkontakte application

 Click to view details

Navigate to VKDevelopers page and get to My apps page.

Click button to start creating an App.

  • 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 button. The application is created.

 

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

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 button. Now you will need to paste Application ID and Secure key to Social Login extension settings at your store backend.

3. Get Application ID and Secret key

 Click 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.

 

Registering Pinterest app (https stores only)

1. Create an account on Pinterest

 Click to view details

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 the Pinterest.

2. Register Pinterest application

 Click to view details

 At the Pinterest Apps page read and agree to the Developer terms and click button.

Fill in App name and description and click button.

The App has been created.

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

In the field Redirect URIs field paste the homepage URL of your store and /social/account/callback/provider/pinterest/ path right after (refer to the screenshot below for example):

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

3. Get 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 App ID and paste it into the Pinterest Consumer Key (API Key) field of Social Login settings;
  • Copy App secret and paste it into the Pinterest Consumer Secret (API Secret) field of Social Login settings.
  • Don't forget to enable Pinterest and save the changes.

That's it. The Pinterest button will appear at the set Social Login blocks of your store.

 


Getting Around

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):

 Create new customer account

 Login

 Shopping Cart

 Checkout

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.

 


Adding new Login Blocks

Via widget layout update

New Login Blocks can be added to the custom positions via Magento widgets.

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

 

Select Social Login in the widget Type field and click button.

At the Widget options page configure widget as per your requirements:

  • Define the widget name;
  • Store View;
  • Position.

Once the widget is saved, new Social Login block will be displayed at the position set.

Via page widget

To add a widget to the particular CMS page of your store the first thing you need to do is to create a new Login Block. To create new Login Block navigate to the extension's settings Stores > Configuration > aheadWorks extensions > Social Login:

 

In the Login Blocks configuration section:

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

After the Login Block is added navigate to Content > Elements > Pages and add new or select the existing page:

 

In the content field of the page select required position:

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

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

 


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

  • No labels