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>
*****************************************

src="http://testmik.cc.ua/jquery-3.2.1.min.js" - это подключаемый модуль на сервере, взять отсюда
https://code.jquery.com/jquery-3.2.1.min.js и положить в каталоге страницы

Создаем на сервере прием данных о пользователе и отдачу
В каталоге страницы
nano ajax.php
<?php
$salt="DQzyvH2WIge1";
$pass .= $_GET['last_name'];
$pass .= $_GET['email'];
$pass .= $_GET['bdate'];
$pass .= $_GET['city'];
$pass .= $salt;
$pass .= $_GET['first_name'];
$pass .= $_GET['phone'];
$pass .= $_GET['uid'];
$pass .= $_GET['nickname'];
$pass .= $_GET['sex'];
$pass .= $_GET['network'];
$pass2 = md5 ($pass);
echo $pass2
?>
$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>

Комментарии

Популярные сообщения из этого блога

mikbill расшифровка завершений сессий

Accel-ppp команды

Zabbix agent установка и настройка