WIXLIB

2. Social Login User GuideThank you for purchasing our extension. If you have any questions that are beyond the scope of this document, do not hesitate to leave us an email via support@magenest.comCreated: 11/05/2016 By: Magenest Support Portal: r/portal/30IntroductionFeatures For AdminsFeatures For CustomersSystem RequirementsConfigurationGeneral ConfigurationCredentials SettingsApple IDGoogle FacebookTwitterPinterestInstagramFront endSocial login optionsSharing on social networksComment on product using Facebook accountSocial login suggestion on checkout pageUpdateSupportIntroductionMagento 2 Social Login is an extension developed by Magenest to help customers log in toMagento 2 stores conveniently with their social accounts.Features For AdminsSet up app for each social network including Twitter, Facebook, Google, Amazon,LinkedIn, Pinterest, Instagram, Reddit, LINEAdd login popup with social login optionsAdd social login options to sign in, sign up pageSet social login suggestion for the customer at checkout page for customers who usedto login with a social account on the storeAdd comment section using a Facebook account for customer on the product detailpageAdd social sharing buttons on product pageFeatures For CustomersChoose to log in with one of 10 social accounts: Twitter, Facebook, Google, Amazon,Linkedin, Pinterest, Instagram, Reddit, LINE, Apple IDShare products on their social networksUse Facebook account to comment on the Magento 2 storeBe suggested with social login at the checkout page if they used to login with a social account on the storeSystem RequirementsYour store should be running on Magento 2 Community Edition version 2.2.x., 2.3.x

ConfigurationGeneral ConfigurationFirst, navigate to Stores Configuration Magenest Social Login, you will be able to enable:The login popup when the customer clicks on the Sign In button on the top menu barThe social login options in Sign Up/Create an account pageThe social login on the checkout page, including the Sign In button on the top of the page, and the social login suggestion for customers who usedto login with social accounts on the storeThe ability to comment on the product page using Facebook accountThe ability to share the product link via social networks that are chosen in the social sharing options: Twitter, Facebook, Google , LinkedIn,Pinterest, RedditCredentials SettingsOn the same page, scroll down to see the Credentials setting section.

In order to connect the social app to your Magento 2 store, you have to set up the app as followsApple IDHow to set Apple Team ID, Client ID, Key Id and File Key of AppleTo configure the extension, it is required to have an Apple Developer account. If you don't have it, please go to the Apple Developer page to create one.Note that account creation and its approval might take so much time.Enable: Choose Yes to enable the Apple ID to log in featureEnter the Apple Team ID, Client ID, Key ID that were previously generated at the Apple Developer account.

Choose the Key(*.p8 file). You can generate a key file by doing the following:1. Create credentials in developer accountSign in to the Apple Developer Portal and click on Certificates, Identifiers and Profiles.2. Create an App IDFirst, 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 internal use, so you can name it any way you want. The best practice is to use the descriptive naming so thatyou can easily understand to which website the App ID belongs.

In the example screenshot above, the Description name is Social Login With Apple for the social24.com Bundle ID. The Bundle ID is best when it’sa reverse-dns style string.Then, scroll down the 'Capabilities' to find the 'Sign In with Apple' checkbox. Enable it by ticking the checkbox. Then, press the Continue button inthe upper-right corner. Save the App ID.

3. Create a Services IDThen, you can create a Services ID separately. The flow is similar to the App IDs creation. First, go to the Apple Developer Account, navigate tothe Certificates, Identifiers & Profiles Identifiers. Then, click the blue plus icon to create a new identifier. This time, choose the Services IDsoption, as shown in the screenshot below.

The Services ID will identify the particular instance of your app and is used as the OAuth client id.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 runningon, and the redirect URLs used during the OAuth flow.This is how 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.

Please kindly note that Apple doesn't allow the localhost URLs in this step. So if you enter an IP address like 111.0.0.1, it will fail later in the flow. Pleaseuse a real domain name here. Here you can copy the url from Redirect Uri in the Apple section of your Social Login extension.

Save the entered data by clicking on the Next Save Continue Register buttons to finalize the Services ID configuration.4. Create a Private Key for Client AuthenticationYou 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 allrequired options.

Then, click 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.

