Налаштування авторизації користувачів на сайті Joomla через соц. мережі

Наша взаимовыгодная связь https://banwar.org/

Останнім часом стало «модно» надавати відвідувачам сайту можливість реєстрації і авторизації, використовуючи свої облікові записи в соціальних мережах. У цьому є певна логіка - не кожен хоче проходити реєстрацію на сайті. З різних причин: довго, нудно, лінь і т. Д. І ось розумні люди подумали і придумали наступне: так як більшість користувачів Інтернету є членами хоча б однієї соціальної мережі, т. Е. Вже внесли про себе деякі дані, то для них буде зручніше реєструватися, авторізовиваться і на інших сайтах, використовуючи ці дані. Виходить свого роду майстер-пароль. У цій статті я опишу, як це реалізувати на сайті під керуванням CMS Joomla .
Скажу більше - ми це зробимо разом. Ви на своєму сайті, а я на своєму тестовому сайті - kopytairoga.aitishnik.ru. Невеликий відступ: якщо замість реєстрації на сайті вам потрібно просто розмістити кнопки соціальних мереж, то вам варто почитати статтю «Соціальні кнопки в Joomla 2.5» . А ми продовжимо.

Налаштовувати будемо компонент Social Login. На сайті розробників є докладна інструкція по налаштуванню, хоча деякі відомості застаріли. Цією статтею я постараюся доповнити інструкцію і загострити увагу на «тонких» моментах. Компонент Social Login підтримує авторизацію користувачів наступних соціальних мереж і сервісів: Facebook, Google+, В контакті, Однокласники, Twitter, LikedIn, Mail.ru, Yandex.ru, Live.com. Природно, що для настройки нам знадобляться облікові записи на цих сайтах.

На момент написання статті була доступна версія Social Login 1.6. Викачуємо інсталяційний пакет з сайту виробника або з AitishnikRu . Встановлюємо стандартно, через «Менеджер розширень». Спочатку перейдемо в «Менеджер модулів», знайдемо в списку модуль Slogin і відкриємо його для редагування. Заповнимо заголовок, наприклад «Членам профспілки», вкажемо позицію шаблону, включимо опцію «Показувати форму авторизації» і опублікуємо модуль. Тепер можна зняти з публікації стандартний Joomla модуль - «Форма входу».
Перейдемо в «Менеджер плагінів» і встановимо відбір по типу «user».

Серед відібраних плагінів буде плагін «Social Login». Він не має налаштувань, тому просто включаємо його. Змінимо тип відбору на «slogin_auth».

Отримаємо список з дев'яти плагінів авторизації, які нам належить налаштувати. Конфігурація кожного з полігонів полягає в створенні найпростішого додатка для реєстрації або авторизації через соціальну мережу, а так само в копіюванні ідентифікаційних номерів, секретних ключів і т. Д. В налаштування плагіна. В процесі настройки ми будемо бачити результат наших дій.

Отже, перший плагін - плагін авторизації через мережу «В контакте». відкриваємо наступне посилання і авторізуемся в соціальній мережі.

