Как сделать авторизацию с помощью ВКонтакте в десктопном приложении

Почему oauth, а не виджет «войти через»?

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

Шаг третий. что дальше?

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

Почему oauth, а не openid?

В результате OpenID бесполезен для заявленных целей. Хотя это всего лишь мое мнение, оно не является голословным.

Во-вторых, OpenID в основном используется “гиками”, чье присутствие на сайте не особенно велико (за редким исключением), для перестройки сайтов под них. Чтобы использовать OpenID в Интернете, необходимо получить учетную запись OpenID.

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

. Кто будет использовать этот метод? Однако OAuth делает все проще – пользователь просто нажимает кнопку “Войти через ВКонтакте” и. Они уже вошли в свой дом. Старая поговорка гласит: “Будь проще, и люди придут к тебе”. Как будто он сканировал поверхность воды.

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

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

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

Кроме того, клиент не получает никаких гарантий от аутентификации OpenID. Он только проверяет, что пользователь легитимно зарегистрирован на сервере OpenID. Никаких информационных методов для получения дополнительных данных о пользователе (электронная почта, имя) не существует.

Конечно, можно изучить провайдера OpenID, эти социальные сети и другие. Но что если все они, кроме одной – ZHG – ничего не говорят о пользователе?

Google

1. Идем

. Создаем новый проект. На вкладке API access нажимаем кнопку «Create an OAuth2 client ID».

Получение client_id и secret_key (секретный ключ клиента)

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

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

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

Вконтакте

1. Идем

. “Веб-сайт” – это тип. Мы вводим адрес сайта и базовый домен. Мы можем найти client_id (идентификатор приложения) и секретный ключ на странице настроек.

2. Добавьте в код следующую кнопку формы.

Демонстрация

На видео показано, как страница «злоумышленника» на домене

Для чего это нужно

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

Яндекс и Google – еще два сервиса, которые широко используются в Интернете. Почему бы не использовать данные, которые предлагают эти сервисы?

O Auth придумали для этого.

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

Авторизация через “В Контакте” не отличается от любой другой авторизации через сторонний сервер. Пользователь StackOverflow qnub нашел этот процесс очень полезным:

1. Сервис (в данном случае VK) должен зарегистрировать приложение и получить ключ API.
2. Затем приложение (сайт) может запросить личные данные пользователя у стороннего сервиса через этот API:
3. После завершения действия сторонний сервис перенаправляет пользователя с помощью того же 302 Redirect на URL, указанный в параметрах специально созданной ссылки.

Как работает единая авторизация

Для пользователя все выглядит просто: достаточно нажать кнопку “Войти через Яндекс”, подтвердить свое желание зайти на нужный сайт, и вы сразу же сможете им воспользоваться. Что происходит внутри движка?

Когда пользователь сайта, связанного с программированием, нажимает кнопку “Войти через Яндекс”, этот сайт спрашивает Google, хочет ли кто-нибудь еще войти в систему через его сервис.

Как это выглядело

Процедура получения токена доступа пользователя со страницы злоумышленника, по сути, соответствовала той же схеме, что и при эксплуатации CSRF-дефектов:

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

Посмотрите ссылки выше, если вам интересна дополнительная информация! Краткое содержание:

Можно ли этому доверять?

Скорее да, чем нет. Вы никогда не узнаете, была ли история с именем и паролем проделана хакерами или OAuth действительно используется. Меры безопасности

Во всех важных службах должна быть включена двухфакторная проверка подлинности.

Настройка ссылки для входа

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

Немного о vk open api

Выдержка из официальной документации:

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

Т.е. это JS библиотека, которая позволяет вам вызывать VK API (авторизация), вызывать методы API с вашего сайта и читать эти методы прямо со страницы вашего сайта! Для использования этой библиотеки необходимо создать приложение VK с типом “Сайт”, указать домен в настройках и вставить несколько тегов скрипта.

Одноклассники

1. Мы зарегистрированы в качестве программиста

. Идем

Заполнение приложения OAuth для получения доступа. Ага. Похоже, что заявка обрабатывается вручную. Мы отправляем поддержку на тот же адрес, если ответа не будет. Что я могу сказать о ВКонтакте “Одноклассники”?

2. Мы получаем письмо с инструкциями, следуя которым заполняем форму.

Все заполненные в примере поля обязательны к заполнению. Нажимаем «Сохранить» и получаем письмо на указанный емайл, содержащее client_id(Application ID), public_key(Публичный ключ приложения) и secret_key(Секретный ключ приложения)

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

Переход на новый уровень: webworkers

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

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

Подключение библиотеки

Пример подключения и инициализации библиотеки:

Получение данных из вконтакте

Давайте создадим сценарий для получения данных из VK на основе только что полученного кода.

Порочный jsonp

Давайте подробнее рассмотрим работу метода

VK.Auth.getLoginStatus()

. Чтобы получить токен доступа, необходимо отправить JSONP-запрос на следующий URL:

Практические рекомендации по реализации

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

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

Принцип проверки авторизации пользователя

Для взаимодействия с VK API используется JS-код веб-страницы.

VK.Api.call()

, например:

Регистрация на сайте через вконтакте – seolik блог

$client_id = 'XXXXXXXX'; // ID приложения
$client_secret = 'xxxxxxxxxxxxxxxxxxxxxxxxx'; // Защищённый ключ
$redirect_uri = 'https://site.ru/social_login_callback/vk.php'; // куда ответ

$url = 'https://oauth.vk.com/authorize';

$params = array(
        'client_id'     => $client_id,
		'scope'         => 'email',
        'redirect_uri'  => $redirect_uri,
        'response_type' => 'code'

);
	

header('Location: '. $url . '?' . urldecode(http_build_query($params)) ); exit();

$client_id = 'XXXXXXX'; // ID приложения
$client_secret = 'xxxxxxxxxxxxxxxxxxxx'; // Защищённый ключ
$redirect_uri = 'https://site.ru/social_login_callback/vk.php'; // куда ответ


if (isset($_GET['code'])) {


 $result = false;
    $params = array(
        'client_id' => $client_id,
        'client_secret' => $client_secret,
        'code' => $_GET['code'],
        'redirect_uri' => $redirect_uri,
    );

    $token = json_decode(file_get_contents('https://oauth.vk.com/access_token' . '?' . urldecode(http_build_query($params))), true);

    if (isset($token['access_token'])) {
        $params = array(
            'uids'         => $token['user_id'],
            'fields'       => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big',
            'access_token' => $token['access_token'],
        );

        $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true);
		
		$email = $token['email']; // почта юзера
		
		
        if (isset($userInfo['response'][0]['uid'])) {
            $userInfo = $userInfo['response'][0];
            $result = true;
        }
    }



	
if ($result) {

echo "Социальный ID пользователя: " . $userInfo['uid'];
echo "Имя пользователя: " . $userInfo['first_name'];
echo "Фамилия пользователя: " . $userInfo['last_name'];
echo "Emai пользователя: " .$email;
echo "Ссылка на профиль пользователя: " . $userInfo['screen_name'];
echo "Пол пользователя: " . $userInfo['sex'];
echo "День Рождения: " . $userInfo['bdate'];
echo "URL к фото: ".$userInfo['photo_big'];

}

}

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

В первую очередь создайте приложение на странице 

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

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

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

Эксплуатация уязвимости

Тогда я решил проверить, а что если определить для

location.hostname

В чем состоит функция геттера?

Яндекс

1. Идем

Заключение

В результате мы узнали, как вызывать методы API и получать токен доступа от социальной сети. Если сообщество сочтет эту статью полезной, я объясню, как использовать маркер для вызова конкретных методов API в следующей статье.

Выводы

Инструмент, который вы добросовестно и долго используете, иногда дает неожиданные результаты. Уязвимости иногда могут быть очень значительными. Общее правило заключается в том, чтобы никогда не отправлять конфиденциальные данные через JSONP. Даже если код проверки получателя ответа JSONP кажется безошибочным, оказывается, что любые проверки, сделанные перед передачей маркера страницы, могут быть аннулированы путем значительного изменения js-окружения браузера (BOM). CORS должен заменить JSONP.

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

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

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