Создание аутентификации через социальные сети на вашем сайте

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

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

Сегодня мы рассмотрим более обобщённый пример с прикруткой к базе данных и прочими фишками.

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

Саму библиотеку вы можете найти в исходниках, а также на GitHub. Это моя первая раздача, так что прошу строго не судить. На данный момент, поддерживается работа с шестью соц сетями: ВКонтакте, Одноклассниками, Mail.ru, Yandex, Google и Facebook. В будущем я планирую развивать и совершенствовать данную систему. Поскольку библиотека выложена в свободном доступе на GitHub, я буду рад всяческому содействию с вашей стороны. Ну а для того чтобы посмотреть, как работает SocialAuther, давайте двигаться дальше.

Сразу же хочу уточнить одну деталь. Для работы библиотеки, вам понадобится версия PHP 5.3 и выше. Для того чтобы понять, как использовать библиотеку SocialAuther, я буду приводить как частные, так и общие для этого урока примеры.

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

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

require_once 'lib/SocialAuther/autoload.php';

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

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

// конфигурация настроек адаптера
$vkAdapterConfig = array(
    'client_id'     => '3078654',
    'client_secret' => 'zrCHcmKAcBvblSUIBIwu',
    'redirect_uri'  => 'http://localhost/vk-auth'
);

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

// создание адаптера и передача настроек
$vkAdapter = new SocialAuther\Adapter\Vk($vkAdapterConfig);

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

// передача адаптера в SocialAuther
$auther = new SocialAuther\SocialAuther($vkAdapter);

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

if (!isset($_GET['code'])) {
    echo '<p><a href="' . $vkAdapter->getAuthUrl() . '">Аутентификация через ВКонтакте</a></p>';
}

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

if (isset($_GET['code'])) {
    if ($auther->authenticate()) {
            if (!is_null($auther->getSocialId()))
                echo "Социальный ID пользователя: " . $auther->getSocialId() . '<br />';

            if (!is_null($auther->getName()))
                echo "Имя пользователя: " . $auther->getName() . '<br />';

            if (!is_null($auther->getEmail()))
                echo "Email пользователя: " . $auther->getEmail() . '<br />';

            if (!is_null($auther->getSocialPage()))
                echo "Ссылка на профиль пользователя: " . $auther->getSocialPage() . '<br />';

            if (!is_null($auther->getSex()))
                echo "Пол пользователя: " . $auther->getSex() . '<br />';

            if (!is_null($auther->getBirthday()))
                echo "День Рождения: " . $auther->getBirthday() . '<br />';

            // аватар пользователя
            if (!is_null($auther->getAvatar()))
                echo '<img src="' . $auther->getAvatar() . '" />'; echo "<br />";
        }
}

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

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

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

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

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

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

$adapterConfigs = array(
    'vk' => array(
        'client_id'     => '3774741',
        'client_secret' => '3nLWEs45iWeKypmVR2CU',
        'redirect_uri'  => 'http://localhost/auth/?provider=vk'
    ),
    'odnoklassniki' => array(
        'client_id'     => '168635560',
        'client_secret' => 'C342554C028C0A76605C7C0F',
        'redirect_uri'  => 'http://localhost/auth?provider=odnoklassniki',
        'public_key'    => 'CBADCBMKABABABABA'
    ),
    'mailru' => array(
        'client_id'     => '770076',
        'client_secret' => '5b8f8906167229feccd2a7320dd6e140',
        'redirect_uri'  => 'http://localhost/auth/?provider=mailru'
    ),
    'yandex' => array(
        'client_id'     => 'bfbff04a6cb60395ca05ef38be0a86cf',
        'client_secret' => '219ba8388d6e6af7abe4b4b119cbee48',
        'redirect_uri'  => 'http://localhost/auth/?provider=yandex'
    ),
    'google' => array(
        'client_id'     => '333193735318.apps.googleusercontent.com',
        'client_secret' => 'lZB3aW8gDjIEUG8I6WVcidt5',
        'redirect_uri'  => 'http://localhost/auth?provider=google'
    ),
    'facebook' => array(
        'client_id'     => '613418539539988',
        'client_secret' => '2deab137cc1d254d167720095ac0b386',
        'redirect_uri'  => 'http://localhost/auth?provider=facebook'
    )
);

1. Ключи 'vk', 'odnoklassniki', 'mailru', 'yandex', 'google' и 'facebook' выбраны не просто так. Эти названия в дальнейшем мы будем использовать для динамического создания каждого из адаптеров.

