Select Page

Social media login app – Multivendor marketplace app for Shopify

Dipesh Singh
Published: October 28, 2022

Want to make the seller login & sign up process quick? Then here comes the featured app called 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 the multivendor admin panel >> hover on three dots >> click on feature apps.

Dashboard-Admin-1

Now, scroll down and Click on enable to pay for Social media login feature app.

Screenshot1-1

Step 2:- Configure the Social sign in for the multivendor marketplace app

Once the admin has paid for this featured app then a sub menu named “SOCIAL MEDIA CONFIGURATION is added under the configuration dropdown.

i.e. Marketplace admin panel>>Configuration>>Social media configuration

Dashboard-Admin

Click on social media login configuration and the admin have to enable the LOGIN WITH FACEBOOK and fill in their Facebook API app ID and click SAVE CHANGES.

Similarly, enable the 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. Login to your developer account of Facebook through this link – https://developers.facebook.com/
  2. Click on “Create app” button.
Annotate-a-local-image

3. Now, select the type of account and click on the “Next” button below.
Note: App type can’t be changed after you created this app.

Annotate-a-local-image1

4. After this, enter your marketplace shop name in the “display name” field, your email in-app contact email field, and Click on 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 in the social media login configuration, first you have 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 buton on the 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, enter the terms of service URL and select the category.

Annotate-a-local-image6

After the above steps then click on the Start verification button for the verification.

Annotate-a-local-image7

Scroll down to fill “Data protection officer contact information” section i.e. Name, email, Street Address, City/district, country, etc.

Annotate-a-local-image8

Now, click on “Add platform” button to select the platform of your multivendor marketplace app that you have currently and then Click “Next” & “SAVE CHANGES” buttons.

Annotate-a-local-image9
image7

7. Now, some permission is needed for email and the public_profile.
Go to App review >> Permissions & features >> click the “Get advanced access” button in front of the Email and public_profile.

Annotate-a-local-image10
Annotate-a-local-image11

8. Now, the final steps to make App development mode live.

Go to Facebook login section >> Settings >> Enable “Login with the javascript SDK” and click “SAVE CHANGES” button below.
After this, you will see that the APP development mode is live.

Annotate-a-local-image13

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

Annotate-a-local-image14

4. How to get the API client ID and secret keys for Gmail.

  1. Log in to your Gmail developer account through this link – https://console.developers.google.com
  2. Go to your Enabled APIs & services section >> Click on the “Create Project” button.
Screenshot1-2

Now, write your project name and give the organisation location and click on “Create” button.

Annotate-a-local-image23

3. Now, Go to “OAuth consent screen” >> check your app name and user support email >> add your website URL in the Authorized domain and Click the “SAVE & CONTINUE” button.

Annotate-a-local-image15
Annotate-a-local-image16

4. Now, Go to Credential >> click on “Create Credential” >> then Click on OAuth clientID

Annotate-a-local-image17

5. After, clicking on OAuth client ID, you have to fill in your admin panel URL in the Authorized Javascript origins field and Click “SAVE” button below.

Annotate-a-local-image18

6. Again go to the OAuth consent section >> finally click on “publish app” button.

Annotate-a-local-image19

Now, you can get the client ID and secret key from the Credential section >> click on that app name and copy the Client ID and secret key. >> copy this client ID and secret in the social login configuration of the marketplace app.

Annotate-a-local-image20
Annotate-a-local-image21

As soon as you have pasted this client ID and secret in the social login configuration of the marketplace app.
Then your seller login page will look like the below:-

Annotate-a-local-image22

Need help?

If you need any kind of support, just raise a ticket at https://webkul.uvdesk.com/en/. You can also contact [email protected] to get proper assistance.

Thank You for reading this Blog!

Source: webkul.com