Авторизация через профили социальных сетей. Вход с помощью социальных сетей

Nokia 26.06.2019
Nokia

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

Как работает вход через соцсеть?

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

При этом сайт не «узнает» пароль от вашего аккаунта в социальной сети.

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

Обратите внимание

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

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

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

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

По материалам службы поддержки Агента Mail.Ru

В данной инструкции мы рассмотрим, как настроить авторизацию через следующие социальные сети:

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

ВКонтакте

Нажмите на кнопку «Создать приложение». Откроется страница входа в аккаунт «ВКонтакте»:

Придумайте название приложения и нажмите на кнопку «Создать». На новой странице укажите подробную информацию о приложении. Она будет отображаться при регистрации пользователей (запросе разрешений):

После сохранения изменений перейдите в настройки приложения и скопируйте «ID приложения» и «Защищенный ключ»:

Скопированные значения укажите в панели управления сайтом и нажмите на кнопку «Сохранить»:

Теперь вернитесь к настройкам приложения на сайте «ВКонтакте» и заполните данные:

  • «Open API» - включен;
  • «Адрес сайта» и «Базовый домен» - ваш прикрепленный домен.

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

Facebook

Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Facebook.

Затем нажмите на кнопку «Зарегистрироваться»:

Для регистрации потребуется подтвердить аккаунт, указав номер телефона:

Заполните анкету приложения и нажмите на кнопку «Создайте идентификатор приложения»:

Скопируйте «Идентификатор приложения» и «Секрет приложения». Их нужно указать в панели управления сайтом в полях «Client ID» и «Client secret» соответственно:

Из панели управления скопируйте «Redirect URIs»:

Теперь на сайте разработчиков Facebook выберите пункт «Настройка» в левом меню и на открывшейся странице перейдите на вкладку «Дополнительно»:

На странице найдите «Действительные URL-адреса для перенаправления OAuth» и вставьте в поле полученный ранее URL:

Яндекс

Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет «Яндекса». После авторизации заполните форму нового приложения:

Установите следующие права для приложения:

  • Доступ к дате рождения;
  • Доступ к адресу электронной почты;
  • Доступ к логину, имени и фамилии, полу.

Скопируйте из панели управления сайтом «Callback URI», укажите его в поле «Callback URL» приложения и нажмите на кнопку «Сохранить»:

Скопируйте ID и пароль приложения:

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

Приложение готово к использованию.

Google+

Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Google+.

На открывшейся странице выберите «Google+ API»:

Чтобы включить API, нужно создать проект. Нажмите на кнопку «Создать проект»:

Заполните анкету проекта, примите условия использования, после этого нажмите на кнопку «Создать»:

Теперь можно включить API:

И приступить к созданию приложения:

Создание приложения состоит из четырех шагов:

1. Выбираем тип учетных данных:

2. Создаем идентификатор клиента OAuth 2.0, указываем адрес домена и разрешенный URI перенаправления (скопированный из панели управления):

3. Заполняем информацию о приложении - она будет показана пользователю при регистрации:

4. Нажимаем «Готово»:

Наше приложение готово к работе. Зайдем на его страницу. Для этого нажмите в левой колонке на «Учетные данные» и выберите приложение из списка:

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

Twitter

