Входы на сайты социальных сетей

Коллеги из Red Collar разобрались, как устроена авторизация через социальную сеть на сайте и как понять, что берёт сайт из вашего профиля.

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

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

1. Вы нажимаете на иконку социальной сети на сайте.

2. Вас перебрасывает в закрытое приложение соцсети, которое создал разработчик сайта. Оно пропускает информацию выборочно, с множеством нюансов и защит. Фактически это скорее дверь или шлюз, чем полноценное приложение. В него невозможно попасть и максимум, что можно увидеть — «заглушку».

3. Видимой частью приложения является «поп-ап» всплывающее окно с надписью «Продолжить как (имя)» или «Разрешить».

4. Нажимаете, и социальная сеть посылает сайту ключ доступа. Говорит, что вы согласны дать эти данные.

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

Заглушка на закрытом приложении «ВКонтакте»

Видимая часть закрытого приложения

Пакет «MUSTHAVE-2020» для digital-агентств и веб-студий

RUWARD анонсировал главный коммерческий пакет MUSTHAVE-2020 для digital-агентств и веб-студий на весь 2020 год.

В пакет включено сразу 7 различных крутых опций, сервисов и рекламных форматов в рейтингах Руварда на следующий год.

«Изнанка» сайта выглядит примерно так. Это крохотная часть большого кода. Функция ниже отвечает за обработку ответа провайдера. Тот самый момент, когда вы впервые подтвердили согласие на вход через социальную сеть и нажали «Продолжить как (имя)». После первого и единичного подтверждения со стороны пользователя работает каждый раз автоматически.

Функция обработки ответа от провайдера

Что берёт сайт и зачем

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

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

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

Для ряда параметров нужна дополнительная проверка со стороны социальной сети при запросе на эти данные. Подробнее про них и другие разрешения при работе с Facebook можно найти на сайте Facebook for Developers. Альтернативные списки существуют для каждой социальной сети на официальных страницах с информацией — вот как это выглядит во «ВКонтакте» и «Одноклассиниках».

Зачем это владельцам сайтов

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

Какую информацию может взять сайт из разных социальных сетей. Источник: CXL

Руководитель студии поискового маркетинга Semantica

«Уже много лет мы работаем с проектами, у которых на сайте стоит авторизация через соцсети, и в 100% случаев клиенты не хотят использовать возможности на полную. Главная причина: малому и среднему бизнесу (какими и являются наши клиенты) хватает несложных инструментов для достижения целей. Собрать максимальные данные о пользователе не так трудно, а вот потом придумать, зачем их использовать и навести в них порядок — это уже нетривиальная задача. Это как с big data: данные собирают все, а используют единицы. Если говорить об использовании этих данных в рекламе, то для среднего и малого бизнеса дополнительные расходы на программиста и часы специалиста по рекламе нет смысла оплачивать, когда есть ремаркетинг. Другой сценарий: сегментация пользователей, данные которых получили при авторизации для персонализации товаров на самом сайте или же для использования этих данных в email-рассылке. Здесь мы сталкиваемся с тем, что нужен квалифицированный специалист для создания технического задания и приличное число часов программиста. И при оценке этих затрат вырисовывается печальная картина: все эти работы окупятся через несколько лет. И кому это надо? Для крупного бизнеса — проект с десятками или сотнями тысяч авторизаций — как правило, выгодно использовать все возможности авторизации через соцсети. Для среднего и малого бизнеса это остаётся просто упрощением регистрации на сайте».

Сохранность данных и ответственность сторон

Ответственность за сохранность персональных данных лежит на четырёх сторонах: разработчик сайта, собственник сайта, социальная сеть и провайдер.

Социальная сеть

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

Владелец сайта

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

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

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

Пробуем найти ответ, что это за информация и зачем она нужна в «политике конфиденциальности»:

«Регистрация — совокупность действий Пользователя в соответствии с указанными на Х инструкциями, включая предоставление Учётных данных и иной информации, совершаемых Пользователем с использованием специальной формы пользовательского интерфейса Х в целях формирования Личного кабинета и получения доступа к отдельным Сервисам Х.

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

Ответа на вопрос «какие данные берутся» не видно, только общие слова об «иной» информации. Документ не даёт ни чётких объяснений, какую информацию возьмёт сайт из вашего профиля, ни 100% гарантии сохранности данных.

Разработчик

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

Провайдер

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

Юридическая сторона

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

Войди в ВК кнопкой «Вход», и сайт будет показывать, кто из твоих друзей сейчас в онлайне, есть ли новые сообщения, ответы, лайки и прочее.

Одним нажатием ты войдешь на свою страницу ВКонтакте.

Войди в Одноклассники кнопкой «Вход», и сайт будет показывать на этом месте количество новых сообщений, гостей, оценок.

Одним нажатием ты перейдешь в Одноклассники прямо на нужную страницу.

Войди кнопкой «Вход»
Новых писем:

В Моем Мире:
Друзей в онлайне: Кто?
Сообщений:
Событий:
Заявок в друзья:

Стартовая страница с удобными функциями. Чтобы войти на любой сайт, просто нажми «Вход».

Сайты можно добавлять, удалять, перетаскивать. Настройки — в правом верхнем углу.

Топ блогов

Новости дня

Не о чем спеть. Нечего показать.

В молодости Наталья Ветлицкая была красивой женщиной.

Баян, но смешно

Жил-был на свете один капитан дальнего плавания, у которого была необычайно счастливая семья.

Тро-ло-ло

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

О нападении на российский патруль в Рожаве

Коротко по истории с нападением на российский патруль в Рожаве.

15 красивейших женщин со всего мира без макияжа

Мы привыкли видеть их на обложках глянцевых журналов и модных показах.

История про чужую жену

Ну давайте попробуем рыбацкую историю прочитать с точки зрения фокуса и локуса? Фокус и локус – это правая половина среднего круга эго.

Преследование

Ну, наконец-то! Я думала, что очень долго ещё не напишу об этом.

Немецкая фигуристка о российском фигурном катании – "это цирк на льду"

Классическая тема. Когда кто-то не дотягивает до уровня другого, он обычно говорит – "вы ничего не понимаете, одна я тут стою в белом".

ветер

Виноградная лоза под воздействием ветра рисует этикетки для.

Станция Скайлэб никогда не была в космосе

Это точно такой же фейк, как и высадка на Луне. Смотрите, вот стоп кадр из видео с МКС с эпизодом космического обеда.

Власти США впредь не будут считать, что строительство Израилем поселений на территории Западного берега является нарушением международного права, сообщил глава госдепартамента Майк Помпео.

6 ч 29 мин назад

Генерал-майор Сергей Дубинский, обвиняемый в получении взятки в особо крупном размере и находящийся под арестом в «Матросской тишине», попросил суд изменить его меру пресечения на домашний арест из-за развившегося у него онкологического заболевания.

7 ч 18 мин назад

В городе Дункан в штате Оклахома произошла стрельба на парковке супермаркета Walmart. В результате инцидента погибли три человека.

8 ч 18 мин назад

Главные редакторы крупных российских интернет-изданий обратились в Роскомнадзор с требованием объяснить штрафы за гиперссылки, ведущие на внешние страницы с нецензурной лексикой.

9 ч 44 мин назад

Газета The New York Times опубликовала 403 страницы секретных документов, проливающих свет на то, как руководство Китая сформировало свою нынешнюю политику в отношении уйгуров. Свыше 10 миллионов представителей этого тюркского народа — подавляющее большинство — живут на северо-западе Китая.

10 ч 11 мин назад

18 ноября «Яндекс» объявил о новой структуре управления компанией — ключевые решения будут под контролем расположенного в калининградском «офшоре» фонда. Сразу после этого пресс-секретарь президента Дмитрий Песков отверг любые предположения, что «Яндексу» пришлось согласовывать нововведения.

10 ч 39 мин назад

Актеры Бен Аффлек, Галь Гадот, Джейсон Момоа, Рэй Фишер, Джереми Айронс высказались в поддержку режиссера Зака Снайдера: они разместили в своих соцсетях посты с хештегом #ReleaseTheSnyderCut, призывающим компанию Warner Bros. выпустить фильм «Лига справедливости» в режиссерской версии Зака.

10 ч 55 мин назад

Глава Минкультуры Владимир Мединский в своих соцсетях объявил об открытии нового парка во дворе Интендантских складов в Санкт-Петербурге. Министр отметил современную планировку, освещение, а также похвалил ухоженные деревья и газоны.

11 ч 20 мин назад

ВХОД: Стартовая страница

Добро пожаловать! Вход на сайт ВК, Одноклассники, Фейсбук (Facebook), Майл.ру (Mail.Ru), Мой Мир — просто и быстро. Отсюда легко войти на сайты социальных сетей, в почту и на другие сайты, которые ты часто используешь. А еще здесь — поиск в интернете, погода, новости и самое интересное в блогах.

Вход — удобная стартовая страница с дополнительными функциями, которая экономит твое время и позволяет все время быть на связи с друзьями. Не является анонимайзером.

Погода

Нравится сайт?
Поделись с друзьями!

Вход на сайт ВКонтакте, Одноклассники, Фейсбук, Инстаграм, Майл.ру, Мой Мир, Твиттер, знакомства

ВХОД (VHOD.RU) — отсюда можно быстро войти на сайты социальных сетей ВКонтакте, Одноклассники, Фейсбук, Инстаграм, Мой Мир, Твиттер, а также в почту Майл.ру и другие сайты, которыми ты часто пользуешься. Это стартовая страница для входа на сайты одним нажатием, которая всегда под рукой. Здесь видно, кто из друзей сейчас в онлайне, кто поставил лайк или написал тебе сообщение. Тут же — удобный поиск в интернете, прогноз погоды в твоем городе и популярные записи в блогах, которые обновляются каждый час.

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

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

Не забудь сделать ВХОД стартовой (начальной страницей) в твоем браузере. Это удобно.

Новости

Почему ссылка не открывается? Решение проблемы

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

Как меня взломали? Почему? Понятие о «взломе»

Когда злоумышленники «взламывают» твою страницу, это всегда происходит неожиданно. Но как это случилось, что к этому привело? Можно ли было предотвратить «взлом» (да и вообще, правильно ли это называть «взломом»)? Рассказываем о самых распространенных способах, которыми тебя ловят на крючок, и как от этого защититься: Как меня взломали? Почему? Понятие о «взломе».

Пропал цвет фона непрочитанных сообщений в ВК?

17 октября 2019

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

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

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

Сегодня мы рассмотрим более обобщённый пример с прикруткой к базе данных и прочими фишками.

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

Саму библиотеку вы можете найти в исходниках, а также на GitHub. Это моя первая раздача, так что прошу строго не судить. На данный момент, поддерживается работа с шестью соц сетями: ВКонтакте, Одноклассниками, Mail.ru, Yandex, Google и Facebook. В будущем я планирую развивать и совершенствовать данную систему. Поскольку библиотека выложена в свободном доступе на GitHub, я буду рад всяческому содействию с вашей стороны. Ну а для того, чтобы посмотреть, как работает SocialAuther, давайте двигаться дальше.

Сразу же хочу уточнить одну деталь. Для работы библиотеки, вам понадобится версия PHP 5.3 и выше. Для того, чтобы понять, как использовать библиотеку SocialAuther, я буду приводить как частные, так и общие для этого урока примеры.

Автозагрузка классов

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

Использование SocialAuther с одной отдельной социальной сетью

Перед тем, как приступить к более обширному примеру, давайте рассмотрим использование библиотеки в рамках одной социальной сети. К примеру, “ВКонтакте”. Для начала нам нужно сконфигурировать массив с параметрами: `client_id`, `client_secret`, `redirect_uri`:

Далее создаём объект класса адаптера ВКонтакте и передаём сконфигурированные параметры:

После того, как адаптер сконфигурирован, создаём объект класса SocialAuther:

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

Для совершения аутентификации достаточно вызвать метод authenticate(), который вернёт true, если всё произойдёт хорошо, и false, если возникнет ошибка:

Далее мы можем получить следующую информацию, которая нужна практически каждому: социальный ID пользователя, имя, email, ссылка на профиль пользователя, пол, день рождения и ссылку на аватар. Если данных в этом поле нет, то метод вернёт null.

Работать с остальными социальными сетями можно практически таким же образом. Более подробную информацию можете найти на GitHub.

Использование SocialAuther с несколькими социальными сетями

Теперь мы займёмся применением SocialAuther при подключении нескольких социальных сетей.

Конфигурация параметров приложений

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

1. Ключи ‘vk’, ‘odnoklassniki’, ‘mailru’, ‘yandex’, ‘google’ и ‘facebook’ выбраны не просто так. Эти названия в дальнейшем мы будем использовать для динамического создания каждого из адаптеров.

2. Обратите внимание, что к каждому `redirect_uri` мы приписали параметр `adapter`, который равен названию соц сети. Эти ссылки (пр. http://localhost/auth?prov >

Создание адаптеров классов.

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

Для того, чтобы было яснее, возьмём маленький пример. Берём фрагмент массива параметров:

Допустим, в цикле foreach пришёл черёд данного элемента с ключом `odnoklassniki`. Название ключа записывается в переменную $adapter, а массив с параметрами – в переменную $settings. Далее первая операция создаст имя класса, а вторая задаст ему параметры и запишет адаптер в общий массив.

Генерация ссылок аутентификации

Теперь где-то в html коде делаем проверку на наличие GET параметра code, и если он присутствует, то мы можем выводить ссылки для аутентификации:

Создание объекта SocialAuther для аутентификации пользователя

Создать объект SocialAuther и авторизовать пользователя мы можем, если к нам придёт GET параметр provider. Также если название адаптера совпадает хоть с одним из наших хранящихся в общем массиве, создаём объект класса SocialAuther и передаём адаптер той социальной сети, через которую авторизовался пользователь:

Аутентификация пользователя и получение данных

Теперь, когда у нас есть объект SocialAuther, можем вызывать метод authenticate(), а затем получить данные о пользователе:

Прикрутка к БД

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

Создание БД и таблицы

Для данного урока создайте любую MySQL базу данных. Я назову её `auth`. В ней, с помощью данного кода, сгенерируйте таблицу:

Поле id – это стандартный автоинкрементный индекс. В колонку `provider` записываем название социальной сети учётной записи пользователя. Все остальные поля соответствуют методам, которые мы можем вызвать от объекта SocialAuther для получения информации о пользователе.

Настройка подключения к БД

Данный функционал я предлагаю вынести в отдельный файл. К примеру, config.inc.php:

Тут мы подключились к базе, выбрали таблицу и задали кодировку UTF8. Теперь данный файл можно присоединить к index.php и работать с таблицей.

Вставка нового пользователя

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

Тут всё происходит так, как я и говорил. Сначала проверяем, есть ли в таблице пользователь с пришедшем к нам id и provider. Если нет, то формируем массив значений, затем выполняем INSERT запрос.

Обновление данных пользователя в базе

Если в базе данных пользователь уже есть, то было бы неплохо проверить обновил ли он какие-то данные или нет. Для этого создаём объект стандартного класса и помещаем в него данные о пользователе из БД. Далее в коде, когда получим данные о пользователе из социалки, проверим данные два объекта на равенство и если они не равны, то обновим запись в базе.

Привязка к сессии

В принципе, нам осталось сделать только одно – привязать нашего пользователя к сессии, чтобы в дальнейшем, на других страницах, мы могли доставать информацию о нём. Делается это очень просто. Для начала в файл config.inc.php вписываем функцию активации сессий:

Далее в index.php, после блока проверки существования пользователя, формируем объект стандартного класса (поля) и записываем в них информацию о пользователе:

Затем записываем только что созданный объект в сессию под ключом `user`.

Теперь на любой другой странице (к примеру, info.php) достаём данные из сессии и выводим на экран:

Файл config.inc.php подключать обязательно, ведь там находится вызов функции session_start().

Реализуем выход пользователя из системы

Рано или поздно пользователь захочет выйти из нашей системы. Для этого создадим отдельный файл logout.php:

Тут просто удаляем сессию с ключом `user` и перенаправляем пользователя на главную страницу.

Последние штрихи

Ну, вот в принципе и всё. Что ещё можно добавить? Разве что можем усилить проверки на главной странице и в нескольких if-ах проверять наличие сессии. В общем, смотрите сами, как вам удобнее. Привожу полный код файла index.php:

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

У меня на этом всё. Удачи вам! И до новых встреч!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.ruseller.com
Автор: Станислав Протасевич
Урок создан: 26 Марта 2013
Просмотров: 183210
Правила перепечатки

5 последних уроков рубрики "PHP"

• 

Фильтрация данных с помощью zend-filter

Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

Подключение Zend модулей к Expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Совет: отправка информации в Google Analytics через API

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Подборка PHP песочниц

Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.