Как сделать «вход на сайт через контакт» или ВК OpenAPI? – Записки начинающего админа и сеошника

Авторизация через вконтакте, и другие для самых начинающих — 1

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

Итак, начнем с ВКонтакте. Заходим на

страницу подключения сайта

, в дальнейшем настройки подключенного сайта будут доступны вам на странице

управления приложениями

, там мы узнаем ID приложения и секретный ключ, который естественно раскрывать никому нельзя.

На странице, на которой предполагается кнопочка «Войти через ВКонтакте» требуется добавить в head страницы

<scripttype="text/javascript"src="http://userapi.com/js/api/openapi.js?34"></script>

И инициализировать приложение:

VK.init({apiId: __APP_ID___});

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

      <divid="vk_auth"></div>
<scripttype="text/javascript">
VK.Widgets.Auth("vk_auth", {width: "300px", authUrl: '/vklogin.php?'});
</script>

Что увидит пользователь:

Как сделать «вход на сайт через контакт» или ВК  OpenAPI? - Записки начинающего админа и сеошника

После щелчка на «Войти через ВКонтакте» пользователя кидает на страницу вида vkontakte.ru/widget_auth.php?act=a_auth_user&app=__APP_ID__&hash=d2d47b3c85d1a091a8, затем на url, указанный вами в параметре AuthUrl при вызове виджета. Кидает со следующими GET параметрами:
first_name (имя), hash (используется для проверки того действительно ли запрос пришел от контакта, а не хакер Вася пытается авторизоваться под чужими данными), last_name (Фамилия), photo (большая аватарка, 119 пикселей шириной), photo_rec (маленькая аватарка, 50х50), uid (id пользователя). Пришедшие к нам параметры я после фильтрации сохранил с такими же именами в глобальной области видимости.
Теперь нам нужно сделать скрипт vklogin.php, в котором мы будем проверять правильность пришедших данных и, либо авторизовывать пользователя если он уже есть в нашей базе, либо создавать новый аккаунт для пользователя зашедшего к нам впервые.

