Авторизация в VK API с помощью логина и пароля / СоХабр

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

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

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

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

Токены получили, что дальше?

Дальше создадим синглтон для работы с API (возможности, конечно же, можно расширить, тут они невелики)

Хедер:

Вступление

Добрый день, Хабр!

Иметь «выходы» на социальные сети в своем приложении — крайне полезная штука. И сегодня мне хотелось бы поделиться своим небольшим опытом в «прикручивании» всем известной социальной сети к своему приложению. Что в этом интересного? А то, что в некоторых случаях использовать полноценные SDK просто нет смысла (учтем еще то, что официального ВКонтакте не имеет). Мне требовалось всего лишь узнать

А теперь кодим!

Ура-ура, все этого ждали! Допустим, в вашем приложении есть некий

ViewController

, в котором имеется кнопочка «Зайти через ВКонтакте». Хорошо.

Авторизация вконтакте

Первым делом давайте создадим страницу с ссылкой Авторизация, кликнув по которой пользователь будет перенаправлен на страницу авторизации ВКонтакте. Для этого создадим файл index.php:

Данная страница выглядит следующим образом:

Как Вы видите путь в ссылке Авторизация ведет на вспомогательный файл auth.php, который будет обрабатывать данные нашего скрипта. Теперь давайте создадим файл конфигурации config.php и добавим несколько констант:

Авторизация с использованием официального приложения

Приложение состыковывается с официальным приложением для Android или iOS, которое дает ему интерфейс для взаимодействия с API.

Собственно, без комментариев, способ совсем для других платформ и задач.

Задача

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

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

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

Клиентская авторизация

С клиентской авторизацией действительно нет ничего сложного.

Согласно

, достаточно асинхронно загрузить

и, «повесить»

VK.init({appid: YOUR_APP_ID})

на событие

window.vkAsyncInit

, после чего уже можно вызвать функцию

VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS)

, которая и выполнит авторизацию пользователя.

var vk = {
 data: {},
 api: "//vk.com/js/api/openapi.js",
 appID: YOUR_APP_ID,
 appPermissions: YOUR_APP_PERMISSIONS,
 init: function(){
  $.js(vk.api);
  window.vkAsyncInit = function(){
   VK.init({apiId: vk.appID});
   load();
  }

  function load(){
   VK.Auth.login(authInfo, vk.appPermissions);

   function authInfo(response){
    if(response.session){ // Авторизация успешна
     vk.data.user = response.session.user;
     vk.getFriends();
    }else alert("Авторизоваться не удалось!");
   }
  }
 },
 getFriends: function(){
  VK.Api.call('friends.get', {fields: ['uid', 'first_name', 'last_name'], order: 'name'}, function(r){
   if(r.response){
    r = r.response;
    var ol = $('#clientApi').add('ol');
    for(var i = 0; i < r.length;   i){
     var li = ol.add('li').html(r[i].first_name ' ' r[i].last_name ' (' r[i].uid ')')
    }
   }else alert("Не удалось получить список ваших друзей");
  })
 }
}

$.ready(vk.init);

По-сути, этот код делает следующее:

По готовности документа загружается API ВКонтакте, и, после его инициализации, вызывается метод

VK.Auth.login()

, который показывает всплывающее окно,

которое успешно «блочится» любой баннерорезкой

, в котором пользователь должен подтвердить своё согласие предоставить данные клиентскому приложению.

Функция

authInfo

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

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

Кому будет полезно?

Новичкам в iOS разработке, тем, кто хочет расширить возможности своего приложения, но не хочет использовать сторонние SDK, и, конечно, тем, кто просто увлекается этим делом.

Начнем

Для начала, можно прочитать небольшое ”

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

Окей, для получения

access_token

(то без чего нам не жить) потребуется отправить запрос следующего вида:

Получаем access_token

Добавим несколько методов в этот класс. Вкратце: после нажатия на кнопку показываем

UIWebView

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

Внимание! В проекте включен Automatic Reference Counting.

Получение access_code

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

Кстати если во время авторизации возникли ошибки, то вместо параметра code, придет параметр error – код ошибки, вместе с ее описанием — error_description. Поэтому если мы действительно получили code, значит, запишем его в свойство класса и вызовем метод get_token(), который получит access_token. Теперь в класс Auth_Vk добавим код метода get_token():

Для получения access_token необходимо отправить запрос по адресу хранящимся в константе URL_ACCESS_TOKEN, и передать следующие параметры, используя метод GET:

