Social Media Login Setup (Google & Facebook)
Last updated
Last updated
Implementing Facebook & Google login on your e-commerce site is a tempting option. It not only provides a seamless experience to your customer but also allows your marketing team to gather more accurate data like verified mail address, age, gender, and so on. It is an easy way to promote your brand to a wider audience.
In order to enable social login for google, you will have to first sign up with Google Developer Console, visit the following link https://console.developers.google.com
once signed up, Select the country for the project in the pop-up and then click on Agree and Continue button.
In the next screen, you will now have to create a project by clicking on the "Create Project" button. and follow the steps in the pop-up.
2. Once project is created, select that project from drop down menu in nav-bar. Now, navigate to "OAuth Consent Screen" tab.
Select the "User Type" as "External" and click on Create button.
The next screen (Edit App Registration) is divided into 4 parts, first is the basic information about your app ( Google's Social Login App) like App information (will be visible to end user), App Domain (homepage, privacy-policy, terms of services links) and Authorised Domain. In the App information Fill in the App name, User support email (can be same as the email you registered with developer console), App logo (Note- Do not add app logo, to avoid verifcation process which could delay the publishing the integration)
in the App Domain, fill in the link as asked.
In the Authorized Domain, Fill in your store's Domain and add the developer mail (can be same as the email you registered with developer console) and the click on Save and Continue button.
In the second part i.e. Scopes, you will have to add the non-sensitive scope by clicking on the Add or Remove Scopes button.
Select the first three from the pop-up (i.e. userinfo, userProfile, and Openid). and then save it and move to next screen i.e. "Test users".
In the Test Users screen, you can add no. of users who will test the login app while its in testing phase, you may choose to add users or skip this step by clicking on Save and Continue button.
Last part of consent screen is Summary, which will give you the brief of your app, click save and continue to set up your OAuth consent screen.
Next step is, to generate OAuth Client ID and Client Secret. To do so, navigate to "Credentials" from the side bar and click on the Create Credentials tab.
Select "Oauth Client ID" from dropdown
Next, Select web application from the Application Type dropdown menu.
The above steps will generate the OAuth Client ID and Client Secret,
copy them and paste it into the platform's social login tab. (note- client id and reverse client id will be same.) and click on Save button to save the changes.
Now, if the Test users were added in developer console, they can test the app by logging in using their google credentials from the storefront, and once the the testing is done, the app now has to be changed from Testing Phase to Publishing Phase for end users. To change the status of app, head back to the project you created in google developer console and navigate to OAuth consent screen and change the Publishing status from testing to Publish by clicking on Publish button.
Now, your app will be available for end-users and they can login to your store using their accounts.
In order to enable social login for Facebook, you will have to first sign up with Facebook Developer Console, visit the following link https://developers.facebook.com/ and click on "LogIn" button from the nav-bar.
In the next screen, use your facebook credentials to login into developer console, you will then be redirected to Developer console page. Now click on Get Started button.
Now, follow the next screens, to complete the registration for developer console.
Enter your Contact info (you can go with the mail you used to sign up with facebook) and click on confirm Email.
Now, select the role which suits you better (For e.g.- Developer) and the click on "Complete Registration" button.
In the next screen, you will have to create an App (Social login), click on Create App button.
Select the App Type as "Consumer".
Next, Provide the basic information about your app such as Display Name (Will be visible to end user), App Contact Email (can be same as your primary email) and Business Account (optional) and click on Create App button.
Now, from the Developer Dashboard screen, Add the Product (i.e Facebook Login) to your app by clicking on "Set Up" button.
In the next screen (Quickstart), select the platform for this app (i.e. Website (www)).
Now, enter your site url and click on save and then continue.
Now navigate to Settings in Facebook Login tab and make the changes as follows- First enter the "Valid Oauth Redirect URI" (homepage url), your store domain, and switch to "yes" in "login with javascript SDK". Then Click on Save Changes button.
Now Go to "Basic" in Settings tab and add the following urls (Privacy policy, Terms of services, Data Deletion url (can be same as terms of services)) and app domain. Also select the Category as Shopping and app purpose as Client.
Save the changes made.
Next, navigate to Permission and features tab in App review section. And get the Advanced access for Public Profile and Email., by clicking on the Get Advanced Access button.
Once advanced access is given, the access status will change from standard to Advanced, You may also be asked to complete the Data use Checkup, click on "get started", if prompted.
Check all the checkboxes in the next screens which is divided into two parts- 1. Data use, 2. Terms of compliance.
Once done with the above steps, copy the App id available in Nav-bar and paste into the Commerceup Platform's Social Login Tab and save the changes made.
Now push the app from Development to Live from the Developer Console.
That's it.!!!!
