Интервью с основателем сервиса авторизации через социальные сети «uLogin»

Плагин uLogin для WordPress

Активные пользователи Интернет, участвующие в обсуждениях на блогах и форумах, заметили тенденцию распространения «быстрой авторизации». Такой способ войти на сайт более предпочтительный, не требующий от посетителя ввода личной информации. Все данные берутся автоматически из выбранного онлайн сервиса, на котором Вы зарегистрированы, чаще одна из социальных сетей.

Этим методом авторизации стали пользоваться и вебмастеры, которые разрабатывают свой веб сайт на WordPress/ Практичное решение, особенно, для блогов без регистрации, но с возможностью комментирования – пару кликов и посетитель вошёл, как зарегистрированный пользователь.

uLogin — виджет авторизации через социальные сети

Существует не мало плагинов, которые реализуют «быструю авторизацию», одним из популярных, является «Loginza» и «uLogin». Первый имеет более гибкие возможности встраивания на сайт, будет полезен для проектов с обязательной регистрацией. Второй «uLogin» напротив, более лёгкий, не имеющий излишних настроек.

uLogin – плагин WordPress, предоставляющий авторизацию на блоге по средствам множества популярных социальных сетей, таких как Facebook, Twitter, Одноклассники, Вконтакте и другие. Автоматически, после активирования, выводит соответствующий блок в форме комментариев, а также в стандартной форме входа WP.

Установка плагина «uLogin» проходит стандартно, путём инструментария раздела «Плагины». Щёлкаем пункт «Добавить новый» и в поиске вводим название плагина:
uLogin — виджет авторизации через социальные сети
После жмём «
Enter» и под результатом кликаем «Установить». Несколько секунд и инсталяция завершена, кликаем «Активировать» и идём знакомиться с настройками плагина.

В отличие от большинства дополнений, «uLogin» добавляет страницу опций в раздел «Плагины», а не «Параметры» (Настройки). Поэтому, наведя курсор на «Плагины» , переходим в новый подраздел.

uLogin plugin settings – страница настроек

Опции «uLogin» содержат минимальный набор параметров, которого достаточно для вывода актуальных онлайн сервисов:

  1. Widget type: — вид отображения виджета. По умолчанию «Bigpanel» — большие иконки с кнопкой диалогового меню.
  2. Panel providers: — набор актуальных сервисов, иконки которых будут выводится в виджете. По умолчанию доступны: vkontakte,odnoklassniki,mailru,facebook. Через запятую можно добавить другие, например «, twitter».
  3. Menu providers: — пункт вывода кнопки диалогового меню со списком других сервисов.
  4. Requested fields: — набор параметров для авторизации на блоге. По умолчанию состоит из имени и фамилии пользователя, адреса электронной почты, фото для аватарки (first_name,last_name,email,photo).
  5. Optional fields: — набор необязательных полей авторизации. По умолчанию указан «номер телефона» (phone).
  6. Labeltext: — текст который будет выводиться перед виджетом. Укажите соответствующее сообщение для посетителей.
  7. Update– кнопка для сохранения внесённых изменений. После того как Вы заполнили поля выше, не забудьте нажать «Update» для применения к виджету.

Чтобы проверить отображение «uLogin» на страницах, войдите на сайт в качестве гостя. Откройте сайт в другом браузере и переместитесь к форме комментариев. В начале, перед стандартным списком полей WP, появится панель виджета «uLogin».

Вместо послесловия

В зависимости от провайдера (онлайн сервиса) для авторизации может потребоваться несколько этапов входа. Чтобы ускорить процесс заранее авторизуйтесь в социальной сети через которую планируете совершить вход на сайт.

Удобство «быстрой авторизации» для блога очевидно, она не только оптимизирует процесс регистрации посетителей, но и функционально привязывает фотографию в качестве аватарки пользователя.

uLogin — авторизация через социальные сети

Технические данные

Это инструмент, который позволяет пользователям получить единый доступ к различным Интернет-сервисам без необходимости повторной регистрации, а владельцам сайтов — получить дополнительный приток клиентов из социальных сетей и популярных порталов (Google, Яндекс, Mail.ru, ВКонтакте, Facebook и др.)

В новой версии плагина добавлены новые функции:

  • синхронизация аккаунтов
  • привязка аккаунтов соцсетей
  • возможность использования виджетов, созданных в личном кабинете

Благодаря новой системе синхронизации аккаунтов, пользователь может привязать к своему профилю несколько аккаунтов соцсетей и авторизовываться через любой из них.
К тому же, при авторизации через новую соцсеть, пользователь попадет в свой же аккаунт, если email в соцсети совпадает с email профиля.

