Игра Яндекс Практикума
Игра Яндекс Практикума
Игра Яндекс Практикума

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

Отредактировано

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

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

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

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

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

Шаг первый. Зарегистрировать своё приложение и получить ключ

Этот шаг самый простой. Нужно перейти на страницу ВК для разработчиков: https://vk.com/dev — и нажать на кнопку “Создать приложение”. Тип указываем как “Standalone-приложение”, имя, естественно, указываем произвольное. После этого в разделе “Мои приложения” появится (что бы вы думали?) ваше приложение. Смело нажимайте “редактировать”, затем переходите в раздел “Настройки” — там первой же строкой вы увидите надпись «ID приложения: 1234567». Эти цифры — всё, что вам нужно запомнить для авторизации.

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

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

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

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

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

Хост всегда остаётся неизменным: https://oauth.vk.com/authorize. Набор параметров так же неизменен:

  • client_id. Здесь стоит указать те самые цифры, которые мы добыли в первом шаге.
  • redirect_uri. Адрес, по которому будет перенаправлен пользователь. Для Standalone приложений это только https://oauth.vk.com/blank.html.
  • display. Этот параметр отвечает за то, как будет показываться страница авторизации. Доступно три варианта: page, popup и mobile. Если не уверены, используйте page.
  • scope. В этом параметре вам следует через запятую перечислить параметры доступа, которые вам необходимы. Полный список доступных параметров приведён на соответствующей странице документации. Обращаю ваше внимание, что можно не указывать вообще ничего и просто не писать этот параметр. Чтобы узнать, какие опции доступа вам нужны посмотрите в документацию методов, которые вы собираетесь использовать.
  • response_type. Указываем token и идём дальше.
  • v. Версия API. Актуальная — 5.59.

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

			https://oauth.vk.com/authorize?client_id=1&display=page&redirect_uri=http://example.com/callback&scope=friends&response_type=token&v=5.59
		

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

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

			http://REDIRECT_URI#access_token=TOKEN3&expires_in=TIME&user_id=ID
		

Нас интересует TOKEN. Как же направить пользователя на страницу из Java-приложения и как получить адрес страницы, на которую его перенаправит ВК (чтобы извлечь из неё токен)? Существует два способа.

Советский, через браузер по умолчанию

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

			public String askToken(String link) throws IOException, URISyntaxException{
		//Opens link in default browser
		Desktop.getDesktop().browse(new URI(link));
		
		//Asks user to input token from browser manually
		return JOptionPane.showInputDialog("Please input access_token param from browser: ");
}
		

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

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

			import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class Main extends Application{
    public static final String REDIRECT_URL = "https://oauth.vk.com/blank.html";
    public static final String VK_AUTH_URL = ""; //TODO!!!
	public static String tokenUrl;
    
	public static void main(String[] args){
		System.out.println(Main.getTokenUrl());
    }
	
	public static String getTokenUrl(){
		launch(Main.class);
		return tokenUrl;
	}

	@Override
	public void start(Stage primaryStage) throws Exception {
		final WebView view = new WebView();
        final WebEngine engine = view.getEngine();
        engine.load(VK_AUTH_URL);
		
        
        primaryStage.setScene(new Scene(view));
        primaryStage.show();
        
        engine.locationProperty().addListener(new ChangeListener<String>(){
			@Override
			public void changed(ObservableValue<? extends String> observable, String oldValue, String newValue) {
				if(newValue.startsWith(REDIRECT_URL)){
					tokenUrl=newValue;
					primaryStage.close();
				}
			}
        	
        });
        
	}

}
		

Заключение

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

Если есть какие-то идеи или вопросы — добро пожаловать в комментарии (я их читаю и всем отвечаю). Так же вопросы можно задать в ЛС ВКонтакте.

Следите за новыми постами
Следите за новыми постами по любимым темам
52К открытий54К показов