For more details see how the Social Login for Magento 2 extension works.
Social Login extension significantly fastens the registration process for customers. It improves customers' shopping experience and collects consumers' social profile data.
That means that after extension installation or update to version 1.7.0 or higher, you need to update your Hybridauth. To do so, please run the following command:
composer require hybridauth/hybridauth:~3.3
After upgrade to 1.7.0 version, you'll see the setting option Use New Redirect URI in Configuration → Social Login → General Settings. If you used previous Social apps configurations, the Use New Redirect URI option will be set to No by default.
If you switch this option to Yes, old Redirect Uri settings will be refreshed and you'll need to re-configure the app and insert the Redirect URLs anew, to re-connect extension to socials.
For new modules installation, the Use New Redirect Uri option is set to Yes by default. Please proceed with configuring the extension as described in the User Guide.
To install Hybridauth, you can use Composer.
Add the following entry to the composer.json file in the root of your project.
{ "require" : { "hybridauth/hybridauth" : "3.3.*" } }
Via Composer, run a command to install Hybridauth and its dependencies:
$ php composer.phar install
Composer will download the latest version of Hybridauth Library and locate it in the /vendor/ directory.
Enable Social Login - Set to Yes to enable the display of social media buttons, which allow to login via social networks.
Add Social Login to - Use multi-select to add social media login to various places on the website.
Available locations:
Login Buttons Shape - Make the Social Login Buttons catchy by specifying the shape: round, rectangular or square for 3 and more buttons enabled.
Enable AJAX popup - Set to Yes to enable the AJAX pop-up for the registration and login.
Login Button Position - Choose the place to display social login buttons.
Available positions:
Redirect after Login - Select the necessary page, where to direct customers after their social login.
When creating a new attribute, please note that you have to set the Values Required to Yes, as shown in the example below.
Also, for the attribute to display at the Registration form, in the Storefront Properties block the attribute should be allowed for displaying on the frontend. Also, include the attribute for displaying on the frontend.
Use New Redirect URI - if you updated the extension, the option will be set to No by default. If you installed the extension version 1.7.0 or higher, the option will be automatically set to Yes. Learn more in the Before Configuration - about Hybridauth section of the User Guide. Note that this setting will be applied to all social networks you use for social login.
New Redirect URL - in this field you'll see the URL of your store, that will be used for redirects after social login.
Enabled - Set to Yes to enable the display of the Google login button.
Click on the CREATE PROJECT button and configure your app settings.
Specify your project name. The project ID will be generated automatically. Google might also ask to specify an organization to attach it to a project. In this case, select an organization to which your G-suite account belongs. Then, press the CREATE button.
After successful project creation, a new message will appear on the notifications bar. Please kindly press the Select Project link in the notification.
You will be redirected to the main dashboard of the newly created project. To proceed with creating new credentials for Amasty Social Login extension for Magento 2, please go to APIs and Services → Credentials as shown on the screenshot below.
In the Credentials window, please press the + CREATE CREDENTIALS button. Then, a dropdown appears, where you need to select the OAuth Client ID option.
In case you haven't created any credentials for this project before, Google will ask you to configure a Consent Screen. It is required step, as here you can set up the extension name and other details that the client will be able to see when agreeing to use social login in your store.
To start the OAuth Consent Screen configuration, please press the CONFIGURE CONSENT SCREEN button.
In thee first step, you need to select whether the extension will be Internal or External. As the Social Login M2 extension is aimed to assist with quick customer login, please select the External option as shown on the example screenshot below. Press the CREATE button.
On the next step, you need to fill in some data on your store, for example, add App Name, Support Contact Email, App Icon, etc. For more information, please see Google's tips on the left side of this page.
After filling in all the necessary rows, press the SAVE AND CONTINUE button.
In the second step, named SCOPE, simply press SAVE AND CONTINUE button. As an OAuth Consent Screen is created in the very beginning of the project setup, there is no credentials to add to the scopes. You will create all necessary credentials few steps later, and they'll be automatically added to the scopes.
In the third step, you can add users that can access who can access your application in the test mode. To add new users, click the + NEW USERS button.
Then, a pop-up window will appear. Here, you can enter up to 100 emails of users who will be able to access the app. Press the ADD button. Then, click on the SAVE AND CONTINUE.
In the third step, you can read the summary of your configurations. Press the BACK TO DASHBOARD button.
Once you've been redirected to the project dashboard, once again go to APIs and Services → Credentials, and then select the + CREATE CREDENTIALS → OAuth Client ID. This time, you will be taken to the OAuth Client ID Creation. To proceed, please select the Web Application type.
After you set the config as Web Application, additional fields will appear. Fill them in as required by Google, then click CREATE button.
After a successful OAuth Credentials creation, a pop-up window with a Client ID and Client Secret will appear. Please copy the Client ID and Client Secret, then insert your API KEY (Client ID) and API Secret (Client Secret) in the appropriate fields in the backend and save the configuration.
This extension can also automatically import customers' gender from Google. To make that feature work, first, go to the Magento Configuration→Customers→Customer Configuration→Name and Address Options and enable corresponding Gender switch.
After you enabled Gender for customer data, go to the Google Cloud and edit your API settings. In the Scopes for Google APIs add the user.birthday.read and user.addresses.read, by clicking at the Add Scope button as shown below.
You can see all imported data on the All Customers grid, which you can find at the backend via going to the Customers → All Customers. Also, it will be displayed at each customer's account page.
Enabled - Set to Yes to enable the display of the Facebook login button.
Register as a developer and choose Add New App in the My Apps drop-down.
Choose Facebook Login among the products available for adding.
Specify the Display Name and Contact Email for your app. After that, click the Create App ID button.
Then, go to the Settings → Basic tab to configure your app.
The App ID and App Secret will be generated automatically. Fill in the App Domains field and choose your app Category.
Click on the Add Platform button to choose the platform for your social apps.
After clicking on the Add Platform button you’ll see the grid with various platform types. Please select Web.
After specifying the platform type, insert your website URL here and click on the Save Changes button.
Enable the Client OAuth Login and fill in the Valid OAuth redirect URIs on the Facebook Login → Settings tab.
To apply the configuration, change the Status from In development to Live.
Insert your API Key and API Secret in general extension settings and Save the configuration.
You can import users' date of birth and gender from Facebook. With the date of birth, you can automatically verify customers' age.
To make that feature work, first, go to the Magento Configuration→Customers→Customer Configuration→Name and Address Options and enable corresponding Show Date of Birth and Gender switches.
After that, go to the Facebook Developers application dashboard, which you created before. Click on the App Review → Permissions and Features
On this tab, search for the user_gender and user_birthday permissions. Then submit the request of approval, according to the Facebook requirements.
All successfully approved requests will be displayed at the App Review → My Permissions tab, where you can easily manage them.
You can see all imported data on the All Customers grid, which you can find at the backend via going to the Customers → All Customers. Also, it will be displayed at each customer's account page.
In 2020, Facebook introduced Data Use Checkup to safeguard data and respect people’s privacy when using the Facebook platform and tools.
As Facebook explains, “Through Data Use Checkup, developers will be asked to review the permissions they have access to and commit that their API access and data use comply with the Facebook Platform Terms and Developer Policies within 60 days or risk losing their API access.”
The once a year checkup is flexible. This means, that the exact checkup deadline is linked to the day when you created the API connection in the Facebook Developers account. So if you created several connections at various dates, the checkup deadline for them will also differ.
Facebook triggers a special reminder in the Facebook Developers account. This is an example of how the notification might look. Please remember that the dates might differ based on the API creation date.
Simply click on the Get Started button to proceed with the checkup.
First, go to the My Apps section.
Then, proceed by reading Facebook requirements and proving that you comply with them.
Lastly, click Submit.
Enabled - Set to Yes to enable the display of the Twitter login button.
Click to the Create New App button to create a new Twitter app.
Specify your App name and give a detailed description of the application in App name and Application Description fields. Then, specify your website URL in the Website URL field. In the Authorized Redirect URLs add URL from the module configuration page, depending on your redirect url setting.
Go to the Keys and tokens tab and copy the API key and the API secret key.
Specify the necessary access and additional permissions on the Permissions tab.
Insert the API key and the API secret key, obtained from the Keys and tokens tab, to the fields in the backend.
Enabled - Set to Yes to enable the display of the Instagram login button.
To configure the connection to Instagram, first, you have to adjust an app in your Facebook Developer account. Then, adjust the necessary settings for the Instagram app itself. The user manual will guide you through both steps.
First, go to My Apps → Add a New App via Facebook for developers navigation panel.
Then, click the Add a New App button and proceed filling-in the required information.
You have to enter all necessary information, as marked by Facebook. Please keep in mind that the Settings → Basic tab has to contain the mandatory info on Platform. To configure that, please scroll to the very end of the form.
Then, click the + Add Platform button and select the Website one, as shown on the screenshot below. After that, you'll be asked to enter the website URL.
For the second part of the configuration process, please click on the Products + button on the Settings page of your app.
Then, find the Instagram icon and press Add button.
After that, in the Instagram → Basic Display tab you can configure the necessary credentials to connect your application to Social Login module for quick login. Use the Instagram App ID as Consumer Key (API Key) and Instagram App Secret as Consumer Secret (API Secret) in Instagram configs block in Social Login settings.
In development mode, customers will be unable to login to your website using their Instagram account.
Note that, you can test the Instagram API connection with test user accounts.
Enabled - Set to Yes to enable the display of the LinkedIn login button.
Go to the My Apps and click on the Create Application.
Specify your Company and Application Name, Description, Website URL, your Business Email and Phone. Don’t forget to set an Application logo.
Click on the Submit button.
From the Dashboard page go to the My Apps tab to see the created application.
Click on the application to find out the information needed.
Copy the Client ID and the Client Secret and paste it in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the module settings. Save the configuration.
Enabled - Set to Yes to enable the display of the Amazon login button.
Click on the Register new application. In the application form add the following information about your product:
Name - specify the name that will be displayed when the customers agree to share personal information with your product.
Description - this tab differentiates Logins with Amazon Applications. The users don’t see the description.
Privacy Notice URL - fill in the link to the privacy policy of your company. The users will see this link on the login screen.
Logo Image - To provide the sign-in screen with a special logo, download an image of the following extensions: JPEG, PNG, GIF.
Hit the Save button.
Look at the example of the registration form:
Expand the Web Settings tab.
The values for Client ID and Client Secret will be generated automatically. Click the Show Secret button to reveal and copy it. In Allowed JavaScript Origins and Allowed Return URLs specify the information that is given in the settings of the module.
Copy the Client ID and the Client Secret and paste it in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the module settings. Save the configuration.
Enabled - Set to Yes to enable the display of the Paypal login button.
Register as a developer and click Create App in the REST API apps.
Specify App Name and your Sandbox developer account. Then hit the Create App button.
To see Live App Settings click Live button above all the tabs.
Find Live Return URL in the Valid Callback URL tab on the module general setting page. Copy it and paste here.
Approve your app following this guide.
After the successful identification, you will see a tick near Email address.
The values for Client ID and Client Secret will be generated automatically.
Copy the information and fill in Consumer Key (API Key) and Consumer Secret (API Secret) tabs in the module settings. Save the configuration.
Enabled - Set to Yes to enable the display of the Twitch login button.
Click on the Register Your Application button to authorize login with Twitch account.
Fill in all fields. The data for OAuth Redirect URL is the Valid Callback URL from the backend. Click the Create button to proceed.
After you created an extension, click on the Manage button.
Copy your API KEY (Client ID) and API Secret (Client Secret) in the appropriate fields in the backend and save the configuration.
To have a better understanding of your customer base with intuitive UI, chart and table, go to Customers → All customers.
Easily analyze data while monitoring the number of customers, purchased items and revenue by social login.
Use a handy Social Login Chart to better target strategy through audience segmentation.
Monitor all your customers in one place and track them by the following data: name. email, login type, phone, zip, country, state/province and registration date.
You can easily find any customer in one click by filling in a keyword in the Search tab.
You can perform mass actions right in the grid. Tick needed customers and then choose the Action from the dropdown menu to apply:
The extension allows to download the list of your customers with the detailed data. Just click the Export and get the file.
You can also Add New Customer right from the admin panel.
Hit the Add New Customer button and specify the account information.
Please specify a customer name and email, then associate it with the website and customer group to send welcome email form.
To add the address, expand the Addresses tab.
Here you can specify default billing or shipping addresses for a related customer.
After adding necessary information hit the Save Customer button.
Comfort your customers with an accessible AJAX pop-up that offers one-click login and registration. Set the Social Login bar position: below, above and in the header of any page. Use color and style configuration to match your brand style.
Keep customers from abandoning the checkout with handy password restore pop-up. It appears when a customer clicks on the “Forget Your Password” text button on the login pop-up. No more redirecting - the customer will remain on the same page during the whole password restoring process.
Customize social buttons design to fit your original style. Choose the buttons’ shape according to your preferences:
With this extension, you can enable log-in via Apple ID on your website.
To configure the module, navigate to the Apple ID section of Social Login.
Set the Enabled to Yes to allow logging in via Apple ID.
Enter the Apple Team ID, Client ID, Key ID that were previously generated at the Apple Developer account.
To find the Apple Team ID, please go to your Apple Developer Account, Membership tab. The ID will be located as shown in the screenshot below.
Choose the Key(*.p8 file). You can obtain it when creating the Private Key for Client Authentication at the Developer account.
Define the Valid Redirect URI - the page on your website to which user will be redirected after a successful authorisation.
Set the Sort Order to decide in which order the 'Login with Apple ID' button will be displayed.
Sign in to the Apple Developer Portal and click on Certificates, Identifiers and Profiles.
First, you will need to create an App ID. In the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Identifiers. Then, click the blue plus icon.
On the next page, enter the description and Bundle ID for the AppID.
Please note that description is more for the internal use, so you can name it any way you want. The best practice is to use the descriptive naming so that you can easily understand to which website the App ID belongs.
Then, scroll down the 'Capabilities' to find the 'Sign In with Apple' checkbox. Enable it by ticking the checkbox. Then, press the Continue button in the upper-right corner. Save the App ID.
Then, separately create the Services ID. The flow is similar to the App IDs creation. First, go to the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Identifiers. Then, click the blue plus icon to create a new identifier. This time, choose the Services IDs option, as shown in the screenshot below.
client_id
.
In the next step, please enter the Description that the user will see during the login flow and the Identifier which becomes the OAuth client_id
. similarly, check the Sign In with Apple checkbox.
Then, click on the Configure button next to the Sign In with Apple checkbox. This is the stage where you define the domain your app is running on, and the redirect URLs used during the OAuth flow.
This is the way the configuration pop-up will look like. Make sure that the App ID you created on the previous step is chosen as the Primary App ID. If this is the first App ID you’ve made that uses Sign In with Apple, most likely it will already be selected.
localhost
URLs in this step. So if you enter an IP address like 111.0.0.1
, it will fail later in the flow. Please use a real domain name here.
Save the entered data by clicking on the Next → Save → Continue → Register buttons to finalize the Services ID configuration.
Third, you will need to create Key ID. In the Apple Developer Account, navigate to the Certificates, Identifiers & Profiles > Keys. Then, click the blue plus icon.
Enter the key name, similarly to the example on the screenshot below. Remember to tick the Sign In with Apple checkbox and configure all required options.
Then, press Continue. In the next step, link the Primary App ID in the dropdown to the App ID you created earlier.
Press the Save → Register buttons in order to proceed with the successful configuration.
After a successful key configuration, Apple will generate a new private key for you. You will be offered to download the Key file in the '*.p8' format.
Lastly, check the key information to find your Key ID which you'll need to configure the extension in the Magento 2 backend.
Download and save the Key file. Then, upload in it the Apple ID configurations.
This is an example of the Login via Apple ID button on the frontend.
With a ready-made PWA solution, you can provide shoppers with a smooth user experience on mobile. Provide shoppers with an intuitive way to log in with social networks on any device and browser.
If the add-on is installed, then the Venia theme will display social login options as follows:
Find out how to install the Social Login extension via Composer.