Versions Compared

Key

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

...

...

...

...

...

...

...

...

width50%

Table of Contents

Warning

Firefox user notice:

Please use another web browser to view this document.

Sorry for the inconvenience.

...

width30%

                                                                                                                                                                                                   

Image Modified

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.3.X, Magento Commerce 2.3.X

Product Page

Thank you for choosing Aheadworks!

Installing Social Login

...

Panel
borderWidth2px
borderStylesolid

1. Backup your web directory and store database

Panel
borderWidth2px
borderStylesolid

2. Download the Social Login installation package

Panel
borderWidth2px
borderStylesolid

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

...

borderWidth2px
borderStylesolid

 4. In SSH console of your server navigate to your store root folder:

No Format
cd path_to_the_store_root_folder

run the following command: :

No Format
php -f bin/magento module:enable Aheadworks_SocialLogin

then:

No Format
php -f bin/magento setup:upgrade

after:

No Format
php -f bin/magento setup:static-content:deploy
Panel
borderWidth2px
borderStylesolid

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

Note

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

...

width50%

...

borderWidth2px
borderStylesolid

If you are installing an extension from Aheadworks for the first time, you need to add our composer repository to your Magento store:

Panel
borderWidth2px
borderStylesolid

1. Login to your ssh console and navigate to your store folder:

Panel
borderWidth2px
borderStylesolid
cd path_to_the_store_root_folder

Run the following command:

Panel
borderWidth2px
borderStylesolid
composer config repositories.aheadworks composer https://dist.aheadworks.com/

On successful execution of the command you will be able to use the composer to install the extensions.

...

borderWidth2px
borderStylesolid

To install the extension:

2. Login to your ssh console and navigate to your store folder:

Panel
borderWidth2px
borderStylesolid
cd path_to_the_store_root_folder

...

borderWidth2px
borderStylesolid

 3. Run the following command to install the latest version of the extension:

Panel
borderWidth2px
borderStylesolid
composer require aheadworks/module-social-login

if you need to install a specific version, run this command:

Panel
borderWidth2px
borderStylesolid
composer require aheadworks/module-social-login:<version>
Tip

Specify the version of the extension in <version>

Panel
borderWidth2px
borderStylesolid

When prompted, enter Public Key (Username) and Private Key (Password):
Image Removed

Note

Both Public Key (Username) and Private Key (Password) can be found in My Projects and Licenses in your personal account on our site:

Image Removed

...

borderWidth2px
borderStylesolid

4. Enable the extension:

Panel
borderWidth2px
borderStylesolid
php -f bin/magento module:enable <Module_Name>
Tip

Add the product name in <Module_Name>

Next, register the extension:

Panel
borderWidth2px
borderStylesolid
bin/magento setup:upgrade

Recompile your Magento store if you are in the Production mode:

Panel
borderWidth2px
borderStylesolid
bin/magento setup:di:compile

To verify that the extension is enabled, run this command:

Panel
borderWidth2px
borderStylesolid
bin/magento module:status

Clean store cache, by running the following command:

Panel
borderWidth2px
borderStylesolid
bin/magento cache:clean

Log out and Log in the backend again.

...

borderWidth2px
borderStylesolid

To upgrade the extension:

5. To update or upgrade an extension:

Download the updated extension file. Take note of the module-name and version. Export the contents to your Magento root.

If a composer package exists for the extension, run one of the following.

Code Block
titleUpdate per module name:
composer update aheadworks/module-social-login
Code Block
titleUpdater per version:
composer require aheadworks/module-social-login:<version>

Run the following commands to upgrade, deploy, and clean the cache.

Panel
borderWidth2px
borderStylesolid
php bin/magento setup:upgrade --keep-generated
php bin/magento setup:static-content:deploy
php bin/magento cache:clean

Configuring Social Network Applications  

Twitter 

...

width50%

...

1. Create an account on Twitter

Expand
titleClick to view details

Image Removed

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

...

titleClick to view details

In August 2020, Twitter introduced the concept of a Twitter project, a new way to organize your Twitter apps and to provide access to the v2 version of the Twitter APIs. If you haven't logged on to Twitter’ s Developer Portal since August 1, 2020, you’ ll likely see a dialog box similar to this one the next time do log on:

Image Removed
If you want to create a Twitter project, you must first apply for a Twitter development account; that process consists of answering a few questions about what your project/app is intended to do and what type of user data you want to access. Depending on your answers to these questions, your application could be approved immediately, or you might have to wait a few days for Twitter to make a decision.

