Вход на сайт через Вконтакте

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

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

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

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

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

, там мы узнаем 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>


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

После щелчка на «Войти через ВКонтакте» пользователя кидает на страницу вида 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- и запретить пользователям из социальной сети менять себе пароль и, опционально, аватарку с отображаемым именем. Для сайтов, в которых критично использование электронной почты зарегистрированных пользователей необходимо будет также ознакомить ваш движок с тем фактом, что у этих пользователей нет электронной почты.

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

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

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

С помощью аккаунта в социальной сети «ВКонтакте» можно авторизоваться на vhod-v-lichnyj-kabinet.ru без регистрации и ввода пароля. Для этого достаточно нажать на логотип данной соцсети при входе на сайт.

Шаг 1. Выберите нужный способ авторизации:

Шаг 2. В открывшемся окне выполните одно из двух действий:

— введите логин и пароль к вашему профилю во «ВКонтакте», если вы в данный момент не залогинены в этой соцсети;

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

Обратите внимание! Вы не сообщаете сайту vhod-v-lichnyj-kabinet.ru свой логин и пароль от аккаунта во «ВКонтакте». Авторизация происходит при помощи протокола OAuth. Этот способ авторизации совершенно безопасен для данных вашего профиля в соцсети (см. «Вопросы и ответы»).

Шаг 3. Для завершения авторизации введите адрес вашей электронной почты (как отмечалось выше, HeadHunter не получает ваш пароль и логин во «ВКонтакте» — поэтому почту нужно ввести еще раз).

Шаг 4а. Если на vhod-v-lichnyj-kabinet.ru уже существует учетная запись с подобным адресом, то вы получите об этом уведомление. Введите пароль к своему кабинету на vhod-v-lichnyj-kabinet.ru, чтобы связать эти две учетные записи и в дальнейшем без проблем авторизовываться с помощью аккаунта во «ВКонтакте».

Вы авторизованы! И ваша учетная запись синхронизирована с учетной записью «ВКонтакте». Теперь вы будете входить на vhod-v-lichnyj-kabinet.ru нажатием одной кнопки «Войти через ВКонтакте».

Шаг 4б. Если у вас раньше не было регистрации на vhod-v-lichnyj-kabinet.ru, то при заходе через «ВКонтакте» у вас есть возможность импортировать данные о своем образовании, дате рождения и городе прямо из профиля.

Теперь вы не только авторизованы на vhod-v-lichnyj-kabinet.ru, но у вас даже есть заготовка под резюме: все основные пункты уже заполнены!