Меню
ГлавнаяФайлы и папки

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

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

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

ВКонтакте

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

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

После сохранения изменений перейдите в настройки приложения и скопируйте «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. Для создания приложения потребуется ввести и подтвердить свой телефонный номер (

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

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

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

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

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

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

Для организации авторизации на сайте через соцсети можно воспользоваться специальными сервисами, которые могут быть как платными, так и бесплатными, а так же использовать на своем сайте специальные расширения. А можно пойти другим путем и написать собственное расширение, если Вы знакомы с языком PHP.

Вариантов организации входа на сайт через социальные сети хватает.

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

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

Наиболее популярные и распространенные сервисы авторизации - Slogin, ULogin и Loginza. Оба этих сервиса предлагают плагины практически для всех CMS, что делает их еще более привлекательными для новичков.

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

Преимущества:

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

Недостатки:

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

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

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

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

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

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

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

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

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

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

Плюсы и минусы авторизации через социальные сети

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

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

Есть полезная конкретная информация о технической реализации.

А если вкратце, то...

Для авторизации, регистрации используется все та же таблица "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.

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

Как происходит авторизация?

Авторизация ВКонтакте ничем не отличается от любой другой авторизации через сторонний сервер. Этот процесс отлично описал пользователь StackOverflow qnub :

  1. На сервисе (в данном случае ВК) необходимо зарегистрировать приложение и получить ключ API.
  2. После этого приложение (сайт) могут делать запрос личных данных пользователя у стороннего сервиса через этот самый API, для чего:
    • перенаправить пользователя (браузер пользователя посредством посылки ему HTTP-ответа 302 Redirect) по специально сформированной ссылке на сервис предоставляющий API;
    • пользователь произведёт там какие-то действия, предположительно авторизуется и разрешит доступ к данным.
  3. По завершении действий пользователь будет перенаправлен сторонним сервисом посредством всё того же 302 Redirect на URL переданный в параметрах специально сформированной ссылки .

Шаг первый. Зарегистрировать своё приложение и получить ключ

Этот шаг самый простой. Нужно перейти на страницу ВК для разработчиков: https://vk.com/dev - и нажать на кнопку «Создать приложение». Тип указываем как «Standalone-приложение», имя, естественно, указываем произвольное. После этого в разделе «Мои приложения» появится (что бы вы думали?) ваше приложение. Смело нажимайте «редактировать», затем переходите в раздел «Настройки» - там первой же строкой вы увидите надпись «ID приложения: 1234567 ». Эти цифры - всё, что вам нужно запомнить для авторизации.

Заметьте, что нет никакого смысла скрывать ID приложения - он публично показывается, например, при отправке сообщения на стену через это приложение. Ни токены, ни любую другую информацию украсть, используя ID, нельзя. В общем-то, вы можете использовать даже ID моего приложения (если вам нужно написать небольшой скрипт для себя).

Шаг второй. Формирование специальной ссылки

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

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

Хост всегда остаётся неизменным: https://oauth.vk.com/authorize . Набор параметров так же неизменен:

  • client_id . Здесь стоит указать те самые цифры, которые мы добыли в первом шаге.
  • redirect_uri . Адрес, по которому будет перенаправлен пользователь. Для Standalone приложений это только https://oauth.vk.com/blank.html .
  • display . Этот параметр отвечает за то, как будет показываться страница авторизации. Доступно три варианта: page , popup и mobile . Если не уверены, используйте page .
  • scope . В этом параметре вам следует через запятую перечислить параметры доступа, которые вам необходимы. Полный список доступных параметров приведён на соответствующей странице документации. Обращаю ваше внимание, что можно не указывать вообще ничего и просто не писать этот параметр. Чтобы узнать, какие опции доступа вам нужны посмотрите в документацию методов , которые вы собираетесь использовать.
  • response_type . Указываем token и идём дальше.
  • v . Версия API. Актуальная – 5.59 .

https://oauth.vk.com/authorize?client_id=1&display=page&redirect_uri=http://example.com/callback&scope=friends&response_type=token&v=5.59

Шаг третий. Что дальше?

http://REDIRECT_URI#access_token=TOKEN 3&expires_in=TIME &user_id=ID

Нас интересует TOKEN . Как же направить пользователя на страницу из Java-приложения и как получить адрес страницы, на которую его перенаправит ВК (чтобы извлечь из неё токен)? Существует два способа.

Если вы решили пойти по этому пути, то вы просто открываете браузер системы по умолчанию с полученной выше ссылкой, а пользователю каким-то образом сообщаете, что он должен скопировать из URL токен и вставить его в какое-то поле. Понятно, что у этого метода отвратительный UX, однако его можно реализовать легко и быстро. Вполне подойдёт, если вы пишете приложение для себя - чтобы скачать музыку или получать уведомления. Реализуется он следующим образом:

Public String askToken(String link) throws IOException, URISyntaxException{ //Opens link in default browser Desktop.getDesktop().browse(new URI(link)); //Asks user to input token from browser manually return JOptionPane.showInputDialog("Please input access_token param from browser: "); }

Буржуазный, через веб-компоненты

Если вы решили пойти по этому пути, то вам потребуется использовать какую-либо стороннюю GUI-библиотеку (или по крайней мере JavaFX), у которой в арсенале есть свой компонент браузера. Над таким бразуером ваша программа будет иметь полную власть, и вы сможете извлечь адрес, на который вас перенаправил ВК, программными средствами. На JavaFX это можно реализовать следующим образом:

Import javafx.application.Application; import javafx.beans.value.ChangeListener; import javafx.beans.value.ObservableValue; import javafx.scene.Scene; import javafx.scene.web.WebEngine; import javafx.scene.web.WebView; import javafx.stage.Stage; public class Main extends Application{ public static final String REDIRECT_URL = "https://oauth.vk.com/blank.html"; public static final String VK_AUTH_URL = ""; //TODO!!! public static String tokenUrl; public static void main(String args){ System.out.println(Main.getTokenUrl()); } public static String getTokenUrl(){ launch(Main.class); return tokenUrl; } @Override public void start(Stage primaryStage) throws Exception { final WebView view = new WebView(); final WebEngine engine = view.getEngine(); engine.load(VK_AUTH_URL); primaryStage.setScene(new Scene(view)); primaryStage.show(); engine.locationProperty().addListener(new ChangeListener(){ @Override public void changed(ObservableValue observable, String oldValue, String newValue) { if(newValue.startsWith(REDIRECT_URL)){ tokenUrl=newValue; primaryStage.close(); } } }); } }

Заключение

Таким образом, мы научились получать access token ВКонтакте, с помощью которого можно вызывать методы API. Если эта статья вызовет у сообщества интерес, в следующей статье я опишу, как вызывать те или иные API-методы с помощью токена, как проверять токен на валидность (метод secure.checkToken() , конечно), и напишу какое-нибудь демонстрационное приложение, например, для сохранения всей музыки из плейлиста на компьютер. Кстати, не стоит забывать, что на самом деле всё придумано до нас, и уже есть библиотеки для работы с VK API почти для любого языка. У нас есть , в которой мы постарались собрать лучшие из них.

Если есть какие-то идеи или вопросы - добро пожаловать в комментарии (я их читаю и всем отвечаю). Так же вопросы можно задать

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

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

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

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

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

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

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

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

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

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

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

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

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

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