> Главная > Использование

Использование

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

mysql

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

    CREATE TABLE IF NOT EXISTS register_users
(
user_id INT(4) NOT NULL auto_increment,
user_name VARCHAR(255),
user_email VARCHAR(255),
user_login VARCHAR(255),
user_password VARCHAR(255),
PRIMARY KEY(user_id)
)
ENGINE = InnoDB CHARACTER SET = UTF8

CREATE TABLE IF NOT EXISTS register_users_social
(
id INT(4) NOT NULL auto_increment,
network_name VARCHAR(255),
network_user_id VARCHAR(255),
local_user_id INT(4),
PRIMARY KEY(id)
)
ENGINE = InnoDB CHARACTER SET = UTF8

Разобьем нашу демонстрацию на две части.

Часть 1. Пользователь привязывает свою учетку к сервису авторизации

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

HTML, Javascript

В этом случае наш файл index.html должен будет выглядеть вот так вот:

    <html>
<head>
<title>socLoginner: авторизация через социальные сети</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//socloginner.standarta.net/js/login.js"></script>
</head>
<body>
<script type="text/javascript">

// Попытка привязать / отвязать соцсервис к аккаунту
function tryAttach(user)
{
$.ajax(
{
type: "GET"
async: false,
url: "attach.php"
data: "network=" + user.network + "&social_uid=" + user.id + "&user_uid=" + $("input[name='UserId']").val(),
cache: false,
success: function(response)
{
var result = $.parseJSON( response );

// Вернувшиеся результаты
alert(result)
}
});
}

</script>

<p>Здравствуйте, <b>Иван Иванов</b></p>

<form>

<!-- ... какие то вероятные элементы Вашей формы ...-->

Включить авторизацию через
<br />
<input name="AuthViaVk" onclick="authVia('vkontakte', 'tryAttach');" type="checkbox" /> вКонтакте
<br />
<input name="AuthViaOk" onclick="authVia('odnoklassniki', 'tryAttach');" type="checkbox" /> Одноклассники
<br />
<input name="AuthViaFb" onclick="authVia('facebook', 'tryAttach');" type="checkbox" /> Facebook
<br />
<input name="AuthViaYandex" onclick="authVia('yandex', 'tryAttach');" type="checkbox" /> Яндекс
<br />
<input name="AuthViaGoogle" onclick="authVia('google', 'tryAttach');" type="checkbox" /> Google
<br />
<input name="AuthViaMail" onclick="authVia('mail', 'tryAttach');" type="checkbox" /> Mail
<br />
<input name="AuthViaTwitter" onclick="authVia('twitter', 'tryAttach');" type="checkbox" /> Twitter
<br />
<input name="UserId" type="text" value="tyh472354jdfgfd" /> ID юзера, присвоенный ему учетной системой Вашего сайта

<!-- ... какие то вероятные элементы Вашей формы ... -->

</form>

</body>
</html>

Ну и обработчик нашего запроса attach.php мы создадим примерно в таком виде:

    $hostname = 'localhost';
$userlogin = 'rus';
$password = '1';
$dbname = 'rus';

$db = mysqli_connect($hostname, $userlogin, $password, $dbname);

// Такая связка в базе уже есть
if(mysqli_num_rows($db->query(
"SELECT 1 FROM register_users_social WHERE
network_name = '" $_POST["network"]."'
AND
network_user_id = '" md5($_POST["social_uid"])."'
AND
local_user_id = '" $_POST["user_uid"]."'
LIMIT 1")) == 1)
{
// ... значит отвязываем
$db->query("
DELETE FROM register_users_social WHERE
network_name = '" $_POST["network"]."'
AND
network_user_id = '" md5($_POST["social_uid"])."'
AND
local_user_id = '" $_POST["user_uid"]."'
");

$message = "Учетная запись отвязана от данной социальной сети"
}

// ... иначе связки нет
else
{
// ... значит привязываем
$db->query("
INSERT INTO register_users_social
(network_name, network_user_id, local_user_id)
VALUES
('" $_POST["network"]."', '" md5($_POST["social_uid"])."', '" $_POST["user_uid"]."')
");

$message = "Учетная запись успешно привязана к данной социальной сети"
}

print json_encode($message);

ЧАСТЬ 2. пользователь предварительно уже привязал свою учетку к сервису авторизации

HTML, JAVASCRIPT

Файл index.html в таком случае должен будет иметь примерно следующий вид:

    <html>
<head>
<title>socLoginner: авторизация через социальные сети</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//socloginner.standarta.net/js/login.js"></script>
</head>
<body>
<script type="text/javascript">

// Шаг 1. Функция userInfo принимает полученные данные пользователя от соцсети.
// Это параметр user, состоящий из следующих данных: имя в социальной сети, ид в социальной сети, название социальной сети, src аватарки

var userInfo = function(user)
{
alert(
"Данные нашего пользователя. Имя: " + user.name
+ ", id: " + user.id
+ ", сервис: " + user.network
+ ", src картинки: " + user.pic
+ ". Передаем их в функцию авторизации ajaxAuth"
);

ajaxAuth(user.id, user.network);
}

// Шаг 2. Передаем эти данные в ajax функцию авторизации
function ajaxAuth(uid, network)
{
$.ajax(
{
type: "post"
async: false,
url: "check.php"
data: "uid=" + uid + "&network=" + network,
cache: false,
success: function(response)
{
var result = $.parseJSON( response );

// Вернувшиеся результаты авторизации
alert(result)

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

</script>

<p>Авторизуйтесь, пожалуйста</p>

<!--

Функция authVia - основная наша функция, осуществляющая авторизацию через соцсервис.

Параметры:
имя соцсети,
ваша коллбэк функция, которая принимает в себя вернувшиеся от соцсервиса данные пользователя
необязательный параметр: цвет оверлея-подложки
необязательный параметр: степень прозрачности оверлея-подложки

-->

<p>
<a onclick="authVia('vkontakte', 'userInfo', 'green')" href="javascript:void(0);">авторизация через вКонтакте</a><br />
<a onclick="authVia('odnoklassniki', 'userInfo', 'orange', '0')" href="javascript:void(0);">авторизация через Одноклассники</a><br />
<a onclick="authVia('facebook', 'userInfo', 'blue', '0.3')" href="javascript:void(0);">авторизация через Facebook</a><br />
<a onclick="authVia('yandex', 'userInfo', 'red', '0.3')" href="javascript:void(0);">авторизация через Яндекс</a><br />
<a onclick="authVia('google', 'userInfo', 'yellow', '0.3')" href="javascript:void(0);">авторизация через Google</a><br />
<a onclick="authVia('mail', 'userInfo', 'gray', '0.3')" href="javascript:void(0);">авторизация через Mail.Ru</a><br />
<a onclick="authVia('twitter', 'userInfo')" href="javascript:void(0);">авторизация через Twitter</a>
</p>


</body>
</html>

php

Наш файл check.php, занимающийся собственно, сверкой пришедших из социальной сети данных пользователя с базой

    $hostname = 'localhost';
$userlogin = 'rus';
$password = '1';
$dbname = 'rus';

$db = mysqli_connect($hostname, $userlogin, $password, $dbname);

// Заворачиваем с помощью md5 отданный нам соцсетью идентификатор пользователя

$identy = md5($_POST["uid"]);

// Делаем запрос к базе, ища пару идентификатор + название соцсети

$res = $db->query("
SELECT
t2.user_name
FROM
register_users_social AS t1
LEFT JOIN register_users AS t2
ON t2.user_id = t1.id
WHERE
t1.network_user_id = '" $identy."'
AND
t1.network_name = '" $_POST["network"]."'
LIMIT 1
");

// Пара найдена, наш пользователь, обнимаем его и радуемся

if(mysqli_num_rows($res) > 0)
{
print json_encode("Привет! Добро пожаловать!");
}

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

else
{
print json_encode("Не узнаю Вас. Авторизуйтесь обычным способом и привяжите к своему профилю социальную сеть ".$_POST["network"]."");
}

Будем благодарны за ваши комментарии и мнение.

Оставьте Ваш комментарий