Social login via Instagram API – PrestaShop модуль
55$
Совместимость
PrestaShop 1.7 – 8.x
Цель
Позволяет войти и авторизоваться в PrestaShop, используя учетную запись Instagram. Кроме того, вы можете подключить свою учетную запись Instagram к существующей учетной записи в PrestaShop.
Преимущества для торговцев
- упрощает регистрацию пользователей на вашем сайте;
- повышает конверсию регистраций на сайте;
- популяризировать и продвигать свой магазин в Instagram за счет простоты авторизации;
- рост базы пользователей за счет простоты регистрации;
- более высокая конверсия заказов за счет быстрого создания аккаунта на сайте через Instagram.
Преимущества для клиентов
- нет необходимости вводить личные данные и пароли;
- быстрое оформление заказов – не нужно тратить время на создание новой учетной записи;
- нет необходимости запоминать логин и пароль к аккаунту в магазине – авторизация в Instagram максимально проста и надежна;
- регистрация и авторизация осуществляются в два клика.
Функции
- возможность создать новую учетную запись магазина на основе аутентификации Instagram;
- пользователь может редактировать профиль в любое время (добавить адрес электронной почты и остальные детали);
- к любой существующей учетной записи магазина можно подключить аутентификацию Instagram;
- пользователь может отвязать свой Instagram от учетной записи магазина.
Настройка приложения Instagram администратором магазина PrestaShop
- Перейдите по адресу https://developers.facebook.com/products/instagram/, войдите в свою учетную запись Facebook, если вы еще не вошли в нее. Нажмите My Apps в правом верхнем углу.
- Добавить новое приложение Create App
- Выберите Consumer и нажмите Next
- Укажите App Display Name для вашего приложения и App Contact Email приложения. Выберите учетную запись Business Manager, если она у вас есть. Нажмите Create App ID
- Нажмите Set Up в блоке Instagram Basic Display
- Прокрутите страницу вниз и нажмите Settings
- Укажите Privacy Policy URL вашего сайта. Сохраните тот же URL-адрес в текстовом поле Data Deletion Callback URL, который находится в User Data Deletion. Выберите Category, к которой принадлежит ваш веб-сайт.
- Прокрутите вниз и нажмите на Add Platform
- Выбрать
- Сохраните полный URL-адрес (включая https://) домашней страницы вашего веб-сайта в Site URL. Сохранить изменения.
- Перейдите в раздел Instagram Basic Display > Basic Display в меню слева.
- Прокрутите вниз и нажмите Create New App
- Укажите отображаемое имя вашего приложения Instagram и нажмите Create App
- Перейдите к Basic Display в разделе Instagram Basic Display на левой боковой панели.
- Введите следующие данные:Valid OAuth Redirect URIs: HOME_PAGE_URL/module/instagramauth/redirect
где: HOME_PAGE_URL – адрес главной страницы вашего веб-сайта.Deauthorize Callback URL: URL главной страницы вашего сайта
Data Deletion Request URL: Сохранить URL-адрес страницы политики конфиденциальности вашего сайта.Нажмите Save Changes
- Нажмите ползунок в разделе App Mode и активируйте Live приложение Instagram.
- Перейдите к разделу App Roles > Roles и прокрутите вниз до раздела Instagram Testers.
- Нажмите Add Instagram Testers, введите имя пользователя своего аккаунта Instagram и отправьте приглашение.
- Войдите в учетную запись Instagram, которую вы создали на предыдущем шаге, на другой вкладке браузера, щелкните имя Instagram над изображением профиля. Нажмите на значок настроек, выберите Apps and websites. В разделе Tester Invitations примите отправленное ранее приглашение. Вы сможете использовать эту учетную запись Instagram только до тех пор, пока не получите одобренные разрешения для своего приложения Instagram (см. шаг 23 ниже).
- Вернитесь на вкладку браузера, где вы настраивали приложение Instagram. Перейдите на страницу Basic Display в разделе Instagram Basic Display на левой боковой панели. Скопируйте Instagram App ID и Instagram App Secret (после нажатия кнопки Show прямо перед ним) и вставьте их в параметры Instagram App ID и Instagram App Secret на странице конфигурации модуля в области администрирования.
- Прокрутите вниз до раздела App Review for Instagram Basic Display в нижней части страницы и нажмите Add to submission прямо перед instagram_graph_user_profile.
- Нажмите Edit details перед instagram_graph_user_profile в разделе Current submission
- В параметре Tell us how you’re using this permission or feature, вы можете точно указать следующее:
This app integrates the Instagram icon at the user-profile page of our website which allows end-user to connect their Instagram profile with their pre-existing user-account.
Примечание. Поскольку Instagram не разрешает использовать вход/аутентификацию ни в одной из своих областей в соответствии с документацией для разработчиков, вы можете описать механизм, с помощью которого ваш веб-сайт использует значок Instagram, в разделе «Связывание социальной учетной записи» на странице профиля пользователя, чтобы разрешить вашим пользователям связываться их учетные записи Instagram к их существующим учетным записям на вашем веб-сайте. Просто отключите значки входа в социальные сети при входе в систему, зарегистрируйте страницы своего веб-сайта до того, как Instagram одобрит вашу заявку.
Загрузите скриншот, показывающий то же самое, примите политику использования данных и save changes.
- Нажмите Edit details перед App verification.
- Здесь вы можете указать такие данные, как — страница входа на ваш сайт, где рецензенты могут войти и увидеть значок Instagram на странице профиля, логин-пароль учетной записи, которую вы создали для них на своем сайте и т. д.
Настройки модуля
- Скопируйте Instagram App ID, Instagram App Secret и вставьте их в соответствующие поля на странице конфигурации модуля:
- Скопируйте ссылку Valid OAuth Redirect URIs и Deauthorize callback URL со страницы конфигурации и вставьте ее в поля приложения Instagram:
Valid OAuth Redirect URIs
Deauthorize callback URL
Установка:
- Загрузить модуль через Backoffice (Modules > Add New Module) или с помощью FTP-клиента
- Нажмите Install it и введите конфигурацию
Установка стилей CSS для кнопки:
- Файл стиля находится здесь:
/modules/instagramauth/views/css/instauthfront.css
Кейсы рабочего процесса модуля:
1. Когда пользователь не авторизовался и впервые нажимает кнопку «Войти через Instagram» на странице входа или на странице регистрации:
– после нажатия на кнопку «Войти через Instagram» пользователь перенаправляется на страницу Instagram, где ему необходимо подтвердить свое согласие на отправку своих данных. После подтверждения он будет перенаправлен в свою учетную запись на вашем сайте.
– создается новая учетная запись клиента:
– затем учетная запись пользователя в Instagram привязывается к созданной учетной записи клиента.
– если пользователь отменил передачу своих данных на странице Instagram, он вернется на ваш сайт и увидит сообщение об ошибке авторизации.
2. Когда пользователь не вошел в систему, но ранее был зарегистрирован в Instagram, нажимает кнопку «Войти в Instagram» на странице входа или на странице регистрации:
– после нажатия на кнопку «Войти через Instagram» пользователь перенаправляется на страницу Instagram, где ему необходимо подтвердить свое согласие на отправку своих данных. После подтверждения он будет переведен в свою учетную запись пользователя на вашем сайте.
3. Когда пользователь авторизован:
– пользователь может отвязать или привязать свой Instagram-аккаунт в личном кабинете на странице «Ваши личные данные»:
4. Когда пользователь отвязал свой аккаунт в Instagram:
– если пользователь снова войдет в систему с помощью Instagram, связь Instagram с существующей учетной записью клиента будет восстановлена.
– если пользователь создал новую учетную запись клиента стандартным способом и привязал к ней свой аккаунт Instagram, то учетная запись предыдущего клиента будет удалена, если в ней не был указан адрес электронной почты. Если у предыдущей учетной записи есть электронная почта, она останется активной в PrestaShop, поэтому всего будет 2 учетных записи: предыдущая без подключения к Instagram и новая с подключением к Instagram.
5. При удалении учетной записи клиента:
– в случае удаления учетной записи покупателя из Prestoshop, подключение к учетной записи Instagram этого покупателя будет удалено из базы данных.
6. При изменении настроек модуля на странице конфигурации в админке:
– при изменении Instagram App ID или Instagram App Secret на другие значения все привязки аккаунтов клиентов к Instagram, сделанные ранее, будут потеряны.
– если Instagram App ID или Instagram App Secret введен неправильно или приложение Instagram не настроено должным образом, то при попытке авторизации через Instagram пользователь будет перенаправлен на страницу Instagram, где увидит ошибку:
Видео:
https://youtu.be/NoNNsfZkct8
Buy it now: