Авторизация через соцсети php

Joomla

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

Модули можно найти в разделе Расширения — Менеджер расширений. Например:

Opencart

Для OpenCart тоже есть модули, к примеру:

WordPress

Для этого движка есть много расширений, к примеру:

• miniOrange Social Login для регистрации через ВКонтакте, Твиттер, Инстаграм*, Фейсбук* и другие соцсети. Есть дополнительные премиальные возможности, например, отправка приветственных писем зарегистрировавшимся;

• Social Login & Register тоже предлагает много соцсетей, среди которых ВКонтакте, Фейсбук*, Инстаграм*, Твиттер и другие. Есть возможность аналитики данных пользователей;

• Social Login by BestWebSoft для добавления формы авторизации через соцсети и комментирования. Работает с Фейсбуком*, Твиттером, аккаунтом Google и LinkedIn;

• Super Socializer включает в себя не только авторизацию, но и возможность делать репосты и комментировать контент на сайте через профили в соцсетях.

Автозагрузка классов

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

Авторизация на сайте с помощью вк, простой и понятный способ на php! »

$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 для дальнейшей авторизации токеном

echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';

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'] . '<br />';
        echo "Имя пользователя: " . $userInfo['first_name'] . '<br />';
        echo "Ссылка на профиль: " . $userInfo['screen_name'] . '<br />';
        echo "Пол: " . $userInfo['sex'] . '<br />';
        echo "День Рождения: " . $userInfo['bdate'] . '<br />';
        echo '<img src="' . $userInfo['photo_big'] . '" />'; echo "<br />";

    }
}

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

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

    if(empty($_SESSION['id'])) {

        echo "Вы уже авторизованы";
        

    } else {


    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
    }

<?php

$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 для дальнейшей авторизации токеном

if(empty($_SESSION['id'])) {

    echo "Вы уже авторизованы";

} else {

    echo $link = '<p><a href="' . $url . '?' . urldecode(http_build_query($params)) . '">Аутентификация через ВКонтакте</a></p>';
}

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'] . '<br />';
        echo "Имя пользователя: " . $userInfo['first_name'] . '<br />';
        echo "Ссылка на профиль: " . $userInfo['screen_name'] . '<br />';
        echo "Пол: " . $userInfo['sex'] . '<br />';
        echo "День Рождения: " . $userInfo['bdate'] . '<br />';
        echo '<img src="' . $userInfo['photo_big'] . '" />'; echo "<br />";

    }
}

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

Аутентификация пользователя и получение данных

Теперь, когда у нас есть объект SocialAuther, можем вызывать метод authenticate(), а затем получить данные о пользователе:

Битрикс

У CMS Битрикс авторизация на сайте через социальные сети входит в функциональность основного модуля входа на сайт.

Нужно только настроить:

1. В выбранных вами соцсетях нужно зарегистрировать приложение и получить ключи.

2. В настройках Битрикса открыть Настройки модулей — Социальные сервисы — Внешние сервисы, выбрать нужные соцсети и внести данные в настройки панели администрирования.

Посоветуйте плагины и сервисы, которые вам нравится использовать для настройки авторизации через соцсети! Ждем в комментариях.

Вконтакте

Настроить авторизацию на сайте через ВКонтакте можно с помощью API. На странице создания приложения заполните поля, в качестве платформы выберите «Сайт».

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

Список дальнейших действий подробно разобран на странице Документации для разработчиков.

Если вам нужен только ВКонтакте, можно использовать официальный виджет авторизации. На странице создания виджета нужно заполнить поля и скопировать код для вставки на сайт. Подробная документация расскажет, как правильно его вставить.

Вместо вступления

Про сервис

на сегодняшний день не так и много

информации, а которая имеется — в основном от самих разработчиков и достаточно сухо. Это

даже странно. Я хочу рассказать о собственном опыте разработки.

Мне пришлось вплотную столкнуться с решением проблемы авторизации на разрабатываемом

Вставка нового пользователя

Итак, тут нам нужно предусмотреть следующее: если у нас в базе есть пользователь с социальным id и названием адаптера соц сети, которые мы получили в результате аутентификации, то пользователь уже ранее входил в нашу систему, и запись в таблице о нём есть. Если же такой записи нет, то мы должны записать нового пользователя в БД:

Тут всё происходит так, как я и говорил. Сначала проверяем, есть ли в таблице пользователь с пришедшем к нам id и provider. Если нет, то формируем массив значений, затем выполняем INSERT запрос.

Генерация ссылок аутентификации

Теперь где-то в html коде делаем проверку на наличие GET параметра code, и если он присутствует, то мы можем выводить ссылки для аутентификации:

Использование socialauther с несколькими социальными сетями

Теперь мы займёмся применением SocialAuther при подключении нескольких социальных сетей.

Использование socialauther с одной отдельной социальной сетью

Перед тем, как приступить к более обширному примеру, давайте рассмотрим использование библиотеки в рамках одной социальной сети. К примеру, “ВКонтакте”. Для начала нам нужно сконфигурировать массив с параметрами: `client_id`, `client_secret`, `redirect_uri`:

Далее создаём объект класса адаптера ВКонтакте и передаём сконфигурированные параметры:

После того, как адаптер сконфигурирован, создаём объект класса SocialAuther:

Для того, чтобы сгенерировать ссылку аутентификации, достаточно вызвать следующий метод:

Для совершения аутентификации достаточно вызвать метод authenticate(), который вернёт true, если всё произойдёт хорошо, и false, если возникнет ошибка:

Далее мы можем получить следующую информацию, которая нужна практически каждому: социальный ID пользователя, имя, email, ссылка на профиль пользователя, пол, день рождения и ссылку на аватар. Если данных в этом поле нет, то метод вернёт null.

Работать с остальными социальными сетями можно практически таким же образом. Более подробную информацию можете найти на GitHub.

Как добавить на сайт регистрацию через профили в соцсетях

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

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

С клиентской авторизацией действительно нет ничего сложного.

Согласно

, достаточно асинхронно загрузить

и, «повесить»

VK.init({appid: YOUR_APP_ID})

на событие

window.vkAsyncInit

, после чего уже можно вызвать функцию

VK.Auth.login(authInfo, YOUR_APP_PERMISSIONS)

, которая и выполнит авторизацию пользователя.

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({apiId: vk.appID});
   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', {fields: ['uid', 'first_name', 'last_name'], order: 'name'}, 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);

По-сути, этот код делает следующее:

По готовности документа загружается API ВКонтакте, и, после его инициализации, вызывается метод

VK.Auth.login()

, который показывает всплывающее окно,

которое успешно «блочится» любой баннерорезкой

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

Функция

authInfo

вызывается после согласия или несогласия пользователя, и, в случае успешной авторизации, запрашивает список друзей.

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

Конфигурация параметров приложений

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

Настройка подключения к бд

Данный функционал я предлагаю вынести в отдельный файл. К примеру, config.inc.php:

Тут мы подключились к базе, выбрали таблицу и задали кодировку UTF8. Теперь данный файл можно присоединить к index.php и работать с таблицей.

Настройка ссылки для входа

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

Обновление данных пользователя в базе

Если в базе данных пользователь уже есть, то было бы неплохо проверить обновил ли он какие-то данные или нет. Для этого создаём объект стандартного класса и помещаем в него данные о пользователе из БД. Далее в коде, когда получим данные о пользователе из социалки, проверим данные два объекта на равенство и если они не равны, то обновим запись в базе.

Подборка php песочниц

Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

Подготовительный этап

Весь подготовительный этап сводится к просмотру демок (чтобы представлять конечный вид) и

Полезно компании: можно собирать данные, больше вероятность репостов

Если пользователь авторизовывается через соцсеть, веб-мастер получает информацию о нем из профиля. Это может быть рабочий адрес почты, возраст, геоданные, семейное положение, интересы — то, что заполнено в профиле. А еще это значит, что пользователь точно не ввел для регистрации одноразовую почту, так что рассылка не пропадет.

Также авторизация через соцсети упрощает репосты материалов с сайта, а значит увеличивает конверсию и реферальный трафик.

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

Получение данных из вконтакте

И так, пропишем скрипт получения данных от vk по только что присланному code. 

Последние штрихи

Ну, вот в принципе и всё. Что ещё можно добавить? Разве что можем усилить проверки на главной странице и в нескольких if-ах проверять наличие сессии. В общем, смотрите сами, как вам удобнее. Привожу полный код файла index.php:

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

У меня на этом всё. Удачи вам! И до новых встреч!

Привязка к сессии

В принципе, нам осталось сделать только одно – привязать нашего пользователя к сессии, чтобы в дальнейшем, на других страницах, мы могли доставать информацию о нём. Делается это очень просто. Для начала в файл config.inc.php вписываем функцию активации сессий:

Далее в index.php, после блока проверки существования пользователя, формируем объект стандартного класса (поля) и записываем в них информацию о пользователе:

Прикрутка к бд

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

Разработка базы

Моя реализация не будет претендовать на совершенство, однако она в полной мере покажет

суть происходящего.

Реализуем выход пользователя из системы

Рано или поздно пользователь захочет выйти из нашей системы. Для этого создадим отдельный файл logout.php:

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

В первую очередь создайте приложение на странице 

Совет: отправка информации в google analytics через api

Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

Создание адаптеров классов.

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

Для того, чтобы было яснее, возьмём маленький пример. Берём фрагмент массива параметров:

Допустим, в цикле foreach пришёл черёд данного элемента с ключом `odnoklassniki`. Название ключа записывается в переменную $adapter, а массив с параметрами – в переменную $settings. Далее первая операция создаст имя класса, а вторая задаст ему параметры и запишет адаптер в общий массив.

Создание бд и таблицы

Для данного урока создайте любую MySQL базу данных. Я назову её `auth`. В ней, с помощью данного кода, сгенерируйте таблицу:

Поле id – это стандартный автоинкрементный индекс. В колонку `provider` записываем название социальной сети учётной записи пользователя. Все остальные поля соответствуют методам, которые мы можем вызвать от объекта SocialAuther для получения информации о пользователе.

Создание объекта socialauther для аутентификации пользователя

Создать объект SocialAuther и авторизовать пользователя мы можем, если к нам придёт GET параметр provider. Также если название адаптера совпадает хоть с одним из наших хранящихся в общем массиве, создаём объект класса SocialAuther и передаём адаптер той социальной сети, через которую авторизовался пользователь:

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

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

Способ 1. ручная настройка форм для каждой социальной сети

Каждая соцсеть требует отдельных настроек:

• со стороны соцсети нужно зарегистрировать сайт в системе и получить ключи;

• со стороны сайта нужно настроить интеграцию с социальной сетью.

Способ 3. cms-плагины для регистрации на сайте через соцсети

Если пользуетесь CMS, можно поискать решение через модули и расширения в каталогах.

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

Полученный на первом этапе HTML код — это форма для входа. Размещается на странице

авторизации.

Требования к сайту по защите личных данных

В ФЗ N152-ФЗ «О персональных данных» описаны правила для законного сбора и обработки данных пользователей. За нарушения предусмотрены штрафы.

Список требований:

Удобно клиентам: меньше заполнять, быстрее регистрация, учетка не теряется

Еще в 2022 году исследование показало, что 77% пользователей считают вход через соцсети хорошим решением. А в 2022 году другие исследователи выяснили, что 93% пользователей чаще выбирают способ авторизации через соцсеть. Остальные опрошенные либо не были зарегистрированы в соцсетях, либо не хотят передавать сайту личные данные профиля, для них нужно оставить возможность авторизации через email.

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

Фейсбук*

Зарегистрируйтесь в системе Фейсбука* для разработчиков, кликните на «Создать приложение» и выберите «Создание кросс-сервисных функций:

Чем так хороши соцсети для регистрации

От этого способа авторизации выигрывают и клиенты, и владелец сайта.

Подключение zend модулей к expressive

Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

Фильтрация данных с помощью zend-filter

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

Контекстное экранирование с помощью zend-escaper

Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.