Авторизация на сайте с помощью HybridAuth. Часть 3.

Начинаем первую официальную часть нашего курса. В данном уроке мы с вами затронем авторизацию на нашем будущем интернет-сервисе с помощью социальных сетей: Facebook, VK и Одноклассники.

Настройка групп пользователей.

У нас с вами будет одна группа пользователей для фронтенда сайта и нам необходимо ее создать. Для этого переходим в раздел “Контроль доступа” и создаем группу пользователей “users”. Также я еще ставлю галочку на создание параллельной группы ресурсов, чтобы у нас была возможность скрыть анонимным пользователям функциональность нашего сайта.

Теперь нам нужно кликнуть правой кнопкой мыши по вновь созданной группе пользователей и перейти в ее редактирование. Нам интересна вкладка “Права доступа”. Там, где у нас с вами доступ к контекстам, у контекста “web” необходимо установить политику доступа “Load, List and View”.

Аналогично нам нужно сделать с группой ресурсов “users”, для этого перейдите на вкладку “Доступ к группам ресурсов”.

После всех выполненных действий не забудьте кликнуть по кнопке “Сохранить”. Далее снова переходим в раздел “Контроль доступа”, но в этот раз нам необходимо отредактировать группу пользователей “аноним”, так как MODx по умолчанию не верно устанавливает права. Нас интересует вкладка “Доступ к группам ресурсов” и нам нужно выставить доступ к группе ресурсов “users” в “Load Only”.

Снова не забудьте нажать кнопку “Сохранить”. Итак, мы с вами выставили наши права, теперь можем перейти непосредственно к настройке фронтенда. В прошлых уроках я не натягивал шаблон, но сейчас нам придется это сделать. Натянем все шаблоны на MODx, надеюсь вы помните, как это сделать, а кто не помнит можете посмотреть как мы это делали в курсе “разработка интернет-магазина на MODx Revo”. Вкратце расскажу, как это сделал я:

1. Разместил файлы в директорию “assets/templates/pesok/”.
2. Разбил шаблоны на чанки (пока 2 штуки “meta” и “scripts”), изменив, конечно пути к файлам.
3. Создал 2 ресурса: “главная страница” и “сервис” и поставил им соответствующие шаблоны.

Далее нам необходимо скрыть от анонимов наш ресурс “Сервис”. Для этого переходим в раздел “Содержимое -> Группы ресурсов” и перетаскиваем наш ресурс из правой части в левую.

Отлично! Теперь, если аноним откроет этот ресурс, его должно переадресовать на главную страницу. Вы можете это сделать с помощью режима инкогнито в браузере Google Chrome. Отлично! Мы проделали с вами большую работу, это будет базой для наших дальнейших действий. Следующим шагом будет авторизация с помощью социальной сети и компонента HybridAuth.

Авторизация на сайте с помощью HybridAuth.

Надеюсь, что вы установили компонент hybridAuth во второй части наших уроков. Поэтому перейдем сразу к делу. Содержимое окна авторизации у нас находится в модальном окне, поэтому я выделю его в отдельный чанк и назову его “helloModal”.

Теперь нам нужно создать чанк “providerTpl” с содержимым:

<li>
  <a href="[[+login_url]]&provider=[[+title]]" rel="nofollow" class="[[+provider:eq=`facebook`:then=`fb`]][[+provider:eq=`vkontakte`:then=`vk`]][[+provider:eq=`odnoklassniki`:then=`ok`]]">
	<i class="fa fa-[[+provider:eq=`facebook`:then=`facebook`]][[+provider:eq=`vkontakte`:then=`vk`]][[+provider:eq=`odnoklassniki`:then=`odnoklassniki`]]"></i>
	<span>Войти через [[+provider:eq=`facebook`:then=`FB`]][[+provider:eq=`vkontakte`:then=`VK`]][[+provider:eq=`odnoklassniki`:then=`OK`]]</span>
  </a>
</li>

Данный чанк будет отвечать за провайдеров авторизации. Теперь нам нужно вывести наших провайдеров в модальном окне, чанке “helloModal”, который примет следующий вид:

<div class="modal fade" id="hello" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">                   
                <h1>Привет!)</h1>                    
                <p>На первый взгляд, это сайт знакомств, но на самом деле это не совсем так.</p>
                <p>Данный ресурс - это скорее площадка/каталог/база данных, где размещены реальные и при этом свободные люди.</p>                   
                <p>Само общение происходит в социальных сетях.</p>
                <p class="meta">
                    <a href="#">FAQ</a>
                    <a href="#">Пользовательское соглашение</a>
                </p>
                <ul class="socials">
                    [[!HybridAuth?
            		  &providers=`Facebook,Vkontakte,Odnoklassniki`
            		  &groups=`users:1`
            		  &providerTpl=`providerTpl`
            		  &loginResourceId=`2`
            		 ]]
                </ul>
            </div>
        </div>
    </div>
