Social login via Instagram API – module for PrestaShop

55$ Buy it now! Buy on PrestaShop.com

Uniqueness
PrestaShop 1.7 – 8.x

Objective
Enables you to log in and authenticate in PrestaShop using your Instagram account. Additionally, you can link your Instagram account to your existing PrestaShop account.

Video:
https://youtu.be/NoNNsfZkct8

Advantages for Merchants

  • streamlines users’ registration on your site;
  • boosts the conversion of registrations on the site;
  • popularizes and promotes your store on Instagram due to the simplicity of authorization;
  • growth in user base due to the simplicity of registration;
  • higher order conversion due to the swift creation of accounts on the site via Instagram.

Advantages for Customers

  • eliminates the need to input personal data and passwords;
  • swift order processing – no time wasted on new account creation;
  • no need to remember login and password for the store account – Instagram authentication is both easy and secure;
  • registration and authorization accomplished in two clicks.

Distinctive Features

  • ability to create a new store account based on Instagram authentication;
  • users can edit their profile anytime (add an email and other details);
  • possibility to link Instagram authentication to any existing store account;
  • users can unlink their Instagram from the store account.

Setting Up Instagram App by PrestaShop Store Admin

  1. Navigate to https://developers.facebook.com/products/instagram/, log in to your Facebook account if you are not already logged in. Click My Apps in the top-right corner.create instagram app - prestashop module
  2. Add a new app Create Appcreate instagram app prestashop
  3. Select Consumer and click Nextprestashop module - create instagram app
  4. Specify App Display Name for your app and App Contact Email. Select a Business Manager Account if you have one. Click Create App IDcreate instagram app prestashop module
  5. Click Set Up in the Instagram Basic Display blockcreate instagram app prestahop module
  6. Scroll down to the bottom of the page and click SettingsPrestashop module instagram app
  7. Specify Privacy Policy URL of your website. Save the same URL in the text box in the Data Deletion Callback URL which is in the User Data Deletion Select the Category that your website belongs toprestashop module create instagram app
  8. Scroll down and click on Add Platformcreate instagram app prestashop module
  9. Selectprestashop module instagram app
  10. Save the full URL (including https://) of the home page of your website in the Site URL Save changes.prestashop module instagram app
  11. Navigate to the Instagram Basic Display > Basic Display section from the menu on the leftcreate instagram app prestashop module
  12. Scroll down to the bottom and click Create New App buttonprestashop module instagram app
  13. Specify the display name of your Instagram app and click Create App buttonprestashop module instagram app
  14. Navigate to the Basic Display in the Instagram Basic Display section from the left sidebarinstagram app prestashop module
  15. Enter the following details:Valid OAuth Redirect URIs: HOME_PAGE_URL/module/instagramauth/redirect
    where: HOME_PAGE_URL is the URL of the home page of your website.Deauthorize Callback URL: URL of the home page of your website
    Data Deletion Request URL: Save the URL of the privacy policy page of your website. Click Save Changesprestashop module instagram app
  16. Click the slider button in the App Mode option and make the Instagram app Livecreate instagram app prestashop
  17. Navigate to the App Roles > Roles section and scroll down to the Instagram Testers sectionprestashop instagram app
  18. Click Add Instagram Testers and enter your Instagram account’s username and send the invitationPrestashop instagram app
  19. Login to the Instagram account you invited in the previous step in another browser tab, click the Instagram name above the profile picture. Click on the settings icon, click on Apps and websites. In the Tester Invitations section, accept the invitation you’ve sent before. You will be able to use this Instagram account only until you get the permissions approved for your Instagram app (see step 23 below).prestashop instagram appprestashop instagram app
  20. Navigate back to the browser tab where you were configuring the Instagram app. Navigate to the Basic Display page in the Instagram Basic Displaysection from the left sidebar. Copy the Instagram App ID and Instagram App Secret (after clicking on the Show button right in front of it) and paste it in the Instagram App ID and Instagram App Secret options at the module configuration page in the admin area.prestashop instagram app
  21. Scroll down to the App Review for Instagram Basic Display section at the bottom of the page and click on Add to submission right in front of the instagram_graph_user_profilePrestashop instagram app
  22. Click Edit details in front of instagram_graph_user_profile in the Current submission sectionprestashop instagram app
  23. In the option Tell us how you’re using this permission or feature, you can specify exactly the following:
    This app integrates the Instagram icon at the user-profile page of our website which allows end-users to connect their Instagram profile with their pre-existing user-account.
    NoteAs Instagram does not allow login/authentication to be used with any of their scopes according to their developer docs, you can describe the mechanism your website uses the Instagram icon in Social Account Linking section at the user profile page to allow your users to link their Instagram accounts to their existing accounts at your website. Just keep social login icons disabled at the login, register pages of your website before Instagram approves your submission.
    Upload a screenshot showing the same, agree to the data usage policy and save changes.prestashop instagram app
  24. Click Edit details in front of the App verificationinstagram app prestashop
  25. Here you can specify such details as – Login page of your website where the reviewers can log in and see the Instagram icon at the profile page, username-password of the user-account you have created for them at your website etc.prestashop instagram app

Customization Options

  1. Retrieve the Instagram App ID and Instagram App Secret, then insert them into the corresponding fields on the setup page of the module:customize instagram app settings prestashopcustomize instagram app settings prestashop
  2. Copy the links for Valid OAuth Redirect URIs and Deauthorize callback URL from the module’s configuration page and paste them into the respective fields of the Instagram application:
    Valid OAuth Redirect URIs
    Deauthorize callback URLconfigure instagram app settings prestashopconfigure instagram app settings prestashop

 

Installation Process:

  1. Upload the module via the Backoffice (Modules > Add New Module) or leverage an FTP-client
  2. Initiate the installation and input the required configurationsinstall instagram module prestashop

 

Customizing CSS Styles for the Button:

  1. Locate the style file at:

/modules/instagramauth/views/css/instauthfront.css

customize instagram module css prestashop

customize instagram module css code prestashop

Module Workflow Scenarios:
1. User’s First-time Login or Registration with Instagram:

– Upon clicking “Log in with Instagram,” the user is redirected to Instagram to confirm data consent. After confirmation, they are redirected to their user account on your website.

instagram module prestashop

instagram module prestashop

instagram module prestashop

instagram module prestashop

– A new customer account is created:

instagram module prestashop

– The user’s Instagram account is linked to the created customer account.
– If the user cancels the data transfer on the Instagram page, they return to your site and see an authorization error message.

instagram module prestashopinstagram module prestashop

2. User with Previous Instagram Registration:

– Clicking “Log in with Instagram” redirects the user to Instagram for data consent. After confirmation, they are transferred to their user account.

instagram module prestashop

instagram module prestashop

instagram module prestashop

instagram module prestashop

instagram module prestashop

3. Logged-in User:

– Users can link or unlink their Instagram account on the “Your personal information” page:

instagram module prestashop

instagram module prestashop

4. User Unlinked Instagram Account:

– If the user logs in using Instagram again, the Instagram connection to the existing customer account will be restored.
– If the user creates a new customer account using the standard method and links their Instagram account, the previous customer’s account will be deleted if it lacks an email. If the previous account has an email, both accounts will remain active.

5. Customer Account Deletion:

– Deleting a customer account in Prestoshop removes the Instagram account connection from the database.

6. Module Settings Change:

– Changing Instagram App ID or Instagram App Secret to new values results in the loss of all customer account bindings to Instagram.
– Incorrect entries or misconfigured Instagram application settings redirect users to Instagram with an error:

instagram module prestashop
instagram module prestashop

55$ Buy it now! Buy on PrestaShop.com

Leave A Comment

Your email address will not be published. Required fields are marked *

9 − one =