Аутентификация через «ВКонтакте»

2 декабря 2014 Антон Кулешов 3003 0

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

Реклама

Итак, приступим к технический части. Для этого мы создадим и настроим новое приложение в социальной сети. После чего напишем класс, который будет взаимодействовать с API «ВКонтакте»: устанавливать соединение и получать данные о пользователе. В результате проделанных действий, мы сможем авторизовать пользователя у себя на сайте.

Создаём новое приложение «ВКонтакте»

Перед тем, как писать код, нам нужно зарегистрировать новое приложение. Делается это просто, заходим в свой профиль, переходим в раздел приложения и в нем кликаем на кнопку «Управление». В этом разделе вы увидите список всех приложений, которыми вы пользуетесь и кнопку «Создать приложение», жмём по ней. Заполняем название и выбираем пункт «Веб-сайт».

sozdanie-novogo-prilozheniya-vkontakte

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

podtverzhdenie-registratsii-prilozheniya-vkontakte

Вот так просто и быстро регистрируется новое приложение «ВКонтакте». Теперь переходим в настройки и копируем ID приложения и защищенный ключ в блокнот. На этом работа с социальной сетью заканчивается.

nastrojka-prilozheniya-vkontakte

Пишем класс для работы с API

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

class VKAuth{

	public $settings    = array();
	public $auth_status = false;
	public $user_info   = array();

	public function __construct($settings){

	}

	public function auth($code){

	}

	public function get_link(){

	}
}
  • settings – отвечает за хранение настроек для подключения к API;
  • auth_status – статус аутентификации, если пользователь пройдет, то значение изменяться на true;
  • В конструкторе мы будем принимать настройки для подключения, и сохранять в переменную settings;
  • auth – метод, который будет производить соединение с API и вытягивать нужные нам данные (принимает код для получения ключа доступа);
  • get_link – метод генерирующий путь ссылки для аутентификации.

Теперь давайте рассмотрим каждый из методов подробно:

1. Конструктор:

Как и было раннее оговорено, мы принимаем настройки и сохраняем их в переменную settings. Для надёжности проверяем наличие их при помощи функции isset().

public function __construct($settings){

	if(isset($settings["client_id"], $settings["client_secret"], $settings["redirect_uri"])){

		$this->settings = $settings;
	}
}

2. Auth:

С начала мы проверяем наличие переменных code и settings. Если всё нормально, то формируем первый запрос, который будет состоять из массива данных, обёрнутых в две функции.

urldecode() – декодирует %## символы в url.

http_build_query() – генерирует строку запроса.

После того, как мы обратимся по сформированному адресу, нам в ответ придет json строка. Для удобства, получаемые данные мы преобразуем в массив, делается это путем передачи у функции json_decode() второго параметра true. Данный массив будет содержать три ячейки: access_token, expires_in и user_id.

Идём дальше, проверяем наличие токена и формируем новый запрос на получение данных пользователя. В нашей функции мы будем сохранять: id, имя, фамилию и аватарку. Для этого через запятую в ячейку fields поместим строку с параметрами «uid,first_name,last_name,photo_100». Какие ещё данные пользователя можно получить описаны в документации объекта user. Обращаемся по новой ссылке и получаем ответ в виде массива. Проверяем наличие принятых данных и сохраняем их в переменную user_info (принятый массив является многомерным, данные будут храниться в нулевой ячейке response), а так же значение auth_status меняем на true и возвращаем true.

public function auth($code){

	if($code && $this->settings){

		$query = urldecode(http_build_query(array(

			"client_id"	  => $this->settings["client_id"],
			"client_secret"   => $this->settings["client_secret"],
			"code" 	          => $code,
			"redirect_uri"    => $this->settings["redirect_uri"]
		)));

		$token = json_decode(file_get_contents("https://oauth.vk.com/access_token?".$query), true);

		if(isset($token["access_token"])){

			$query = urldecode(http_build_query(array(

				"uids"         => $token["user_id"],
				"fields"       => "uid,first_name,last_name,photo_100",
				"access_token" => $token["access_token"]
			)));

			$this->user_info = json_decode(file_get_contents("https://api.vk.com/method/users.get?".$query), true);

			if(isset($this->user_info["response"][0]["uid"])){

				$this->user_info = $this->user_info["response"][0];
				$this->auth_status = true;

				return true;
			}
		}
	}

	return false;
}

3. Get Link:

Первым делом проверяем наличие настроек, а далее формируем путь для ссылки. Функции, которые используются, описаны выше. Когда пользователь нажмёт на ссылку с этим путём, то его перебросит на страницу c параметром code в адресной строке – код для получения токена.

public function get_link(){

	if($this->settings){

		$query = urldecode(http_build_query(array(

			"client_id"     => $this->settings["client_id"],
			"redirect_uri"  => $this->settings["redirect_uri"],
			"response_type" => "code"
		)));

		return "https://oauth.vk.com/authorize?".$query;
	}

	return false;
}

Простая авторизация

На этом этапе – всё довольно рационально. После того как вы подключите класс к файлу, останется получить экземпляр VKAuth, передав ему настройки. Ниже описываем простой обработчик, который отлавливает переменную $_GET[code] и проверяем аутентификацию.

require_once("VKAuth.php");

$vk  = new VKAuth(array(

	"client_id"     => "ID_приложения",
	"client_secret" => "защищенный_ключ",
	"redirect_uri"  => "адрес_сайта"
));

if(isset($_GET["code"])){

	if($vk->auth($_GET["code"])){

		// Делаем свои дела
	}
}

Далее, чтобы произвести авторизацию, вам нужно будет проверить наличие пользователя у себя в базе данных и, если его нет, то добавить. В противном случае обновить его данные (перед обновлением желательно проверить - изменились ли они). Касательно базы данных обычно добавляют два поля: тип авторизации и id пользователя в социальной сети. Вот так осуществляется аутентификация и авторизация через социальную сеть «ВКонтакте».

В архиве вы найдёте готовый пример работы с классом VKAuth, где выводятся данные пользователя.

Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

Ротатор баннеров – пишем сами

30 мая 2015 Антон Кулешов

Реклама – второй двигатель прогресса, первый – человеческая лень! Далеко не секрет, что реклама – составляет фактически 90% сегодняшнего интернета. Проанализируйте, что мы видим «сёрфя» интернет паутину: магазины и сайты каталоги производителей – без комментариев; стартовая страница Яндекса – основной доход компании реклама, причём как директ, так и различные баннеры; наша с вами почта – продающий контент в ней появился сравнительно недавно, но уже прочно укрепился; социальные сети – должно быть самый извращенный вариант скрытой рекламы, поскольку контент в них, пользователем как реклама не воспринимается, и мы сыпем кучу лайков на пост, откровенно содержащий в себе кучу брендов. Собственно, редкий блогер не повесит у себя на сайте баннерную рекламу.

Анимированный прогресс бар в 4 строки кода

11 декабря 2014 Антон Кулешов

Наличие на сайте прогресс бара действительно будет полезным, когда пользователю требуется сообщить о том, что на странице происходит что - то при долгом выполнении скрипта. Из этой статьи вы узнаете, как установить к себе на сайт progressbar, затратив на это всего пару минут времени.

Простой lightbox на JavaScript без jQuery

30 июля 2014 Антон Кулешов

Если порыться по интернету, то можно найти кучу вариаций по созданию lightbox. В основном их делают при помощи библиотек (jQuery). Когда сайт большой и скрипта много, это правильное решение. Зачем тратить время на всякие проверки, к тому же ещё и для ie придётся пол кода дописывать. Но если сайт не значительных размеров или вы не ориентируетесь на старые версии браузеров, то, тут я думаю, нет смысла тянуть библиотеку в десять тысяч строк кода, а то и больше, для реализации всплывающей подсказки или формы обратной связи.