2. Обратите внимание, что к каждому `redirect_uri` мы приписали параметр `adapter`, который равен названию соц сети. Эти ссылки (пр. http://localhost/auth?provider=facebook), вам необходимо прописать в настройках каждого из приложения. Для ВКонтакте - vk, для Одноклассников - odnoklassniki и так далее. Благодаря данному параметру `provider`, мы сможем легко определить, через какую социальную сеть пытается авторизоваться пользователь.

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

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

$adapters = array();
foreach ($adapterConfigs as $adapter => $settings) {
    $class = 'SocialAuther\Adapter\\' . ucfirst($adapter);
    $adapters[$adapter] = new $class($settings);
}

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

$adapterConfigs = array(
...
    'odnoklassniki' => array(
        'client_id'     => '163586560',
        'client_secret' => 'C342505C754C028C0A766C0F',
        'redirect_uri'  => 'http://localhost/auth?provider=odnoklassniki',
        'public_key'    => 'CBADCBMKABABABABA'
    ),
...

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

// имя класса формируется автоматом - SocialAuther\Adapter\Odnoklassniki($adapter);
$class = 'SocialAuther\Adapter\\' . ucfirst($adapter);

// помещаем объект класса SocialAuther\Adapter\Odnoklassniki в общий массив $adapters
$adapters[$adapter] = new $class($settings);

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

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

if (!isset($_GET['code'])) {
    foreach ($adapters as $title => $adapter) {
        echo '<p><a href="' . $adapter->getAuthUrl() . '">Аутентификация через ' . ucfirst($title) . '</a></p>';
    }
}

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

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

if (isset($_GET['provider']) && array_key_exists($_GET['provider'], $adapters)) {
	$auther = new SocialAuther\SocialAuther($adapters[$_GET['provider']]);
}

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

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

if ($auther->authenticate()) {
    $auther->getProvider();
    $auther->getSocialId();
    $auther->getName();
    $auther->getEmail();
    $auther->getSocialPage();
    $auther->getSex();
    $auther->getBirthday());
    $auther->getAvatar();
}

Прикрутка к БД

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

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

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

CREATE TABLE `users` (
    `id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    `provider` ENUM('vk', 'odnoklassniki', 'mailru', 'yandex', 'google', 'facebook') NOT NULL,
    `social_id` VARCHAR(255) NOT NULL,
    `name` VARCHAR(255) NOT NULL,
    `email` VARCHAR(255) NOT NULL,
    `social_page` VARCHAR(255) NOT NULL,
    `sex` ENUM('male', 'female') NOT NULL,
    `birthday` DATE NOT NULL,
    `avatar` VARCHAR(255) NOT NULL
) ENGINE = InnoDB CHARACTER SET utf8 COLLATE utf8_general_ci;

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

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

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

$db = mysql_connect('localhost', 'имя пользователя', 'пароль');
mysql_select_db('auth');
mysql_query("SET NAMES utf8");

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

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

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

if ($auther->authenticate()) {

    $result = mysql_query(
        "SELECT *  FROM `users` WHERE `provider` = '{$auther->getProvider()}' AND `social_id` = '{$auther->getSocialId()}' LIMIT 1"
    );

    $record = mysql_fetch_array($result);
    if (!$record) {
        $values = array(
            $auther->getProvider(),
            $auther->getSocialId(),
            $auther->getName(),
            $auther->getEmail(),
            $auther->getSocialPage(),
            $auther->getSex(),
            date('Y-m-d', strtotime($auther->getBirthday())),
            $auther->getAvatar()
        );

        $query = "INSERT INTO `users` (`provider`, `social_id`, `name`, `email`, `social_page`, `sex`, `birthday`, `avatar`) VALUES ('";
        $query .= implode("', '", $values) . "')";
        $result = mysql_query($query);
    }
}

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

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

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

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

$user = new stdClass();
$user->provider   = $auther->getProvider();
$user->socialId   = $auther->getSocialId();
$user->name       = $auther->getName();
$user->email      = $auther->getEmail();
$user->socialPage = $auther->getSocialPage();
$user->sex        = $auther->getSex();
$user->birthday   = $auther->getBirthday();
$user->avatar     = $auther->getAvatar();

Затем записываем только что созданный объект в сессию под ключом `user`.

$_SESSION['user'] = $user;

Теперь на любой другой странице (к примеру, info.php) достаём данные из сессии и выводим на экран:

<?php require_once 'config.inc.php'; ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
</head>
<body>

<?php if (isset($_SESSION['user'])) {
    $user = $_SESSION['user'];
    if (!is_null($user->socialId))
    echo "Социальный ID пользователя: " . $user->socialId . '<br />';

    if (!is_null($user->name))
    echo "Имя пользователя: " . $user->name . '<br />';

    if (!is_null($user->email))
    echo "Email: пользователя: " . $user->email . '<br />';

    if (!is_null($user->socialPage))
    echo "Ссылка на профиль пользователя: " . $user->socialPage . '<br />';

    if (!is_null($user->sex))
    echo "Пол пользователя: " . $user->sex . '<br />';

    if (!is_null($user->birthday))
    echo "День Рождения: " . $user->birthday . '<br />';

    // аватар пользователя
    if (!is_null($user->avatar))
    echo '<img src="' . $user->avatar . '" />'; echo "<br />";
    echo '<p><a href="/logout.php">Выйти из системы</a></p>';
} else {
    echo '<p><a href="/index.php">Войдите в систему</a> для того, чтобы увидеть данный материал.</p>';
} ?>

</body>
</html>

Файл config.inc.php подключать обязательно, ведь там находится вызов функции session_start().

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

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

<?php

session_start();
unset($_SESSION['user']);
header("location:index.php");

Тут просто удаляем сессию с ключом `user` и перенаправляем пользователя на главную страницу.

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

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

<?php

require_once 'lib/SocialAuther/autoload.php';
require_once 'config.inc.php';

$adapterConfigs = array(
    'vk' => array(
        'client_id'     => '3774741',
        'client_secret' => '3nLWEs45iWeKypmVR2CU',
        'redirect_uri'  => 'http://localhost/auth/?provider=vk'
    ),
    'odnoklassniki' => array(
        'client_id'     => '168635560',
        'client_secret' => 'C342554C028C0A76605C7C0F',
        'redirect_uri'  => 'http://localhost/auth?provider=odnoklassniki',
        'public_key'    => 'CBADCBMKABABABABA'
    ),
    'mailru' => array(
        'client_id'     => '770076',
        'client_secret' => '5b8f8906167229feccd2a7320dd6e140',
        'redirect_uri'  => 'http://localhost/auth/?provider=mailru'
    ),
    'yandex' => array(
        'client_id'     => 'bfbff04a6cb60395ca05ef38be0a86cf',
        'client_secret' => '219ba8388d6e6af7abe4b4b119cbee48',
        'redirect_uri'  => 'http://localhost/auth/?provider=yandex'
    ),
    'google' => array(
        'client_id'     => '333193735318.apps.googleusercontent.com',
        'client_secret' => 'lZB3aW8gDjIEUG8I6WVcidt5',
        'redirect_uri'  => 'http://localhost/auth?provider=google'
    ),
    'facebook' => array(
        'client_id'     => '613418539539988',
        'client_secret' => '2deab137cc1d254d167720095ac0b386',
        'redirect_uri'  => 'http://localhost/auth?provider=facebook'
    )
);

$adapters = array();
foreach ($adapterConfigs as $adapter => $settings) {
    $class = 'SocialAuther\Adapter\\' . ucfirst($adapter);
    $adapters[$adapter] = new $class($settings);
}

if (isset($_GET['provider']) && array_key_exists($_GET['provider'], $adapters) && !isset($_SESSION['user'])) {
    $auther = new SocialAuther\SocialAuther($adapters[$_GET['provider']]);

if ($auther->authenticate()) {

    $result = mysql_query(
        "SELECT *  FROM `users` WHERE `provider` = '{$auther->getProvider()}' AND `social_id` = '{$auther->getSocialId()}' LIMIT 1"
    );

    $record = mysql_fetch_array($result);
    if (!$record) {
        $values = array(
            $auther->getProvider(),
            $auther->getSocialId(),
            $auther->getName(),
            $auther->getEmail(),
            $auther->getSocialPage(),
            $auther->getSex(),
            date('Y-m-d', strtotime($auther->getBirthday())),
            $auther->getAvatar()
        );

        $query = "INSERT INTO `users` (`provider`, `social_id`, `name`, `email`, `social_page`, `sex`, `birthday`, `avatar`) VALUES ('";
        $query .= implode("', '", $values) . "')";
        $result = mysql_query($query);
    }

        $user = new stdClass();
        $user->provider   = $auther->getProvider();
        $user->socialId   = $auther->getSocialId();
        $user->name       = $auther->getName();
        $user->email      = $auther->getEmail();
        $user->socialPage = $auther->getSocialPage();
        $user->sex        = $auther->getSex();
        $user->birthday   = $auther->getBirthday();
        $user->avatar     = $auther->getAvatar();

        $_SESSION['user'] = $user;
    }

    header("location:index.php");
}
?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <title></title>
</head>
<body>

<?php
if (isset($_SESSION['user'])) {
    echo '<p><a href="/info.php">Скрытый контент</a></p>';
} else if (!isset($_GET['code']) && !isset($_SESSION['user'])) {
    foreach ($adapters as $title => $adapter) {
        echo '<p><a href="' . $adapter->getAuthUrl() . '">Аутентификация через ' . ucfirst($title) . '</a></p>';
    }
}
?>

</body>
</html>

Итог

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

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/o_acm9ZnINU/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Создание аутентификации через социальные сети на вашем сайте | | 2013-03-29 00:49:40 | | Статьи Web-мастеру | | Доброго времени суток, сообщество руселлера! Сегодня мы поставим точку в вопросе о том, как организовать аутентификацию пользователей на вашем сайте через несколько социальных сетей.Если вы следили | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: