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

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

Итак, начнем с ВКонтакте. Заходим на , в дальнейшем настройки подключенного сайта будут доступны вам на странице , там мы узнаем 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>

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

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

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

Похожее:  Никто (почти) не знает, что такое авторизация / Хабр

Продолжаем с майл.ру, facebook и твиттером.
Для начала как всегда нам необходимо в социальной сети свое приложение (у майла четкое разделение между приложениями и сайтами, но я по привычке буду говорить «приложение»). Кстати в процессе регистрации вы увидите от трех до пяти js ошибок, когда-нибудь mail.ru их исправит. После регистрации вам доступны ID приложения, приватный ключ (ничего приватного, используется для js-api вызовов, виден всем) и секретный ключ (используется для сервер-сервер взаимодействия, не говорите никому и не забывайте в комментариях).
На странице настройки приложения мы видим еще один интересный параметр «Адрес страницы receiver.html». Если не ставит целью узнать для чего же она нужна, то единственное что мы узнаем из справки:

Для корректной работы API сайтов необходимо разместить файл receiver.html на вашем домене.

Если не планируете использовать JS API, то этот файл вам не нужен. На страничке авторизации/регистрации мы разместим кнопку. PR-отдел майла очень строго запрещает что-либо менять в логотипе, поэтому мы используем его в строго таком виде, каким он нам предоставлен.

Ссылка на картинке будет либо такая:

://HOST.com

в которой вам необходимо указать номер вашего приложения, ваш домен в параметре host и URI для перенаправления в параметре redirect_uri.
Второй вариант — сделать промежуточную страницу, использующую JS API, ниже родной пример с майла с убивающими отступами в один пробел.

<script type="text/javascript" src="http://cdn.connect.mail.ru/js/loader.js"></script>
<script type="text/javascript">

  mailru.loader.require('api', function() {
mailru.connect.init('_APP_ID_', '__PRIVATE_KEY__' );
mailru.events.listen(mailru.connect.events.login, function(session){
window.location.reload();
});
mailru.events.listen(mailru.connect.events.logout, function(){
window.location.reload();
});
mailru.connect.getLoginStatus(function(result) {
if (result.is_app_user != 1) {
mailru.connect.initButton();
} else {
mailru.common.users.getInfo(function(result){console.log(result[0].uid)});
location.href='/mail.login.php';
}
});
});

</script>
<a class="mrc__connectButton">вход@mail.ru</a>

* This source code was highlighted with .

Зачем может понадобиться второй вариант? Как показала жизнь если пользователь щелкнет по ссылке из первого варианта и попадет на страничку с вводом имени пользователя и пароля (если он не авторизован в майле в данный момент), то хоть и в строчке адреса https, и домен mail.ru, но пользователь может запаниковать и подумать, что у него пытаются украсть логин и пароль. Непонятно почему, но если показывать эти же поля во всплывающем окне (видимо более привычном и чаще используемом), то паникующих пользователей меньше.
Итак, вне зависимости от того какой вариант мы выбрали, в любом случае в результате пользователя перебросит на страницу mail.login.php или другую, указанную вами. В случае успешной авторизации пользователя на стороне mail.ru на вашем домене он создает cookie с названием mrc, которую можно разобрать следующим образом:
parse_str(urldecode($_COOKIE['mrc']),$array);
И тут выясняются не сильно приятные моменты: для подписи/проверки подписи API использует сравнение md5(список всех параметров запроса, отсортированных в алфавитном порядке без знаков &) и параметр sig из mail.ru-шной cookie. Поэтому нам нужны две небольшие функции, предложенные нам командой майла:

function sign_client_server(array $request_params, $uid, $private_key) {
ksort($request_params);
$params = '';
foreach ($request_params as $key => $value) {
$params .= "$key=$value";
}
return md5($uid . $params . $private_key);
}

function sign_server_server(array $request_params, $secret_key) {
ksort($request_params);
$params = '';
foreach ($request_params as $key => $value) {
if ($key!='sig') {
$params .= "$key=$value";
}
}
return md5($params . $secret_key);
}

* This source code was highlighted with .

Функцию sign_server_server я немного подправил, добавив проверку того, чтобы ключ элемента массива не был равен ‘sig’. Это сделано для того, чтобы перед каждой проверкой не удалять элемент из массива или не копировать массив в другой для проверки.
Для начала проверим действительно ли ответ пришел от социальной сети (в массиве $array у нас информация из майлрушной куки):

