Авторизация через соц сети при помощи HybridAuth

авторизация через соц сети при помощи HybridAuth MODX Revo

Данный пакет, можно скачать с репозитория 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 и Пароль.

ключи к приложению яндекса

Вконтакте

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

создание приложения в vk

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

ключи от приложения в vk

 

Гугл

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

Github

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

ключи от приложения гитхаба

Facebook

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

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

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

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

переходим в настройки HybridAuth

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

прописываем ключи провайдеров

Вызов HybridAuth

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

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

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

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

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

группа пользователей

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

Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( 1 оценка, среднее 5 из 5 )
Web-Revenue.ru
  • TESTER

    Привет как добавит другой провайдер!

    • https://web-revenue.ru Алексей

      Создать новый параметр настроек и получить ключи.

Комментарии для сайта Cackle