Нажмите на кнопку «Создать приложение» и на открывшейся странице выполните вход в личный кабинет социальной сети Twitter. Для создания приложения потребуется ввести и подтвердить свой телефонный номер (

Итак, приступим к технический части. Для этого мы создадим и настроим новое приложение в социальной сети. После чего напишем класс, который будет взаимодействовать с API «ВКонтакте»: устанавливать соединение и получать данные о пользователе. В результате проделанных действий, мы сможем авторизовать пользователя у себя на сайте.

Создаём новое приложение «ВКонтакте»

Перед тем, как писать код, нам нужно зарегистрировать новое приложение. Делается это просто, заходим в свой профиль, переходим в раздел приложения и в нем кликаем на кнопку «Управление». В этом разделе вы увидите список всех приложений, которыми вы пользуетесь и кнопку «Создать приложение», жмём по ней. Заполняем название и выбираем пункт «Веб-сайт».

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


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


Пишем класс для работы с API

Перед тем, как написать класс, мы определим его логику, которая будет содержать 3 свойства и 3 метода (включая конструктор).

Class VKAuth{ public $settings = array(); public $auth_status = false; public $user_info = array(); public function __construct($settings){ } public function auth($code){ } public function get_link(){ } }

  • settings – отвечает за хранение настроек для подключения к API;
  • auth_status – статус аутентификации, если пользователь пройдет, то значение изменяться на true;
  • В конструкторе мы будем принимать настройки для подключения, и сохранять в переменную settings;
  • auth – метод, который будет производить соединение с API и вытягивать нужные нам данные (принимает код для получения ключа доступа);
  • get_link – метод генерирующий путь ссылки для аутентификации.

Теперь давайте рассмотрим каждый из методов подробно:

1. Конструктор:

Как и было раннее оговорено, мы принимаем настройки и сохраняем их в переменную settings. Для надёжности проверяем наличие их при помощи функции isset().

Public function __construct($settings){ if(isset($settings["client_id"], $settings["client_secret"], $settings["redirect_uri"])){ $this->settings = $settings; } }

С начала мы проверяем наличие переменных code и settings. Если всё нормально, то формируем первый запрос, который будет состоять из массива данных, обёрнутых в две функции.

urldecode() – декодирует %## символы в url.

http_build_query() – генерирует строку запроса.

После того, как мы обратимся по сформированному адресу, нам в ответ придет json строка. Для удобства, получаемые данные мы преобразуем в массив, делается это путем передачи у функции json_decode() второго параметра true. Данный массив будет содержать три ячейки: access_token, expires_in и user_id.

Идём дальше, проверяем наличие токена и формируем новый запрос на получение данных пользователя. В нашей функции мы будем сохранять: id, имя, фамилию и аватарку. Для этого через запятую в ячейку fields поместим строку с параметрами «uid,first_name,last_name,photo_100». Какие ещё данные пользователя можно получить описаны в документации объекта user . Обращаемся по новой ссылке и получаем ответ в виде массива. Проверяем наличие принятых данных и сохраняем их в переменную user_info (принятый массив является многомерным, данные будут храниться в нулевой ячейке response), а так же значение auth_status меняем на true и возвращаем true.

Public function auth($code){ if($code && $this->settings){ $query = urldecode(http_build_query(array("client_id" => $this->settings["client_id"], "client_secret" => $this->settings["client_secret"], "code" => $code, "redirect_uri" => $this->settings["redirect_uri"]))); $token = json_decode(file_get_contents("https://oauth.vk.com/access_token?".$query), true); if(isset($token["access_token"])){ $query = urldecode(http_build_query(array("uids" => $token["user_id"], "fields" => "uid,first_name,last_name,photo_100", "access_token" => $token["access_token"]))); $this->user_info = json_decode(file_get_contents("https://api.vk.com/method/users.get?".$query), true); if(isset($this->user_info["response"]["uid"])){ $this->user_info = $this->user_info["response"]; $this->auth_status = true; return true; } } } return false; }

Первым делом проверяем наличие настроек, а далее формируем путь для ссылки. Функции, которые используются, описаны выше. Когда пользователь нажмёт на ссылку с этим путём, то его перебросит на страницу c параметром code в адресной строке – код для получения токена.

Public function get_link(){ if($this->settings){ $query = urldecode(http_build_query(array("client_id" => $this->settings["client_id"], "redirect_uri" => $this->settings["redirect_uri"], "response_type" => "code"))); return "https://oauth.vk.com/authorize?".$query; } return false; }

Простая авторизация

На этом этапе – всё довольно рационально. После того как вы подключите класс к файлу, останется получить экземпляр VKAuth, передав ему настройки. Ниже описываем простой обработчик, который отлавливает переменную $_GET и проверяем аутентификацию.

Require_once("VKAuth.php"); $vk = new VKAuth(array("client_id" => "ID_приложения", "client_secret" => "защищенный_ключ", "redirect_uri" => "адрес_сайта")); if(isset($_GET["code"])){ if($vk->auth($_GET["code"])){ // Делаем свои дела } }

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

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

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

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

Как зайти на Вконтакте или Одноклассники без регистрации?

Если основная задача перехода на соц. сети не регистрируясь – это поиск людей, то намного проще воспользоваться специальным сервисом от Яндекса. Перейдите по ссылке yandex.ru/people и вы попадете в специальный поиск по людям. Достаточно указать имя и фамилию, чтобы получить список:

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

Аналогичным образом можно провести поиск в любых других соц. сетях. При использовании Вконтакте можно и не переходить на Яндекс.Люди. Там поиск по пользователям открыт для всех. Введите в адресной строке vk.com/search и откроется нужная вам страница:

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

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

Одноклассники без регистрации

Просто перейдите на этот сайт и на главной странице вы увидите популярные записи и видеоролики:

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

Посещайте соц сети, несмотря на ограниченные функции, вы всё равно сможете просматривать профили и почти весь контент. Если этого вам будет недостаточно, но вы не хотите пользоваться своим профилем, то лучший вариант – это создание дополнительной страницы. Нет свободного номера телефона? Купите готовый аккаунт на Buyaccs.com. В этом интернет-магазине продаются профили почти от всех соц. сетей:

Стоимость зависит от того, насколько заполнен аккаунт и сколько на нем друзей. Оплачивать можно любыми способами, с банковских карт, электронными деньгами и даже перевести с баланса телефона (через Робокассу). Потратив немного денег, вы получите профиль и сможете использовать социальные сети без регистрации.

Такими сайтами как Вконтакте, Одноклассники, Facebook и Twitter пользуются в различных целях, но нельзя забывать, что все они подходят для удаленной работы. Узнайте и пользуйтесь ими, выполнив простейшие действия, вы легко получите небольшие деньги, чтобы купить себе аккаунты или оплатить мобильную связь.

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

Как это работает

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

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

Теперь посетитель является зарегистрированным пользователем Вашего интернет-магазина.

Сервисы авторизации

С каждым годом в Интернете становится все больше и больше социальных сетей. Чтобы веб-мастера могли дать возможность пользователям регистрироваться через различные социальные сети, существуют специальные службы, предоставляющие скрипты (мини-программы), которые веб-мастер устанавливает на свой сайт. Таким образом, посетители его сайта могут авторизоваться используя профиль одной из самых популярных социальных сетей.

Самые популярные из таких служб - Loginza и ULogin .


Достоинства метода:

  • Легкая интеграция.
  • Экономия времени. Устанавливая единожды скрипт одной из этих служб, Вы автоматически делаете возможной авторизацию сразу через множество социальных сетей.

Недостатки:

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

Создание собственного приложения в социальной сети

Для того, чтобы Ваш сайт и социальная сеть могли обмениваться данными, необходимо каким-то образом «обозначить» присутствие своего сайта в социальной сети. Для этого, в социальных сервисах существует такое понятие, как регистрация приложения. Зарегистрировав приложение, Вы связываете свой сайт с социальной сетью. После этого получаете авторизационные данные приложения, которые необходимо использовать для настройки системы управления сайтов. Теперь пользователи могут проходить авторизацию через данную социальную сеть.



Рекомендуем почитать

Наверх