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».

 

Среди отобранных плагинов будет плагин «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.