if ($_REQUEST['hash']==md5('2445355'.$uid.'__SECRET_KEY__')) {
//доверяем вконтактику, и далее полагаем, что пользователь действительно авторизован там
//для учетных записей пользователей я решил выделить логины вида vk-********
$result = mysql_query("SELECT id, random, password FROM tracker_users WHERE username = 'vk-$uid'");
setcookie('uid','');
setcookie('pass','');
if (mysql_num_rows($result)) {
//пользователь авторизован, просто пересоздадим куки
$user = mysql_fetch_assoc($result);
mysql_query("UPDATE tracker_users SET name = '$name' WHERE username = 'vk-$uid' LIMIT 1");
setcookie('pass',md5($user['random'].$user['password'].$user['random']));
setcookie('uid',$user['id']);
} else {
//добавим запись в таблицу пользователей
$random = mt_rand(100000,999999);
$pwd = $uid . 'verysecretlonglongword-';
$pid=md5(uniqid(rand(),true));
mysql_query("INSERT INTO tracker_users
(username, name, password, random, id_level, email, style, language, flag, joined, lastconnect, pid, time_offset) VALUES
('vk-$uid', '$name', '"
. md5($pwd) . "', $random, 3, '', 5, 7, 0, NOW(), NOW(),'$pid', '0')");
//вставили строчку, теперь создадим куки и перебросим на другую страницу
setcookie('pass',md5($random.md5($pwd).$random));
setcookie('uid',mysql_insert_id());
}
header("Location: /index.php");
}

* This source code was highlighted with Source Code Highlighter.

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

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

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

Как сделать «вход на сайт через контакт» или ВК  OpenAPI? - Записки начинающего админа и сеошника

Если уровень и тематика статьи интересна хабрапользоватям, то я продолжу с майл.ру, facebook и твиттером.

Вторая часть. Mail.ru

Как настроить двухфакторную аутентификацию в аккаунте «вконтакте»

Чтобы усилить защиту аккаунта, настройте подтверждение входа — так «ВКонтакте» называет двухфакторную аутентификацию. В VK есть два варианта двухфакторной аутентификации: одноразовый код можно получать по SMS или через специальное приложение-аутентификатор.

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

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

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

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

Пока у вас есть доступ к аккаунту, вы можете посмотреть свои резервные коды и при необходимости сгенерировать новые в том же разделе — Безопасность и вход. Для этого нажмите на фото профиля, в выпадающем меню выберите Управление VK ID → Безопасность и вход → Подтверждение входа → Резервные коды. Чтобы посмотреть свои резервные коды, вам придется ввести пароль от «ВКонтакте».

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

На этом этапе – всё довольно рационально. После того как вы подключите класс к файлу, останется получить экземпляр 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, где выводятся данные пользователя.

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

Как безопасно настроить vk pay

Чтобы с удобством покупать товары и услуги в сервисах «ВКонтакте», вы можете зарегистрироваться во внутреннем платежном сервисе VK Pay и привязать к своему аккаунту банковскую карту. Для этого в правом верхнем углу нажмите на фото профиля и выберите VK Pay.

При регистрации вам нужно будет придумать четырехзначный PIN-код VK Pay. Он понадобится для подтверждения каждого платежа в сервисе, а также для перехода в важные разделы: Карты VK Pay и История операций. Чтобы сменить забытый или скомпрометированный PIN-код, нажмите в правом верхнем углу на фото профиля и выберите:

Если же вы передумали пользоваться сервисом или по каким-то причинам не хотите, чтобы платежные данные хранились в экосистеме, их можно удалить. В правом верхнем углу нажмите на фото профиля, выберите VK Pay → Настройки → Привязанные карты и нажмите на крестик рядом с реквизитами.

Как изменить пароль аккаунта «вконтакте»

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

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

Как просмотреть сеансы и выйти из аккаунта «вконтакте» на всех устройствах

На всякий случай мы советуем периодически просматривать список устройств, на которых выполнен вход в вашу учетную запись. Тем более, что в VK это сделать совсем несложно. В правом верхнем углу нажмите на фото профиля и выберите Управление VK ID —>

Если вы увидели там подозрительный сеанс, немедленно отзовите доступ! Для этого выберите сеанс и нажмите Завершить сеанс. Затем сразу же смените пароль. Также мы советуем отключить доступ в аккаунт для всех старых устройств, которыми вы больше не пользуетесь — чем меньше открытых сеансов, тем безопаснее.

Реализация

Начнем с создания класса. При инициализации будем требовать список “разрешений”, к которым приложение хочет получить доступ, id этого приложения и версию API VK. Плюсом добавим несколько необязательных параметров, значение каждого из которых прояснится далее.

Как было сказано в уже упомянутой статье, нам необходимо искусно ворочать cookie и redirect’ы. Все это за нас делает библиотека requests с объектом класса Session. Заведем и себе такой в поле self.session. Для парсинга html документа используется стандартный класс HTMLParser из модуля html.parser.

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

Для чего нужна регистрация пользователя

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

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

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

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

Не останавливаемся на достигнутом

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

VK — не единственный сервис, которому мы доверяем свои персональные данные. Их сохранность зависит и от того, как вы настроите безопасность на других платформах. А помогут вам в этом наши посты о настройках безопасности и приватности в Telegram, Discord и Signal.

Что случилось?

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

По какой-то причине этот, казалось бы, самый непримечательный этап поначалу отнимает огромное количество сил и времени. Моя задача: помочь читателям Хабра избежать травм ног.

Далее я предлагаю рассмотреть небольшую библиотеку, позволяющую в одну строчку авторизовать свое приложение для конкретного пользователя и получить access_token. В конце статьи представлена ссылка на github-репозиторий этой библиотеки с quickstart’ом в README-файле.

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

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

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

Задача

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

Итак, используем python3.5, библиотеку для html запросов requests и getpass для скрытого ввода пароля.

Наша задача: несколько раз обратиться по верному адресу, каждый раз парсить <form>, отправлять ответ и наконец получить желанный access_token.

Шаг 2. авторизация пользователя

Реализованы методы _log_in() и _two_fact_auth() для [не]успешной авторизации пользователя в вк, если он не авторизован (а он точно не авторизован). Оба метода используют ранее определенные поля email, pswd, two_factor_auth и security_code.

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

Заключение

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

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

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

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

Авторизация — что это такое?

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

Если у вас активен старый дизайн вконтакте

Заходим в раздел «Мои настройки

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

Чтобы проверить все ли вы сделали верно, сделайте следующее. Выберите в меню «Моя страница

», затем нажмите на «Выйти».

После этого должно появиться такое сообщение. «Страница доступна только авторизованным пользователям

Шаг 3. подтверждение permissions и получение access_token

Самое сложное позади. Теперь дело за малым. Используем наше усовершенствование парсера формы, чтоб найти в только что поступившем к нам html документе кнопку с надписью “Allow” и вытащить из нее url подтверждения авторизации. Рядом находится кнопка с отказом – сохраним и ее url.

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

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

Как закрыть свою страничку в контакте от поисковиков? (яндекс, гугл и т.п)

В правом верхнем углу нажимаем на аватарку. Выбираем пункт «Настройки

Выбираем вкладку «Приватность

». Пролистываем вниз до блока «Прочее». Напротив строчки «Кому в интернете видна моя страница» выставляем значение «».

Шаг 1. запрос на авторизацию приложения

Аккуратно составляем url запроса (про параметры можно прочитать здесь), отправляем запрос и парсим полученный html.

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

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

Основные плюсы идентификации

Преимущества имеют как владельцы сайта, так и его пользователи. Для владельца преимуществом являются:

Похожее:  Как сделать авторизацию с помощью ВКонтакте в десктопном приложении
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (1 оценок, среднее: 4,00 из 5)
Загрузка...

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Adblock
detector