• Installing Social Login
• Uninstalling Social Login
• Compatibility
• Introducing Magento 2 Social Login
•   Extension Overview
•   Key Features
• Getting Around
• Extension Configuration
• Configuring Social Network Applications
•   Redirect URLs
•   X (Twitter)
•   Facebook
•   Google
•   LinkedIn
•   Pinterest
•   PayPal
• Social Login on the Storefront
•   My Social Accounts
• Adding a Social Login Widget
•   Widget Layout Update
•   Adding the Widget to CMS Pages and Blocks
• Custom Login Block Templates
• Managing Social Accounts
• Integrations 

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. 

Installing Social Login

Command Line Installation

1. Backup your web directory and store database
2. Download the Social Login installation package
3. Upload contents of the Social Login installation package to your store root directory
4. In SSH console of your server navigate to your store root folder:

cd path_to_the_store_root_folder

run the following command:

php bin/magento module:enable Aheadworks_SocialLogin

then:

php bin/magento setup:upgrade

after:

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

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

Composer Installation

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

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

cd path_to_the_store_root_folder

Run the following command:

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.

To install the extension:

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

cd path_to_the_store_root_folder

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

composer require aheadworks/module-social-login

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

composer require aheadworks/module-social-login:<version>

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

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

     4. Enable the extension:

php -f bin/magento module:enable <Module_Name>

Next, register the extension:

bin/magento setup:upgrade

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

bin/magento setup:di:compile

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

bin/magento module:status

Clean store cache, by running the following command:

bin/magento cache:clean

Log out and Log in the backend again.

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.

Update per module name:

composer update aheadworks/module-social-login

Updater per version:

composer require aheadworks/module-social-login:<version>

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

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

Uninstalling Social Login  

Since Magento introduced declarative Database you need to be very carefull when uninstalling or disabling the module.

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

Compatibility

The PHP version depends on your current Magento version. Please, refer to your Magento version release notes.

Introducing Magento 2 Social Login

Extension Overview

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. 

Key Features

• 8 login options, including PayPal, Facebook, Twitter, etc.

• Login buttons on login, registration, cart, and checkout pages

• Put a social login block in custom page positions as a widget

• Integration with M2 Smart One Step Checkout

Getting Around

The Social Login extension is ready for work right after installation. Once the extension is enabled and the social network applications are configured, the social login buttons appear in the login blocks of your store.

How an Account Is Created

1. A customer clicks a social login button (for example, Login with Google).

2. The customer is redirected to the social network page and confirms that the store may use the social account to sign in.

3. The customer is taken back to the store. If no store account is linked to this social account yet, a new customer account is created and the customer is signed in.

Extension Configuration

To configure the extension, navigate to Stores → Configuration → AHEADWORKS EXTENSIONS → Social Login. All settings can be defined per store view: switch the Scope in the top-left corner to apply different settings to different store views.

General

• Enable Social Login – enables or disables the extension output on the storefront.

Login Blocks

The Block Settings table lists all login blocks available in your store. Four default blocks are created on installation: Login, Register, Cart and Checkout. For each block, you can set:

• Block – the block name. Default block names cannot be changed.

• Visibility – Visible or Not Visible. Hidden blocks are not displayed on the storefront.

• Template – the template used to render the block buttons (Default out of the box). Developers can add custom templates (see Custom Login Block Templates).

To create a custom block, click Add, type a block name (for example, Page widget), set its visibility and template, and click Save Config. Custom blocks can be removed with the trash icon in the Action column. A custom block is displayed on the storefront only after it is added to a page with a widget (see Adding a Social Login Widget).

Social Network Settings

Each supported social network has its own settings section: X, Facebook, Google, LinkedIn, Pinterest and Paypal. All sections share the same set of options:

• Enabled – shows or hides the network button in the login blocks.

• Consumer Key (API Key) – the public key (Client ID, App ID) of the application registered with the social network.

• Consumer Secret (API Secret) – the secret key (Client Secret, App Secret) of the application.

• Sort Order – the position of the network button in the login blocks. Buttons with lower values are displayed first.
  

The Paypal section has one more option:

• Sandbox mode enabled – set to Yes when you use the credentials of a PayPal sandbox application for testing; set to No when you use live credentials.

How to get the keys for each network is described in the next section. Once done with the settings, click Save Config and refresh the cache in System → Cache Management.

Configuring Social Network Applications

To let customers sign in with a social network, register an application in the developer portal of that network and copy its keys into the extension settings. For every application, you will need to:

1. Create an account in the social network, if you do not have one yet.

2. Register an application in the developer portal of the social network.

3. Add the redirect (callback) URL of your store to the application settings.

4. Copy the application keys to the Consumer Key (API Key) and Consumer Secret (API Secret) fields in Stores → Configuration → AHEADWORKS EXTENSIONS → Social Login.

Redirect URLs

All OAuth applications require a list of valid redirect URLs. A login request is accepted only if its redirect URL is in this list and matches it exactly. For example, if https://yourstore.com/social/account/callback?provider=facebook is the only URL in the list, redirects to any other address will fail.

Use the following redirect URLs, where https://yourstore.com is the base URL of your store:

X (Twitter)

1. Create an account on X (Twitter)

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

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

2. Register X (Twitter) application

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:

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:

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:

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:

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

If you want to return a user’s email address after the user has logged on, select Request email address from users:

Note that this is optional; you can use Twitter for social login without returning the user’s email address.

Enter your callback URI in the Callback URLs field, and enter the URL of your website in the Website URL field:

If you are returning user email addresses in your social login response then you must enter the URL to your terms of service in the Terms of Service field, and the URL to your privacy policy in the Privacy policy field:

If you didn’t enable the Request email address from users setting then you can leave these two fields blank.
Click Save to save your new app. 

3. Get the API Key and Secret

1. To retrieve this information, click Keys and tokens:

    2. On the Consumer Keys page, click the Regenerate button:

     3. In the dialog box, click the Copy button located to the right of your API key and then paste the copied API key into a secure location (such as a password management program). Repeat this process to copy the API key secret:

    4. When done, click Yes, I saved them to dismiss the dialog box. At that point, you can log off from the Twitter Developer Portal.

    5. Navigate to Stores > Configuration > AHEADWORKS EXTENSIONS > Social Login;

    6. 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. Register as a Facebook Developer

    2. Create an App

    3. Set-up the Facebook Login product

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

3.2 Select Web from the displayed platforms

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.

3.6  Select the Website from the list.

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

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

3.9 Navigate to Facebook Login section and press Settings.

3.10 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 OAuth Login is set to Yes, Enforce HTTPS option is enabled and check that the section "Deauthorize / Deauthorize Callback URL" is empty.

3.11 Press the Save Changes button.

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

    4. Get the API Key and Secret

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

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

Google

    1. Create an account with Google

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

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.

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.

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

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

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

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

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.

Select Web Application and enter the name for the app. 

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

 
  4. Click Create

     5. Configure Consent Screen

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.

     6. Get the API Key and Secret

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

Copy the Client Key and 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 Google configuration section.

LinkedIn

     1. Create an account on LinkedIn

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

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

Fill in all the Create an app form. 

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 'Request access' 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. 

     3. Get the API Key and Secret

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 and the /social/account/callback?provider=linkedin path right after it into the 'Authorized Redirect URLs for your app' text-box. Click on the Update button to confirm the operation.

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.

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

Pinterest

    1. Create an account on Pinterest

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

On the Pinterest Apps page, read and agree to the Developer terms and click on the Create app button.

Fill in the app's name and description and click on the Create button.

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

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.

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.

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

• Go to developer.paypal.com and log into Dashboard;

• Click Create App on the 'My apps & credentials' page;

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