Хочу выразить благодарность команде ulogin.ru за посильную помощь в решении проблемы интеграции их компонента на мой сайт!

Читать еще:  История голландского пива Хайнекен (Heineken)

Компонент работает отлично, никаких нареканий нет! Регистрация и вход проходят очень просто, пару клавиш нажать. К тому же имеется очень удобная система связывания аккаунтов посредствам нескольких соц. сетей (если в них указан один и тот же email).

Для работы с композитом сделал небольшую доработку:
В components/ulogin/auth/component.php заменил

на

var ul_script = document.createElement(‘script’);
ul_script.src = «//ulogin.ru/js/ulogin.js»
document.body.appendChild(ul_script);
ul_script.onl oad = uLoginOnload;

Без этого в режиме композита скрипт не хотел подгружаться

  • Установите модуль uLogin версии 2.* от разработчика DelaWeb из каталога решений
  • Установленный модуль готов к работе сразу после активации с настройками по умолчанию.
  • Используйте виджет авторизации Ulogin в визуальном HTML-редакторе, в качестве Служебного компонента.
  • Используйте виджет синхронизации аккаунтов Ulogin_sync в визуальном HTML-редакторе личного кабинета, в качестве Служебного компонента. Виджет синхронизации предназначен для вывода в личном кабинете или профиле пользователя.

Настройки компонента Ulogin:

  • uLogin ID общая форма №1: общее поле для всех виджетов uLogin, необязательный параметр (см. «Настройки виджета uLogin»)
  • uLogin ID общая форма №2: дополнительное общее поле для всех виджетов uLogin, необязательный параметр (см. «Настройки виджета uLogin»)
  • Отправлять email администратору при регистрации пользователя: установите флажок, если необходимо выслать письмо администратору при регистрации через uLogin
  • Сохранять ссылку на страницу пользователя в соцсети: установите флажок, если необходимо сохранять ссылку на страницу пользователя в соцсети при регистрации через uLogin
  • Группа клиентов по умолчанию: группа, присваиваемая пользователям, зарегистрированных с помощью uLogin. По умолчанию «Зарегистрированные пользователи»;

Настройки компонента Ulogin_sync:

  • ulogin ID для панели синхронизации №1: общее поле для всех виджетов uLogin, необязательный параметр (см. «Настройки виджета uLogin»);
  • ulogin ID для панели синхронизации №2: дополнительное общее поле для всех виджетов uLogin, необязательный параметр (см. «Настройки виджета uLogin»);

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

При установке расширения uLogin авторизация пользователей будет осуществляться с настройками по умолчанию.
Для более детальной настройки виджетов uLogin Вы можете воспользоваться сервисом uLogin.

Вы можете создать свой виджет uLogin и редактировать его самостоятельно:

для создания виджета необходимо зайти в Личный Кабинет (ЛК) на сайте: Личный Кабинет, добавить свой сайт к списку Мои сайты и на вкладке Виджеты добавить новый виджет. После этого вы можете отредактировать свой виджет. Добавлять и подтверждать домен не обязательно.

В графе «Возвращаемые поля профиля пользователя» вы можете включить поля, например, «Пол» и «Дата рождения».

Обратите внимание: для успешной работы плагина необходимо включить в обязательных полях профиля поле Еmail в Личном кабинете uLogin.
Заполнять поля в графе «Тип авторизации» не нужно, т.к. расширение uLogin настроено на автоматическое заполнение данных параметров.

Созданный в Личном Кабинете виджет имеет параметр uLogin ID.
Скопируйте значение uLogin ID вашего виджета в соответствующее поле в настройках плагина на вашем сайте и сохраните настройки.

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

Для вывода панели *авторизации* в любом месте шаблона темы 1C Bitrix используйте визуальный редактор страницы,
и просто перетащите Служебный Компонент Ulogin в то место, куда ходите установить панель авторизации.

Для вывода панели синхронизации в любом месте шаблона темы 1C Bitrix используйте визуальный редактор страницы,
и просто перетащите Служебный Компонент Ulogin_sync в то место, куда ходите установить панель синхронизации, например, в профиль пользователя.

Для использования панели авторизации в редакторе php-кода 1C Bitrix используйте код:

Интервью с основателем сервиса авторизации через социальные сети «uLogin»

archivarix 18 октября 2017, 01:36

Denka 14 августа 2017, 19:13

edw999 16 февраля 2017, 10:43

Физкульт-привет вебмастерам и владельцам веб-сайтов на CMS WordPress! В этой статье я сведу на нет одну из причин, по которой вы бегаете вокруг решения задачи, да никак не решите — убираем стандартные кнопки (иконки) авторизации uLogin со страницы статьи, под комментариями и создаем свои кнопки авторизации через социальные сети с переадресацией на страницу статьи с автоматической прокруткой до места (формы) написания комментария.

Сразу хочу сказать, что пути решения данных задач я нашел сам, поиск по интернет ничего практически не дал, как и письмо в поддержку сервиса uLogin, ответа от которых я не получил в течении суток, хотя сегодня и вчера был выходной, ну ладно, я буду не против если они на подобные письма будут отвечать ссылкой на мою статью 🙂 Приступим к занимательному процессу, физкультурники!)

Читать еще:  Должностная инструкция педагога-психолога

Первым делом установили мы плагин uLogin на наш WordPress сайт, зашли в настройки плагина и по возможности настроили. Лично у меня настроек практически нет почему-то, только два поля для ввода ID с сервиса, ну да ладно.

Идем в любую статью и видим такую картину:

Кстати, конечный результат получился таковым:

Поэтому первым делом нам следует избавится от стандартных кнопок авторизации, а сделать это можно выполнив всего 1 шаг:

Переходим в админке в редактирование плагинов, выбираем uLogin и переходим к файлу «ulogin.php» на этой же странице заходим в поиск по тексту (Ctrl+F) и ищем такой код:

ориентируемся по нему и как показано на скриншоте удаляем эти куски кода:

Для тех у кого не открывается скриншот, удаляем весь этот код:

/**
* —Возвращает код uLogin для формы добавления комментариев
* для версии WP раннее 3.0.0
*/
function ulogin_comment_form() <
global $current_user;
if ($current_user->ID == 0) <
echo ‘ ‘.
ulogin_js_setparams().
‘ ‘;

/**
* !-Возвращает код uLogin для формы добавления комментариев
*/
function ulogin_comment_form_before_fields()<
echo get_ulogin_panel(1);
>

Еще нам нужно удалить с этого же файла такие строки (в начале):

Сохраняем изменения, открываем статью и проверяем — возле формы отправки комментария следов плагина не осталось как визуально, так и в исходном коде страницы.

Переходим к этапу создания своих кнопок авторизации, с этим, казалось бы, проблем никаких нет, но не все так просто. На сайте uLogin есть инструкция, но в ней явно не дописано несколько важных факторов, об этом ниже.

Взглянем на то, как нам предлагают сделать создатели uLogin:

Как видно, в примере показан такой код:

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

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

1) Адреса, ссылки которые нужно указать в redirect_uri.
Адрес должен содержать ссылку на страницу авторизации WordPress и небольшой посыл — токен, который ВП должен получить. Вот это дело выглядит так:
redirect_uri=kodabra.com/ulogin/token/backurl=ссылка на статью, откуда пришел пользователь, чтобы потом вернуть его на нее уже авторизованным.

2) Для преобразования ссылки в нужный вид я ее скопировал и просто вставил в сообщение ВКонтакте, социальная сесть, как известно, делает переход по внешним ссылкам через редирект своего скрипта, но при этом переводит ссылки в нужный нам вид. Осталось просто скопировать с нашего же сообщения нашу же ссылку (адрес ссылки). Выходит что-то вроде такого:

На примере ничто иное, как такая вот коротенькая ссылка: kodabra.com/?p=423

Я же предоставлю вам готовый вариант преобразованной ссылки, в котором нужно просто заменить адрес сайта на свой:

но это еще не все

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

Нам нужно вернуть пользователя на страницу статьи, откуда он пришел, а для этого я буду использовать функцию «backurl», в которую нужно послать адрес нашей статьи и еще небольшое свойство — «#commentform», чтобы страница сразу открывалась на месте отправки комментария.

Опять же, приведу готовый вариант этого всего дела с последующими комментариями:

После «backurl» я вписал адрес своего сайта и символы «/?p=ID поста, который выводится через функцию » «. Понятно, что вписать сразу полный адрес ссылки функцией не выйдет, ведь ссылка тогда будет выводится в обычном виде, а нам нужно в своеобразном, а вот функция с IDом дает нам возможность для манипуляций. Ну и как я уже упоминал выше, после ИДа сразу следует «#commentform», опять же, в своеобразом виде — «%2F%23commentform».

Весь же код с кнопками выглядит так:

