Самое прекрасное — это когда нужна поддержка сайта, а ты сидишь с телефоном
в руке и ЗНАЕШЬ, чей номер набрать! т. +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 по следующей ссылке. На момент написания...

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

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

    • Расширения Joomla! Общие сведения

      Расширения Joomla! Общие сведенияВ первой статье о Joomla говорилось о том, что с её помощью можно сделать: и простой сайт-визитку, и интернет-магазин, и блог, и сайт социальной сети. Это достигается за счет использования тысяч различных расширений: компонентов, модулей, плагинов, шаблонов, написанных для Joomla....

    • Карта сайта в Joomla 2.5

      Карта сайта в Joomla 2.5В этой статье мы поговорим о карте сайта, а точнее о том, как создать карту сайта на Joomla в форматах HTML и XML. Карта сайта в формате HTML представляет собой страницу со ссылками на материалы сайта. Она помогает посетителям определиться с нужными им...

    • Установка Apache, MySQL, PHP

      Установка Apache, MySQL, PHPВ этой статье будет рассмотрено создание простейшего локального хостинга, для работы с сайтами под управлением Joomla 2.5 в домашних условиях. Описывается процесс установки на компьютер под управлением Windows 7 32-битной архитектуры. Для организации локального хостинга нам...

    • Яндекс карта и карта Гугл в Joomla 2.5

      Яндекс карта и карта Гугл в Joomla 2.5В разделе «Контакты» многих сайтов присутствует карта или схема проезда до нужного объекта. Зачастую, карты присутствуют не только в контактах и не только в единичном количестве. Раньше роль карт играли статические изображения этих самых...