Многие сайты и приложения требуют от пользователей регистрации. Иногда они предлагают выбор — зарегистрироваться или зайти с помощью одной из социальных сетей. Для пользователей это удобно — не нужно каждый раз заполнять регистрационные формы, достаточно нажать кнопку входа и подтвердить доступ.
Как работает вход через соцсеть?
Очень просто: достаточно выбрать «социалку», через которую вы хотите зарегистрироваться, нажать на соответствующую кнопку, а потом подтвердить разрешение на доступ к вашим личным данным. Чаще всего сайт или приложение сами предлагают несколько социальных сетей на выбор. После этого все нужные данные поступят на сайт, и поля в форме регистрации будут заполнены автоматически.
При этом сайт не «узнает» пароль от вашего аккаунта в социальной сети.
Нужно отметить, что при этом сайт не «узнает» пароль от вашего аккаунта в социальной сети — передается только информация из профиля, которая необходима для регистрации . Если сайт кажется вам подозрительным и давать ему доступ к данным вы не хотите, просто выберите обычную регистрацию.
Обратите внимание
Иногда приложения и сайты запрашивают разрешение не только на регистрационные данные из социальных сетей, но и на доступ к списку ваших друзей или публикацию от вашего имени в ленте событий. В таких случаях вы часто можете выбрать, какие действия вы разрешаете, а какие блокируете. Если однажды вы передумаете и решите, что позволили сайту слишком много, вы всегда можете заблокировать доступ к данным социальной сети в настройках этого сайта или приложения.
Многие организации и производители стараются максимально войти в жизнь пользователей, и социальные сети — один из путей.
В целом это удобный способ сэкономить время и не вбивать заново все свои данные, которых бывает много для регистрации. При этом некоторые сайты дают возможность не только заполнить свой аккаунт, но и действовать от него, например, в комментариях, заодно отмечать публикации с этого сайта у себя на странице социальной сети . Часто подобной социальной авторизацией пользуются спортивные приложения и сайты, где после авторизации можно найти друзей, следить за их спортивными успехами, делиться с ними достижениями, соревноваться. Многие организации и производители стараются максимально войти в жизнь пользователей, и социальные сети — один из путей.
Технически это очень распространенное решение, но всегда надо доверять только проверенным сайтам, внимательно обращать внимание на предупреждения и инструкции при авторизации.
По материалам службы поддержки Агента Mail.Ru
Подавляющее большинство сайтов сегодня вместе с основной системой авторизации предоставляют пользователям возможность авторизоваться через социальные сети. Такой подход очень удобен для посетителя сайта, так как ему вообще не нужно заполнять никаких полей. Вместо этого достаточно выбрать кнопку социальной сети, в которой у него уже есть профиль, и за три щелчка мышкой стать авторизованным пользователем сайта.
Как это работает
Возле формы авторизации под надписью «Войти при помощи» установлены кнопки самых популярных сетей. У большинства пользователей есть профиль в той или иной социальной сети. Посетитель выбирает кнопку с иконкой сервиса, с помощью которого он хотел бы зарегистрироваться на сайте.
В качестве примера рассмотрим авторизацию через Facebook.
После того, как посетитель нажал соответствующую кнопку, на экране монитора появляется окно, в котором Facebook запрашивает у пользователя разрешение на то, чтобы сайт, с которого проводится авторизация, получил необходимые данные. Для того, чтобы выразить свое согласие, пользователю достаточно нажать на соответствующую кнопку. Когда посетитель дает свое разрешение данные из социальной сети передаются на сайт и записываются в профиле пользователя.
Теперь посетитель является зарегистрированным пользователем Вашего интернет-магазина.
Такая система авторизации абсолютно безопасна для посетителя, потому что из социальной сети не передается пароль, а сообщаются только данные из профиля пользователя.
Сервисы авторизации
С каждым годом в Интернете становится все больше и больше социальных сетей. Чтобы веб-мастера могли дать возможность пользователям регистрироваться через различные социальные сети, существуют специальные службы, предоставляющие скрипты (мини-программы), которые веб-мастер устанавливает на свой сайт. Таким образом, посетители его сайта могут авторизоваться используя профиль одной из самых популярных социальных сетей.
Самые популярные из таких служб - Loginza и ULogin .
Достоинства метода:
- Легкая интеграция.
- Экономия времени. Устанавливая единожды скрипт одной из этих служб, Вы автоматически делаете возможной авторизацию сразу через множество социальных сетей.
Недостатки:
- Данные авторизованного пользователя передаются не Вам, а службе, которая предоставила скрипт.
- Вы лишены возможности «настраивать» свое взаимодействие с пользователями. Например, предоставляя авторизацию через сеть Вконтакте, Вы не можете «привязать» пользователя к своей группе или публичной странице в этой сети.
- Вы используете преимущества социальных сетей лишь частично.
Создание собственного приложения в социальной сети
Для того, чтобы Ваш сайт и социальная сеть могли обмениваться данными, необходимо каким-то образом «обозначить» присутствие своего сайта в социальной сети. Для этого, в социальных сервисах существует такое понятие, как регистрация приложения. Зарегистрировав приложение, Вы связываете свой сайт с социальной сетью. После этого получаете авторизационные данные приложения, которые необходимо использовать для настройки системы управления сайтов. Теперь пользователи могут проходить авторизацию через данную социальную сеть.
Недостатки метода:
После того, как Вы зарегистрировали приложение в социальной сети, Вам достаточно подключить специальный виджет в административной части сайта и внести в него необходимые данные.
 |
 |
Установить плагин — Social Login, Social Sharing by miniOrange вы сможете прямо из админ-панели wordpress. Перейдите на страницу: Плагины — Добавить новый , введите название плагина в форму поиска, нажмите Enter, установите и активируйте плагин.
После установки и активации плагина, перейдите на страницу: miniOrange Social Login, Sharing. Чтобы подключить плагин вам необходимо зарегистрироваться на сайте miniOrange, для этого нажмите на вкладку — Register or Login with miniOrange . Либо вы можете зарегистрироваться на странице настроек плагина. Введите в форму свои данные, ваше имя, номер телефона, пароль два раза и нажмите на кнопку — Next .
После регистрации перейдите на страницу Social Login (в верхнем меню). Здесь вы сможете настроить отображение соцсетей на странице входа.
— Customize Login Icons, здесь вы сможете настроить внешний вид иконок соцсетей.
— Customize Text For Social Login Buttons / Icons, можно указать текст, который будет отображаться над формой входа и над социальными кнопками.
— Customize Text to show user after Login, можно настроить текст, который будет отображаться для пользователя после входа.
— Display Options, параметры отображения.
Select the options where you want to display the social login icons , выберите где будут отображаться иконки соцсетей.
Redirect URL after login , можно настроить редирект перенаправление после входа.
Enable Logout Redirection , можно настроить редирект перенаправление после выхода.
— Registration Options, по умолчанию включена регистрация через соцсети.
Registration disabled message , сообщение о выключенной регистрации.
— Нажмите на кнопку — Save , чтобы сохранить настройки.
Дополнительные функции:
— Social Comments, можно настроить комментирование через соцсети.
— Licensing Plans, здесь указаны тарифы плагина. В бесплатном тарифе вы можете пользоваться функцией Social Login первые 30 дней бесплатно.
От автора: в данном уроке мы с Вами поговорим об авторизации пользователей на сайте. Но речь пойдет не о классической авторизации, а об авторизации с использованием ресурсов социальной сети ВКонтакте. В данный момент социальные сети пользуются огромнейшей популярностью среди пользователей Интернета и иногда очень удобно использовать у себя на сайте для авторизации непосредственно информацию добавленную пользователем в социальную сеть.
Введение
Для авторизации через социальную сеть ВКонтакте, используется открытый протокол OAuth 2.0. OAuth - это открытый протокол авторизации, который позволяет получить Вам – разработчикам — доступ к ресурсам пользователя хранящимся к примеру в социальной сети ВКонтакте. При этом пользователю вовсе не нужно сообщать Вам свой логин и пароль для доступа к его данным.
Данная система авторизации работает следующим образом. Для начала пользователь должен пройти авторизацию в социальной сети, для этого со своего сайта Вы перенаправляете его на определенный адрес социальной сети (о котором мы еще поговорим). Затем после успешной авторизации — Вконтаке, обратно перенаправит пользователя на Ваш сайт, при этом Вам будет передан специальный код, который необходим для получения данных пользователя и свидетельствующий об успешной авторизации.
Фреймворк YII2. Быстрая разработка с современным PHP фреймворком
Узнай тонкости современной веб-разработки с помощью фреймворка YII2
Теперь, так как мы будем работать непосредственно с социальной сетью, наш скрипт должен располагаться на реальном сервере. Так как будет проходить постоянный обмен данными между нашим скриптом и сервисом ВКонтакте. При этом на локальном компьютере (к примеру Denwer) скрипт работать не будет.
Для удобства работы с удаленным сервером, мы будем использовать текстовый редактор Notepad++, который содержит встроенный плагин по работе с протоколом FTP. Используя который, мы можем открывать и редактировать файлы скрипта непосредственно на удаленном сервере. Для этого запускаем текстовый редактор открываем меню Plugins, далее NppFTP и активируем Show NppFTP Window. При этом будет открыто окно для обзора файлов и папок удаленных серверов. В данном окне необходимо открыть настройки (кнопка Settings), а именно настройки профиля (Profile Settings) и добавить новый профиль для соединения с ftp сервером (при этом необходимо указать настройки подключения).
Затем, кликнув по кнопке Connect выполняем соединение через FTP:
Для добавления новых файлов, достаточно правой кнопкой кликнуть по соответствующей папке и выбрать Create new file. Открыть соответствующий файл можно двойным щелчком мыши.
Создание приложения в контакте
Для создания механизма авторизации через социальную сеть ВКонтакте, у Вас обязательно должен быть ее акаунт. Также необходимо создать приложение, потому как данные пользователей получит именно Ваше созданное приложение, которое также необходимо для идентификации того, кто получает данные.
Итак, создаем приложение, для этого переходим по ссылке https://vk.com/editapp?act=create:
Вводим название приложения и отмечаем галочкой пункт веб-сайт, вводим путь к сайту и его базовый домен (путь к сайту может содержать домен и папку в которой расположен сайт или тестовый скрипт) и нажимаем “Подключить приложение”.
Далее переходим на вкладку настойки и копируем идентификатор приложения и его секретный ключ, которые понадобятся далее. ВАЖНО: ни кому не сообщайте идентификатор приложения и его секретный ключ и не выкладывайте их в открытый доступ, так как они могут быть использованы злоумышленниками.
Еще хотел бы обратить Ваше внимание на следующую страницу: http://vk.com/developers.php?oid=-1&p=%D0%90%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2. Это документация по теме данного урока.
Авторизация ВКонтакте
Первым делом давайте создадим страницу с ссылкой Авторизация, кликнув по которой пользователь будет перенаправлен на страницу авторизации ВКонтакте. Для этого создадим файл index.php:
Контент сайта
Авторизация
Данная страница выглядит следующим образом:
Session_start(); define("APP_ID","идентификатор приложения"); define("APP_SECRET","Секретный ключ"); define("REDIRECT_URI","http://avtomirock.esy.es/auth.php"); define("URL_ACCESS_TOKEN","https://oauth.vk.com/access_token"); define("URL_AUTH ","http://oauth.vk.com/authorize"); define("URL_GET_USER","https://api.vk.com/method/users.get");
Где: APP_ID – идентификатор Вашего приложения, APP_SECRET – секретный ключ, REDIRECT_URI – путь на который ВКонтакте пришлет перенаправит пользователя, URL_ACCESS_TOKEN – путь по которому необходимо выполнить запрос для получения access_token (ключ доступа к данным пользователя), URL_AUTH – путь страницы авторизации ВКонтакте, URL_GET_USER – путь по которому необходимо выполнить запрос для получения данных пользователя. Теперь создадим новый файл (Auth_VK.php) и добавим в него следующий код:
code = $code; } public function set_token($token) { $this->token = $token; } public function set_uid($id) { $this->uid = $id; } public function redirect($url) { header("HTTP/1.1 301 Moved Permanently"); header("Location:".$url); exit(); } } ?>
Данный класс – это логическое ядро нашего скрипта. Свойства класса: $code – код который пришлет ВКонтакте в результате успешной авторизации пользователя, $token – access_token – ключ доступа к данным пользователя; $uid – идентификатор пользователя в системе ВКонтакте. В конструкторе класса мы подключим файл конфигурации. Метод redirect() – необходим для перенаправления пользователя по адресу, который передается в аргументе при вызове метода. Вспомогательные методы set_code(), set_token(), set_uid() – необходимы для установки закрытых свойств класса. Теперь давайте создадим файл auth.php и добавим в него следующий код:
redirect(URL_AUTH."?".$query); } ?>
То есть в начале подключаем ранее созданный класс, затем создаем его объект. Как я говорил ранее после успешной авторизации, ВКонтакте пришлет в данный файл данные, используя GET параметры (то есть через адресную строку). Это будет параметр code – специальный код необходимый для получения access_token. Поэтому если данного параметра нет, значит необходимо перенаправить пользователя на страницу авторизации ВКонтакте. При этом через адресную строку необходимо передать следующие параметры:
client_id – идентификатор приложения пользователя;
scope – права доступа приложения (offline — означает доступ к данным пользователя в любое время);
redirect_uri – путь по которому будет выслан параметр code. Этот адрес должен находиться в пределах домена, указанного в настройках приложения.;
response_type – ответом от сервера должен быть параметр code.
Теперь давайте выполним авторизацию (переходим по ссылке Авторизция):
Вводим логин и пароль, затем необходимо разрешить приложению получать доступ к данным пользователя (в данном случае в роли пользователя выступаем мы и разрешаем своему же приложению получить наши данные). После успешной авторизации Вконтакте перенаправляет нас обратно на страницу auth.php и через адресную строку передает параметр code.
Получение access_code
If($_GET["code"]) { $o->set_code($_GET["code"]); $res = $o->get_token(); } if($_GET["error"]) { exit($_GET["error_description"]); }
Кстати если во время авторизации возникли ошибки, то вместо параметра code, придет параметр error – код ошибки, вместе с ее описанием — error_description. Поэтому если мы действительно получили code, значит, запишем его в свойство класса и вызовем метод get_token(), который получит access_token. Теперь в класс Auth_Vk добавим код метода get_token():
Public function get_token() { if(!$this->code) { exit("Не верный код"); } $ku = curl_init(); $query = "client_id=".APP_ID."&client_secret=".APP_SECRET."&code=".$this->code."&redirect_uri=".REDIRECT_URI; curl_setopt($ku,CURLOPT_URL,URL_ACCESS_TOKEN."?".$query); curl_setopt($ku,CURLOPT_RETURNTRANSFER,TRUE); $result = curl_exec($ku); curl_close($ku); $ob = json_decode($result); if($ob->access_token) { $this->set_token($ob->access_token); $this->set_uid($ob->user_id); return TRUE; } elseif($ob->error) { $_SESSION["error"] = "Ошибка"; return FALSE; } }
Для получения access_token необходимо отправить запрос по адресу хранящимся в константе URL_ACCESS_TOKEN, и передать следующие параметры, используя метод GET:
Запрос отправлять будем используя библиотеку CURL. При этом ответ от сервера ВКонтакте придет в формате строки JSON. Значит, используя функцию json_decode(), декодируем данную строку в объект. Объект мы получим следующего вида:
В случае ошибки мы получим следующее:
То есть мы получим объект у которого будет либо свойство access_token, либо свойство error. Поэтому, если мы получаем access_token – запишем его значение и идентификатор пользователя в соответствующие свойства класса и вернем TRUE, если же придет ошибка — запишем ее в сессию и вернем FALSE.
Получение данных пользователя
После того, как мы получили ключ доступа access_token – можно получить данные пользователя. Для этого в файл auth.php добавим следующий код (после вызова метода get_token()):
If($res) { $o->get_user(); } else { exit($_SESSION["error"]); }
Теперь давайте опишем метод get_user(), который получит и вернет данные пользователя:
Public function get_user() { if(!$this->token) { exit("Wrong code"); } if(!$this->uid) { exit("Wrong code"); } $query = "uids=".$this->uid."&fields=first_name,last_name,nickname,screen_name,sex,bdate,city, country,timezone,photo,photo_medium,photo_big,has_mobile,rate,contacts, education,online,counters&access_token=".$this->token; //echo $query; $kur = curl_init(); curl_setopt($kur, CURLOPT_URL, URL_GET_USER."?".$query); curl_setopt($kur, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($kur, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($kur,CURLOPT_RETURNTRANSFER,TRUE); $result2 = curl_exec($kur); curl_close($kur); $_SESSION["user"] = json_decode($result2); $this->redirect("http://avtomirock.esy.es"); }
Для получения данных пользователя необходимо отправить запрос по адресу, хранящимся в константе URL_GET_USER и отправить следующие данные, используя метод GET:
uids – идентификатор пользователя, полученный вместе с access_token;
fields – данные которые необходимо получить (подробнее о данных можно посмотреть в документации http://vk.com/developers.php?oid=-1&p=users.get)
access_token – access_token полученный ранее.
Как обычно запрос отправляем используя библиотеку CURL. Данные как обычно придут в формате JSON строки, поэтому декодируем их и сохраняем в сессии для дальнейшего вывода на экран. И сразу выполняем редирект на главную страницу нашего сайта. Давайте распечатаем объект данных пользователя, который мы получи после декодирования JSON строки:
Теперь осталось вывести данные пользователя в нужном Вам месте, либо сохранить их в базе данных и т.д. Я выведу данные пользователя сразу под ссылкой Авторизация:
response; //print_r($user); } ?> photo_medium;?>">
first_name;?>
last_name;?>
На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!
Я говорил о том, что сайт нужно сделать максимально удобным для пользователей, также я упоминал о том, что нужно облегчить людям вход на сайт, сделав возможность авторизации через социальные сети. Как и обещал, сегодня я подготовил для Вас мануал, с помощью которого Вы без труда научитесь прикручивать эту фишку к своим сайтам.
Сегодня Вы узнаете, как сделать авторизацию на сайте через такие популярные сервисы как Вконтакте, Facebook и Tweeter. Добавлять авторизацию через эти соц. сети мы будем с помощью специальных сервисов: Loginza и его аналога uLogin. Показывать буду на примере сайта wordpress, посмотреть как это выглядит Вы можете на моем тестовом блоге .
Авторизация через социальные сети с помощью uLogin
Сервис доступен и понятен даже рядовому пользователю интернета. Поддерживает все известные системы управления контентом и многие социальные сети (в том числе одноклассники, mail и Google +). Для установки авторизации переходим на сервис , выбираем нужную платформу (в данном случае wordpress) и кликаем по “ссылка на страницу плагина”:
Нам предложат скачать плагин на компьютер, выбираем папку, куда хотим сохранить архив и скачиваем. Затем распаковываем архив в любую папку на диске и с помощью любого файлового менеджера (я, например, пользуюсь Total Commander’ом) загружаем папку на сайт в директорию wp-content/plugins.
Теперь остается активировать плагин в админке. Переходим в админку, раздел плагины, напротив “uLogin” жмем «активировать». Все! Теперь на нашем вордпресс сайте появилась возможность авторизации и комментирования через самые известные социальные сети:
Если в админке зайти в раздел “плагины”, то там можно увидеть подпункт uLogin, который отвечает за настройку формы:
На странице с настройками можно изменить отображение соц. сетей на панельке формы, меню услуг, запрашиваемые поля, дополнительные поля и текст для входа:
Я здесь ничего не трогал, но как я понял все изменения нужно вносить на английском. В принципе можно поиграться с данными параметрами, однако плагин и без того прекрасно функционирует. Если Вы захотите прикрутить авторизацию к сайтам на других платформах, то в каждом архиве есть файлик Readme, в котором пошагово расписана установка плагина для конкретных CMS.
Как видим, сложного ничего нет, и вся установка займет у Вас всего пару минут.
Установка авторизации через социальные сети с помощью сервиса Loginza
Данный сервис также интегрирован с самыми популярными соц. сетями, а также имеет гибкую настройку окна авторизации. Для начала переходим на сервис и авторизуемся. Сделать это можно с помощью любой социальной сети. После входа Вы попадете на страницу своего аккаунта, где и будет проводиться настройка формы:
Переходим в раздел “мой виджет Loginza” и добавляем нужный сайт:
Для работы с сайтом необходимо подтвердить права на него. Кликаем по кнопке “Подтвердить права”, нас попросят вставить на главную страницу специальный тег:
Здесь мы можем выбрать соц. сети, через которые может авторизоваться пользователь, язык и цветовую схему формы. Чтобы все работало, в соответствующие поля необходимо ввести ID и секретный ключ сайта (о них я писал выше). После всех настроек жмем “Сохранить” и вуаля, все работает:
Вот таким простым способом мы вставили форму авторизации через социальные сети. Честно сказать сервис uLogin мне больше по душе, хотя бы потому, что возни с ним намного меньше.
А на этом у меня все, по вопросам как всегда в комментарии. Если уже что-то очень глобальное, то прямиком в обратную связь. Не будьте редиской и поделитесь статьей в соц. сетях.