Social Login Social Login for Magento 2 User Guide Version 1.0 0 Social Login Table of Contents I) Introduction………………………………………………………………………………….. 2 II) Configuration……………………………………………………………………………….. 3 1. Where to find Extension…………………………………………………………………..3 2. General Settings………………………………………………………………………….. 4 3. Social Media Settings…………………………………………………………………... 12 Google………………………………………………………………………………….. 14 Facebook………………………………………………………………………………..21 LinkedIn………………………………………………………………………………….24 Amazon………………………………………………………………………………….27 III) Support……………………………………………………………………………………..29 1 Social Login I) Introduction Magento 2 Social Login is an extension that allows users to register and log in to your website within a few clicks through social networks, instead of filling register and login form many times. With this extension, store owners can get an increase of the number of registrations, improve user experience, and collect customers’ social profile information. ● Enable login and register with the most popular social media like Facebook, Google, Amazon, LinkedIn ● Display ajax popup for register and login ● Customize social login button positions ● Support 3 social login button shapes ● Redirect to custom URL after login/register 2 Social Login II) Configuration 1. Where to find Extension After installing the extension, navigate to Stores > Settings > Configuration 3 Social Login In the left panel, span MAGEZON EXTENSIONS and click Social Login. In the right section, you will see 5 tabs, including General Settings, Google, Facebook, LinkedIn, and Amazon. 2. General Settings In the General Settings tab, to turn on the extension, turn Enable Social Login to Yes. Go to the next block, there is Social Buttons Sorting that lists 4 social media buttons for you to make them displayed (Google, Facebook, Amazon, LinkedIn). You can drag & drop these icons to arrange social media buttons displayed in the frontend. 4 Social Login After that, in Add Social Login to block, choose the place where you want to show Social Login buttons. ● Login Popup: This option allows social media buttons to be shown on login and register ajax popup. 5 Social Login ● Above/ Below customer login form: This option allows social media buttons to be shown above/ below on the login page. 6 Social Login ● Above/ Below customer register form: This option allows social media buttons to be shown above/ below on the registration page. 7 Social Login ● Shopping cart page: This option allows social media buttons to be shown on the shopping cart page. 8 Social Login Then, pick the button style you want in Login Buttons Shape block. ● Round buttons ● Rectangular buttons 9 Social Login ● Square buttons Switch Enable Ajax Popup to Yes to activate Ajax popup that allows users to login or registration through that popup. If not, choose No. You also can choose Social Button Position with 4 options: Top, Bottom, Right, Left to place social media buttons on ajax popup. 10 Social Login 11 Social Login 12 Social Login Finally, you can select Redirect after Login with options Stay on the current page, Refresh the current page, To custom URL. ● Stay on the current page: Choose this option to stay on the current page. ● Refresh the current page: Choose this option to refresh the current page. 13 Social Login ● To custom URL: Choose this option if you want to redirect to the specific page. When you select this option, the Redirect URL after Login will appear. Fill in the URL of the specific page you want to direct. 14 Social Login 3. Social Media Settings There are 4 social media that admin can enable in this extension: Google, Facebook, LinkedIn, and Amazon. Turn Enabled to Yes to display these social media buttons on your site. 15 Social Login 16 Social Login ● Google Select Click here Click on New Project Fill in the Project name, Organization, and Location. Then, Create. The notification will appear. 17 Social Login To proceed with creating new credentials for Social Login extension for Magento 2, please go to APIs and Services > Credentials as shown on the screenshot below. 18 Social Login Next, press the + CREATE CREDENTIALS button. Then, a drop down appears, where you need to select the OAuth Client ID option. To start the OAuth Consent Screen configuration, please press the CONFIGURE CONSENT SCREEN. 19 Social Login Select the External option as shown on the example screenshot below. Then, click CREATE. 20 Social Login 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. 21 Social Login After you set the config as Web Application, additional fields will appear. Fill them in as required by Google, then click CREATE. 22 Social Login 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 these in the appropriate blocks in the backend. 23 Social Login ● Facebook Register as a developer and choose My Apps on the right above. After that, fill in the information. Choose Facebook Login and Create App. 24 Social Login Complete the Display Name and Contact Email for your app. After that, click the Create App ID. Then, go to the Settings > Basic tab to configure your app. 25 Social Login Fill in the App Domains, and choose your app Category. Copy the Valid Redirect URL in the backend and paste to User Data Deletion. Finally, Save Changes. To apply the configuration, change the Status from In development to Live. Insert your API Key and API Secret in the backend settings and Save the configuration. 26 Social Login ● LinkedIn Go to the Create App. 27 Social Login Fill in your Company and Application Name, Description, Website URL, your Business Email and Phone. Application logo is an important part of information. Tick on I have read and agree to these terms. Click on the Create App. 28 Social Login Go to the My Apps tab to View all apps. Select Auth to find out the information you need. Copy the Client ID and the Client Secret and paste it in the backend of the extension. Save the configuration. 29 Social Login ● Amazon Register an account. Choose to Create your Amazon Developer account. After completing the registration, go to Settings > Security Profile Fill in the Security Profile Name and Security Profile Description. Then, Save. 30 Social Login Go to Web Settings to find out Client ID and Client Secret. Copy and paste these into the backend of the extension. 31 Social Login III) Support If you have any questions or need any support, feel free to contact us via the following ways. We will get back to you within 24 hours after you submit your support request. ● Submit contact form. ● Email us at [email protected]. ● Submit a ticket. ● Contact us through Skype: [email protected]. ● Contact us via live chat on our website. 32.