воскресенье, 17 февраля 2013 г.

Необычная страница авторизации

Страница авторизации, где логин и пароль нужно составлять из элементов.


А реализация простая:

Создаем файл login.php в который добавим поля Логин, Пароль, кнопку "Войти"  и табло с символами:

<div style="position: absolute; left:50%; margin-left:-310px; width:620px; height:400px; top:50%; margin-top:-225px; padding:20px; border-radius: 5px; border:1px solid #cdcdcd">
<center>Составьте логин и пароль, перетаскивая символы в поля <b>Логин</b> и <b>Пароль</b><br>
<div style="width:370px;">
<div style="padding:5px; width:70px; float:left;">Логин </div><div id="login" style=" float:left;margin:5px;width:250px; padding:5px; height:30px; border:1px solid #d0d0d0; background-color: #f6f6f6" class="connectedSortable"></div>
<div style="padding:5px; width:70px; clear:both;  float:left;">Пароль </div><div id="password" style=" float:left;margin:5px;width:250px; padding:5px; height:30px; border:1px solid #d0d0d0; background-color: #f6f6f6" class="connectedSortable"></div>
<div style="padding:5px;clear:both"><input name="submit" type="button" value="Войти" onclick="inlogin()"> </div>
</div>
<div id="connect" style="margin:5px;width:470px; padding:5px; height:180px; border:1px solid #d0d0d0; background-color: #e0e0e0" class="connectedSortable">
<?
$mas = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,!,@,#,$,%,^,&,*,(,),_,-,+,=,~";
$mas = explode(",",$mas);
for($i=0; $i<count($mas); $i++) {
if($i == "13" || $i == "26" || $i == "39") { $cl =  "clear:both;";} else {$cl ="";}
 echo "<div id='".$i."' class='ui-state-default' style='cursor: hand; border-radius:15px; background-color: white; border:1px solid #d0d0d0; width:20px; height:20px; padding:5px; text-align: center; margin: 2px; float:left;'>".$mas[$i]."</div>";
}

?>
</div>
<div id="error"></div>
</center>
</div>

Добавим ему javascript'ов (подключим sortable и функцию обработки кнопки "Войти")


<link rel="stylesheet" href="css/jquery-ui-1.8.13.custom.css" type="text/css" />
<script src="js/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.js" type="text/javascript"></script>



<script type="text/javascript">
$(function() {
  $(".connectedSortable").sortable({
  connectWith: ".connectedSortable",
  placeholder: "ui-state-highlight",
  helper: "clone",
  cursor: 'move',
 zIndex: 99999,
 update: function() {
imgOrder = $(this).sortable('toArray').toString();
ik = $(this).attr('id');
$.post  ( "rlogin.php",  { c : imgOrder, id: ik }, function(data) {} );
}
 });
});
function inlogin()
{
//$.post  ( "checklogin.php",  { submit : "submit" }, function(data) {} );
$.ajax({
type: "POST",
                    url: "checklogin.php",
                    data: "submit=submit",
                    success: function(html){
   if(html=="ok") {
$("#error").html("Все верно!");
setTimeout( function() { location.href='http://dom.ru/adm/check.php'; }, 1500 );
}
   else {
                        $("#error").html(html);
setTimeout( function() { $("#error").html(""); }, 3000);
}
                    }
                });
}
 </script>

Файл checklogin.php - проверяем составленные Логин и Пароль

<?
session_start();
/* Create by Kostrukov Alexey */
function generateCode($length=6) {
    $chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHI JKLMNOPRQSTUVWXYZ0123456789";
    $code = "";
    $clen = strlen($chars) - 1;
    while (strlen($code) < $length) {
            $code .= $chars[mt_rand(0,$clen)];
    }
    return $code;
}
unset($_SESSION['userid']);
unset($_SESSION['userhash']);
# Соединямся с БД
include("settings.inc");
$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db($bdname,$dbhandle) or die("Could not select examples");
mysql_set_charset($charset,$dbhandle);
if(isset($_POST['submit']))
{
$ulogin = $_SESSION['rlogin']['login'];
$upaswd = $_SESSION['rlogin']['password'];
$mas = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,!,@,#,$,%,^,&,*,(,),_,-,+,=,~";
$mas = explode(",",$mas);
for($i=0; $i<count($ulogin); $i++) {
$u_login .= $mas[$ulogin[$i]];
}
for($i=0; $i<count($upaswd); $i++) {
$u_paswd .= $mas[$upaswd[$i]];
}
    # Вытаскиваем из БД запись, у которой логин равняеться введенному
    $query = mysql_query("SELECT user_id, user_password FROM ".$_ENGINE['pref']."users WHERE user_login='".mysql_real_escape_string($u_login)."' LIMIT 1");
    $data = mysql_fetch_assoc($query);
   
    # Сравниваем пароли
    if($data['user_password'] === md5(md5($u_paswd)))
    {
        # Генерируем случайное число и шифруем его
        $hash = md5(generateCode(10));
           
        if(!@$_POST['not_attach_ip'])
        {
            # Если пользователя выбрал привязку к IP
            # Переводим IP в строку
            $insip = ", user_ip=INET_ATON('".$_SERVER['REMOTE_ADDR']."')";
        }
       
        # Записываем в БД новый хеш авторизации и IP
        mysql_query("UPDATE ".$_ENGINE['pref']."users SET user_hash='".$hash."' ".$insip." WHERE user_id='".$data['user_id']."'");
       
        # Ставим куки
        setcookie("id", $data['user_id'], time()+60*60*24*30);
        setcookie("hash", $hash, time()+60*60*24*30);
       
        # Переадресовываем браузер на страницу проверки нашего скрипта
        print "ok";
    }
    else
    {
        print "Вы ввели неправильный логин/пароль";
    }
}
?> 

Файл rlogin.php - записывает все изменения, при составлении Логина и Пароля.
<?php
session_start();
/* Create by Kostrukov Alexey */
$arr = explode(',', $_POST['c']);
$id = $_POST['id'];
include("settings.inc");
unset($_SESSION['rlogin'][$id]);
for($i=0; $i<count($arr); $i++) {
$y=$i+1;
$_SESSION['rlogin'][$id][] = $arr[$i];
}
?> 

Дополнительная защита. файл check.php
<?
session_start();
include("settings.inc");
$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db($bdname,$dbhandle) or die("Could not select examples");
mysql_set_charset($charset,$dbhandle);
if (isset($_COOKIE['id']) and isset($_COOKIE['hash']))
{  
    $query = mysql_query("SELECT *,INET_NTOA(user_ip) FROM users WHERE user_id = '".intval($_COOKIE['id'])."' LIMIT 1");
    $userdata = mysql_fetch_assoc($query);
    if(($userdata['user_hash'] !== $_COOKIE['hash']) || ($userdata['user_id'] !== $_COOKIE['id']) )
    {
        setcookie("id", "", time() - 3600*24*30*12, "/");
        setcookie("hash", "", time() - 3600*24*30*12, "/");
        print "Хм, что-то не получилось";
    }
    else
    {
    unset($_SESSION['rlogin']);
$userid = $_COOKIE['id'];
$userhash = $_COOKIE['hash'];
$username = $userdata['user_login'];
session_register('userid','userhash','username');
header("Location: http://dom.ru/adm/index.php");
    }
}
else
{
    print "Включите куки";
}
?>