if (sign_server_server($array,$secretkey)==$array['sig']) {

Что удивительно если бы мы использовали «родную» функцию для проверки подписи не удалив элемент sig из массива, то сравнение возвращало бы ложь. Так как изначальная информация от майла достаточно скудна (только идентификаторы и время истечения сессии пользователя на майле, которое нам собственно незачем), нам необходимо получить имя, фамилию
и номер кредитки через метод users.getInfo. Это делается вот таким образом:

  //получим анкетную инфу
$params = array(
"method"=>"users.getInfo",
"app_id"=>"640345",
"session_key"=>$array['session_key'],
"uids"=>$array['vid'],
"secure"=>"1"
);
$url = "http://www.appsmail.ru/platform/api?".http_build_query($params)."&sig=".sign_server_server($params,$secretkey);
$response = json_decode(file_get_contents($url));

* This source code was highlighted with .

Для формирования запроса велосипед, как делают многие, изобретать не нужно, есть встроенная функция http_build_query. $response возвращает нам массив объектов пользователей (в нашем случае в массиве 1 элемент), из которого мы получим имя, фамилию, ник, идентификатор и аватарку. Мы делаем это перед запросами к базе, потому что в любом случае нам эти данные понадобятся (мы обновим имя, фамилию и аватарку).
После того как мы получили данные от социальной сети, пора поработать на нашей стороне. Приняв критику и немного абстрагировавшись от типа используемой базы данных:

$stmt = $dbh->prepare("SELECT id FROM tracker_users WHERE username = :username");
$stmt->bindParam(":username", "mm-{$array['vid']}", PDO::PARAM_STR, 23);
$stmt->execute();

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

if ($stmt ->fetchColumn() > 0) {
//если пользователь есть
} else {
//если пользователя нет
}

Интереса в полном изложении всех запросов и мелочей, как выяснилось из прошлой статьи, ни у кого нет, поэтому остановимся на следующем этапе интеграции — аватарки из социальных сетей. Маленькая картинка (идеально для отображения возле комментариев) находится в $response[0]->pic_small, а вконтактовскую аватарку из прошлой статьи можно получить из GET параметров $_GET[‘photo_rec’]. Надо отметить, что майловские аватарки имеют размер 45 на 45, в то время как из ВКонтакта — 50 на 50. Радует, что оба варианта квадратные и их можно привести к одному размеру. Если хочется привести к 50 на 50, то из майла лучше взять увеличенную аватарку 90 на 90.

«вконтакте» и соединят свои системы общей учетной записью

Заходить в социальную сеть «ВКонтакте» и сервисы Mail.ru Group можно будет с помощью единой учетной записи VK Connect. Об этом в среду, 17 июня, сообщила пресс-служба соцсети.

«Впервые мы добавили вход на внешние сайты через «ВКонтакте» еще в 2022 году. Сегодня это один из ключевых способов авторизации на большинстве ресурсов в рунете для 35 млн пользователей. VK Connect выводит наши технологии на новый уровень», — отметил генеральный директор «ВКонтакте» Андрей Рогозов.

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

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

Благодаря VK Connect пользователю будет проще заполнять информацию о себе в разных приложениях: например, если указать адрес в одном из приложений, он будет доступен везде — и на сайте с доставкой еды, и в сервисе для вызова такси.

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

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

Учетная запись VK Connect в настоящий момент уже работает в приложениях доставки еды Delivery Club и голосового помощника «Маруся». Чтобы авторизоваться в них, достаточно выбрать вход через VK Connect. В ближайшее время единая учетная запись объединит также основные сервисы Mail.ru Group: почту Mail.ru, приложение такси «Ситимобил», сервис объявлений «Юлу», а также внешних партнеров.

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

Восстановление пароля с помощью почты

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

Восстановление с помощью почты и телефона

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

Потом происходит переход на страницу восстановления пароля.

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

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

Затем появится форма, которая предлагает подтвердить свою фамилию.

После этого система предложит подтвердить страницу, если она ваша, то сделайте это.

На телефон, который был ранее привязан к странице придёт сообщение с кодом, его и нужно ввести в строку «полученный код».

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

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

Так происходит восстановление пароля для доступа к странице ВК с помощью телефона и почты.

Мобильная версия

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

Причины потери доступа к странице вк

Несмотря на то что Вконтакте – это современный сервер с лучшим техническим оснащением, проблемы со входом периодически возникают. Существует несколько причин потери доступа к аккаунту в ВК:

  • Вирус блокирует отображение сайта. Носителями вируса могут быть специальные программы и приложения для ВК. Они позволяют скачивать разные материалы с сайта, однако после их установки часто возникают проблемы с отображением Вконтакте.
  • Неправильно введённая ссылка в строке браузера после чего появляется сообщение «Попытка соединения не удалась».
  • Требование отправки платного сообщения. Страница не открывается, а вместо неё появляется окно с предложением отправить платное смс, после чего человек получит доступ к аккаунту. Категорически не рекомендуется это делать! Решить проблему можно с помощью специального приложения, например, VKontakte Unlock, которое избавит от вируса и будет периодически сканировать систему на наличие опасных носителей.
  • Ошибка 404 при входе в ВК, Яндекс. Эта проблема возникает из-за вируса, для её решения нужно выполнить следующие действия:
      Пуск
  • Мой компьютер
  • Диск С
  • Папка «Виндовс»
  • «System32»
  • «Drivers»
  • папка «etc»
  • файл «hosts».

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

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