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

blohinn/simple-php-vk-auth

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Switch branches/tags
Branches Tags
Could not load branches
Nothing to show
Could not load tags

Nothing to show

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Cancel Create

• Local
• Codespaces

HTTPS GitHub CLI
Use Git or checkout with SVN using the web URL.
Work fast with our official CLI. Learn more.

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

PHP Web авторизация VK API

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

Latest commit message
Commit time

README.md

Простая авторизация через ВКонтакте для php приложений

Для работы с VK API существует масса библиотек, но порой все, что нужно — авторизировать пользователя, а запросы писать ручками. Это бывает полезно для одностраничного приложения, которым будете пользоваться только вы и ваш друг. В любом случае, если вы на этой странице — значит вам нужна авторизация и не нужны классы для работы с самими методами (вы слишком круты и можете написать их сами).

1. Регистрируем web-приложение (сайт) на https://vk.com/editapp?act=create;
2. В настройках приложения (на том же vk.com) получаем ID приложения, защищённый ключ и сервисный ключ доступа;
3. Там же указываем базовый домен вашего сайта (yourapp.com) и доверенный redirect URI (https://yourapp.com/libs/simple-php-vk-auth/auth.php);
4. Настраиваем файл config.php:

//Права, которые мы хотим получить (https://vk.com/dev/permissions) $scope = array( ‘nohttps’, ‘groups’, ‘photos’, ‘friends’, ‘offline’ ); $protocol = ‘https://’; //Если у вас есть SSL-сертификат, то оставляем, иначе меняем на http:// define(‘APP_URL’, «$protocol» . $_SERVER[‘HTTP_HOST’]); //Ваш сайт/web-приложение define(‘REDIRECT_URL’, «$protocol» . $_SERVER[‘HTTP_HOST’] . ‘/libs/simple-php-vk-auth/auth.php’); //Ссылка на скрипт авторизации через вк (файл auth.php, не путать с главной страницей вашего сайта, или той, на которой расположена кнопка ‘Авторизоваться’. Ссылка на сам скрипт.) define(‘APP_ID’, ‘1234’); //ID приложения (выдает ВК) define(‘APP_SECRET’, ‘aaabbbccc’); //Защищённый ключ (выдает ВК) define(‘APP_SERVICE_KEY’, ‘aaabbbccc’); //Сервисный ключ доступа (выдает ВК) define(‘ACCESS_TOKEN_URL’, ‘https://oauth.vk.com/access_token’); //не трогать define(‘AUTH_URL’, ‘https://oauth.vk.com/authorize’); ////не трогать define(‘AUTH_DIALOG_URL’, AUTH_URL . ‘?’ . ‘client_id=’ . APP_ID . ‘response_type=codescope=’ . implode(‘,’, $scope)); //Вызов диалога авторизации через ВК

1. Делаем ссылку на авторизацию в духе:

< a href=’https://yourapp.ru/libs/simple-php-vk-auth/auth.php’>Авторизация через ВК < a/>

1. Если все прошло успешно, то попадаем на главную страницу сайта, а в сессии у нас теперь есть:

$_SESSION[‘token’] //Сам токен $_SESSION[‘secret’] //Секретка для выполнения некоторых методов (не заморачивайтесь, когда она будет нужна — поймете сами) $_SESSION[‘uid’] //id авторизовавшегося пользователя

1. Ну а если нет, то смотрим ошибки, которые возвращает ответом vk api;

Ессена это не будет работать на localhost.

Источник: github.com

Простая клиентская и серверная авторизация пользователя Ajax-сайта с помощью ВКонтакте API

Для одного проекта понадобилось сделать авторизацию пользователя на сайте с помощью ВКонтакте API как на клиентской стороне, с помощью javascript Open API, так и на серверной, с помощью PHP.

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

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

1. Мы не хотим лишний раз презагружать страницу, и вести весь обмен с сервером только через Ajax;
2. Для пользователя процесс авторизации должен вызывать как можно меньшее количество «задних мыслей», то есть, всё должно быть сделано максимально удобно.

Пусть у нас есть следующий HTML код

Доступ к ВК Серверный API Клиентский API

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

С клиентской авторизацией действительно нет ничего сложного.
Согласно документации, достаточно асинхронно загрузить openapi.js и, «повесить» VK.init() на событие window.vkAsyncInit , после чего уже можно вызвать функцию VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS) , которая и выполнит авторизацию пользователя.

Авторизация и запрос через Open API

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(); 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’, , 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);

Во-первых, сразу оговорюсь, что используемые здесь функции $ — это не jQuery . Тем не менее, их назначение может не быть интуитивно понятным, так что я буду рассказывать, что же делает та или иная функция. Их самостоятельная реализация не должна составить особого труда, ровно как и перекладка всего кода на jQuery .

Итак,
$.ready(function) — Это обработчик для DOMContentLoaded ;
$.js(text) — асинхронно загружает javascript файл;
$(element) — возвращает обёртку над DOM узлом element ;
$(element).add(node) — создаёт новый дочерний для element узел node и возвращает обёртку над ним;
$(element).html(string) — обёртка для element.innerHTML = string .

По-сути, этот код делает следующее:
По готовности документа загружается API ВКонтакте, и, после его инициализации, вызывается метод VK.Auth.login() , который показывает всплывающее окно, которое успешно «блочится» любой баннерорезкой, в котором пользователь должен подтвердить своё согласие предоставить данные клиентскому приложению.
Функция authInfo вызывается после согласия или несогласия пользователя, и, в случае успешной авторизации, запрашивает список друзей.

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

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

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

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

Пример авторизации в одном известном музыкальном сервисе

Правда, уже довольно давно вместо написи «Login Success» на открываемой странице красуется предупреждение о том, что как раз не надо делать именно так, как написано — вы видели это сообщение на картинке в начале топика.

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

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

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

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

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

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

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

Реализуем серверный скрипт, который будет отвечать на AJAX-запросы нашей страницы

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 содержит название метода, который мы хотим выполнить на сервере.

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

Дополним наш клиентский скрипт обработкой AJAX

function Api(method, params, callback)< if(!params) params = <>; $.ajax($.copy(, params), ‘server.php’, function(r)< if(r.error)< switch(r.error.code)< case -1: < // notAuth var div = $(document.body).add(‘div’).id(‘authPopup’), iframe = div.add(‘iframe’).attr(); div.add(‘p’).html(‘Если вы видите предупреждение о возможности потери доступа к Вашему аккаунту в случае копирования данных из адресной строки, не волнуйтесь — просто не произошло перенаправления на наш сервер после авторизации ВКонтакте. Такое иногда бывает по соображениям безопасности, вам нужно просто проделать всё вручную, нажав на ‘).add(‘a’).attr().html(‘эту ссылку’); $.splash.open(>); > break; default: alert(r.error.code+’: ‘+r.error.message); > >else if(callback) callback(r); >); > $.ready(function()< Api(‘user.in’); >);

Кратко опишу $ функции:
$.copy(object1, object2) — копирует в object1 все параметры object2 ;
$.ajax(text, addr, callback) — отправляет POST запрос на addr , передавая сообщение text . Ответ принимает в виде JSON и предаёт его в функцию callback ;
$(element).id(elemID) — обёртка для element.id = elemID ;
$(element).attr(object) — устанавливает атрибуты тега элемента element . Ключи object — названия атрибутов, значения ключей будут установлены как значения атрибутов;
$(element).remove() — удаляет element ;
$.splash.open(params) — Затягивает окно браузера полупрозрачным тёмным блоком. Параметр params.onclose — функция, которая будет вызвана при $.splash.close() .

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

Осталось только сделать страницу, на которую производится редирект.

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

YOUR_APP_ID, ‘apiSecret’ => YOUR_API_SECRET, ‘callbackUrl’ => YOUR_DOMAIN . ‘/auth.php’, ); if(isset($_REQUEST[‘code’])) < $vk = new VK($vkConf[‘appID’], $vkConf[‘apiSecret’]); $accessToken = $vk ->getAccessToken($_REQUEST[‘code’], $vkConf[‘callbackUrl’]); $_SESSION[‘accessToken’] = $accessToken[‘access_token’]; >else die(‘Auth failed’); ?> Подтверждение серверной авторизации с помощью ВК $.ready(function() < if(window.top)< window.top.vk.getFriends(); window.top.$.splash.close(); >>)

Авторизация успешна!

Теперь вы можете вернуться на сайт, и всё заработает

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

Вот такая вот получилась реализация ненавязчивой авторизации пользователя сайта через ВКонтакте API.

Скриншот

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

• Разработка веб-сайтов
• ВКонтакте API

Источник: habr.com

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

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

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

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

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

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

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

Смело нажимайте «редактировать», затем переходите в раздел «Настройки» — там первой же строкой вы увидите надпись «ID приложения: 1234567». Эти цифры — всё, что вам нужно запомнить для авторизации.

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

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

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

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

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

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

http://REDIRECT_URI#access_token=TOKEN3user_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 это можно реализовать следующим образом:

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

Devops-инженер МТС , Санкт-Петербург, Москва, можно удалённо , По итогам собеседования

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

Источник: tproger.ru

Авторизация через социальные сети: ВКонтакте

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

Введение

Для авторизации через социальную сеть ВКонтакте, используется открытый протокол OAuth 2.0. OAuth — это открытый протокол авторизации, который позволяет получить Вам – разработчикам — доступ к ресурсам пользователя хранящимся к примеру в социальной сети ВКонтакте. При этом пользователю вовсе не нужно сообщать Вам свой логин и пароль для доступа к его данным.

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

Бесплатный курс по PHP программированию

Освойте курс и узнайте, как создать веб-приложение на PHP с полного нуля

Теперь, так как мы будем работать непосредственно с социальной сетью, наш скрипт должен располагаться на реальном сервере. Так как будет проходить постоянный обмен данными между нашим скриптом и сервисом ВКонтакте. При этом на локальном компьютере (к примеру Denwer) скрипт работать не будет.

Для удобства работы с удаленным сервером, мы будем использовать текстовый редактор Notepad++, который содержит встроенный плагин по работе с протоколом FTP. Используя который, мы можем открывать и редактировать файлы скрипта непосредственно на удаленном сервере. Для этого запускаем текстовый редактор открываем меню Plugins, далее NppFTP и активируем Show NppFTP Window. При этом будет открыто окно для обзора файлов и папок удаленных серверов. В данном окне необходимо открыть настройки (кнопка Settings), а именно настройки профиля (Profile Settings) и добавить новый профиль для соединения с ftp сервером (при этом необходимо указать настройки подключения).

Затем, кликнув по кнопке Connect выполняем соединение через FTP:

Для добавления новых файлов, достаточно правой кнопкой кликнуть по соответствующей папке и выбрать Create new file. Открыть соответствующий файл можно двойным щелчком мыши.

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

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

Итак, создаем приложение, для этого переходим по ссылке //vk.com/editapp?act=create:

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

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

Далее переходим на вкладку настойки и копируем идентификатор приложения и его секретный ключ, которые понадобятся далее. ВАЖНО: ни кому не сообщайте идентификатор приложения и его секретный ключ и не выкладывайте их в открытый доступ, так как они могут быть использованы злоумышленниками.

Еще хотел бы обратить Ваше внимание на следующую страницу: //vk.com/developers.php?oid=-1https://webformyself.com/avtorizaciya-cherez-socialnye-seti-vkontakte/» target=»_blank»]webformyself.com[/mask_link]