Я говорил о том, что сайт нужно сделать максимально удобным для пользователей, также я упоминал о том, что нужно облегчить людям вход на сайт, сделав возможность авторизации через социальные сети. Как и обещал, сегодня я подготовил для Вас мануал, с помощью которого Вы без труда научитесь прикручивать эту фишку к своим сайтам.
Сегодня Вы узнаете, как сделать авторизацию на сайте через такие популярные сервисы как Вконтакте, Facebook и Tweeter. Добавлять авторизацию через эти соц. сети мы будем с помощью специальных сервисов: Loginza и его аналога uLogin. Показывать буду на примере сайта wordpress, посмотреть как это выглядит Вы можете на моем тестовом блоге.
Сервис доступен и понятен даже рядовому пользователю интернета. Поддерживает все известные системы управления контентом и многие социальные сети (в том числе одноклассники, mail и Google +). Для установки авторизации переходим на сервис , выбираем нужную платформу (в данном случае wordpress) и кликаем по “ссылка на страницу плагина”:
Нам предложат скачать плагин на компьютер, выбираем папку, куда хотим сохранить архив и скачиваем. Затем распаковываем архив в любую папку на диске и с помощью любого файлового менеджера (я, например, пользуюсь Total Commander’ом) загружаем папку на сайт в директорию wp-content/plugins.
Теперь остается активировать плагин в админке. Переходим в админку, раздел плагины, напротив “uLogin” жмем «активировать». Все! Теперь на нашем вордпресс сайте появилась возможность авторизации и комментирования через самые известные социальные сети:
Если в админке зайти в раздел “плагины”, то там можно увидеть подпункт uLogin, который отвечает за настройку формы:
На странице с настройками можно изменить отображение соц. сетей на панельке формы, меню услуг, запрашиваемые поля, дополнительные поля и текст для входа:
Я здесь ничего не трогал, но как я понял все изменения нужно вносить на английском. В принципе можно поиграться с данными параметрами, однако плагин и без того прекрасно функционирует. Если Вы захотите прикрутить авторизацию к сайтам на других платформах, то в каждом архиве есть файлик Readme, в котором пошагово расписана установка плагина для конкретных CMS.
Как видим, сложного ничего нет, и вся установка займет у Вас всего пару минут.
| & lt;? php echo ulogin_panel() ; ?& gt; |
Данный сервис также интегрирован с самыми популярными соц. сетями, а также имеет гибкую настройку окна авторизации. Для начала переходим на сервис и авторизуемся. Сделать это можно с помощью любой социальной сети. После входа Вы попадете на страницу своего аккаунта, где и будет проводиться настройка формы:
Переходим в раздел “мой виджет Loginza” и добавляем нужный сайт:
Для работы с сайтом необходимо подтвердить права на него. Кликаем по кнопке “Подтвердить права”, нас попросят вставить на главную страницу специальный тег:
После подтверждения прав мы можем спокойно настраивать окно по своему желанию:
На странице “Настройки” размещены Ваш персональный ID и Секретный ключ, они нужны для настройки виджета после установки его на сайт:
На странице “Оформление” можно настроить внешний вид окна с помощью файла style.css. Если Вы разбираетесь в данном файле, то можете поэкспериментировать, если не разбираетесь, то лучше оставьте все без изменений. На вкладке “Просмотр” можно увидеть результат своей работы:
Раздел “Статистика” показывает количество авторизованных пользователей с помощью данного виджета:
На вкладке “HTML код” размещен соответственно html код данной формы.
Выбираем “Плагин WordPress” и скачиваем его к себе на компьютер. С помощью любого файлового менеджера закидываем плагин в директорию wp-content/plugins. Активируем плагин, и в админке у нас появится раздел “Loginza”, заходим в него.
Есть полезная конкретная информация о технической реализации.
А если вкратце, то...
Для авторизации, регистрации используется все та же таблица "users". Вместе с обычной регистрацией и авторизацией, когда при регистрации (в самом простом виде) в таблицу "users" добавляются email, password и login пользователя, а при авторизации проверяется соответствие введенных login"а и password"а существующим в базе данных, аналогичным образом используется и регистрация/авторизация через социальные сети. Только в данном случае источником данных о пользователе для его регистрации является не непосредственный пользователь, который вводит данные в форму, а соц. сеть. Регистрация в данном случае достаточно прозрачная, т.е. не видна пользователю. Схема примерно следующая (без особенностей работы Oauth-протокола):
1) Пользователь выбирает вход через соц. сеть.
2) Происходит обращение к странице авторизации в этой соц. сети, если человек еще не авторизовывался там. После ввода данных, а если он ранее авторизовывался, происходит запрос на разрешение использования его данных.
3) Если человек отказывается, то на этом конец. Если дает согласие, то выполняется перенаправление на указанную в настройках Oauth страницу сайта.
4) У каждого пользователя в соц. сетях есть свой уникальный идентификатор, который можно запрашивать. Для своей таблицы "users" нужно добавить пару дополнительных полей (например, вот такие): auth_via (enum("native, "vk", "mailru", "...")) - для обозначения типа регистрации пользователя, и social_id - здесь будет храниться уникальный идентификатор в соц. сети. Если нужно хранить какие-то специфические данные этого пользователя из соц. сетей, то можно создать доп. поля для этих данных.
5) После того, как пользователь дал разрешение на использование его данных, необходимо запросить нужные данные от соц. сети, в т.ч. и идентификатор пользователя в соц. сети. Вот здесь и начинается невидимый процесс регистрации. Нужно проверить есть ли в БД пользователь с таким social_id, если нет, то вставляем social_id, данные пользователя из соц. сети, по необходимости, в БД. Все, пользователь зарегистрирован.
Если же данные о пользователе есть, то необходимо запросить актуальные данные из соц. сети, сравнить их с теми, что в базе и если они изменились, то обновить их и в своей базе данных, если нет, то просто переходим к следующему шагу.
6) Создается сессия с данными пользователя.
Для пользователя, зарегистрированного из соц. сети пароля и логина, естественно, нет. Они нужны для авторизации. А т.к. пользователь авторизуется с помощью своих логина и пароля в соц. сети, то и указывать здесь нечего. И еще, можно при авторизации, к запросу проверки логина и пароля, добавить условие
"AND WHERE `auth_via`="native""
Чтобы исключить пользователей, зарегистрированных из соц. сетей.
Как видно, для каждого пользователя в таблице создается внутренний (внутрисайтовый, если так можно выразиться) первичный, автоинкрементный ключ. Соответственно, нет разницы для логики сайта между пользователем, зарегистрированным через соц. сеть и через сайт. Если говорить об интернет-магазине, то, для привязки заказов к пользователю, можно использовать единый, внутренний идентификатор ID.
Многие сайты для доступа к расширенному функционалу предлагают зарегистрироваться и войти на сайт под своими учетными данными. Однако как показывает практика проходить процедуру регистрации, которая часто бывает слишком мудреная, желают далеко не все.
Причин, по которым пользователи отказываются от стандартной регистрации на сайте, можно насчитать не один десяток, однако из них можно выделить основные:
Поведение пользователей вполне обосновано, никто не желает тратить свое время на регистрацию для того чтобы например оставить комментарий на сайте или увидеть скрытое содержимое сомнительного характера.
Как быть в такой ситуации, как упростить процесс регистрации и авторизации на сайте и избежать подобных проблем? Вот тут на помощь приходят социальные сети, при помощи которых можно в считанные секунды войти на сайт, не прибегая к утомительному заполнению регистрационной формы. Кроме того пользователям не придется запоминать ни свой логин, ни пароль, ни какую либо другую информацию.
Для организации авторизации на сайте через соцсети можно воспользоваться специальными сервисами, которые могут быть как платными, так и бесплатными, а так же использовать на своем сайте специальные расширения. А можно пойти другим путем и написать собственное расширение, если Вы знакомы с языком PHP.
Вариантов организации входа на сайт через социальные сети хватает.
Использование сервисов авторизации наиболее предпочтительный способ для начинающих веб-разработчиков. Все что потребуется от владельца сайта это разместить на нем предложенный тем или иным сервисов скрипт. Или же воспользоваться специальным расширением (плагином) разработанным для множества популярных систем управления контентом.
Наиболее популярные и распространенные сервисы авторизации - Slogin, ULogin и Loginza. Оба этих сервиса предлагают плагины практически для всех CMS, что делает их еще более привлекательными для новичков.
Не лишним будет отметить, что ранее сервис авторизации Slogin позволял работать с социальными сетями исключительно напрямую, однако уже сейчас данный продукт вырос с обычного компонента в полноценный сервис авторизации. Кроме того у владельцев сайтов использующих компонент Slogin остался выбор - работать с соцсетями напрямую либо через сервис.
Преимущества:
Недостатки:
Данный вариант более предпочтительный для тех, кто хочет получить максимум от авторизации через социальные сети. В этом случае уже не будет посредников, которые будут получать данные пользователя, все эти данные будут передаваться соцсетью напрямую на ваш сайт.
К недостаткам данного метода можно отнести создание собственного приложения в каждой социальной сети. Другими словами вам придется регистрировать свой сайт в той социальной сети, через которую вы хотите предоставить возможность входа на сайт.
Достоинства данного метода очевидны - все данные пользователя передаются уже сразу на ваш сайт, после регистрации своего приложения (создания группы в социальных сетях) вы получаете дополнительные преимущества (дополнительный трафик, возможность монетизации группы и так далее).
Многие пользователи относятся с недоверием к такому роду авторизации - боятся, что их данные могут украсть и тем самым взломать ту или иную социальную сеть. Однако смею вас заверить, что авторизация через социальные сети совершенно безопасна , никто не украдет ваши данные. Чтобы в этом убедиться, давайте разберем процесс авторизации, что в это время происходит, и какие данные передаются.
Когда пользователь нажимает на кнопку социальной сети, происходит открытие дополнительного окна, а в это время сайт обращается к социальной сети и запрашивает разрешение на передачу личных данных. Социальная сеть в свою очередь по средствам вновь открывшегося окна просит подтвердить пользователя свое согласие на передачу общедоступной информации. Только в том случае если пользователь дает свое согласие общедоступные данные передаются на сайт и записываются в его профиль.
Еще раз отмечу, что передаваемые данные не содержат ни логина пользователя из социальной сети, ни его пароля , передается лишь общедоступная информация, такая как имя, фамилия, возраст, фотография и некоторые другие данные. Набор открытых данных передаваемых сайту отличаются в зависимости от социальной сети.
Таким образом, можно сделать вывод, что авторизация через социальные сети совершенно безопасна , я бы даже сказал гораздо более безопасная стандартной регистрации на сайте.
Минус только один - незначительная потеря производительности сайта, за счет использования дополнительных скриптов (либо плагинов) и обмена информацией между сайтами.
Уже достаточно давно многие сайты предоставляют наряду со стандартной авторизацией, авторизацию через социальные сети и веб-сервисы. Перед вами стоит выбор:
Но не всё так радужно, как может показаться на первый взгляд. Выделим положительные и негативные стороны социальной авторизации с учётом того, что мы собираемся полностью отказаться от регистрации по комбинации email/пароль.
Достоинства:
С достоинствами этого подхода всё ясно. Нас же больше интересуют недостатки и пути их решения.
P.S. Немного статистики от uLogin можно прочитать
В данной инструкции мы рассмотрим, как настроить авторизацию через следующие социальные сети:
Если вы хотите создать свое приложение для авторизации пользователей, воспользуйтесь инструкциями ниже. При запросе разрешения на авторизацию это позволит вывести свой логотип и название сайта вместо значений по умолчанию:
Нажмите на кнопку «Создать приложение». Откроется страница входа в аккаунт «ВКонтакте»:
Придумайте название приложения и нажмите на кнопку «Создать». На новой странице укажите подробную информацию о приложении. Она будет отображаться при регистрации пользователей (запросе разрешений):
После сохранения изменений перейдите в настройки приложения и скопируйте «ID приложения» и «Защищенный ключ»:
Скопированные значения укажите в панели управления сайтом и нажмите на кнопку «Сохранить»:
Теперь вернитесь к настройкам приложения на сайте «ВКонтакте» и заполните данные:
Приложение готово к использованию. Выполните авторизацию с помощью социальной сети «ВКонтакте» и проверьте, как отображаются указанные в приложении данные.
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Facebook.
Затем нажмите на кнопку «Зарегистрироваться»:
Для регистрации потребуется подтвердить аккаунт, указав номер телефона:
Заполните анкету приложения и нажмите на кнопку «Создайте идентификатор приложения»:
Скопируйте «Идентификатор приложения» и «Секрет приложения». Их нужно указать в панели управления сайтом в полях «Client ID» и «Client secret» соответственно:
Из панели управления скопируйте «Redirect URIs»:
Теперь на сайте разработчиков Facebook выберите пункт «Настройка» в левом меню и на открывшейся странице перейдите на вкладку «Дополнительно»:
На странице найдите «Действительные URL-адреса для перенаправления OAuth» и вставьте в поле полученный ранее URL:
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет «Яндекса». После авторизации заполните форму нового приложения:
Установите следующие права для приложения:
Скопируйте из панели управления сайтом «Callback URI», укажите его в поле «Callback URL» приложения и нажмите на кнопку «Сохранить»:
Скопируйте ID и пароль приложения:
Укажите эти данные в панели управления сайтом:
Приложение готово к использованию.
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Google+.
На открывшейся странице выберите «Google+ API»:
Чтобы включить API, нужно создать проект. Нажмите на кнопку «Создать проект»:
Заполните анкету проекта, примите условия использования, после этого нажмите на кнопку «Создать»:
Теперь можно включить API:
И приступить к созданию приложения:
Создание приложения состоит из четырех шагов:
1. Выбираем тип учетных данных:
2. Создаем идентификатор клиента OAuth 2.0, указываем адрес домена и разрешенный URI перенаправления (скопированный из панели управления):
3. Заполняем информацию о приложении - она будет показана пользователю при регистрации:
4. Нажимаем «Готово»:
Наше приложение готово к работе. Зайдем на его страницу. Для этого нажмите в левой колонке на «Учетные данные» и выберите приложение из списка:
Скопируйте идентификатор и секрет клиента, чтобы указать их в панели управления сайтом:
Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Twitter. Для создания приложения потребуется ввести и подтвердить свой телефонный номер (
