Для одного проекта понадобилось сделать авторизацию пользователя на сайте с помощью ВКонтакте API как на клиентской стороне, с помощью javascript Open API, так и на серверной, с помощью PHP.
На первый взгляд, задача не такая уж и интересная, благо у ВКонтакте есть хорошая документация с подробным описанием, что да как, и даже пример клиентской авторизации, плюс, в сети уже есть очень много сайтов с авторизацией через ВКонтакте API.
Давайте попытаемся получить два списка друзей пользователя, один с помощью серверного API, а другой с помощью клиентского.
Заодно на практике разберёмся с обоими вариантами процесса авторизации.
- Мы не хотим лишний раз презагружать страницу, и вести весь обмен с сервером только через Ajax;
- Для пользователя процесс авторизации должен вызывать как можно меньшее количество «задних мыслей», то есть, всё должно быть сделано максимально удобно.
Пусть у нас есть следующий HTML код
ВК Live ошибка авторизации. Не работает. Что Делать
Доступ к ВКСерверный 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.
- Необходимо в браузере пользователя показать страницу, где он разрешит приложению доступ к своим данным;
- После успешной авторизации приложения браузер пользователя будет перенаправлен по адресу REDIRECT_URI, указанному при открытии диалога авторизации. При этом в GET-параметре будет передан код для получения ключа доступа;
- Необходимо выполнить запрос с передачей кода и секретных данных приложения на специальный адрес, в ответ мы получим ключ доступа 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
Как сделать на сайте авторизацию через Вконтакте
Эта статья будет полезна, в первую очередь, владельцам сайтов и торговых платформ, которые непосредственно работают с живыми клиентами.
Ни для кого не секрет, что современное поколение людей очень зависимы от социальных сетей. Фактически каждый зарегистрирован хотя бы в одной из них. Все рекорды в этом вопросе бьет Российская социальная сеть «Вконтакте». Она популярна как среди молодежи, так и среди людей среднего возраста.
Для предпринимателей это может стать огромным плюсом, поскольку, создав авторизацию на своем сайте через Вконтакте, можно навсегда избавить себя и потенциальных клиентов от лишней работы и траты времени.
Не задумывались ли вы, сколько людей уходят из вашего интернет-ресурса только потому, что для совершения некоторых действий (как, например, покупка чего-либо) необходимо авторизоваться. Никто не хочет заполнять длинные анкеты. Гораздо легче один раз кликнуть мышкой и авторизоваться через уже существующий профиль Вконтакте.
Для того, чтобы самому сделать на своем сайте такую авторизацию, необходимо, в первую очередь — нужно создать (написать) модуль Open API авторизации для сайта на PHP. Для тех, кто вникал в основы простейшего программирования и написания простых сайтов — нет ничего нового и сложного. Для остальных же, следует пояснить алгоритм того, как происходит авторизация через ВК.
Сначала человек находит у вас на сайте кнопку авторизации, которую вы прописали заблаговременно. После нажатия, он переходит (в автоматическом режиме, разумеется) на сайт ВК, там подтверждает свое согласие на обработку данные вашим сайтом. А далее, всё так же автоматически возвращается на ваш сайт, уже авторизованным пользователем.
Для клиента всё это происходит в течение нескольких секунд, в то время, как полноценная авторизация могла бы занять около десяти минут. Статистика показывает, что столь простой прием может упростить вашу жизнь в разы.
Источник: seo-hameleon.ru
Как настроить авторизацию во Вконтакте
Авторизация через социальные сети – это один из самых популярных способов входа на сайт. Он даёт возможность быстро и безопасно проводить регистрацию и вход на различные сайты.
В данной статье мы покажем, как настроить авторизацию через одну из самых популярных социальных сетей – ВКонтакте. Мы разберём шаги, которые необходимо выполнить, чтобы добавить возможность авторизации через эту социальную сеть на свой сайт.
Использование авторизации через ВКонтакте позволяет снизить количество вводимых пользователем данных, сократить время процесса регистрации и упростить его для посетителя сайта. Это особенно удобно для тех сайтов, где не нужна высокая степень защиты и возможность написания комментариев на форумах и т.д.
Как настроить авторизацию вконтакте
Шаг 1: Создание приложения во Вконтакте
Первым шагом, необходимо зарегистрировать новое приложение во Вконтакте. Для этого:
- Зайдите в «Мои приложения» на странице разработчика Вконтакте.
- Нажмите кнопку «Создать приложение».
- Заполните все поля, обозначенные звездочкой – название, тип приложения и адрес сайта.
- Скопируйте Client ID, который появится после создания приложения, и сохраните его.
! Как правильно установить евродверь своими руками
Шаг 2: Настройка сервиса для авторизации
Далее необходимо настроить сервис для авторизации. Сервис – это скрипт, который осуществляет работу по авторизации пользователей. Настроить его можно следующим образом:
- Зайдите на сайт нашего сервиса.
- В разделе «Настройки» введите Client ID, который вы получили при создании приложения во Вконтакте.
- После этого выберите домен вашего сайта, на котором будет осуществляться авторизация пользователей.
- Скопируйте полученный код и вставьте его на ваш сайт в нужном месте.
Шаг 3: Протестируйте настройки авторизации
Для проверки работы авторизации в Вконтакте, зайдите на ваш сайт, где вы разместили необходимый код. Нажмите на кнопку авторизации, которую вы настроили через сервис. Откроется окно Вконтакте, где вы сможете подтвердить запрос на авторизацию. После подтверждения, вы будете перенаправлены снова на ваш сайт и авторизация будет завершена.
Шаг 1: Создание приложения
1.1. Зайдите на страницу для разработчиков ВКонтакте
Для создания приложения необходимо зайти на страницу https://vk.com/dev. Если вы еще не авторизованы, то сделайте это.
1.2. Создайте новое приложение
Чтобы создать новое приложение, нажмите на кнопку «Создать приложение». В открывшемся окне укажите название приложения, его тип и другую информацию, которая может потребоваться приложению.
1.3. Получите «ID приложения» и «Защищенный ключ»
После создания приложения на странице его настроек вы сможете получить «ID приложения» и «Защищенный ключ». Именно на эти параметры вы будете ссылаться в процессе авторизации пользователей через ВКонтакте.
Обновите настройки приложения, чтобы сохранить изменения.
Шаг 2: Получение ключа доступа
Чтобы получить ключ доступа, необходимо пройти следующие шаги:
- Перейдите на страницу vk.com/dev/access_token
- В поле «Client ID» введите ID вашего приложения
- В поле «Client Secret» введите сервисный ключ вашего приложения
- В поле «Redirect URI» укажите ссылку на страницу, на которую пользователь будет перенаправлен после авторизации
- В поле «Code» введите код, который был получен на предыдущем шаге
- Нажмите на кнопку «Get Access Token»
- В открывшемся окне нажмите «Allow»
- Скопируйте полученный ключ доступа и сохраните его в безопасном месте
! Как настроить устройство рядом с андроидом
Ключ доступа требуется для выполнения запросов к API VK и получения необходимых данных о пользователе.
Шаг 3: Настройка на сайте
1. Создание приложения ВКонтакте
Перед началом настройки авторизации на сайте нужно зарегистрировать приложение ВКонтакте. Для этого нужно зайти в Мои приложенияна сайте разработчиков ВКонтакте и нажать на кнопку Создать приложение.
В качестве типа приложения можно выбрать социальную игру, сайт, standalone-приложение или другой вариант, подходящий для вашего сайта. После заполнения всех необходимых данных, нужно сохранить настройки и получить ID приложенияи секретный ключ.
2. Добавление настроек авторизации на сайт
Для добавления функционала авторизации через ВКонтакте на сайты можно использовать официальный JavaScript-код с настройками авторизации. Нужно подключить библиотеку используя код:
После этого, можно создать кнопку для авторизации на сайте с кодом:
VK.init(
apiId: ваш_ID_приложения
>);
VK.Widgets.Auth(«vk_auth», );
Где вместо ваш_ID_приложения нужно указать ранее полученный ID приложения.
3. Получение данных о пользователе
После авторизации на сайте пользователь может подтвердить доступ приложения к его данным, например, к информации о профиле. Для получения данных нужно использовать следующий код:
VK.api(‘users.get’, , function(response)
if (response.error)
console.log(response.error.message);
return;
>
console.log(response);
>);
Где fields — это список запрашиваемых полей, response — объект с данными о пользователе. Среди них могут быть имя, фамилия, аватар, город, дата рождения и другие данные.
Шаг 4: Проверка работы
После настройки авторизации вконтакте на сайте, необходимо проверить ее работу. Для этого можно установить несколько точек контроля:
- Авторизация через кнопку ВКонтакте на сайте должна проходить без ошибок;
- При авторизации должно происходить перенаправление на указанный в настройках сайта адрес;
- Пользователь должен иметь доступ к закрытым разделам сайта, доступным только для авторизованных пользователей.
Если при проверке работы возникнут ошибки, необходимо вернуться к предыдущим шагам и проверить правильность выполнения всех настроек. Возможно, вам понадобится связаться с технической поддержкой ВКонтакте, чтобы уточнить некоторые моменты.
Авторизация через социальные сети, в том числе через ВКонтакте, является удобной и популярной опцией для пользователей. Настройка такой авторизации на сайте позволяет упростить процесс регистрации и входа на сайт для пользователей и повысить уровень безопасности.
Вопрос-ответ
Как подключить авторизацию ВКонтакте к своему сайту?
Для этого нужно зарегистрировать свое приложение в Центре разработчиков ВКонтакте, настроить авторизацию, получить ключ доступа и внедрить его на свой сайт. Подробную инструкцию можно прочитать в статье.
Можно ли настроить авторизацию ВКонтакте без использования Центра разработчиков?
Нет, без использования Центра разработчиков ВКонтакте настроить авторизацию невозможно. Необходимо зарегистрироваться на сайте, создать приложение и получить ключ доступа.
Какие данные можно получить от пользователя при авторизации через ВКонтакте?
При авторизации через ВКонтакте можно получить такие данные, как имя, фамилия, фотография профиля, список друзей, email и другие. Но для получения некоторых данных необходимо получить разрешение пользователя.
Можно ли настроить авторизацию ВКонтакте на сайте без HTTPS?
Нет, для безопасной работы с авторизацией ВКонтакте необходимо использовать протокол HTTPS. Такая защита обеспечивает конфиденциальность передачи данных между сайтом и сервером.
Как получить ключ доступа для ВКонтакте?
Для получения ключа доступа необходимо зарегистрировать свое приложение на сайте Центра разработчиков ВКонтакте, после чего ключ будет выдан в настройках приложения.
Что такое «редирект URI» при настройке авторизации ВКонтакте?
Redirct URI – это адрес, на который будет отправлен ответ сервера после успешной авторизации пользователя. Этот адрес необходимо указать при настройке авторизации ВКонтакте.
Источник: bojsya.ru