Вопросы можно задавать в комментариях, буду рад на них ответить. Также с радостью прочту ваши замечания.

Авторизация через социальные сети в два клика!

Привет. В статье про SMO, я говорил о том, что сайт нужно сделать максимально удобным для пользователей, также я упоминал о том, что нужно облегчить людям вход на сайт, сделав возможность авторизации через социальные сети. Как и обещал, сегодня я подготовил для Вас мануал, с помощью которого Вы без труда научитесь прикручивать эту фишку к своим сайтам.

Сегодня Вы узнаете, как сделать авторизацию на сайте через такие популярные сервисы как Вконтакте, Facebook и Tweeter. Добавлять авторизацию через эти соц. сети мы будем с помощью специальных сервисов: Loginza и его аналога uLogin. Показывать буду на примере сайта wordpress, посмотреть как это выглядит Вы можете на моем тестовом блоге.

Читать еще:  Должностная инструкция сторожа

Авторизация через социальные сети с помощью uLogin

Сервис доступен и понятен даже рядовому пользователю интернета. Поддерживает все известные системы управления контентом и многие социальные сети (в том числе одноклассники, mail и Google +). Для установки авторизации переходим на сервис, выбираем нужную платформу (в данном случае wordpress) и кликаем по “ссылка на страницу плагина”:

Нам предложат скачать плагин на компьютер, выбираем папку, куда хотим сохранить архив и скачиваем. Затем распаковываем архив в любую папку на диске и с помощью любого файлового менеджера (я, например, пользуюсь Total Commander’ом) загружаем папку на сайт в директорию wp-content/plugins.

Теперь остается активировать плагин в админке. Переходим в админку, раздел плагины, напротив “uLogin” жмем «активировать». Все! Теперь на нашем вордпресс сайте появилась возможность авторизации и комментирования через самые известные социальные сети:

Если в админке зайти в раздел “плагины”, то там можно увидеть подпункт uLogin, который отвечает за настройку формы:

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

Я здесь ничего не трогал, но как я понял все изменения нужно вносить на английском. В принципе можно поиграться с данными параметрами, однако плагин и без того прекрасно функционирует. Если Вы захотите прикрутить авторизацию к сайтам на других платформах, то в каждом архиве есть файлик Readme, в котором пошагово расписана установка плагина для конкретных CMS.

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

p.s. Если форма не добавилась автоматически, то вставьте этот код в любой участок Вашего шаблона:

<?php echo ulogin_panel(); ?>

Установка авторизации через социальные сети с помощью сервиса Loginza

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

Переходим в раздел “мой виджет Loginza” и добавляем нужный сайт:

Для работы с сайтом необходимо подтвердить права на него. Кликаем по кнопке “Подтвердить права”, нас попросят вставить на главную страницу специальный тег:

После подтверждения прав мы можем спокойно настраивать окно по своему желанию:

На странице “Настройки” размещены Ваш персональный ID и Секретный ключ, они нужны для настройки виджета после установки его на сайт:

На странице “Оформление” можно настроить внешний вид окна с помощью файла style.css. Если Вы разбираетесь в данном файле, то можете поэкспериментировать, если не разбираетесь, то лучше оставьте все без изменений. На вкладке “Просмотр” можно увидеть результат своей работы:

Раздел “Статистика” показывает количество авторизованных пользователей с помощью данного виджета:

На вкладке “HTML код” размещен соответственно html код данной формы.

Теперь о том, как установить авторизацию на сайт wordpress. В самом низу сервиса расположен блок “плагины Loginza”:

Выбираем “Плагин WordPress” и скачиваем его к себе на компьютер. С помощью любого файлового менеджера закидываем плагин в директорию wp-content/plugins. Активируем плагин, и в админке у нас появится раздел “Loginza”, заходим в него:

Здесь мы можем выбрать соц. сети, через которые может авторизоваться пользователь, язык и цветовую схему формы. Чтобы все работало, в соответствующие поля необходимо ввести ID и секретный ключ сайта (о них я писал выше). После всех настроек жмем “Сохранить” и вуаля, все работает:

Вот таким простым способом мы вставили форму авторизации через социальные сети. Честно сказать сервис uLogin мне больше по душе, хотя бы потому, что возни с ним намного меньше.

А на этом у меня все, по вопросам как всегда в комментарии. Если уже что-то очень глобальное, то прямиком в обратную связь. Не будьте редиской и поделитесь статьей в соц. сетях.

Ссылка на основную публикацию
Adblock
detector