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. При зміні module settings on configuration page in admin panel:
– при зміні Instagram App ID або Instagram App Secret на інші значення всі прив’язки облікових записів клієнтів до Instagram, зроблені раніше, будуть втрачені.
– якщо Instagram App ID або Instagram App Secret введено неправильно або програма Instagram не налаштована належним чином, то при спробі авторизації через Instagram користувач буде перенаправлений на сторінку Instagram, де побачить помилку:
Відео:
https://youtu.be/NoNNsfZkct8
Buy it now: