> Главная > Использование
Использование
Важное условие эксплуатации сервиса: чтобы воспользоваться возможностью авторизации через соцсервисы, пользователь должен предварительно включить этот метод идентификации в своем личном кабинете. Как примерно должен выглядеть подобный блок для подключения - ниже. Но обо всем по порядку.
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"]."");
}Будем благодарны за ваши комментарии и мнение.