Social Media Login App – Multivendor Marketplace App for Shopify

Want to make the seller login and sign up process quick? Then here comes the featured app named social media login Through which sellers can login to their multivendor marketplace seller panel using Gmail and Facebook accounts.

Let’s understand this featured app step by step:-

Step 1:- Installation

Go to Multivendor Admin Panel >> Hover over the three dots >> Click on Feature Apps.

Now, scroll down and click on Enable Pay for Social Media Login Feature App.

screenshot1-1

Step 2:- Configure Social Sign In for Multivendor Marketplace App

Once the administrator has paid for this featured app a sub menu named “Social Media Configuration” is added under the configuration dropdown.

ie Marketplace Admin Panel >> Configuration >> Social Media Configuration

dashboard-admin

Click on social media login configuration and admin has to enable login with facebook and fill in your facebook api app id and click on save changes.

Similarly, enable Login with Gmail and fill in their Gmail API Client ID and Gmail API Secret Key. Click Save Changes.

screenshot-9

Step 3:- How to get Facebook API App ID

  1. Log in to your Facebook developer account via this link – https://developers.facebook.com/
  2. Click the “Create Application” button.
annotate-a-local-image

3. Now, select the account type and click on the “Next” button at the bottom.
Note: The app type cannot be changed after you have created this app.

annotate-a-local-image1

4. Next, enter the name of your Marketplace shop in the “Display Name” field, your email in-app contact email field and click on the Create App button.

annotate-a-local-image2

5. Now, you will be redirected to the Dashboard page of your Facebook developer account where you will see the Application ID.

But before you copy and paste the App ID into the social media login configuration, first you need to follow some steps to make the app development mode live.

annotate-a-local-image3

6. To make app development mode live, click on setup button on Facebook login section and then click on basic settings.

annotate-a-local-image4
annotate-a-local-image5

Now, fill in your admin panel URL in the App Domain field, enter the Privacy Policy URL, Terms of Service URL and select the category.

annotate-a-local-image6

After above steps click on start verification button for verification.

annotate-a-local-image7

Scroll down to fill the “Data Protection Officer Contact Information” section i.e. name, email, street address, city/district, country, etc.

annotate-a-local-image8

Now, click on the “Add Platform” button to select the platform for your Multivendor Marketplace app that you currently have and then click on the “Next” and “Save Changes” buttons.

annotate-a-local-image9
Image 7

7. Now, some permission is required E-mail And this public profile,
Go to App Review >> Permissions & Features >> Email and click the “Get Advanced Access” button in front of public_profile.

annotate-a-local-image10
annotate-a-local-image11

8. Now, the last step to make the app development mode live.

Go to Facebook login section >> Settings >> Enable “Login with JavaScript SDK” and click on “Save Changes” button at the bottom.
After this you will see that APP development mode is live.

annotate-a-local-image13

9. Finally you can paste the Facebook API App ID in the social media login configuration.

annotate-a-local-image14

4. How to get API Client ID and Secret Key for Gmail.

  1. Log in to your Gmail developer account via this link – https://console.developers.google.com
  2. Go to your Enabled APIs and Services section >> Click on “Create Project” button.
screenshot 1-2

Now, type your project name and organization location and click on “Create” button.

annotate-a-local-image23

3. Now, go to the “OAuth consent screen” >> Check your app name and user support email >> Add your website URL in the authorized domain and click on “Save & Continue” button.

annotate-a-local-image15
annotate-a-local-image16

4. Now, go to Credentials >> Click on “Create Credentials” >> Then Click on OAuth Client ID

annotate-a-local-image17

5. After clicking on OAuth Client ID, you need to fill your admin panel URL in Authorized Javascript Origins field and click on “Save” button at the bottom.

annotate-a-local-image18

6. Go to OAuth consent section again >> Finally click on “publish app” button.

annotate-a-local-image19

Now, you can get the Client ID and Secret Key from the Credentials section >> Click on that app name and copy the Client ID and Secret Key. >> Copy this Client ID and Secret to the Social Login Configuration of the Marketplace app.

annotate-a-local-image20
annotate-a-local-image21

Once you have pasted this client ID and secret into the social login configuration of the Marketplace app.
Then your seller login page will look like below:-

annotate-a-local-image22

need help?

If you need any help, just get a ticket at https://webkul.uvdesk.com/en/. you can also contact [email protected] To get proper help.

Thank you for reading this blog!

Leave a Comment