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

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

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

скачать исходникискачать урок

Введение

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

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

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

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

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

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

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

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

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

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

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

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

Еще хотел бы обратить Ваше внимание на следующую страницу: http://vk.com/developers.php?oid=-1&p=%D0%90%D0%B2%D1%82%D0%BE%D1%80%D0%B8%D0%B7%D0%B0%D1%86%D0%B8%D1%8F_%D1%81%D0%B0%D0%B9%D1%82%D0%BE%D0%B2. Это документация по теме данного урока.

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

Первым делом давайте создадим страницу с ссылкой Авторизация, кликнув по которой пользователь будет перенаправлен на страницу авторизации ВКонтакте. Для этого создадим файл index.php:

<?
session_start();
?>
<!DOCTYPE HTML>
<html>
    <head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<title>Тестовый сайт</title>				
	</head>
	<body>
		<div id="container">
		<h2>Контент сайта</h2>
		<p>
			<strong><a href="auth.php">Авторизация</a></strong>
		</p>
		</div>
	</body>
</html>

Данная страница выглядит следующим образом:

Как Вы видите путь в ссылке Авторизация ведет на вспомогательный файл auth.php, который будет обрабатывать данные нашего скрипта. Теперь давайте создадим файл конфигурации config.php и добавим несколько констант:

session_start();
define("APP_ID",'идентификатор приложения');
define("APP_SECRET",'Секретный ключ');
define("REDIRECT_URI",'http://avtomirock.esy.es/auth.php');
define("URL_ACCESS_TOKEN",'https://oauth.vk.com/access_token');
define("URL_AUTH ",'http://oauth.vk.com/authorize');
define("URL_GET_USER",'https://api.vk.com/method/users.get');

Где: APP_ID – идентификатор Вашего приложения, APP_SECRET – секретный ключ, REDIRECT_URI – путь на который ВКонтакте пришлет перенаправит пользователя, URL_ACCESS_TOKEN – путь по которому необходимо выполнить запрос для получения access_token (ключ доступа к данным пользователя), URL_AUTH – путь страницы авторизации ВКонтакте, URL_GET_USER – путь по которому необходимо выполнить запрос для получения данных пользователя. Теперь создадим новый файл (Auth_VK.php) и добавим в него следующий код:

<?
class Auth_Vk {
	
	private $code;
	private $token;
	private $uid;
	
	public function __construct() {
		
		require "config.php";
	}
	
	public function set_code($code) {
		$this->code = $code;
	}
	
	public function set_token($token) {
		$this->token = $token;
	}
	
	public function set_uid($id) {
		$this->uid = $id;
	}
	
	public function redirect($url) {
		header('HTTP/1.1 301 Moved Permanently');
		header("Location:".$url);
		exit();
	}
	
}
?>

Данный класс – это логическое ядро нашего скрипта. Свойства класса: $code – код который пришлет ВКонтакте в результате успешной авторизации пользователя, $token – access_token – ключ доступа к данным пользователя; $uid – идентификатор пользователя в системе ВКонтакте. В конструкторе класса мы подключим файл конфигурации. Метод redirect() – необходим для перенаправления пользователя по адресу, который передается в аргументе при вызове метода. Вспомогательные методы set_code(), set_token(), set_uid() – необходимы для установки закрытых свойств класса. Теперь давайте создадим файл auth.php и добавим в него следующий код:

<?
require "Auth_Vk.php";

$o = new Auth_Vk();

if(!$_GET['code']) {
	
	$query = "client_id=".APP_ID."&scope=offline&redirect_uri=".REDIRECT_URI."&response+type=code";
	
	$o->redirect(URL_AUTH."?".$query);
}
?>

То есть в начале подключаем ранее созданный класс, затем создаем его объект. Как я говорил ранее после успешной авторизации, ВКонтакте пришлет в данный файл данные, используя GET параметры (то есть через адресную строку). Это будет параметр code – специальный код необходимый для получения access_token. Поэтому если данного параметра нет, значит необходимо перенаправить пользователя на страницу авторизации ВКонтакте. При этом через адресную строку необходимо передать следующие параметры:

client_id – идентификатор приложения пользователя;

scope – права доступа приложения (offline — означает доступ к данным пользователя в любое время);

redirect_uri – путь по которому будет выслан параметр code. Этот адрес должен находиться в пределах домена, указанного в настройках приложения.;

response_type – ответом от сервера должен быть параметр code.

Теперь давайте выполним авторизацию (переходим по ссылке Авторизция):

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

Получение access_code

Далее необходим получить ключ доступа к данным пользователя, используя полученный параметр code. Для этого в файл auth.php добавим следующий код:

if($_GET['code']) {
	$o->set_code($_GET['code']);
	$res = $o->get_token();
}
if($_GET['error']) {
	exit($_GET['error_description']);
}

Кстати если во время авторизации возникли ошибки, то вместо параметра code, придет параметр error – код ошибки, вместе с ее описанием — error_description. Поэтому если мы действительно получили code, значит, запишем его в свойство класса и вызовем метод get_token(), который получит access_token. Теперь в класс Auth_Vk добавим код метода get_token():

public function get_token() {
		if(!$this->code) {
			exit("Не верный код");
		}
		
		$ku = curl_init();
		$query = "client_id=".APP_ID."&client_secret=".APP_SECRET."&code=".$this->code."&redirect_uri=".REDIRECT_URI;
		curl_setopt($ku,CURLOPT_URL,URL_ACCESS_TOKEN."?".$query);
		curl_setopt($ku,CURLOPT_RETURNTRANSFER,TRUE);
		
		$result = curl_exec($ku);
		curl_close($ku);
		
		$ob = json_decode($result);
		if($ob->access_token) {
			$this->set_token($ob->access_token);
			$this->set_uid($ob->user_id);
			return TRUE;
		}
		elseif($ob->error) {
			$_SESSION['error'] = "Ошибка";
			return FALSE;
		}
	}

Для получения access_token необходимо отправить запрос по адресу хранящимся в константе URL_ACCESS_TOKEN, и передать следующие параметры, используя метод GET:

client_id – идентификатор приложения;

client_secret – секретный код;

code – полученный code;

redirect_uri – здесь нужно указать тот же адрес, что и для получения code.

Запрос отправлять будем используя библиотеку CURL. При этом ответ от сервера ВКонтакте придет в формате строки JSON. Значит, используя функцию json_decode(), декодируем данную строку в объект. Объект мы получим следующего вида:

В случае ошибки мы получим следующее:

То есть мы получим объект у которого будет либо свойство access_token, либо свойство error. Поэтому, если мы получаем access_token – запишем его значение и идентификатор пользователя в соответствующие свойства класса и вернем TRUE, если же придет ошибка — запишем ее в сессию и вернем FALSE.

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

После того, как мы получили ключ доступа access_token – можно получить данные пользователя. Для этого в файл auth.php добавим следующий код (после вызова метода get_token()):

if($res) {
		$o->get_user();
	}
	else {
		exit($_SESSION['error']);
	}

Теперь давайте опишем метод get_user(), который получит и вернет данные пользователя:

public function get_user() {
		if(!$this->token) {
			exit('Wrong code');
		}
		
		if(!$this->uid) {
			exit('Wrong code');
		}
		
		$query = "uids=".$this->uid."&fields=first_name,last_name,nickname,screen_name,sex,bdate,city, country,timezone,photo,photo_medium,photo_big,has_mobile,rate,contacts, education,online,counters&access_token=".$this->token;
//echo $query;

		$kur = curl_init();

		

		curl_setopt($kur, CURLOPT_URL, URL_GET_USER."?".$query);

		curl_setopt($kur, CURLOPT_SSL_VERIFYPEER, false);

		curl_setopt($kur, CURLOPT_SSL_VERIFYHOST, false);

		curl_setopt($kur,CURLOPT_RETURNTRANSFER,TRUE);

		

		$result2 = curl_exec($kur);
		
		curl_close($kur);

		$_SESSION['user'] = json_decode($result2);

		$this->redirect("http://avtomirock.esy.es");

	}

Для получения данных пользователя необходимо отправить запрос по адресу, хранящимся в константе URL_GET_USER и отправить следующие данные, используя метод GET:

uids – идентификатор пользователя, полученный вместе с access_token;

fields – данные которые необходимо получить (подробнее о данных можно посмотреть в документации http://vk.com/developers.php?oid=-1&p=users.get)

access_token – access_token полученный ранее.

Как обычно запрос отправляем используя библиотеку CURL. Данные как обычно придут в формате JSON строки, поэтому декодируем их и сохраняем в сессии для дальнейшего вывода на экран. И сразу выполняем редирект на главную страницу нашего сайта. Давайте распечатаем объект данных пользователя, который мы получи после декодирования JSON строки:

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

<?
		if($_SESSION['user']) {
			$user = $_SESSION['user']->response[0];
			//print_r($user);
		}
		?>
		<img src="<? echo $user->photo_medium;?>">
		<p><?php echo $user->first_name;?></p>
		<p><?php echo $user->last_name;?></p>

На этом данный урок завершен. Всего Вам доброго и удачного кодирования!!!

Курс по программированию на языке PHP

Изучите PHP с нуля до результата!

Смотреть курс

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (19)

  1. Sam

    Интересная и нужная тема , а про другие соц. сети будут уроки?!

    • Виктор Гавриленко

      Здравствуйте!
      В ближайшем времени будет урок по авторизации через социальную сеть Facebook.

  2. Игорь

    А вопрос выхода (logout) в этой теме неактуален?

  3. Илья

    После того как нажимаю Авторизация выдает:
    {«error»:»invalid_request»,»error_description»:»redirect_uri has wrong domain, check application settings»}
    redirect_uri вроде правильный, с чем может быть связано?

  4. Виктор Гавриленко

    Здравствуйте, Илья!
    Ошибка сообщает, о том что неверный запрос отправляется на сервер. Первым делом посмотрите в настройках приложения VK, правильно ли вписаны данные Вашего сайта, если все верно то необходимо проверять правильность запроса.

  5. Павел

    Виктор, здравствуйте!

    А скажите, шаг «создание приложения Вконтакте» до сих пор обязателен? (статья опубликована в 2014 году, вдруг что поменялось?)))

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

    И подскажите, пожалуйста, в других соцсетях — FB, ОК и МэйлРу — такая же ситуация?

  6. Маша

    Здравствуйте! Спасибо за урок.
    Сделала такую авторизацию, однако она не сработала. При нажатии авторизации переходит на «страница не найдена». В чем может быть причина такой ошибки?

    • Виктор Гавриленко

      Здравствуйте, Маша!
      Сложно что либо сказать не видя кода. Смотрите правильно ли прописаны пути по которому отправляется запрос, так же обратите внимание на то, что авторизация работает только с реального хостинга, причем это не должен быть бесплатный хостинг. Так как зачастую на них наложены существенные ограничения.

  7. Маша

    платный хостинг и реальный сайт. В этом вряд ли будет проблема. Как именно подключить этот файл auth.php? Я так понимаю его не подключила. Подскажите с помощью какой функции и в каких файлах. Чтобы не было проблем)

    • Виктор Гавриленко

      На данный файл Вы делаете ссылку. То есть кнопка авторизация ведет на файл auth.php — как в уроке.

  8. Маша

    вот в том то и дело, что никуда эта кнопка не ведет. вернее ведет на 404.php. не пойму в чем проблема

    • Виктор Гавриленко

      Еще раз здравствуйте, Маша!
      Нужно смотреть Ваши исходники — приведите их в архиве на нашем форуме, я посмотрю.

      • Виктор

        Виктор, Здравствуйте. Скачал исходник. Авторизация проходит, но не идет редирект на главную. Так и остается на auth.php. В чем может быть проблема?

        • Виктор Гавриленко

          Здравствуйте, Виктор!
          Только что скачал исходники, залили их на реальный сервер в интернете, создал приложение и все работает. Возможно у Вас не выполняется CURL запрос при получении токена пользователя. Попробуйте добавить в метод get_token(), в настройки инициализации CURL соединения — отключение проверки SSL сертификата:
          curl_setopt($kur, CURLOPT_SSL_VERIFYPEER, false);
          curl_setopt($kur, CURLOPT_SSL_VERIFYHOST, false);
          По аналогии с методом get_user().

          • Евгений

            Все равно не перебрасывает на главную. В чем еще может быть причина?

      • Дмитрий

        не знаю вот моя проблема, все пробовал.

        Warning: require(Auth_Vk.php) [function.require]: failed to open stream: No such file or directory in /var/www/u0173612/data/www/priznavaski.ru/auth.php on line 2

        Warning: require(Auth_Vk.php) [function.require]: failed to open stream: No such file or directory in /var/www/u0173612/data/www/priznavaski.ru/auth.php on line 2

        Fatal error: require() [function.require]: Failed opening required ‘Auth_Vk.php’ (include_path=’.:’) in /var/www/u0173612/data/www/priznavaski.ru/auth.php on line 2

        • Виктор Гавриленко

          Здравствуйте, Дмитрий!
          Ошибка сообщает что не найден файл для подключения, проверяйте правильность путей.

        • Евгений

          была та же беда Auth_Vk.php, файл auth и Auth- 2 разных файла

  9. Константин

    Спасибо за статью, на основе нее написал модуль для коханы для авторизации

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree