MODX авторизация пользователей через социальные сети при помощи HybridAuth

Дополнение HybridAuth, можно скачать с репозитория modstore.

Данный компонент хорош тем, что у него:

• Много сервисов авторизации (вернее есть все самые популярные).
• Нет зависимости от других компонентов и сервисов. Если к примеру один или несколько сервисов перестали работать (поменялись к примеру алгоритмы или просто отключены) — то всегда можно зайти через другой.
• Нет сторонних js библиотек — работает на чистом php, отсюда — есть возможность изменения внешнего вида формы входа.
• Привязывает разные учетные записи юзера к одной, а не плодит кучу.
• Есть возможность сделать регистрацию через другой компонент, например через Login.
• Поддерживает pdoTools (пожалуй самый популярный и ходовой инструмент), и синтаксис Fenom.
• Автоматически интегрируется с пакетом Office (личный кабинет).
• Простота использования — нужно только получить ключи у нужных провайдеров и прописать их в настройках.

Регистрация у провайдеров и получение ключей

Примечание! Вот так пишутся Callback URI https://site.ru/?hauth.done=Провайдер , например https://site.ru/?hauth.done=Yandex иногда вот так: https://site.ru/assets/components/hybridauth/action.php?hauth.done=Yandex

Регистрация приложений

Яндекс

• Переходим по ссылке
• Заполняем поля Название, Описание, Ссылка на сайт, Платформа — ставим Веб-сервисы, Callback URI и Права

После сохранения, копируем Id и Пароль.

Вконтакте

• Переходим по ссылке
• Пишем название, выбираем опцию Веб-сайт и заполняем Адрес сайта и Базовый домен

• Нажимаем подключить сайт, после этого переходим в настройки и копируем ID приложения и Защищенный ключ

Гугл

• Переходим по ссылке
• Нажимаем создать проект.
  
• Указываем название проекта и создаем его.
  
• Переходим в переходим в панель управления API и сервисы и нажимаем включить API (вверху должен быть указан ранее созданный проект)
  
•  Находим и включаем Contacts API и Google+ API
  
• Переходим в API и сервисы → Учетные данные и добавляете их
  
  в поле Какой API вы используете, выбираем Contacts API
  Откуда будите вызывать API выбираете Веб-браузер (JavaScript)
  После нажатия на выбрать тип учетных данных пользователя (Данные пользователя), должно выйти окошко с надписью создать запрос доступа, соглашаетесь и на открывшейся странице заполняем все данные и сохраняете.
  
• создаем Oauth клиента и копируем их ключи
  
  В общем не все скриншоты сделал и пару пунктов пропустил, может в следующий раз дополню, а пока тыкаем пока не получится в общем.

Github

• Переходим по ссылке
• Заполняем поля Application name, Homepage URL и Authorization callback URL
  
  
• Сохраняем приложение и копируем Client ID и Client Secret

Facebook

• Переходим по ссылке
• Нажимаем добавить новый ID приложения, заполняем и создаем.
  
• Вас перебросит в панель управления приложения, слева выбираете настройки — основные, проматываем в низ и нажимаем на кнопку Добавить платформу — Веб-сайт, вводим адрес и сохраняем.
  
• Снова проматываем вверх, заполняем адрес сайта и адрес страницы с политикой конфиденциальности (нужно создать на сайте — можно пустую) и включаем приложение.
  
• Сохраняем Идентификатор и секрет приложения

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

Настройки провайдеров

Идем в системные настройки (шестеренка в правом верхнем углу), выбираем HybridAuth

и прописываем все ключи, при прописывании смотрите внимательнее, так как где то secret, где, то id.

Вызов HybridAuth

[[!HybridAuth]] — Выведет все иконки соц сетей для авторизации.

Если вам нужны определенные соц сети, то их можно указать в параметре &providers, вот так.

[[!HybridAuth?
&providers=`Twitter,Vkontakte,Google`
]]

Важно. Так же желательно указать группу, куда попадает пользователь после авторизации, в противном случае он попадет в группу аноним (не сможет не чего делать на сайте). Для того чтобы пользователь попал в другую группу, нужно добавить параметр &groups, пример.

[[!HybridAuth?
&providers=`Twitter,Vkontakte,Google`
&groups=`member:3`
]]

Как создать группу для пользователей на примере тикета, я писал здесь. В следующем уроке разберем как формировать дату и время.