That said, however, you don’t necessarily need to apply for a developer account nor do you need to create a project in order to use Twitter for social login. Any apps you created prior to August 2020 will still be available to you: you can still manage those apps and still use them for social logins . However, you will not be able to create new apps without a developer account. 

Creating a Twitter Project and a Social Login App

Assuming your developer account is approved, the next time you log on to the Twitter Developer Portal your Dashboard will look similar to this:

Image Removed
In other words, you’ ll have a default project (Project 1) but not apps. Your first course of action is to add an app to that project.

To create an app, click Add App to display the Add your App page:

Image Removed
If you prefer, you can click the Choose App dropdown list and add one of your existing apps to your new project. For this example, however, we’ ll click Create a new App instead. When the Name your App page appears, type a unique name (unique across all of Twitter) for your app in the App name field and then click Complete:

Image Removed
That creates your new app and displays the default app details:

Image Removed
In order to use your new Twitter app for social logins you must next enable 3rd party authentication. To do that, locate the Authentication settings section and complete the following procedure:

...

Note

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, your Valid OAuth redirect URI must have the following format:

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

Your callback URI will typically be your social login URL

...

3. Get the API Key and Secret

...

titleClick to view details

...

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

Facebook

...

width50%
Panel

1.Register as a Facebook Developer

Panel

2. Create an App

...

3. Set-up the Facebook Login product

Expand
titleClick to view details

3.1 Go to the Apps Panel, the App Dashboard's entry point. Navigate to Facebook Login and press the Set up button.

Facebook add productImage Removed

3.2 Select Web from the displayed platforms

Facebook website platformImage Removed

3.3 Go to the Settings section and choose Basic.

3.4 In the appeared menu some of the fields are generated automatically. All you need to do is fill in the rest of them, such as App Domains and Contact Email in particular. Please note these two are obligatory options. Privacy Policy URL and Terms of Service URL are optional, but we recommend you NOT to leave them blank. You will not be able to switch your application to live mode without them being set.

3.5 Once you've filled all the necessary fields, press the Add Platform button to move to the next step.

Facebook  app id basic settingsImage Removed

3.6  Select the Website from the list.

Facebook app platformsImage Removed

3.7 Set the website URL address in the Site URL field and press the Save Changes button.

Facebook website web idImage Removed

3.8 Navigate to App Review and press Permissions and Features. Make sure all relevant permissions are requested (public_profile and email, for example)

 Image Removed

3.8 Navigate to Facebook Login section and press Settings.

3.9 Enter you Valid OAuth Redirect URLs. It differs depending on the software you are using it for. Usually, you can get  OAuth Redirect URL in the software settings info. Make sure the Use Strict Mode for Redirect URls option is set to Yes, Web OAth Login is set to Yes, Enforce HTTPSoption is enabled and check that the section "Deauthorize / Deauthorize Callback URL" is empty.

Note

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 Valid OAuth redirect URI must have the following format:

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

3.10 Press the Save Changes button.

Image Removed

3.11 Once you've saved all the changes  Switch your Facebook APP to Live Mode.

Magento 2 Facebook app idImage Removed

...

4. Get the API Key and Secret

Expand
titleClick to view details

Go to Settings > Basic. Here you can find the App ID and App Secret.

Facebook for developers app idImage Removed

Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login. Paste the Consumer Key and Secret into the appropriate fields of the Facebook configuration section.

Instagram 

Section

Since Instagram is now managed by Facebook, it is recommended you use the Facebook Login product as an authentication solution. 

Google 

...

width50%

...

1. Create an account with Google

Expand
titleClick to view details

Image Removed

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. Create/Select a Google project

Expand
titleClick to view details

2.1 Go to the Google Developers Console.

2.2 Click the project drop-down and select or create the project for which you want to add an API key.

Image Removed

To create a new project, click on the New Project button in the top right. To use the existing project, click on the the name of the project on the list.

Image Removed

2.3 Go to the menu on the left and select APIs & Services > Credentials.

Image Removed

2.5 On the Credentials page, click + Create Credentials > API key or use the API from the list.

Image Removed

When a new API is created, the API key created dialog displays the newly created API key.

Image Removed

2.6 Click Close. The new API key is listed on the Credentials page under API Keys.
Remember to restrict the API key before using it in production. Restricting API Keys adds security to your application by ensuring only authorized requests are made with your API Key.

...

3. Set up OAuth2.0

Expand
titleClik to view details

To use OAuth 2.0 in your application, you need an OAuth 2.0 client ID, which your application uses when requesting an OAuth 2.0 access token.

To create an OAuth 2.0 client ID in the console:

1. Go to the Google Cloud Platform Console > APIs & services > Credentials

