|
| |
ระบบ Login PHP + JQuery แบบ Encrypt 2 ระดับ |
ระบบ Login PHP + JQuery แบบ Encrypt 2 ระดับ บทความแรกก็ขอเป็นระบบ Login ก่อนนะครับ อันนี้เป็น Algorithm ส่วนตัวที่มี ตัวอย่างมาจาก การ Login แบบ hash 2 Step ของ Google ซึ่งจะมีในบทความต่อไปครับ อันนี้เป็นบทความบทแรกที่ได้ทำการเขียนขึ้นมา หลังจากสมัครเป็นสมาชิกเมื่อหลายปีก่อน แล้วก็ได้ Page นี้แหละช่วยไว้หลายครั้ง ตอนนี้เลยอยากจะกลับมาตอบแทนบ้าง แล้วเดียวจะมี Function ที่ Advance กว่านี้มาเรื่อยๆ ครับ
บทความแรกก็ขอเป็นระบบ Login ก่อนนะครับ อันนี้เป็น Algorithm ส่วนตัวที่มี ตัวอย่างมาจาก การ Login แบบ hash 2 Step ของ Google ซึ่งจะมีในบทความต่อไปครับ
1. Create Database
สร้าง Database ชื่อว่า login และ Table ชื่อว่า user กับ user_role
Table user เอาไว้สำหรับเก็บ Username และ Password
Table user_role เอาไว้เก็บค่าที่กำหนด Level ของ User
CREATE DATABASE IF NOT EXISTS `login` DEFAULT CHARACTER SET utf8 COLLATE utf8_unicode_ci;
USE `login`;
CREATE TABLE `user` (
`Login_ID` int(11) NOT NULL,
`Uniq_Id` varchar(36) COLLATE utf8_unicode_ci DEFAULT NULL,
`UserName` varchar(20) COLLATE utf8_unicode_ci DEFAULT NULL,
`UserChallenge` varchar(32) COLLATE utf8_unicode_ci DEFAULT NULL,
`Password` varchar(32) COLLATE utf8_unicode_ci DEFAULT NULL,
`Role_ID` int(1) DEFAULT NULL,
`date_rec` datetime DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
CREATE TABLE `user_role` (
`Role_ID` int(11) NOT NULL,
`Role` varchar(13) COLLATE utf8_unicode_ci DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;
INSERT INTO `user_role` (`Role_ID`, `Role`) VALUES
(1, 'Administrator'),
(2, 'User');
ALTER TABLE `user`
ADD PRIMARY KEY (`Login_ID`);
ALTER TABLE `user_role`
ADD PRIMARY KEY (`Role_ID`);
ALTER TABLE `user`
MODIFY `Login_ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=1;
ALTER TABLE `user_role`
MODIFY `Role_ID` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
2. Create Connection
สร้าง File Connection ชื่อว่า connect.php ไว้สำหรับติดต่อกับฐานข้อมูล
<?php
$ServerName = "localhost";
$UserName = "root";
$Password = "password";
$DBname = "login";
$conn = mysql_connect($ServerName,$UserName,$Password);
if(!$conn)
die("Can not Connect Server");
mysql_select_db($DBname) or die ("Can not Connect Database");
?>
3. Create Function Register
สร้าง File Function register ชื่อว่า f_register.php เอาไว้สำหรับ Register
<?php
require_once('connect.php'); <----- เรียก file connection
$Today = date('Y-m-d H:i:s'); <----- กำหนด format ปี - เดือน - วัน
$Micro = microtime(true); <----- กำหนดเป็น Micro sec
$RanNum = rand(-1000000,1000000); <----- Random ตัวเลขตั้งแต่ -1000000 - 1000000
// Create User Challenge
if($_REQUEST['GetChal']) <----- ส่วนของข้อมูลการ Encrypt
{
$UserChal = md5($Today.$Micro.$RanNum);
echo json_encode($UserChal);
return;
}
// Register
if($_REQUEST['Reg']) <----- ส่วนของการ Register ลงใน Database
{
list($UserName,$Pass,$Challenge,$Role) = explode('|',$_REQUEST['Reg']); <----- รับค่าต่างๆ มาจาก Jquery
$UniqEncode = md5($UserName.$Today.$Micro.$RanNum); <----- สร้าง Uniq ID ของแต่ละ User
$C1 = substr($UniqEncode,0,8); <----- สร้าง Uniq ID ของแต่ละ User
$C2 = substr($UniqEncode,8,8); <----- สร้าง Uniq ID ของแต่ละ User
$C3 = substr($UniqEncode,16,8); <----- สร้าง Uniq ID ของแต่ละ User
$C4 = substr($UniqEncode,24,8); <----- สร้าง Uniq ID ของแต่ละ User
$Uniq = $C1.'-'.$C2.'-'.$C3.'-'.$C4; <----- สร้าง Uniq ID ของแต่ละ User
$sql = "INSERT INTO `user`(`Login_ID`,`Uniq_Id`,`UserName`,`UserChallenge`,`Password`,`Role_ID`,`date_rec`) ";
$sql .= "VALUES (NULL,'".$Uniq."','".$UserName."','".$Challenge."','".$Pass."','".$Role."','".$Today."')";
$query = mysql_query($sql); <----- Insert ลง Database
if($query)
{
echo json_encode($Uniq); <----- Return Uniq ID กลับไป
}
else
{
echo 0;
}
return;
}
?>
4. Create Page Register
สร้าง File Page register ชื่อว่า register.php เอาไว้สำหรับ Register
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script src="script/jquery-1.11.0.min.js"></script> <----- เรียก libraly ของ jquery
<script src="script/s_md5.js"></script> <----- เรียก libraly ของการ Encrypt ด้วย MD5
<script>
$(function()
{
// Call กลับไปหา Function Register เพื่อขอ User Challenge สำหรับการ Encrypt
$.ajax(
{
url: 'php/f_register.php',
data: {GetChal: 1},
dataType: 'JSON',
type: 'POST',
success: function(result)
{
$('#UserChallenge').val(result); <----- ใส่เข้าไปยัง form input ชื่อว่า UserChallenge
}
});
// Register
$('#btnReg').click(function() <------ หลังจากกดปุ่ม Register แล้วให้ทำการ Register
{
Username = $('#Username').val();
Password = $('#Password').val();
UserChallenge = $('#UserChallenge').val();
Role = $('#Role').val();
if(Username !='' && Password !='')
{
PassEncode = MD5(Password); <------ Encrypt with MD5
Pass = MD5(PassEncode + UserChallenge);
Data = Username + '|' + Pass + '|' + UserChallenge + '|' + Role; <------ Data Register
// Call ไปหา Function Register เพื่อทำการ Register
$.ajax(
{
url: 'php/f_register.php',
data: {Reg: Data},
dataType: 'JSON',
type: 'POST',
success: function(value)
{
if(value.length == 35)
{
alert('Register Complete.');
}
else
{
alert('Cannot Register');
return;
}
}
});
}
else
{
alert('Cannot Register.');
return;
}
});
});
</script>
<body>
<form action="reg" method="post">
<p>Register </p>
Username :
<input type="text" name="Username" id="Username"><p>
Password :
<input type="password" name="Password" id="Password">
<input type="hidden" name="UserChallenge" id="UserChallenge">
<p>
Role :
<select name="Role" id="Role">
<option value="1">Admin</option>
<option value="2">User</option>
</select><p>
<input type="button" name="btnReg" id="btnReg" value="Register">
</p>
</form>
</body>
</html>
5. Create Function Login
สร้าง File Function login ชื่อว่า f_login.php เอาไว้สำหรับ Login
<?php
session_starat();
require_once('connect.php'); <----- เรียก file connection
// Get User Challenge
function UserChallenge($UserName) <----- Function ขอ Challenge ของ User นั้นๆ
{
$sql = "SELECT * FROM `User` WHERE `UserName` = '".$UserName."'";
$query = mysql_query($sql);
$nums = mysql_num_rows($query);
if($nums == 1)
{
$rows = mysql_fetch_assoc($query);
$UserChallenge = $rows['UserChallenge'];
}
else
{
$UserChallenge = 0;
}
return $UserChallenge;
}
function Login($UserName,$Password) <----- Function Login
{
$sql = "SELECT * FROM `User` WHERE `UserName` = '".$UserName."' AND `Password` = '".$Password."'";
$query = mysql_query($sql);
$nums = mysql_num_rows($query);
if($nums == 1)
{
$rows = mysql_fetch_assoc($query);
$_SESSION['UniqId'] = $rows['Uniq_Id'];
$_SESSION['UserName'] = $rows['UserName'];
$_SESSION['RoleId'] = $rows['Role_ID'];
$return = $_SESSION['UniqId'];
}
else
{
$return = 0;
}
return $return;
}
// Require User Challenge
if($_REQUEST['User'])
{
$UserName = $_REQUEST['User'];
$Return = UserChallenge($UserName);
echo json_encode($Return);
return;
}
// Login
if($_REQUEST['login'])
{
list($UserName,$Password) = explode('|',$_REQUEST['login']);
$Login = Login($UserName,$Password);
echo json_encode($Login);
return;
}
?>
6. Create Page Login
สร้าง File Page login ชื่อว่า login.php เอาไว้สำหรับ Login
<?php
session_start();
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<script src="script/jquery-1.11.0.min.js"></script> <----- เรียก libraly ของ jquery
<script src="script/s_md5.js"></script> <----- เรียก libraly ของการ Encrypt ด้วย MD5
<script>
$(function()
{
$('#btnLogin').click(function() <----- Function ทำงานเมื่อกดปุ่ม Login
{
Username = $('#username').val();
Password = $('#password').val();
if(Username !='' && Password !='')
{
// ร้องขอ Challenge เพื่อทำการ Encrypt ขั้นที่ 1
$.ajax(
{
url: 'php/f_login.php',
data: {User: Username},
dataType: 'JSON',
type: 'POST',
success: function(result)
{
PassEncode = MD5(Password);
Pass = MD5(PassEncode + result); <----- Encrypt ด้วย MD5 อีกครั้ง
// ส่งข้อมูลกลับไปตรวจสอบความถูกต้อง
$.ajax(
{
url: 'php/f_login.php',
data: {login: Username + '|' + Pass},
dataType: 'JSON',
type: 'POST',
success: function(value)
{
if(value.length == 35)
{
alert('UserID : ' + value); <----- Login สำเร็จ Return Uniq ID กลับมา
}
else
{
alert('Username or Password incorrect');
return;
}
}
});
}
});
}
else
{
alert('Please Login');
return;
}
});
});
</script>
<body>
Login
<p>
Username :
<input type="text" name="username" id="username" value="" /><p>
Password :
<input type="password" name="password" id="password" value="" /><p>
<input type="button" name="btnLogin" id="btnLogin" value="Login" />
</body>
</html>
สุดท้ายนี้ ก็ลองเอาไป Apply ใช้กับ Program ของตัวเองดูนะครับ ผมเขียนไว้แบบ Simple ให้
Download File
| |
|
|
|
|
 |
|
|
| |
By : |
kamuro
|
| |
Article : |
บทความเป็นการเขียนโดยสมาชิก หากมีปัญหาเรื่องลิขสิทธิ์ กรุณาแจ้งให้ทาง webmaster ทราบด้วยครับ |
| |
Score Rating : |
 |
| |
Create Date : |
2016-05-20 |
| |
Download : |
No files |
|
|
Sponsored Links |
|
|
|
|
|
|
Load balance : Server 03
