Как сделать авторизацию через вк на сайте

Авторизация на сайте с помощью ВК, простой и понятный способ на PHP!

Я заинтересовался как сделать авторизацию, почитав официальную документацию понял, что ничего не понял. и так давайте приступим.

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

1. Переходим на сайт https://vk.com/apps?act=manage и создаем новое приложение:

2. Заполняем следующие данные:
Название: Любое, его видно только во время авторизации, например авторизовавшись на нашем сайте с помощью ВК, Вы видите это, без количества участников.
Платформа: Выбираем «Сайт»
Адрес сайта: Ссылка на ваш сайт
Базовый домен: Ссылка на ваш сайт

Отлично, нажимаем подключить сайт.

3. Переходим в настройки приложения, копируем ID приложения и Защищенный ключ, сохраняем куда-нибудь и на этом работа на стороне ВК окончена, переходим к написанию скрипта.

4. Теперь самое интересное, нам нужно написать скрипт (обработчик), давайте создадим на нашем сервере в корне сайта файл auth.php и приступим к его редактированию. Хочу отметить, что на локальном сервере (OpenServer) авторизация работать не будет!

Открываем файл, я использую для этого PHPStorm и давайте создадим несколько переменных с пояснениями:

$client_id = 7157110; // ID приложения $client_secret = 'ESlBJHmVMbeh8IVLiBDv'; // Защищённый ключ $redirect_uri = 'http://royera.ru/auth.php'; // Адрес сайта

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

Далее формируем ссылку, которая будет ввести на сайт ВК с передаваемыми параметрами:

 $url = 'http://oauth.vk.com/authorize'; // Ссылка для авторизации на стороне ВК $params = [ 'client_id' => $client_id, 'redirect_uri' => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном

Теперь можно открыть сайт скопировав $redirect_uri

Ссылка сформирована, теперь нужно получить и обработать ответ от ВК, после того как пользователь перешел по ссылке:

if (isset($_GET['code'])) < $result = true; $params = [ '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 = [ 'uids' =>$token['user_id'], 'fields' => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big', 'access_token' => $token['access_token'], 'v' => '5.101']; $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true); if (isset($userInfo['response'][0]['id'])) < $userInfo = $userInfo['response'][0]; $result = true; >> if ($result) < echo "ID пользователя: " . $userInfo['id'] . '
'; echo "Имя пользователя: " . $userInfo['first_name'] . '
'; echo "Ссылка на профиль: " . $userInfo['screen_name'] . '
'; echo "Пол: " . $userInfo['sex'] . '
'; echo "День Рождения: " . $userInfo['bdate'] . '
'; echo ''; echo "
"; > >

После того как пользователь перешел по ссылке и подтвердил передачу данных, Вам на сервер в GET запросе вернется code, используя его мы запрашиваем у ВК токен пользователя, отправляем запрос в ВК с параметрами указанные в массиве

 $params = [ 'client_id' => $client_id, 'client_secret' => $client_secret, 'code' => $_GET['code'], 'redirect_uri' => $redirect_uri ];

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

Теперь следующим запросом мы получаем данные о пользователе, используя его токен и обращаясь к API VK https://api.vk.com/method/users.get мы получаем json от VK, который мы можем распарсить. Давайте попробуем авторизоваться, заходим на нашу страницу и нажимаем авторизация:

Разрешаем и у нас на сайте появляются данные об аккаунте:

Авторизация работает. Далее можете сохранить ID в сессию и проверять авторизован пользователь или нет. Давайте доработаем код:

В самый конец добавляем:

$_SESSION['id'] = $userInfo['id'];

А ссылку заменяем на:

 $client_id, 'redirect_uri' => $redirect_uri, 'response_type' => 'code']; // Массив данных, который нужно передать для ВК содержит ИД приложения код, ссылку для редиректа и запрос code для дальнейшей авторизации токеном if(empty($_SESSION['id'])) < echo "Вы уже авторизованы"; >else < echo $link = 'Аутентификация через ВКонтакте
'; > if (isset($_GET['code'])) < $result = true; $params = [ '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 = [ 'uids' =>$token['user_id'], 'fields' => 'uid,first_name,last_name,screen_name,sex,bdate,photo_big', 'access_token' => $token['access_token'], 'v' => '5.101']; $userInfo = json_decode(file_get_contents('https://api.vk.com/method/users.get' . '?' . urldecode(http_build_query($params))), true); if (isset($userInfo['response'][0]['id'])) < $userInfo = $userInfo['response'][0]; $result = true; >> if ($result) < echo "ID пользователя: " . $userInfo['id'] . '
'; echo "Имя пользователя: " . $userInfo['first_name'] . '
'; echo "Ссылка на профиль: " . $userInfo['screen_name'] . '
'; echo "Пол: " . $userInfo['sex'] . '
'; echo "День Рождения: " . $userInfo['bdate'] . '
'; echo ''; echo "
"; > > $_SESSION['id'] = $userInfo['id'];

Авторизация через ВК готова! Скачать исходник можно ниже

Остались вопросы? Задавай в комментарии, всегда рады помочь!

Сергей Котов
03.10.2019
35 826
25
15

Настройка авторизации через «Вконтакте»

Как настроить авторизацию посетителей сайта через «Вконтакте» в личном кабинете и для оформления заказа

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

В поле «Доверенный redirect URI» впишите адрес вида https://mydomain.ru/oauth.php. Замените mydomain.ru на домен своего сайта. Если вы не используете HTTPS-подключение, укажите адрес с протоколом http://.

Сохраните изменения.

На этой же странице скопируйте значения «ID приложения» и «Защищённый ключ».

Войдите в бекенд Вебасиста и перейдите в приложение «Сайт».