2. Click + Credentials, then select OAuth client ID. If you're unsure whether OAuth 2.0 is appropriate for your project, select Help me choose and follow the instructions to pick the right credentials.

Image Removed

Select Web Application and enter the name for the app. 

Image Removed

3. Scroll down to Authorized redirect URIs and enter http://yourdomain.com/social/account/callback/provider/google/, where yourdomain.com is the name of your domain where social login is meant to be used.

Note

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, your input must have the following format:

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

4. Click Create

Image Removed

5. Configure Consent Screen

Image Removed

If this is your first time creating a client ID, you can also configure your consent screen by clicking Consent Screen. You will be prompted to do so on clicking the Create button. You won't be prompted to configure the consent screen after you do it the first time.

The following procedure from the native Google Cloud Platform Console Help explains how to set up the Consent screen.

...

4. Get the API Key and Secret

Expand

Go to the Google Cloud Platform Console > APIs & services > Credentials, choose an OAuth 2.0 Client IDs entry and click on the Edit icon.

Image Removed

Copy the Client Key and Secret.

Image Removed

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.

LinkedIn

...

width50%

...

1. Create an account on LinkedIn

Expand
titleClick to view details

Image Removed

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

Expand
titleClick to view details

On the LinkedIn Developers page, click the Create App button in the top right.

Fill in all the Create an app form

Image Removed

Tick the I have read and agree to these terms check-box, and click Create App below. The application is created. You are now redirected to the profile page of the application. 

Go to the Products tab and click on the Select button within the Sign In with LinkedIn block. A popup will emerge, prompting to accept the Legal Agreement and confirm your choice of the product. Accept the Agreement and add the product. Your application for the product will be placed under review. 

Image Removed

...

3. Get the API Key and Secret

Expand
titleClick to view details

When on the profile page of the application, select the  'Auth' tab. Scroll down to the OAuth 2.0 settings and suggest the URL of your home-page.

Paste the homepage URL of your store into the 'Authorized Redirect URLs for your app' text-box

Image Removed

Note

Make sure that only https URLs will work here for LinkedIn.

Scroll up the page to find the Authentication keys.

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

Image Removed

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

Odnoklassniki

...

width50%

...

1. Create an account on Odnoklassniki

Expand
titleClick to view details

Image Removed

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

Expand
titleClick to view details

On your Odnoklassniki page, navigate to Games.

Image Removed

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

Image Removed

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

Image Removed

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

The application is now created.

...

3. Get the API Key and Secret

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

Image Removed

  • 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

...

width50%

...

1. Create an account on Vkontakte

Expand
titleClick to view details

Image Removed

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

Expand
titleClick to view details

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

Image Removed

Click Image Removed to start creating the app.

Image Removed

  • 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 Image Removed. 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).

Image Removed

Click 'Save' button . 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

Expand
titleClick 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)

...

width50%

...

1. Create an account on Pinterest

Expand
titleClick to view details

Image Removed

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

Expand
titleClick to view details

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

Image Removed

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

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

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

Image Removed

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

PayPal

...

width50%

...

1. Create an account on PayPal.

...

titleClick to view details

Image Removed

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

...

titleClick to view details

Image Removed

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

Note

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

...

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

Image Removed

...

3. Get the API Key and Secret

...

titleClick to view details

...

Image Removed

 

Note

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

Section

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

Image Removed

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.

Image Removed

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.

Image Removed

Customer Area

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

Image Removed

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.

Section

Rich Banner Slider introduces its sections under Content > Rich Banner Slider by Aheadworks. The extension comes with three sections:

  • Slides - allows store administrator create and manage slides;
  • Banners - allows store administrator create and manage banners;
  • Statistics - provides an overview of the banner and slides performance.

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

Image Removed

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

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

...

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

...

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

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

Uninstalling Social Login

...

width50%

Manual Removal

...

1. Disable the module by executing the following commands:

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

...

2. Remove the extension files from the following folder:

No Format
app/code/Aheadworks/SocialLogin

...

width50%

Automatic Removal (via Composer)

...

1. Disable the module by executing the following commands:

No Format
php bin/magento module:uninstall Aheadworks_SocialLogin

...

Warning

For more information follow the product user manual on our website


Product Page

Thank you for choosing Aheadworks!



Need Customization?

You can always find the latest version of the software, full documentation, demos, screenshots, and reviews on http://aheadworks.com
License agreement: https://aheadworks.com/end-user-license-agreement
Contact Us: https://aheadworks.com/contact
Copyright © 2021 Aheadworks Co. http://www.aheadworks.com