Mikrotik - авторизация по соцсетям
Mikrotik - авторизация по соцсетям. Наработки и концепции реализации
В общем реализация тестовая, скорее больше показывающая, что такое возможно и как примерно сделать.
Логика работы:
Абонет выходит в интернет, его кидает на стандартную страницу микротика login.html
Там редирект на страничку на сервере login.php, на которой находится почти стандартная микротиковская страничка с добавленным виджетом ulogin (можно его не использовать,
а использовать штатный функционал соцсетей. Его использовал так как его легко можно было настроить и проверить, главное чтобы был callback).
С него получаем данные которые нужны, для логина можно использовать полученное поле uid, уникальное для каждого вида соцсети.
Также можно получить персональные данные для регистрации в базе (имя, фамилия, почта и т.д.).
Через jQuery подставляем данные username/password и собственно все, простейшая авторизация готова.
Дальше можно что-то придумать, что делать с password. Первое, что приходит в голову генерировать его на стороне сервера через ajax,
где входящими параметрами являются полученные данные с авторизации соцсети
Регистрацию не затрагивал, но собственно есть все данные для нее. Можно даже в функции callback проверить наличие учетки в базе и если ее нет, то занести.
Перенос страницы login.html делаем так
Изменение страницы login.php на сервере
*****************************************<script | ||
src="http://testmik.cc.ua/jquery-3.2.1.min.js". | ||
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=". | ||
crossorigin="anonymous"></script> | ||
<script src="//ulogin.ru/js/ulogin.js"></script> | ||
<script type="text/javascript"> | ||
function pouring ( network, uid, first_name, last_name, email, bdate, city, phone, nickname, sex ) { | ||
$.get( | ||
"http://testmik.cc.ua/ajax.php", | ||
{ | ||
network:network, | ||
uid:uid, | ||
first_name:first_name, | ||
last_name:last_name, | ||
email:email, | ||
bdate:bdate, | ||
city:city, | ||
phone:phone, | ||
nickname:nickname, | ||
sex:sex | ||
}, | ||
onAjaxSuccess | ||
); | ||
} | ||
function onAjaxSuccess(data){ | ||
$('#S52MQf').val(data); | ||
alert ("Password: "+data); | ||
} | ||
function sendGet(data) { | ||
//var data = network; | ||
$('#PlELzS').val(data); | ||
alert("Login: "+data); | ||
} | ||
function callback(token){ | ||
$.getJSON("//ulogin.ru/token.php?host=" + | ||
encodeURIComponent(location.toString()) + "&token=" + token + "&callback=?", | ||
function(data){ | ||
data=$.parseJSON(data.toString()); | ||
if(!data.error){ | ||
sendGet(data.email); | ||
pouring (data.network, data.uid, data.first_name, data.last_name, data.email, data.bdate, data.city, data.phone, data.nickname, data.sex ); | ||
// alert("login: "+data.uid); | ||
} | ||
}); | ||
} | ||
</script> | ||
<div id="uLogin" align="center" data-ulogin="display=panel;theme=clas-sic;optional=first_name,last_name,email,bdate,city,phone,nickname,sex;providers=vkontakte,odnoklassni-ki,mailru,facebook,google,yandex,livejournal,youtube,google-plus,instagram,twitter;hidden=other;redirect_uri=;callback=callback;mobilebuttons=0;"></div> | ||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" | ||
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
<html> | ||
<head> | ||
<title>mikrotik hotspot > login</title> | ||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | ||
<meta http-equiv="pragma" content="no-cache" /> | ||
<meta http-equiv="expires" content="-1" /> | ||
<style type="text/css"> | ||
body {color: #737373; font-size: 10px; font-family: verdana;} | ||
textarea,input,select { | ||
background-color: #FDFBFB; | ||
border: 1px solid #BBBBBB; | ||
padding: 2px; | ||
margin: 1px; | ||
font-size: 14px; | ||
color: #808080; | ||
} | ||
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; } | ||
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; } | ||
img {border: none;} | ||
td { font-size: 14px; color: #7A7A7A; } | ||
</style> | ||
</head> | ||
<body> | ||
<!-- $(if chap-id) --> | ||
<form name="sendin" action="" method="post"> | ||
<input type="hidden" name="username" /> | ||
<input type="hidden" name="password" /> | ||
<input type="hidden" name="dst" value="" /> | ||
<input type="hidden" name="popup" value="true" /> | ||
</form> | ||
<script type="text/javascript" src="./md5.js"></script> | ||
<script type="text/javascript"> | ||
<!-- | ||
function doLogin() { | ||
return true; | ||
document.sendin.username.value = document.login.username.value; | ||
document.sendin.password.value = hexMD5('' + document.login.password.value + ''); | ||
document.sendin.submit(); | ||
return false; | ||
} | ||
//--> | ||
</script> | ||
<!-- $(endif) --> | ||
<div align="center"> | ||
<a href="?target=lv&dst=">Latviski</a> | ||
</div> | ||
<table width="100%" style="margin-top: 10%;"> | ||
<tr> | ||
<td align="center" valign="middle"> | ||
<div class="notice" style="color: #c1c1c1; font-size: 9px">Please log on to use the mikrotik hotspot service<br /> | ||
<!-- $(if trial == 'yes') --> | ||
Free trial available, <a style="color: #FF8080"href="?dst=&username=T-">click here</a>. | ||
<!-- $(endif) --> | ||
</div><br /> | ||
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0"> | ||
<tr> | ||
<td align="center" valign="bottom" height="175" colspan="2"> | ||
<!-- removed $(if chap-id) $(endif) around OnSubmit --> | ||
<form name="login" action="" method="post" onSubmit="return doLogin()" > | ||
<input type="hidden" name="dst" value="" /> | ||
<input type="hidden" name="popup" value="true" /> | ||
<table width="100" style="background-color: #ffffff"> | ||
<tr style="display:none;"><td align="right">login</td> | ||
<td><input id=PlELzS style="width: 80px" name="username" type="text" value="notsosecretuser"/></td> | ||
</tr> | ||
<tr style="display:none;"><td align="right">password</td> | ||
<td><input id=S52MQf style="width: 80px" name="password" type="password" value="notsosecretpass"/></td> | ||
</tr> | ||
<tr><td> </td> | ||
<td><input type="submit" value="Proceed to Internet!" /></td> | ||
</tr> | ||
</table> | ||
</form> | ||
</td> | ||
</tr> | ||
</table> | ||
<!-- $(if error) --> | ||
<br /><div style="color: #FF8080; font-size: 9px"></div> | ||
<!-- $(endif) --> | ||
</td> | ||
</tr> | ||
</table> | ||
<script type="text/javascript"> | ||
<!-- | ||
document.login.username.focus(); | ||
//--> | ||
</script> | ||
</body> | ||
</html> | ||
*****************************************
Создаем на сервере прием данных о пользователе и отдачу В каталоге страницы nano ajax.php <?php$salt="DQzyvH2WIge1"; - солим пароль, меняем на любую другую сгенерированную строку |
***************************************
Старая версия
<script
src="https://code.jquery.com/jquery-3.2.1.min.js".
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=".
crossorigin="anonymous"></script>
<script src="//ulogin.ru/js/ulogin.js"></script>
<script type="text/javascript">
function SendGet(username) {
$('#login').val(username);
}
function callback(token){
$.getJSON("//ulogin.ru/token.php?host=" +
encodeURIComponent(location.toString()) + "&token=" + token + "&callback=?",
function(data){
data=$.parseJSON(data.toString());
if(!data.error){
SendGet(data.uid);
alert("login: "+data.uid);
}
});
}
</script>
<div id="uLogin" align="center" data-ulogin="display=panel;theme=clas-sic;fields=first_name,last_name;providers=vkontakte,odnoklassni-ki,mailru,facebook,google,yandex,livejournal,youtube,google-plus,instagram,twitter;hidden=other;redirect_uri=;callback=callback;mobilebuttons=0;"></div>
<?php
$mac=$_POST['mac'];
$ip=$_POST['ip'];
$username=$_POST['username'];
$linklogin=$_POST['link-login'];
$linkorig=$_POST['link-orig'];
$error=$_POST['error'];
$chapid=$_POST['chap-id'];
$chapchallenge=$_POST['chap-challenge'];
$linkloginonly=$_POST['link-login-only'];
$linkorigesc=$_POST['link-orig-esc'];
$macesc=$_POST['mac-esc'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>mikrotik hotspot > login</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="expires" content="-1" />
<style type="text/css">
body {color: #737373; font-size: 10px; font-family: verdana;}
textarea,input,select {
background-color: #FDFBFB;
border: 1px solid #BBBBBB;
padding: 2px;
margin: 1px;
font-size: 14px;
color: #808080;
}
a, a:link, a:visited, a:active { color: #AAAAAA; text-decoration: none; font-size: 10px; }
a:hover { border-bottom: 1px dotted #c1c1c1; color: #AAAAAA; }
img {border: none;}
td { font-size: 14px; color: #7A7A7A; }
</style>
</head>
<body>
<!-- $(if chap-id) -->
<form name="sendin" action="<?php echo $linkloginonly; ?>" method="post">
<input type="hidden" name="username" />
<input type="hidden" name="password" />
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
</form>
<script type="text/javascript" src="./md5.js"></script>
<script type="text/javascript">
<!--
function doLogin() {
<?php if(strlen($chapid) < 1) echo "return true;\n"; ?>
document.sendin.username.value = document.login.username.value;
document.sendin.password.value = hexMD5('<?php echo $chapid; ?>' + document.login.password.value + '<?php echo $chapchallenge; ?>');
document.sendin.submit();
return false;
}
//-->
</script>
<!-- $(endif) -->
<div align="center">
<a href="<?php echo $linkloginonly; ?>?target=lv&dst=<?php echo $linkorigesc; ?>">Latviski</a>
</div>
<table width="100%" style="margin-top: 10%;">
<tr>
<td align="center" valign="middle">
<div class="notice" style="color: #c1c1c1; font-size: 9px">Please log on to use the mikrotik hotspot service<br />
<!-- $(if trial == 'yes') -->
Free trial available, <a style="color: #FF8080"href="<?php echo $linkloginonly; ?>?dst=<?php echo $linkorigesc; ?>&username=T-<?php echo $macesc; ?>">click here</a>.
<!-- $(endif) -->
</div><br />
<table width="240" height="240" style="border: 1px solid #cccccc; padding: 0px;" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="bottom" height="175" colspan="2">
<!-- removed $(if chap-id) $(endif) around OnSubmit -->
<form name="login" action="<?php echo $linkloginonly; ?>" method="post" onSubmit="return doLogin()" >
<input type="hidden" name="dst" value="<?php echo $linkorig; ?>" />
<input type="hidden" name="popup" value="true" />
<table width="100" style="background-color: #ffffff">
<tr style="display:none;"><td align="right">login</td>
<td><input style="width: 80px" name="username" type="text" value="notsosecretuser"/></td>
</tr>
<tr style="display:none;"><td align="right">password</td>
<td><input style="width: 80px" name="password" type="password" value="notsosecretpass"/></td>
</tr>
<tr><td> </td>
<td><input type="submit" value="Proceed to Internet!" /></td>
</tr>
</table>
</form>
</td>
</tr>
</table>
<!-- $(if error) -->
<br /><div style="color: #FF8080; font-size: 9px"><?php echo $error; ?></div>
<!-- $(endif) -->
</td>
</tr>
</table>
<script type="text/javascript">
<!--
document.login.username.focus();
//-->
</script>
</body>
</html>
Комментарии
Отправить комментарий