Insert the return URL addresses both into the 'Sandbox' and 'Live' fields. The Return URL should be of the following type: https://yourstore.com/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.

    3. Get the API Key and Secret

• Copy the Client ID and Secret from the corresponding fields in the Sandbox API Credentials;

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

Social Login on the Storefront

When the extension is enabled, the login blocks with the buttons of all enabled social networks are displayed on the storefront according to the Login Blocks settings:

• Register – on the Create New Customer Account page;

• Login – on the Customer Login page;

• Cart – on the Shopping Cart page;

• Checkout – on the Checkout page.

The buttons follow the Sort Order set for each network.

Customer Login page:

Create New Customer Account page:

Shopping Cart page:

My Social Accounts

The extension adds the My Social Accounts section to the customer account area. The section consists of two blocks:

• Linked accounts – the social accounts linked to the store account. Customers can unlink any of them here.

• Link new accounts – buttons of the enabled social networks that are not linked yet. Clicking a button redirects the customer to the social network to confirm the link.

Once a social account is linked, the customer can sign in to the store with one click.

Adding a Social Login Widget

Besides the default positions, login blocks can be displayed anywhere on your website with the native Magento widget functionality. Before adding a widget, create a custom login block in Stores → Configuration → AHEADWORKS EXTENSIONS → Social Login → Login Blocks (see Extension Configuration). In the example below, we use the Page widget block.

Widget Layout Update

To add a widget to a page layout, follow the steps below.

Step 1

Navigate to Content → Elements → Widgets and click Add Widget. Set Type to Social Login, select the Design Theme and click Continue.

Step 2

In the Storefront Properties section, fill in the Widget Title, select the store views in Assign to Store Views and set the Sort Order (if several widgets share the same container).

Step 3

In the Layout Updates section, click Add Layout Update and define where the widget should be displayed: select the page type in Display on, the Page and the Container. In this example, the widget is displayed in the main content area of the home page.

Step 4

Go to the Widget Options tab and select the login block to be displayed in the Block field.

Step 5

Click Save and refresh the cache. The login block is now displayed in the selected position:

Adding the Widget to CMS Pages and Blocks

You can also insert a login block into the content of a CMS page or a CMS block:

1. Navigate to Content → Elements → Pages (or Blocks) and open the required page.

2. Expand the Content section and click Edit with Page Builder.

3. Drag the HTML Code or Text element to the required position and click Insert Widget.

4. Set Widget Type to Social Login, select the required login block in the Block field and click Insert Widget.

5. Save the page. The login block is now displayed in the selected position.

Custom Login Block Templates

Each login block can use its own template, which lets you change the look of the social buttons (for example, their size or layout) for a particular block. Adding a template requires a developer:

1. Copy the default template app/code/Aheadworks/SocialLogin/view/frontend/templates/customer/login/default.phtml and create your own one next to it, for example custom.phtml.

2. Declare the new template in di.xml: specify the path to the template file in the path argument. In additionalData, you can pass variables to be used in the template, so one template file can be reused with different configurations.

3. Add the new template to the pool of login block templates in di.xml.

4. Flush the cache. The new template becomes available in the Template column of the Login Blocks settings.

5. Select the template for the required block, save the configuration and check the block on the storefront.

Managing Social Accounts

All social accounts used to sign in to the store are listed in Customers → Social Login by Aheadworks → Social Accounts.

The grid displays the following information:

• ID – the social account ID;

• First Name, Last Name, Email – the customer details received from the social network;

• Type – the social network;

• Social Id – the account ID in the social network;

• Created – the date when the account was linked;

• Last Signed – the date of the last login with this account.

Use Filters, Columns and Export to work with the grid. Social accounts linked to a customer are also displayed in the customer profile in Customers → All Customers.

Integrations

Social Login works together with the following Aheadworks extensions:

• One Step Checkout – customers can sign in with a social network right on the checkout page (One Step Checkout v2.1.0 or newer).

• Popup Pro – social login buttons are displayed in the login pop-up.

Product Page