За посиланням потрапляємо на сторінку створення програми. Вводимо назву програми, тип - «Веб-сайт», адреса сайту і вказуємо базовий домен - це той же адреса сайту, але без протоколу. Не звертайте увагу на те, що в налаштуваннях плагіна, Base Domain написаний з протоколом (http: //), робіть як на скріншоті, тільки вказуйте свої дані. Натискаємо кнопку «Підключити сайт» і проходимо підтвердження дій за допомогою sms. Після успішного підтвердження потрапляємо на сторінку налаштувань нашого застосування. Копіюємо значення поля «ID програми:« в полі «Application Id», а значення «Захищений ключ:« в полі «Secret key». На сторінці налаштування програми натискаємо «Зберегти зміни», а так само зберігаємо зміни в плагіні і не забуваємо опублікувати його. Оновлюємо сторінку сайту і милуємося результатом.
Другий плагін - плагін авторизації через Facebook. Відкриваємо плагін для настройки і дивимося, як написаний Callback URI. У сусідній вкладці відкриваємо наступне посилання , Авторізуемся в соціальній мережі і потрапляємо на сторінку розробників додатків.

Натискаємо на кнопку «Register as a Developer» і реєструємося як розробник додатків.

На першому кроці реєстрації включаємо опцію «I accept the ...», ніж погоджуємося з політиками платформи і конфіденційності соціальної мережі Facebook.

На другому кроці проходимо перевірку телефонного номера.

На третьому кроці розповідаємо трохи про себе. На четвертому кроці отримуємо поздоровлення Facebook в зв'язку з вдалою реєстрацією в якості розробника і автоматично перенаправляти ту сторінку, з якої почалася реєстрація. Тепер замість кнопки «Register as a Developer» розташувалася кнопка «+ Створити новий додаток». Ось вона-то нам і потрібна.

У першому вікні заповнюємо тільки одне поле «App Name» - це назва нашого застосування. Продовжуємо і в наступному вікні заповнюємо капчу. Після цього нарешті відкривається вікно з основними настройками додатку.

Поля «Display Name» і «Ваша електронна пошта» вже заповнені, потрібно заповнити ще 2 поля: «App Domains» (домен (и) сайту) і «Website with Facebook Login» (адреса сайту). У верхній частині цього вікна відображаються потрібні нам дані - це App ID і App Secret. Копіюємо значення App ID в поле «App ID / API Key», а значення App Secret в поле «Secret» плагіна. На сторінці налаштування програми натискаємо «Зберегти зміни», а так само зберігаємо зміни в плагіні і не забуваємо опублікувати його. Оновлюємо сторінку сайту і перевіряємо роботу.
Третій плагін - плагін авторизації через Google+. Відкриваємо налаштування відповідного плагіна, а в сусідній вкладці авторізуемся в соціальній мережі і переходимо по наступним посиланням .

Створюємо новий проект і потрапляємо на сторінку API Access.

Створюємо так званий OAuth клієнт версії 2.0. На першому кроці заповнюємо поле «Product name» - назва програми (у мене kopytairoga.aitishnik.ru) і «Home Page URL» - URL домашньої сторінки додатка (у мене http://kopytairoga.aitishnik.ru).

На другому кроці встановлюємо перемикач «Application type» в положення «Web application». Заповнюємо поле «Your site or hostname». Звертаємо увагу на протокол - за замовчуванням https. Якщо ви не збираєтеся робити авторизацію по захищеному протоколу, а тим паче якщо він і не налаштований на сайті, то вибирайте http: //. Натискаємо на кнопку створення додатка і з відкрилася сторінки копіюємо значення полів «Client ID» і «Client seсret» в однойменні поля плагіна. Тепер в плагіні копіюємо значення «Callback URL» повертаємося на сторінку програми та в блоці «Client ID for web applications» переходимо по посиланню праворуч «Edit settings ...».

Вставляємо скопійоване значення «Callback URL» в поле «Authorized Redirect URIs» і оновлюємо інформацію. Зберігаємо зміни в плагіні і публікуємо його. Тепер можна реєструватися і авторізовиваться на сайті з обліковим записом Google+.
Четвертий плагін - плагін авторизації через Yandex. Авторізуемся в соціальній мережі і переходимо по наступним посиланням .

На сторінці, потрібно заповнити всього три поля: «Назва», «Права» і «Callback URI». З назвою все зрозуміло. Для того щоб виставити права натискаємо по посиланню Яндекс.Логін і відзначаємо потрібні опції. Callback URI копіюємо з однойменного поля, що настроюється плагіна. Після цього створюємо додаток для реєстрації та авторизації через Яндекс. З відкрилася сторінки копіюємо значення поля «Id додатки» в поле «Id», а значення поля «Пароль додатки» в поле «Password». Зберігаємо зміни в плагіні і публікуємо його. Тепер після оновлення сторінки сайту можна реєструватися і авторізовиваться з обліковим записом Yandex.

П'ятий плагін - плагін авторизації через Twitter. Налаштування цього плагіна дуже схожа на настройку попереднього. Авторізуемся в соціальній мережі і переходимо за наступним посиланням.

Заповнюємо поля, що з'явилася форми нової програми, «Callback URL» копіюємо з відповідного поля плагіна, погоджуємося з умовами Twitter і створюємо додаток. На сторінці налаштувань натискаємо кнопку «Create my access token». Копіюємо значення полів «Consumer key» та «Consumer secret» в однойменні поля плагіна, зберігаємо і публікуємо його. Оновлюємо сторінку сайту і милуємося результатом.
Шостий плагін - плагін авторизації через Mail.ru. Авторізуемся на сайті mail.ru і переходимо по наступним посиланням . На першому кроці створення додатка погоджуємося з правилами використання.

На другому кроці заповнюємо назва програми та адресу сайту. На третьому кроці викачуємо файл receiver.html і розміщуємо його в корені сайту. Увага: скачуваний файл має ім'я _receiver.html його слід перейменувати в receiver.html. На підсумковій сторінці знаходяться потрібні нам дані. Копіюємо значення поля «ID» в поле «Application Id» плагіна, а значення поля «Секретний ключ» в поле «Secret Key». Зберігаємо і публікуємо плагін і перевіряємо результат.

Сьомий плагін - плагін авторизації через Live.com. Авторізуемся в соціальній мережі і переходимо за наступним посиланням.

На першому етапі створення програми вводимо його назву і приймаємо умови використання. На другому етапі в поле «Домен перенаправлення» вводимо значення поля «Callback URL» з плагіна - це просто адреса сайту. Копіюємо значення поля «ВД клієнта» в поле «Client ID» плагіна, а значення поля «Секрет клієнта» в поле «Client secret». Зберігаємо додаток. Зберігаємо і публікуємо плагін. Оновлюємо сторінку сайту і перевіряємо результат.
Восьмий плагін - плагін авторизації через LinkedIn. Авторізуемся в соціальній мережі, переходимо по наступним посиланням і заповнюємо необхідні поля форми створення програми.

У самому низу форми відзначаємо опцію, погоджуючись з умовами використання, і створюємо новий додаток. З підсумкового вікна копіюємо значення полів «Ключ API», «Секретний ключ», «Токен OAuth користувача» і «Секрет OAuth користувача» в поля плагіна «API Key», «Secret Key», «OAuth User Token», і «OAuth User Secret »відповідно. На сторінці додатка натискаємо «Готово», зберігаємо і публікуємо плагін, оновлюємо сторінку сайту і перевіряємо реєстрацію на сайті за допомогою LikedIn.
Дев'ятий плагін - плагін авторизації через Odnoklassniki. Авторізуемся в соціальній мережі.

Спочатку реєструємося як розробник в системі JIRA.

Потім відправляємо запит на отримання OAuth доступу і чекаємо відповіді від адміністрації соціальної мережі. Через деякий час отримаємо повідомлення електронної пошти, у якому буде знаходитися посилання на створення OAuth додатки і відповідна інструкція. Входимо в соціальну мережу під своїм ім'ям. Тепер в розділі «Ігри» у нас є посилання «Мої завантажені».

За цим посиланням переходимо до додавання додатки. Створюємо так званий додаток «Поза Однокласників».

Заповнюємо всі поля і зберігаємо додаток.

Через деякий час отримуємо лист з необхідними даними. Копіюємо звідти значення «Application ID», «Публічний ключ додатки», «Секретний ключ додатки» відповідно в поля «Application ID», «Public Key», «Secret Key», що настроюється плагіна. Зберігаємо і публікуємо плагін, оновлюємо сторінку сайту і радіємо результату.
З плагінами закінчили. Можна ще увійти в сам компонент Social Login і на вкладці «Головна» пожертвувати розробникам деяку суму грошей. На вкладці «Користувачі» можна побачити користувачів, прошедщіх реєстрацію на вашому сайті за допомогою облікового запису соціальної мережі.
От і все! Вітаю вас, ви поліпшили юзабіліті вашого сайту під керуванням Joomla.

Про автора:

Мене звати Андрій Золкін . З більш, ніж п'ятнадцяти років роботи в сфері інформаційних технологій, десять років працюю з системами, що базуються на відкритому вихідному коді. На сторінках сайту Aitishnik.Ru веду блоги по CMC Joomla і Debian GNU / Linux.

Ще статті про Joomla 2.5