• 1549
  • 0
  • Обсудить нана форуме
  • Уровень сложности исполнения: это делается простым копированием и нажиманием кнопки
  • Демо:

Альтернатива 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
жмем Configure consent screen
Шаг 2. Настройка приложения:
API Access: "SocialAuther Test"
Нажимаем Next
Application Type: "Web application"
Your site or hostname: localhost/google-auth
Нажимаем Create client ID
Шаг 3. Конфигурация параметров client_id, client_secret, redirect_uri:
client_id - Id приложения.
Пример: 333739311538.apps.googleusercontent.com
client_secret - Пароль приложения.
Пример: lZB3aW8UG8gDj6WVIEIcidt5
redirect_uri - Callback URI.
Пример: https://ngcmshak.ru/plugin/auth_social/?provider=google

Аутентификация через Facebook
Шаг 1. Создание нового приложения:
Нажимаем на кнопку "+ Создать новое приложение"
App Name: "SocialAuther Test"
Нажимаем "Продолжить"
Шаг 2. Настройка приложения:
Нажимаем "Website with Facebook Login"
Вводим Site URL: http://sitename.ru/plugin/auth_social/?provider=facebook
Шаг 3. Конфигурация параметров client_id, client_secret, redirect_uri:
client_id - App ID.
Пример: 346158195993388
client_secret - App Secret.
Пример: 2de1ab376d1c17cd47250920c05ab386
redirect_uri - Callback URI.
Пример: http://sitename.ru/plugin/auth_social/?provider=facebook

Аутентификация через Twitter
Шаг 1. Создание нового приложения:
Name: "SocialAuther Test"
Description: "SocialAuther Test Description"
Website: "http://sitename.ru"
Callback URL: "http://sitename.ru"

Шаг 2. Конфигурация параметров client_id, client_secret и redirect_uri:
client_id - API key.
Пример: ef054ab66c0538b39e0a865cf
client_secret - API secret.
Пример: 6d6c0538b39e0a86cf219ba88d386b114b9c6abef7eab4e8e4
redirect_uri - Callback URL.
Пример: http://sitename.ru/auth?provider=twitter

Аутентификация через steam
Шаг 1. Создание нового приложения:
Шаг 2. Конфигурация параметров client_id, client_secret и redirect_uri:
Добавляем свой домен
пример :ngcms.info
жмём зарегистрировать и получаем API key
копируем API key.
Пример: ef054ab66c0538b39e0a865cf
Добавляем API key в плагин .

В параметре redirect_uri везде писать, следующие URL'ы:
Код:
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

2. Включить плагин. В настройках плагина, внести данные о приложениях в соц.сетях (client_id, client_secret, public_key)

3. В шаблоне usermenu.tpl прописать ссылки по которым будет осуществляться авторизация, например:
Код:
<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>

Интеграция с профилем (плагин uprofile)
При установке плагина в таблице users создаются новые поля: provider, social_id, social_page, sex, birthday
Данные в данных полях слабоструктурированы и могут либо вообще отсутствовать, либо их вид может различаться в зависимости от соц. сети.

1. \templates\ваш_шаблон\plugins\uprofile\users.tpl

Код:
{{ 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 %}

2. \templates\ваш_шаблон\plugins\uprofile\profile.tpl

Код:
{{ 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>

Можешь почитать и вот эту статейку "Социальные кнопки с блур эффектом"

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

TWIG -что это?
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element