Уже достаточно давно многие сайты предоставляют наряду со стандартной авторизацией, авторизацию через социальные сети и веб-сервисы. Перед вами стоит выбор:
- Пройти относительно длинный путь регистрации - ввод email/пароля/капчи и активация по email.
- Просто нажать на иконку социальной сети, в которой у вас заведён аккаунт, и подтвердить доступ.
Но не всё так радужно, как может показаться на первый взгляд. Выделим положительные и негативные стороны социальной авторизации с учётом того, что мы собираемся полностью отказаться от регистрации по комбинации email/пароль.
Достоинства:
- Быстрая авторизация на сайте.
- Данные о пользователе от провайдера авторизации.
- Отсутствие паролей.
- Отсутствие активации аккаунта.
- Единственная форма - форма авторизации.
- Некоторые провайдеры авторизации не отдают email.
- Разный формат предоставляемых данных о пользователе.
- Предпочтения аудитории.
- Можно забыть через какой сервис проходил авторизацию.
С достоинствами этого подхода всё ясно. Нас же больше интересуют недостатки и пути их решения.
Недостатки
Некоторые провайдеры авторизации не отдают email
Да, самая важная информация, которую нам надо знать о пользователе, у некоторых провайдеров может быть недоступна. В частности Вконтакте и Одноклассники в общедоступном API не отдают его. Facebook и Google более лояльно относятся к email адресу и с помощью определённых разрешений успешно вернут вам эту информацию.Решение:
- Одно из популярных решений проблемы - просто спросить его у пользователя после авторизации. Это добавит дополнительный диалог и придётся делать процедуру активации.
- В зависимости от целевой аудитории отказаться от провайдеров авторизации, которые не отдают email.
- Не использовать электронный адрес. Опять же не везде можно так легко отказаться от практически единственного средства обратной связи с пользователем. Допустим соц. сеть Вконтакте использует для регистрации номер мобильного телефона. Тут нужно подумать о том - как пользователь восстановит доступ к сайту, если он удалит аккаунт в социальной сети.
Разный формат предоставляемых данных о пользователе
Иногда требуется знать о пользователе немного больше, чем просто идентификатор в соц. сети. К таким данным могут относиться: имя, фамилия, ник, пол, аватар, дата рождения. Так как протоколы OAuth и OpenID не предназначены для получения каких-либо данных о пользователе, то придётся использовать API каждого конкретного сервиса и возвращаемые данные будут везде разные. В частности провайдеры авторизации Google, Вконтакте, Facebook и Одноклассники предоставляют все перечисленные выше данные. Осталось их только обработать.Решение: если очень нужны дополнительные данные о пользователе - сделайте их запрос у сервиса авторизации. Если нужно ещё более специфичные данные - попросите пользователя ввести их самостоятельно после авторизации.
Предпочтения аудитории
Ну, вот мы и добрались до самого проблемного вопроса - а не отобьёт ли такой отказ от стандартной регистрации вашу целевую аудиторию? Моё мнение по этому поводу такое: даже если человек наотрез не хочет проходить авторизацию через социальные сервисы, но альтернатив вашему сервису нет, то он в конечном итоге сдастся. Я же лично придерживаюсь такого алгоритма: если я планирую пользоваться каким-то конкретным сервисом в будущем, то я обязательно регистрируюсь там через логин и пароль. Если же на сайте не будет такой возможности, то я буду авторизоваться через соц. сети.Даже если пользователя нет в социальных сетях, то у него по любому должен быть почтовый аккаунт gmail, mail.ru или других сервисов. Следовательно, случай, когда у пользователя просто нет ни одного аккаунта у предоставляемых сервисов авторизации, маловероятен.
Можно забыть через какой сервис проходил авторизацию
Если ваш ресурс даёт возможность авторизоваться через over9000 провайдеров, а у пользователя есть как минимум 2 аккаунта у этих провайдеров, то он может просто забыть каким конкретно способом он входил на сайт. В случае ошибки будет создана никому не нужная запись о новой регистрации в БД.Решение: записать в cookies сервис авторизации и выделять его на странице входа. Возможно, это создаёт какую-то угрозу безопасности, но я не могу сходу придумать, как можно серьёзно этим воспользоваться.
Заключение
Идея отказа от обычной регистрации очень соблазнительна, но всё зависит от того сможете ли вы избавиться от описанных проблем.P.S. Немного статистики от uLogin можно прочитать
Часто вашим клиентам может быть неудобно запоминать свой пароль и авторизоваться с ним при оформлении очередного заказа. В то же время, большинство из них имеют аккаунты в Facebook и/или ВКонтакте, почту на Gmail или Яндекс.Почте.
В таком случае вы можете делегировать задачу аутентификации пользователя этим сервисам. Скорее всего ваши клиенты уже залогинены в одном из них, поэтому им вообще не придется вводить свой пароль, только согласиться на передачу некоторых их персональных данных, таких как email, вам.
Более подробно о протоколе такой аутентификации вы можете ознакомиться, например, на википедии , мы же в этой статье рассмотрим технические детали реализации подобного механизма на InSales.
- Регистрация интернет-магазина в социальной сети и получение специальных ключей;
- Настройка социальной сети в интернет-магазине.
Важно : интернет-магазин должен быть с , то есть, его адрес должен начинаться на https
Раздел "Приложения для авторизации через соцсети"
Для того, чтобы сделать авторизацию через какой-либо упомянутый выше сайт вам необходимо добавить данные соответствующего приложения на платформе выбранного вами сайта (условимся называть этот сайт провайдером авторизации или просто провайдером).
Сначала вам необходимо перейти в необходимый раздел БО:
Нажав кнопку "Добавить" вы увидите форму добавления данных о приложении:
После указания всех необходимых данных кнопка авторизации через данного провайдера сама появится у вас на сайте.
Важно: вы можете добавить не более одного приложения каждого провайдера.
Давайте теперь рассмотрим подробнее как же все-таки создавать подобные приложения у самих провайдеров.
Вконтакте
Важно : для создания приложения ВКонтакте у вас должен быть аккаунт в этой социальной сети.
Yandex
Mail.ru
Я говорил о том, что сайт нужно сделать максимально удобным для пользователей, также я упоминал о том, что нужно облегчить людям вход на сайт, сделав возможность авторизации через социальные сети. Как и обещал, сегодня я подготовил для Вас мануал, с помощью которого Вы без труда научитесь прикручивать эту фишку к своим сайтам.
Сегодня Вы узнаете, как сделать авторизацию на сайте через такие популярные сервисы как Вконтакте, Facebook и Tweeter. Добавлять авторизацию через эти соц. сети мы будем с помощью специальных сервисов: Loginza и его аналога uLogin. Показывать буду на примере сайта wordpress, посмотреть как это выглядит Вы можете на моем тестовом блоге.
Авторизация через социальные сети с помощью uLogin
Сервис доступен и понятен даже рядовому пользователю интернета. Поддерживает все известные системы управления контентом и многие социальные сети (в том числе одноклассники, mail и Google +). Для установки авторизации переходим на сервис , выбираем нужную платформу (в данном случае wordpress) и кликаем по “ссылка на страницу плагина”:
Нам предложат скачать плагин на компьютер, выбираем папку, куда хотим сохранить архив и скачиваем. Затем распаковываем архив в любую папку на диске и с помощью любого файлового менеджера (я, например, пользуюсь Total Commander’ом) загружаем папку на сайт в директорию wp-content/plugins.
Теперь остается активировать плагин в админке. Переходим в админку, раздел плагины, напротив “uLogin” жмем «активировать». Все! Теперь на нашем вордпресс сайте появилась возможность авторизации и комментирования через самые известные социальные сети:
Если в админке зайти в раздел “плагины”, то там можно увидеть подпункт uLogin, который отвечает за настройку формы:
На странице с настройками можно изменить отображение соц. сетей на панельке формы, меню услуг, запрашиваемые поля, дополнительные поля и текст для входа:
Я здесь ничего не трогал, но как я понял все изменения нужно вносить на английском. В принципе можно поиграться с данными параметрами, однако плагин и без того прекрасно функционирует. Если Вы захотите прикрутить авторизацию к сайтам на других платформах, то в каждом архиве есть файлик Readme, в котором пошагово расписана установка плагина для конкретных CMS.
Как видим, сложного ничего нет, и вся установка займет у Вас всего пару минут.
| & lt;? php echo ulogin_panel() ; ?& gt; |
Установка авторизации через социальные сети с помощью сервиса Loginza
Данный сервис также интегрирован с самыми популярными соц. сетями, а также имеет гибкую настройку окна авторизации. Для начала переходим на сервис и авторизуемся. Сделать это можно с помощью любой социальной сети. После входа Вы попадете на страницу своего аккаунта, где и будет проводиться настройка формы:
Переходим в раздел “мой виджет Loginza” и добавляем нужный сайт:
Для работы с сайтом необходимо подтвердить права на него. Кликаем по кнопке “Подтвердить права”, нас попросят вставить на главную страницу специальный тег:
После подтверждения прав мы можем спокойно настраивать окно по своему желанию:
На странице “Настройки” размещены Ваш персональный ID и Секретный ключ, они нужны для настройки виджета после установки его на сайт:
На странице “Оформление” можно настроить внешний вид окна с помощью файла style.css. Если Вы разбираетесь в данном файле, то можете поэкспериментировать, если не разбираетесь, то лучше оставьте все без изменений. На вкладке “Просмотр” можно увидеть результат своей работы:
Раздел “Статистика” показывает количество авторизованных пользователей с помощью данного виджета:
На вкладке “HTML код” размещен соответственно html код данной формы.
Выбираем “Плагин WordPress” и скачиваем его к себе на компьютер. С помощью любого файлового менеджера закидываем плагин в директорию wp-content/plugins. Активируем плагин, и в админке у нас появится раздел “Loginza”, заходим в него.
Пользователи предпочитают авторизироваться мгновенно, в один клик, и не затрачивать время на регистрацию через электронную почту. Всю суть данной проблемы могут понять люди, использующие данную платформу для продажи товаров в интернет-магазине .
WordPress
по умолчанию не предоставляет возможности входа через социальные сети. Если пользователь желает, чтобы его клиенты заходили таким способом, ему придется приобрести платные разработки или использовать специальный бесплатный плагин. Простота регистрации и вход через социальные сети на любом сайте на wordprees очень важны. Если Вы предложите посетителям проделывать данную процедуру путем заполнения целого ряда полей с помощью электронной почты, то наверняка потеряете массу потенциальных клиентов.
В данной статье подобраны 10 плагинов входа через социальные сети для Wordpress
, которые позволят Вашему сайту стать удобным и выглядеть профессионально. Для желающих собственными руками создать виджет с социальными кнопками, рекомендуем ознакомиться с материалами по теме .
Social Login
Это бесплатный комплексный WordPress плагин , который предлагает простое решение входа и регистрации на сайте через социальные сети. Для него доступна авторизация через такие ведущие сайты, как Facebook, Twitter, Google, LinkedIn, PayPal, LiveJournal, Instagram , Yahoo, ВК и многие другие. Всего он объединяет более 25 популярных сетей, с помощью которых можно войти, зарегистрироваться или оставить свой комментарий.Данный плагин полностью совместим с BuddyPress , поэтому можно использовать логин практически из любой социальной группы, что является очень актуальным решением. Виджет входа размещается в боковой панели вашего сайта, или используется шорткод.
Super Socializer
Super Socializer является многоцелевым плагином для WordPress . Он поможет интегрировать социальные сети с вашим полем для комментария и предлагает прекрасные варианты для авторизации на сайте. Пользователь легко сможет зайти на Ваш сайт, используя уже существующий логин в одной из социальных сетей. После проведения такой простой регистрации, информация о его профиле вместе с электронной почтой сохранится в базе данных вашего блога.
Nextend Facebook Connect
Следующий плагин во многом напоминает предыдущий ресурс, но он подходит для авторизации на сайтах через Facebook .
WordPress Social Login
WordPress Social Login – это полезное приложение, позволяющее производить регистрацию и вход на сайт на базе WordPress , используя свой логин в различных социальных сетях. Вы сможете полностью контролировать доступ пользователей к своему веб-сайту. Данный плагин имеет широкие возможности для индивидуальных настроек.
Social Login for WordPress
Еще один мощный WordPress плагин, способный интегрировать социальные сети с WordPress . Данный сервис платный, и работа с ним осуществляется на основе подписки, но любой пользователь может использовать 30-и дневный бесплатный период для тестирования. Это даст возможность проверить, насколько этот плагин подходит для Ваших целей. Social Login for WordPress великолепно интегрируется со всеми популярными сетями, позволяя оставлять , а также производить авторизацию на сайте. Он способен захватывать данные профиля пользователя с его разрешения и автоматически создавать профиль в базе данных WP.
Gigya – Social Infrastructure
Еще один очень простой в использовании WordPress плагин, который поможет интегрировать социальные аккаунты с сайтами на базе WordPress . Плагин имеет красивые , и с ним Вы можете настроить необходимые кнопки, согласно своему желанию.
Входа через социальные сети для Wordpress не только дают возможность пользователям заходить на веб-сайт, используя авторизацию через Facebook, Twitter, Google, ВКонтакте, но и делают внешний вид ресурса очень привлекательным. Все модули, упомянутые в этом списке, широко используются, и они действительно эффективны. Вы можете выбрать любой из этих плагинов и начинать работу уже сейчас.
Небольшой how-to по созданию приложений в популярных соцсетях для авторизации пользователей.
На данный момент существует множество способов реализации авторизации посредством социальных сетей. Не секрет, что существуют прокси-сервисы, вроде loginza или ulogin, для упрощения разработки социальной авторизации, и вы можете их смело использовать в своих проектах, однако иногда возможность использовать провайдеров отсутствует и вы сталкиваетесь с API соцсетей лицом-к-лицу.
Вконтакте
Создать приложение ВК достаточно просто. Для создания нового приложения, нужно воспользоваться пунктом левого меню "Управление " (если по какой-то причине у вас этого нет — вот прямая ссылка https://vk.com/editapp?act=create):
ВК предоставляет три типа приложений "Standalone", "Веб-сайт" и "Встраиваемое приложение", подробнее о типах приложений можно прочитать в официальной документации , нам же для авторизации, нужно выбрать "Веб-сайт".
После выбора этого пункта, система потребует также ввести адрес сайта и базовый домен. При необходимости эти параметры можно будет изменить в дальнейшем.
Доверенный redirect URI, это пути, на которые ВКонтакте разрешено перенаправлять пользователя в процессе авторизации. URI передаётся сети в процессе авторизации с вашего сайта.
Эти пути зависят от используемой вами библиотеки, но как правило, URL авторизации и redirect URI — одни и те же (например, в модуле opencart 1.5 social login это сделано именно так ).
Facebook предоставляет достаточно удобный интерфейс для создания приложений. Для реализации приложения, Вам нужно перейти в раздел для разработчиков и создать новое приложение:
Система требует ввести ID приложения, это название. С названием не переусердствуйте — у Facebook есть ограничение на количество символов в названии приложения.
Приложение создано, теперь приступаем к настройке. Сперва нужно подключить к приложению возможность авторизации.
Для этого на странице "Добавить продукт ", выбираем "Вход через Facebook " и кликаем по кнопке "Настроить ":
Подобно ВКонтакте, потребуется указать тип вашего приложения. Для нас актуален пункт "Веб ":
После этих манипуляций, в левом меню, у вас появится новый продукт "Вход через Facebook ", выбираем пункт "настройки " и вписываем пути в поле "Действительные URL-адреса для перенаправления OAuth ".
Когда это сделано, переходим в настройки приложения:
В этом разделе вы можете получить всю необходимую информацию для доступа к API, а именно Идентификатор приложения и Секретный ключ приложения :
Честно говоря, с API щебетальни, у меня ранее часто возникали непонятные проблемы, но сейчас, кажется, у них всё более менее стабилизировалось.
Для создания нового приложения переходим в раздел для разработчиков и кликаем по "Create New App ". Система потребует ввести основную информацию о приложении и подтвердить согласие с условиями предоставления сервисов.
После того, как вы это заполните — перед вами откроется страница настроек приложения:
Если вашему приложению требуется получать email пользователя, то переходим в раздел Permissions и ставим галочку "Request email addresses from users ". Также, тут можно выставить права для приложения — нам для авторизации достаточно прав на чтение "Read only ".
Для приложений, взаимодействующих с API Twitter, как правило, требуется три элемента авторизации: Consumer key, consumer secret и AppID.
Первые два находятся прямо на этой странице, а вот AppID нужно скопировать из строки браузера (число, между app/ и /keys ):
Одноклассники
Регистрация приложения в ok.ru не отличается сложностью, но тут есть несколько нюансов.
Нюанс #1: стать разработчиком на ok.ru
Если вы в первый раз имеете дело с API одноклассников, то имейте в виду — сперва вам необходимо активировать режим разработчика. Делается это на странице https://ok.ru/devaccess .
После того, как вы получите права разработчика, вы сможете создать своё первое приложение.
Нюанс #2: где мои приложения?
В одноклассниках все приложения лежат в разделе игр. Т.е. если у вас нет прямой ссылки в список приложений — переходим в свой профиль, выбираем раздел "игры ", переходим в подраздел "мои загруженные "
Настройка приложения в одноклассниках в разы проще — вам всего лишь нужно указать список разрешённых redirect_url и выставить приложению нужные права. При создании приложения, все необходимые ключи и идентификаторы будут отправлены вам на почту.
И вот тут мы подходим к наиболее интересному нюансу API этой соцсети. Разработчики Одноклассников очень бережно относятся к своим пользователям, поэтому не дают доступ к email кому попало.
Нюанс #3: как получить права на чтение email
Для получения прав к чтению email адреса пользователя, нужно запросить эту пермиссию у тех.поддержки API одноклассников. В письме кратко поясните, в каких целях собираетесь использовать email и укажите ID ваших приложений.
Ответ, по моему опыту, приходит от 2 до 24 часов, поэтому если у вас несколько приложений, проще заранее создать их и запросить пермиссию одним письмом для всех сразу.
Пакетный запрос прав
К слову, AppID приложения, аналогично Твиттеру, берётся из URL адресной строки браузера:
Instagram (бонус)
Во-первых, скорее всего, мало кто будет этим пользоваться, во-вторых социальные приложения в инсте очень жёстко регулируются и вывести своё приложение из sandbox режима бывает довольно проблематично, ну и в-третьих, API обители селфаков может банально оказаться несовместимым с ожиданиями вашего приложения.
На заметку
Вы не сможете получить email пользователя из instagram API. Если ваше приложение требует использование email, то придётся отказаться от авторизации через instagram!
Тем не менее, для создания нового приложения переходим в раздел для разработчиков и выбираем пункт "Manage Clients ":
На странице кликаем по "Register a New Client " и заполняем требуемые поля:
В поле Valid redirect URIs вбиваем через пробел список разрешённых к редиректу URL, указываем Company name, Contact Email и ссылку на Privacy Policy на вашем сайте. Заолнять поля сразу необязательно, но без этих данных, вы не сможете отправить приложение на модерацию.
Пока приложение находится в режиме песочницы (sandbox mode ), у вас есть полный доступ ко всем API методам, но с одним ограничением — вы не сможете получать какую-либо персональную информацию. После того, как вы закончите разработку и отладку вашего приложения, вам будет необходимо отправить приложение на модерацию.
Отправка на модерацию производится в разделе "Permissions ", рекомендую перед этим очень внимательно ознакомиться с правилами создания запросов на модерацию в