</div>

Разберем параметры сниппета HybridAuth:

• Providers – это провайдеры авторизации
• Groups – это группы, в которых добавлять пользователей приавторизации. Конструкция “users:1” означает, что мы добавляем пользователя в группу “users” с ролью “member”.
• providerTpl – это чанк, который отвечает за шаблон вывода провайдеров.
• loginResourceId – идентификатор ресурса, куда будет переадресован пользователь после авторизации.

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

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

Для того, чтобы создать приложение в Facebook, необходимо перейти по ссылке. И нажать кнопку “Добавить новое приложение”.

В открывшемся модальном окне заполните имя приложения и e-mail для связи и нажмите кнопку “Создать ID приложения”.

Также нам необходимо создать две текстовые страницы:

• Пользовательское соглашение
• Политика конфиденциальности

Без этих двух формальностей особо не разгуляешься, поэтому обязательно нужно их создать и указать ссылки на них в разделе “Настройки -> Основные”.

Также укажите пространство имен, я указал “ptestyoutube” и домены приложения, собственно, домен вашего сайта. Также при сохранении я обнаружил, что обязательно нужен SSL-сертификат для сайта. На хостинге, например, timeweb, это достаточно легко сделать, так как у нас есть бесплатный сертификат “Let’s Encrypt”. У себя на сервере я его получил и данные сохранились. ОБЯЗАТЕЛЬНО! Получите SSL-сертификат.

Далее внизу страницы нажмите кнопку “Добавить платформу” и выберите “веб-сайт” и введите URL-адрес вашего сайта.

Теперь вы можете изменить статус вашего приложения на “Вкл.”, кликнув на переключатель в шапке сайта. Также нам необходимо вбить URI для переадресации в разделе “Вход через Facebook”

И теперь нам нужны наши данные, это ID и Secret, чтобы авторизация через Facebook заработала.

Вбиваем наши актуальные данные в настройках системы на сайте в разделе HybridAuth, вместо цифр 12345.

Теперь можно попробовать авторизоваться с помощью Facebook на нашем сайте. Я делаю эти операции из режима инкогнито либо из другого браузера. Самое главное, чтобы в браузере, в котором вы проверяете работоспособность подобных вещей не было открытой сессии в панели администратора на сайте. Иначе проверка не увенчается успехом.

Но наша попытка все же не увенчалась успехом из-за смены API Facebook, поэтому нам нужно подправить данные, которые мы хотим получить от социальной сети. Для этого нам нужно поправить в файле “/core/components/hybridauth/vendor/hybridauth/hybridauth/hybridauth/Hybrid/Providers /Facebook.php” строку 26 на такую:

public $scope = ['email'];

Проверяем авторизация снова. И УРА!!! Все заработало!

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

С настройкой сети Вконтакте должно быть все проще поэтому поехали! Для начала переходим по ссылке. И заполняем название приложения, указываем веб-сайт и заполняем домены и URL.

Нажимаем “Подключить сайт” и подтверждаем все с помощью СМС-кода. Дальше переходим в раздел настройки и переносим реквизиты нашего приложения в системные настройки аналогично Facebook. Теперь попробуем пройти авторизацию в режиме инкогнито. Также система нам пишет про redirect_uri.

Причина данного поведения в том, что домен у нас 3-го уровня. В видео уроке я буду настраивать все на домен 2-го уровня, чтобы не было таких сложностей. Будем считать, что VK.com у нас тоже настроен.

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

Для того, чтобы нам сделать приложение в Одноклассниках необходимо зарегистрироваться в сети и зарегистрироваться как разработчик. Далее переходим по ссылке и создаем приложение.

Необходимо написать “Имя приложения” и кликнуть по кнопке OAuth, где необходимо заполнить параметры “redirect_uri”. Далее на почту вам придет письмо с реквизитами приложения, которые необходимо вставить в настройку ha.keys.Odnoklassniki в виде:

{«id»:«123456789»,«key»:«ABCDEFGHIJKLMNOPQ»,«secret»:«ABCDEFGHIJKLMNOPQ1234A12»}

Если мы попробуем авторизоваться, то у нас все получится! Ура! Последняя социальная сеть готова. Если вам нужно настроить другие социальные сети, то смотрите как это сделать в документации. Дальше мы с вами начнем настройку личного кабинета.