В списке сайтов выберите тот, для которого вы настраиваете авторизацию через «Вконтакте».

Откройте раздел «Личный кабинет».

Включите авторизацию для выбранного сайта.

Если авторизация для этого сайта уже включена, перейдите по ссылке «Настройки авторизации».

Включите флажок «Авторизация через внешние сервисы».

Включите флажок напротив «Вконтакте».

Вставьте скопированные значения «ID приложения» и «Защищённый ключ».

Сохраните настройки авторизации внизу страницы.

Проверьте, как работает авторизация:

Откройте свой сайт в режиме браузера «инкогнито». Или в другом браузере, где вы не авторизованы ни в своем Вебасисте, ни во «Вконтакте».
Перейдите по ссылке «Вход».
Щелкните по иконке «Вконтакте».

Введите данные для входа в сервис.

После обновления страницы откроется личный кабинет зарегистрированного посетителя вашего сайта.

Готово! Авторизация через «Вконтакте» настроена.

5 комментариев

+2
Сергей BestForPet 15 января 2018 17:10 #

Ребят, поправьте инструкцию, теперь не обязательно заполнять п.7 В поле «Доверенный redirect URI» впишите адрес вида» Более, если прописываешь этот Url, то авторизация не работает.

Зул 6 февраля 2018 21:30 #

Скорее всего у тебя такая печаль, если ты имея сертификат SSL указал протокол http, а если укажешь в этом поле https то все нормально работает, только что протестировал, хотя и без этого поля работает, зачем оно не знаю но у меня оно указано, у меня везде вместо http https.

+1
42na 19 февраля 2019 00:38 #
Благодарю, в поле было указывал HTTPS ничего не работало, удалил и все гуд
+2

evteev777 25 февраля 2018 08:25 #

Не получилось настроить авторизацию через VK, выдает ошибку: <"error":"invalid_request","error_description":"application is blocked">Пробовал и с www/без www, и с http/https, и с Доверенным redirect URI, и без него, даже удалял и заново создавал приложение — результат один и тот же. Естественно, «приложение включено и видно всем» ))) Перелогиниться в VK или зайти с другого браузера, как пишут в интернете, не помогло — ведь все равно захожу в режиме инкогнито. AdBlock отключен. Авторизация через Facebook завелась без проблем! Это решается??

evteev777 25 февраля 2018 08:55 #

Разобрался сам! В настройках Webasyst надо было ввести ID приложения и Защищенный ключ, а я в эти поля вводил Защищенный ключ и Сервисный ключ доступа — просто похожи формы настроек Webasyst и приложения VK! Всегда читайте то, что написано мелким шрифтом! )))

Авторизация на сайте через ВКонтакте

Заметки айтишника

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

На сайте, пользователь нажимает на ссылку «Войти», открывается страница VK, где он разрешит приложению доступ к своим данным.
После подтверждения браузер пользователя будет перенаправлен по адресу, указанному при открытии диалога авторизации. К URL добавляется GET-параметр с кодом авторизации.
Скрипт выполняет ответный запрос с полученным кодом и ключом приложения для получения access_token .
Полученный в ответе access_token , скрипт использует для запроса к данным пользователя.

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

Для начала нужно создать приложение на странице https://vk.com/editapp?act=create

В меню «Платформа» нужно указать – сайт, заполнить поля «адрес сайта» и «основной домен».

В настройках видим ID приложения и защищённый ключ, также нужно убедится что приложение включено и видно всем.

Ссылка для входа

Сформируем и выведем ссылку по которой пользователь даст разрешение на запрошенные действия.

В redirect_uri указываем скрипт-обработчик, туда придет секретный код.

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

При переходе по ссылке откроется страница:

Получение данных

После того как пользователь дал разрешение, он возвращается на redirect_uri , к URL добавляются GET-параметры:
https://example.com/oauth-vk.php?code=1234567890&state=https://example.com/page-1

Далее запрашивается access_token (в ответе с токеном будет e-mail). После этого выполняется метод users.get , который возвращает ID, имя, фамилию и URL аватарки.

redirect_uri должен быть такой же, как в ссылке для входа.

 'ID приложения', 'client_secret' => 'Защищённый ключ', 'redirect_uri' => 'https://example.com/oauth-vk.php', 'code' => $_GET['code'] ); // Получение access_token $data = file_get_contents('https://oauth.vk.com/access_token?' . urldecode(http_build_query($params))); $data = json_decode($data, true); if (!empty($data['access_token'])) < // Получили email $email = $data['email']; // Получим данные пользователя $params = array( 'v' =>'5.52', 'uids' => $data['user_id'], 'access_token' => $data['access_token'], 'fields' => 'photo_big', ); $info = file_get_contents('https://api.vk.com/method/users.get?' . urldecode(http_build_query($params))); $info = json_decode($info, true); echo $email; print_r($info); > >

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

 ivan_ivanov@gmail.com Array ( [response] => Array ( [0] => Array ( [first_name] => Иван [id] => 12345678 [last_name] => Иванов [photo_big] => https://vk.com/images/camera_200.png?ava=1 ) ) )

Далее все завит от реализации сайта, пользователя можно добавить в БД или обновить его данные и авторизовать в системе.

← Авторизация на сайте через Яндекс
Кэширование данных в PHP на примере класса →

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

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

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

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

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

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

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

Заметьте, что нет никакого смысла скрывать 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() < @Override public void changed(ObservableValueobservable, String oldValue, String newValue) < if(newValue.startsWith(REDIRECT_URL))< tokenUrl=newValue; primaryStage.close(); >> >); > >

Заключение

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

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

Следите за новыми постами по любимым темам

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