Самое прекрасное — это когда нужна поддержка сайта, а ты сидишь с телефоном
в руке и ЗНАЕШЬ, чей номер набрать! т. +7 831 4637611 моб. +7 910 3820622Айтишник РУ Нижний Новгород, Симферопольская, 21
A+ A A-

Joomla авторизация через соц. сети

В последнее время стало «модно» предоставлять посетителям сайта возможность регистрации и авторизации, используя свои учетные записи в социальных сетях. В этом есть определенная логика - не каждый хочет проходить регистрацию на сайте. По разным причинам: долго, нудно, лень и т. д. И вот умные люди подумали и придумали следующее: так как большинство пользователей Интернета являются членами хотя бы одной социальной сети, т. е. уже внесли о себе некоторые данные, то для них будет удобнее регистрироваться, авторизовываться и на других сайтах, используя эти данные. Получается своего рода мастер-пароль. В этой статье я опишу, как это реализовать на сайте под управлением 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».

 Joomla. Social Login

Среди отобранных плагинов будет плагин «Social Login». Он не имеет настроек, поэтому просто включаем его. Изменим тип отбора на «slogin_auth».

Joomla Socoal Login

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

Итак, первый плагин – плагин авторизации через сеть «В контакте». Открываем следующую ссылку и авторизуемся в социальной сети.

Создание приложения В контакте

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

Создание приложения в Facebook

Нажимаем на кнопку «Register as a Developer» и регистрируемся как разработчик приложений.

Facebook регистрация в качестве разработчика

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

Facebook регистрация в качестве разработчика

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

Facebook. Регистрация в качестве разработчика

На третьем шаге рассказываем немного о себе. На четвертом шаге получаем поздравления Facebook в связи с удачной регистрацией в качестве разработчика и автоматически перенаправляемся ту страницу, с которой началась регистрация. Теперь вместо кнопки «Register as a Developer» расположилась кнопка «+ Создать новое приложение». Вот она-то нам и нужна.

Facebook. Создание приложения

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

Facebook. Создание приложения

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

Создание приложения в Google+

 Создаём новый проект и попадаем на страницу API Access.

 Проект Google+

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

Создание приложения в Google+ 

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

Создание приложения в Google+

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

Создание приложения в Яндекс

 На открывшейся странице нужно заполнить всего три поля: «Название», «Права» и «Callback URI». С названием всё понятно. Для того чтобы выставить права кликаем по ссылке Яндекс.Логин и отмечаем нужные опции. Callback URI копируем из одноименного поля, настраиваемого плагина. После этого создаем приложение для регистрации и авторизации через Яндекс. Из открывшейся страницы копируем значение поля «Id приложения» в поле «Id», а значение поля «Пароль приложения» в поле «Password». Сохраняем изменения в плагине и публикуем его. Теперь после обновления страницы сайта можно регистрироваться и авторизовываться с учетной записью Yandex.


Пятый плагин – плагин авторизации через Twitter. Настройка этого плагина очень похожа на настройку предыдущего. Авторизуемся в социальной сети и переходим по следующей ссылке.

 Создание приложения в Twitter

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

Создание приложения в Mail.ru

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

Седьмой плагин – плагин авторизации через Live.com. Авторизуемся в социальной сети и переходим по следующей ссылке.

Создание приложения в Live.com

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

Создание приложения в LikedIn

В самом низу формы отмечаем опцию, соглашаясь с условиями использования, и создаём новое приложение. Из итогового окна копируем значение полей «Ключ 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.

Не забывайте, что у нас вы можете не только купить готовый сайт, но и подобрать подходящий тариф поддержки сайта, а так же зарегистрировать домен в одной из двухсот доменных зон и выбрать недорогой тариф хостинга! У нас же вы можете заказать продвижение сайта в поисковых системах.Айтишник РУ

Об авторе:

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

 

Ещё статьи о Joomla 2.5

    • Установка и настройка phpMyAdmin

      Установка и настройка phpMyAdminУстановка phpMyAdmin написана по материалам сайта php-myadmin.ru. Рекомендую этот сайт всем, кто хочет разобраться во всех тонкостях работы с phpMyAdmin. Скачиваем файловый архив phpMyAdmin-3.4.9-all-languages.7z по следующей ссылке. На момент написания...

    • Маленький шаг в безопасность Joomla 2.5

      Маленький шаг в безопасность Joomla 2.5Как известно, всегда есть, мягко говоря, любопытные люди, так и мечтающие «поколдовать» в чужой админке. В Joomla админка, она же панель управления, располагается по адресу: http://наш_сайт/administrator/. Так вот в целях безопасности лучше поменять адрес входа в панель...

    • Вставка и подсветка кода в Joomla 2.5

      Вставка и подсветка кода в Joomla 2.5В одной из предыдущих статей («Текстовые редакторы в Joomla») я вкратце описывал использование текстовых редакторов. Возможности этих редакторов на 99% покрывают потребности пользователей Joomla. Но иногда их возможностей не хватает или лучше воспользоваться специальными расширениями. Допустим,...

    • aiContactSafe - формы обратной связи

      aiContactSafe - формы обратной связиОдной из распространенных задач для веб-мастера, является создание почтовых форм или форм обратной связи для оправки писем (сообщений) с сайта. В Joomla это можно реализовать несколькими способами, в том числе и стандартно, с помощью компонента «Контакты». Но в этой статье я расскажу о том,...

    • Резервное копирование сайта на Joomla 2.5...

      Резервное копирование сайта на Joomla 2.5...Одной из задач администрирования сайта является его постоянное резервное копирование. Конечно, многие хостеры ежедневно проводят резервное копирование клиентских сайтов, но как говорится «На Бога надейся, а сам не плошай». К тому же...

    • Навигация материалов (страниц) в Joomla 2.5...

      Навигация материалов (страниц) в Joomla 2.5...В процессе наполнения сайта информационными материалами владельцы Интернет-ресурсов начинают обращать внимание на навигацию страниц. В первую очередь это владельцы интернет-магазинов, работающих на Virtuemart, новостных порталов – тех...