auth_social - авторизация через соцсети

Альтернатива auth_loginza. Работает без открытия доп. окон, но для работы требуется регистрация приложений в соц. сетях.
Плагин не является самостоятельным модулем авторизации, а работает лишь, как дополнение к одному из уже работающих плагинов, например auth_basic. В данный момент поддерживается авторизация через vk, odnoklassniki, mailru, yandex, google, facebook
Установка
1. Зарегистрировать приложения в соц.сетях, по инструкции:
Аутентификация через ВКонтакте
Внимание! Если при переходе по ссылке авторизации, которую генериует метод $vkAdapter->getAuthUrl(), в качестве ответа выводится сооб щение {"error":"invalid_request","error_description":"Security Error"}, то вам необходимо отправиться на страницу настроек вашего vk аккаунта. В разделе "Безопасность Вашей страницы" нажмите ссылку "Посмотреть историю активности". В открывшемся окне нажмите "Завершить все сеансы", для очистки vk кэша. Таким образом, возникшая проблема security_error будет устранена.
Для осуществления аутентификации через социальную сеть ВКонтакте вам необходимо предварительно создать новый проект и сконфигурировать параметры: client_id, client_secret и redirect_uri:
Шаг 1. Создание нового приложения:
название: "SocialAuther Test"
тип: "Веб-сайт"
Шаг 2. Настройка секции "Open API":
адрес сайта: http://sitename.ru/plugin/auth_social/?provider=vk
базовый домен: "sitename.ru"
Шаг 3. Конфигурация параметров client_id, client_secret и redirect_uri:
client_id - содержится в опции "ID приложения".
Пример: 3078654
client_secret - содержится в опции "Защищенный ключ".
Пример: zrCHcmKAcBvblSUIBIwu
redirect_uri - содержится в опции "Адрес сайта" - http://sitename.ru/plugin/auth_social/?provider=vk

Аутентификация через Одноклассники
Для осуществления аутентификации через социальную сеть Одноклассники вам необходимо предварительно создать новый проект и сконфигурировать параметры: client_id, client_secret, redirect_uri, public_key:
Шаг 1. Создание нового приложения:
Шаг 2. Настройка приложения:
название: "SocialAuther Test"
shortname: SocialAuther_Test
ссылка на приложение: http://sitename.ru/plugin/auth_social/?provider=odnoklassniki
"Ссылка на картинку" и "Ссылка на аватарку": ссылка на любое изображение
redirect_uri - ссылка на приложение.
Пример: http://sitename.ru/plugin/auth_social/?provider=odnoklassniki
Шаг 3. Конфигурация параметров client_id, client_secret, redirect_uri, public_key. Всю нужную информацию вы найдёте в письме, которое было отправлено на вашу электронную почту после успешного добавления приложения:
client_id - Application ID. Пример: 658606315
client_secret - секретный ключ приложения. Пример: C35045020A8C7C066F25C4C7
public_key - публичный ключ приложения. Пример: BAMKABABACADCBBAB

Аутентификация через Mail.ru
Шаг 1. Создание нового приложения:
соглашаемся с правилами
название: "SocialAuther Test"
адрес главной страницы: http://sitename.ru/plugin/auth_social/?provider=mailru
Шаг 2. Настройка приложения:
скачиваем предложенный файл receiver.html и помещаем в папку проекта
для установки на локальный сервер, нажимаем "Пропустить"
Шаг 3. Конфигурация параметров client_id, client_secret, redirect_uri:
client_id - ID.
Пример: 670707
client_secret - секретный ключ.
Пример: a619062972f2073ded61405b8f8eccd2
redirect_uri - адрес главной страницы.
Пример: http://sitename.ru/plugin/auth_social/?provider=mailru

Аутентификация через Yandex
Шаг 1. Создание нового приложения:
Шаг 2. Настройка приложения:
Название: "SocialAuther Test"
Права: "Яндекс.Логин - Адрес электронной почты; Дата рождения; Имя пользователя, ФИО, пол"
Callback URI: http://sitename.ru/plugin/auth_social/?provider=yandex
Шаг 3. Конфигурация параметров client_id, client_secret, redirect_uri:
client_id - Id приложения.
Пример: bff0bfcaef054ab66c0538b39e0a86cf
client_secret - Пароль приложения.
Пример: 219ba88d386b114b9c6abef7eab4e8e4
redirect_uri - Callback URI.
Пример: http://sitename.ru/plugin/auth_social/?provider=yandex

Аутентификация через Google
Шаг 1. Создание нового приложения:
в меню выбираем "Enable and manage APIs"
нажимаем на кнопку "Credentials"
там появляется окошко в окошке жмем New Credentials
В списке выбираем OAuth client ID
далее появляется

Цитата:
To create an OAuth client ID, you must first set a product name on the consent screen
Configure consent screen

http://sitename.ru/plugin/auth_social/?provider=vk
http://sitename.ru/plugin/auth_social/?provider=odnoklassniki
http://sitename.ru/plugin/auth_social/?provider=mailru
http://sitename.ru/plugin/auth_social/?provider=yandex
http://sitename.ru/plugin/auth_social/?provider=google
http://sitename.ru/plugin/auth_social/?provider=facebook
http://sitename.ru/plugin/auth_social/?provider=twitter
http://sitename.ru/plugin/auth_social/?provider=steam

<a href="{{p.auth_social.vk.authUrl}}">{{p.auth_social.vk.title}}</a>
<a href="{{p.auth_social.odnoklassniki.authUrl}}">{{p.auth_social.odnoklassniki.title}}</a>
<a href="{{p.auth_social.mailru.authUrl}}">{{p.auth_social.mailru.title}}</a>
<a href="{{p.auth_social.yandex.authUrl}}">{{p.auth_social.yandex.title}}</a>
<a href="{{p.auth_social.google.authUrl}}">{{p.auth_social.google.title}}</a>
<a href="{{p.auth_social.facebook.authUrl}}">{{p.auth_social.facebook.title}}</a>
<a href="{{p.auth_social.twitter.authUrl}}">{{p.auth_social.twitter.title}}</a>
<a href="{{p.auth_social.steam.authUrl}}">{{p.auth_social.steam.title}}</a>

{{ userRec.provider }} - тип. соц. сети.
{{ userRec.social_page }} - ссылка на профиль с социальной сети.
{{ userRec.sex }} - пол пользователя.
{{ userRec.birthday }} - дата рождения пользователя.

{% if (userRec.provider) and (userRec.social_page) %}
    <tr>
        <td>Профиль соцсети:</td>
        <td class="second">{{ userRec.social_page }}</td>
    </tr>
{% endif %}
{% if (userRec.provider) and (userRec.sex) %}
    <tr>
        <td>Пол:</td>
        <td class="second">{{ userRec.sex }}</td>
    </tr>
{% endif %}
{% if (userRec.provider) and (userRec.birthday) %}
    <tr>
        <td>Дата рождения:</td>
        <td class="second">{{ userRec.birthday }}</td>
    </tr>
{% endif %}

{{ userRec.sex }} - пол пользователя.
{{ userRec.birthday }} - дата рождения пользователя.

<div class="label label-table">
    <label>Пол:</label>
    <input type="text" name="editsex" value="{{ userRec.sex }}" class="input" />
</div>
<div class="label label-table">
    <label>Дата рождения:</label>
    <input type="text" name="editbirthday" value="{{ userRec.birthday }}" class="input" />
</div>

Можешь почитать и вот эту статейку "Прелоадер с затемнением фона"