Запрос отправлять будем используя библиотеку CURL. При этом ответ от сервера ВКонтакте придет в формате строки JSON. Значит, используя функцию json_decode(), декодируем данную строку в объект. Объект мы получим следующего вида:

В случае ошибки мы получим следующее:

То есть мы получим объект у которого будет либо свойство access_token, либо свойство error. Поэтому, если мы получаем access_token – запишем его значение и идентификатор пользователя в соответствующие свойства класса и вернем TRUE, если же придет ошибка — запишем ее в сессию и вернем FALSE.

Получение данных пользователя

После того, как мы получили ключ доступа access_token – можно получить данные пользователя. Для этого в файл auth.php добавим следующий код (после вызова метода get_token()):

Прямая авторизация приложения vk, как сделать?

private void getCookieremixlhk() throws IOException {
        URL url = new URL("https://oauth.vk.com/authorize?client_id=id_вашей_группыredirect_uri=https://oauth.vk.com/blank.html&scope=friends,groups&response_type=token&revoke=1");
        ArrayList<String> listHeaders = new ArrayList<>();
        HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();

        for (Map.Entry<String, List<String>> pair : conn.getHeaderFields().entrySet()) {
            listHeaders.addAll(pair.getValue());
        }

        for (String listi : listHeaders) {
            if (listi.contains("remixlhk")) {
                remixlhk = listi.split("=", 2)[1].split(";", 2)[0];
            }
        }

        BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));

        while (in.ready()) {
            String temp = in.readLine();
            if (temp.contains("ip_h"))
                ip_h = temp.split("value="", 2)[1].split(""")[0];
            if (temp.contains("lg_h"))
                lg_h = temp.split("value="", 2)[1].split(""")[0];
            if (temp.contains("name="to""))
                to = temp.split("value="", 2)[1].split(""")[0];
        }

        in.close();
    }

private void fullAuthorization() throws IOException {
        URL url = new URL("https://login.vk.com/?act=login&soft=1");
        Map<String, Object> params = new LinkedHashMap<>();

        params.put("_origin", "https://oauth.vk.com");
        params.put("email", email);
        params.put("expire", "0");
        params.put("ip_h", ip_h);
        params.put("lg_h", lg_h);
        params.put("pass", pass);
        params.put("to", to);
        params.put("Cookie", "remixlhk=" remixlhk);

        StringBuilder postData = new StringBuilder();
        for (Map.Entry<String, Object> param : params.entrySet()) {
            if (postData.length() != 0) postData.append('&');
            postData.append(URLEncoder.encode(param.getKey(), "UTF-8"));
            postData.append('=');
            postData.append(URLEncoder.encode(String.valueOf(param.getValue()), "UTF-8"));
        }
        byte[] postDataBytes = postData.toString().getBytes("UTF-8");

        HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
        conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
        conn.setRequestProperty("Content-Length", String.valueOf(postDataBytes.length));
        conn.setDoOutput(true);

        conn.getOutputStream().write(postDataBytes);

        BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));
        while (in.ready()) {
            String temp = in.readLine();
            if (temp.contains("grant_access")) {
                linkAccept = temp.split("form method="post" action="")[1].split(""", 2)[0];
            }
        }
    }

private void acceptAndGetToken() throws IOException {
        URL url = new URL(linkAccept);
        Map<String, Object> params = new LinkedHashMap<>();
        params.put("Cookie", "remixlhk=" remixlhk);

        StringBuilder postData = new StringBuilder();
        for (Map.Entry<String, Object> param : params.entrySet()) {
            if (postData.length() != 0) postData.append('&');
            postData.append(URLEncoder.encode(param.getKey(), "UTF-8"));
            postData.append('=');
            postData.append(URLEncoder.encode(String.valueOf(param.getValue()), "UTF-8"));
        }
        byte[] postDataBytes = postData.toString().getBytes("UTF-8");

        HttpsURLConnection conn = (HttpsURLConnection) url.openConnection();
        conn.setRequestProperty("Content-Type", "application/x-www-form-urlencoded");
        conn.setRequestProperty("Content-Length", String.valueOf(postDataBytes.length));
        conn.setDoOutput(true);

        BufferedReader in = new BufferedReader(new InputStreamReader(conn.getInputStream(), "UTF-8"));

        String URL = conn.getURL().toString();

        ACCESS_TOKEN = URL.split("token=", 2)[1].split("&", 2)[0];
        vk_id = Integer.valueOf(URL.split("user_id=", 2)[1]);
    }

private void getVkFirstNameCurrentUser() throws IOException, ClientException, ApiException {
        actor = new UserActor(vk_id, ACCESS_TOKEN);

        vkFirstName = vkApiClient.account().getProfileInfo(actor).execute().getFirstName();
    }

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.Font?>
<?import javafx.scene.web.WebView?>
<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="260.0" prefWidth="296.0" xmlns="http://javafx.com/javafx/8.0.111" xmlns:fx="http://javafx.com/fxml/1" fx:controller="mainpackage.view.login.LoginPageController">
    <children>
        <ButtonBar layoutX="5.0" layoutY="209.0" prefHeight="40.0" prefWidth="246.0" AnchorPane.bottomAnchor="11.0" AnchorPane.rightAnchor="26.0">
            <buttons>
                <Button mnemonicParsing="false" onAction="#handleOkButtonClicked" text="OK" />
                <Button mnemonicParsing="false" onAction="#handleCancelButtonClicked" text="Cancel" />
                <Button mnemonicParsing="false" onAction="#handleNoAuthButtonClicked" text="No Auth" />
            </buttons>
        </ButtonBar>
        <TextField fx:id="loginTextField" layoutX="26.0" layoutY="67.0" prefHeight="25.0" prefWidth="246.0" />
        <Label layoutX="28.0" layoutY="42.0" text="Login" />
        <Label layoutX="28.0" layoutY="109.0" text="Password" />
        <Label layoutX="32.0" layoutY="14.0" prefWidth="153.0" text="Authorization on VK.com" AnchorPane.leftAnchor="70.0" AnchorPane.rightAnchor="70.0" AnchorPane.topAnchor="10.0">
            <font>
                <Font name="Arial Bold" size="12.0" />
            </font>
        </Label>
        <PasswordField fx:id="passwordTextField" layoutX="26.0" layoutY="135.0" prefHeight="25.0" prefWidth="246.0" />
        <WebView fx:id="webViewOnLogin" prefHeight="0.1" prefWidth="0.1" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
      <Label fx:id="textAfterAuthorization" alignment="CENTER" contentDisplay="CENTER" layoutX="27.0" layoutY="177.0" prefHeight="17.0" prefWidth="246.0" text="Авторизация занимает 5-10 секунд" />
    </children>
</AnchorPane>

Реализация

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

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

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

Регистрация приложения

Скорее всего Вы уже зарегистрированы в соц. сети ВКонтакте, если нет, то Вам придется это сделать. Указывать номер телефона при регистрации обязательно. Переживать не стоит — никакой смс-рассылки от этих сервисов не приходит.Далее необходимо создать приложение. (Скриншоты были сделаны в апреле 2022, с той поры интерфейс мог измениться)

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

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

Серверная авторизация

Серверная авторизация гораздо веселее. Механизм серверной авторизации для доступа к ВКонтакте API с стороннего сайта создан на базе протокола OAuth 2.0.

Процесс авторизации происходит следующим образом:

1. Необходимо в браузере пользователя показать страницу, где он разрешит приложению доступ к своим данным;
2. После успешной авторизации приложения браузер пользователя будет перенаправлен по адресу REDIRECT_URI, указанному при открытии диалога авторизации. При этом в GET-параметре будет передан код для получения ключа доступа;
3. Необходимо выполнить запрос с передачей кода и секретных данных приложения на специальный адрес, в ответ мы получим ключ доступа access_token, необходимый нам для совершения запросов к API.

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

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

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

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

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

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

Реализацию класса доступа к VK API по OAuth на PHP можно легко найти на гитхабе, что я и сделал (PHP >= 5.4).(Совершенно случайно оказалось, что этот класс, скорее всего, написан хабрапользователем vladkens, за что ему огромное спасибо)

Теперь перейдём к самому интересному.

<?php
 require_once('vk.php');
 session_start();
 
 function getPostStr($data, $default = false){ // возврачает строку - значение $_POST[$data]
  if(!isset($_POST[$data])) return $default;
  $data = $_POST[$data];
  $data = htmlspecialchars(strip_tags(trim($data)));
  return ($data != "" ? $data : $default);
 }
 function error($code, $text, $params = Array()){
  $result = Array('error' => Array('code' => $code, 'message' => $text));
  if(count($params) > 0) foreach($params as $key => $value) $result['error'][$key] = $value;
  die(json_encode($result));
 }
 
 $vkConf = Array(
  'appID'       => YOUR_APP_ID,
  'apiSecret'   => YOUR_API_SECRET,
  'callbackUrl' => YOUR_DOMAIN . '/auth.php',
  'apiSettings' => YOUR_APP_PERMISSIONS
 );
 
 $vk = (isset($_SESSION['accessToken']))
        ? new VK($vkConf['appID'], $vkConf['apiSecret'], $_SESSION['accessToken']) : null;
 
 function userIn($vk, $vkConf){ // Авторизация пользователя
  unset($_SESSION['accessToken']);
  $vk = new VK($vkConf['appID'], $vkConf['apiSecret']);
  $authorizeUrl = $vk -> getAuthorizeURL($vkConf['apiSettings'], $vkConf['callbackUrl']);
  error(-1, "Необходима авторизация ВКонтакте!", Array('url' => $authorizeUrl));
 }
 function getFriends($fields, $order, $vk){ // Получение списка друзей пользователя
  $userFriends = $vk -> api('friends.get', array('fields' => $fields, 'order' => $order));
  $result = Array();
  foreach($userFriends['response'] as $key => $value){
   $result[] = Array('firstName' => $value['first_name'], 'lastName' => $value['last_name'], 'uid' => $value['uid']);
  }
  echo json_encode($result);
 }

 $method = strtolower($api -> getStr("method"));

 switch($method){
  case "user.in"     : userIn($vk, $vkConf); break;
  case "friends.get" : getFriends(getPostStr("fields"), getPostStr("order"), $vk); break;
  default: Api::error(0, "Неверный запрос к Api");
 }
?>

Запросы на эту страницу мы будем посылать методом POST, где параметр

method

содержит название метода, который мы хотим выполнить на сервере.

Создаем необходимые классы и файлы

Создадим класс “App” расширяющий “Application”, он будет представлять наше приложение и содержать экземпляр “AccountService” для хранения токена и экземпляр “Retrofit” с url для запросов к ВК api. Через companion object будем получать доступ к App и созданным экземплярам. По хорошему это нужно делать через DI, но для простоты примера сделаем так.

Создаем проект, подключаем зависимости

В проекте я буду использовать kotlin, mvvm, binding, navgraph подразумевается, что ты уже знаешь, что это такое 🙂

Создаем новый проект на основе Empty Activity, я назову его OAuthWithVK_Example

Добавляем в зависимости.

Создание приложения в контакте

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

Шаг 0. изучение документации

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

access_token

, или, проще говоря, авторизации пользователя.

Способов авторизации было предложено три:

1. OAuth-авторизация
2. Прямая авторизация
3. Авторизация с использованием официального приложения (предоставляется в SDK)

Теперь подробнее о методах в порядке возрастания их полезности:

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

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

Шаг 1. обходные пути

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

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

access_token

из этого приложения, он ведь бессрочный и без привязки к IP. Ну, или еще круче, перехватить

app_idapp_secret

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

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

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

Шаг 2. собственно каркас

Желаемый каркас всё-таки был написан. В качестве языка программирования был выбран Python.

Состоит он из ядра и подключаемых плагинов. Ядро осуществляет авторизацию, работу с sqlite базой данных, импорт плагинов, опрос longpoll-сервера.

Плагины гибко взаимодействуют с ядром. О структуре плагина:

Чтобы ядро восприняло файл как плагин, в нем должна быть объявлена переменная:

__vkbuddyplugin__ = True

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

config_parameters

config_parameters = [
    {'name': 'parameter_name', # имя параметра
     'required': False, # bool, является ли параметр обязательным
     'description': 'parameter_description', # описание параметра
     'default': 'parameter_value', # значение параметра по умолчанию
     'typ': str}, # тип параметра
    ...
]

Чтобы создать таблицы в БД (если они еще не существуют), необходимо объявить переменную

sql_tables

sql_tables = [
    {'name': 'table_name', # имя таблицы
     'structure':( # структура таблицы: пары (имя столбца, тип столбца)
        ('id', int), 
        ('column_name', float)
     )},
    ...
]

Также реализован набор стандартных хендлеров (добавить новые хендлеры можно и в плагинах, так уже реализован хендлер текстовых команд).

Стандартные хендлеры:

• before_auth_handlers — функции вызываются перед авторизацией, с единственным параметром — основным объектом, в котором можно получить доступ к VK API, хоть это и бесполезно перед авторизацией
• after_auth_handlers — функции вызываются после авторизации, с тем же единственным параметром
• exit_handlers — функции вызываются перед выходом, так же с единственным параметром
• longpoll_handlers — функции вызываются при получении сообщения от longpoll-сервера, параметров здесь много, что они значат можно посмотреть в документации по VK API: (vkbuddy, code, msgid, flags, from_id, ts, subj, text, attachments)

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

Спасибо за внимание!

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

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