Please keep in mind that you can download the Key file ONLY ONCE. Make sure you saved the file in a secured place so that you can get back toit later if necessary.Lastly, check the key information to find your Key ID which you'll need to configure the extension in the Magento 2 backend.After a successful Key ID verification, the file will no longer be stored at your Magento server. This is to prevent creating excessive files on a server.Please take into consideration that all Apple Developer credentials that you have created will be valid for 6 months, as designed by Appleguidelines. Please timely update all necessary API credentials to guarantee proper add-on functioning.Google How to set Client ID and Client Secret of Google Go to the Google Developers Console – https://console.developers.google.com/Select an existing project, or create a new project by clicking Create Project:In the Project name field, type in a name for your new project.In the Project ID field, the console has created a project ID.Click on the Create button and the project to be created within some seconds.In the left sidebar, select APIs under the APIs & auth section.Find the Google API service and set its status to Enable.Click Create Credentials select OAuth Client ID.Create Client ID dialog box would be appearing for choosing the application type.In the Application type section of the dialog, select Web application and click on the Configure consent screen button.Choose Email address, enter the Product name, and save the form.In the Authorized JavaScript origins field, enter your app origin. If you want to allow your app to run on different protocols, domains, orsubdomains, then you can enter multiple origins.In the Authorized redirect URI field, enter the redirect URL.Click on Create.

Now you can see the Client ID for web application section. Select Client ID and Client Secret then fill in Configuration of Google in Backend ofMagento 2 store.In the backend of Magento 2, in the Google settingEnable: To enable Google login and sharing optionClient ID: Google application IDClient Secret: Google application secretRedirect URI: You will use this URL in Google to connect the appFacebook

How to set Client ID and Client Secret of FacebookGo to the https://developers.facebook.com/apps/ and login at your Facebook developer account.Click Add a New App button on the top right to create a new app ID. A popup will display as belowIn the Facebook for developers Settings, choose Basic, click on the Add Platform button, then enter your site URL.Click on the Save changes button. You will see that there are App ID and App secret, note that you will need these to configure the module in thebackend of Magento 2.

Choose Facebook Login Settings link from the left menu section at the apps page, fill in Valid OAuth Redirect URIs with the Redirect URI obtained fromMagento 2 configuration.Then you have to make your app public to everyone. On the top bar, click on Status, a pop up as below will be displayed. Confirm to make the app public.

In Magento 2 backend, Facebook settings:Enable: Choose Yes to enable Facebook social login and shareClient ID: Fill in the Facebook app ID obtained from aboveClient Secret: Fill in the Facebook app secret from aboveTwitterHow to set Client ID and Client Secret of TwitterGo to the Application Management page and login with your Twitter developer account.Follow this tutorial article to create a Twitter app plication/

In Magento 2 backend, Twitter settings:Enable: Choose Yes to enable the Twitter social login and shareClient ID: Twitter application IDClient Secret: Twitter application secret

PinterestHow to set Client ID and Client Secret of PinterestGo to https://developers.pinterest.com/ and login your Pinterest developer account.Choose App Create app button to create a new application.The new tab is open with App ID and App Secret, you must add the site URL and Redirect Uri (obtained from the Google settings in Magento backend)for the web in the Platforms section.Use the app ID and app secret to configure the module in the Magento 2 backend.

In Magento 2 backend,Enable: To enable the Pinterest login and shareClient ID: Fill in the Pinterest app ID from aboveClient Secret: Fill in the Pinterest app secret from aboveRedirect URI: Use this in Pinterest to create an application

InstagramHow to set Client ID and Client Secret of InstagramGo to https://www.instagram.com/developer/ and login at your Instagram developer account.Choose Manage Clients Register new Client ID,In this registration form, fill in the Redirect Uri (you can get this in Magento 2 configuration) in Valid redirect URIs, and remember to unselect the Disableimplicit OAuth in Security tab.

After clicking on Register button, Manage Clients tab is open, you will use the Client ID and Client Secret (in Manage) to configure the module in Magentobackend.In Magento 2 backend, go to Instagram configuration.Enable: To enable the Instagram login and shareClient ID: Instagram application IDClient Secret: Instagram application secretRedirect URI: Use this in Instagram to create application.

LinkedInHow to set Client ID and Client Secret of LinkedInGo to https://developer.linkedin.com/ and login with your LinkedIn developer account.Choose My Apps Create Application

After filling in the necessary information and submit the form, an Authentication tab will be displayed. In the Default Application Permissions, add theRedirect URI obtained from Magento 2 configuration. Then click on Update.

In Magento 2 backend, go to LinkedIn configurationEnable: To enable LinkedIn login and share optionClient ID: Linkedin application IDClient Secret: Linkedin application secretRedirect URI: Use this in LinkedIn to create application.