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>

Комментарии
Отправить комментарий