2017-02-17 64 views
-1

我想我的验证码与我目前的PHP表单中有“用户名”和“密码”字段登录。但是,我希望用户在登录各自帐户之前验证验证码。集成captcha与PHP工作表单,并提交只有1个按钮

下面是我为我的登录页面代码(我把PHP和HTML代码一起这种情况下):

<!DOCTYPE html> 
 
<html> 
 
<!-- Popup box to show error message --> 
 
\t <script> 
 
    \t function ConfirmError() 
 
    \t { 
 
     \t var username = document.getElementsByName('usern')[0].value; 
 
     \t var password = document.getElementsByName('pass')[0].value; 
 
     \t 
 
     \t //window.alert(username);//Debugger Message 
 
     \t if(username == "" && password == ""){ 
 
     \t \t window.alert("Both fields are required."); 
 
     \t } 
 
     \t else if(username == "" || password == ""){ 
 
       window.alert("Both fields are required."); 
 
     \t }; 
 
    \t } 
 
\t </script> 
 
<head> 
 

 
<?php 
 
include_once 'db.php'; //Establishing connection with our database 
 
include_once 'https.php'; 
 
include_once 'secure_session_start.php'; 
 
include_once 'timeout.php'; 
 

 
//Declare variables 
 
secure_session_start(); //Start session 
 
$error = ""; //Variable for storing our errors. 
 
$loginsuc = "False"; 
 

 
if(isset($_POST["login"])) 
 
{ 
 
\t 
 
\t if(empty($_POST["usern"]) && empty($_POST["pass"]) && empty($_POST["g-recaptcha-response"])) 
 
\t { 
 
\t \t echo "Please check the the captcha form!"; 
 
\t } 
 
\t 
 
\t if (!empty($_POST["usern"]) && (!empty($_POST["pass"])) && (!empty($_POST["g-recaptcha-response"]))) 
 
\t { 
 
\t \t 
 
\t \t //Start of Recaptcha 
 
\t \t require_once 'recaptchalib.php'; 
 
\t \t \t 
 
\t \t $captcha = $_POST['g-recaptcha-response']; 
 

 
\t \t $secret = ""; 
 
\t \t $response = null; 
 
\t \t $reCaptcha = new ReCaptcha($secret); 
 
\t \t \t 
 
\t \t //Define $username and $password 
 
\t \t $username=$_POST['usern'];//Setting variable 
 
\t \t $password=$_POST['pass'];//Setting variable 
 
\t \t $reCaptchaValidation = $_POST['reCaptcha']; 
 
\t \t 
 
\t \t $response = $reCaptcha->verifyResponse($_SERVER["REMOTE_ADDR"],$_POST["g-recaptcha-response"]); 
 

 
\t \t 
 
\t \t $username = mysqli_real_escape_string($con, $username);//Encryption 
 
\t \t $password = md5(mysqli_real_escape_string($con, $password));//Encrpytion 
 
\t \t 
 

 
\t \t //echo "Encrypted password: " . $password . "<br>";//Debugger Message 
 
\t \t //Check username and password from database 
 
\t \t //$sql=$con->prepare("SELECT * FROM user WHERE username='$username' and password='$password'");//Security 
 
\t \t //$sql->execute(); 
 
\t \t //$sql->bind_result($uid, $first_name, $last_name, $email, $username, $contact_num, $password); 
 
\t \t 
 
\t \t $user = $con->query("SELECT * FROM user WHERE username='$username' and password='$password'") or die(); 
 
\t \t $auser = $user->num_rows;//Checking rows in database 
 
\t \t if($auser == 1) 
 
\t \t { 
 
\t \t \t //echo "Auser results: " . $auser;//Debugger Message 
 
\t \t \t //echo "Successful authentication";//Debugger Message 
 
\t \t \t $_SESSION['usern'] = $username; 
 
\t \t \t //header('Location: https://localhost/fwrule/fw/uloginpg.php'); 
 
\t \t \t $loginsuc = "True";//Changing loginsuc from false to true to trigger if statement later on 
 
\t \t } 
 
\t \t else 
 
\t \t { 
 
\t \t \t //$error .="Wrong username or password";//Debugger Message 
 
\t \t \t //echo $error;//Debugger Message 
 
\t \t \t ?> 
 
\t \t \t <html> 
 
\t \t \t \t <script> 
 
\t \t \t \t \t window.alert("Wrong Username or Password."); 
 
\t \t \t \t </script> 
 
\t \t \t </html> 
 
\t \t \t <?php 
 
\t \t } 
 

 
\t } 
 
} 
 

 

 
if($loginsuc == "True"){ 
 
\t header('Location: https://localhost/fwrule/fw/uloginpg.php');//Login Success -> Direct to user login page 
 
\t exit(); //exit() is used so that code below it does not get executed. 
 
} 
 

 
?> 
 

 
<!-- Webpage information --> 
 
    <title>Firewall Rule Review System</title> 
 
\t <meta name="author" content="your name" /> 
 
\t <meta name="description" content="" /> \t 
 
\t <link rel="stylesheet" href="indexstyle.css" type="text/css" /> 
 
\t 
 
<style> 
 

 
/* Login Form Format */ 
 
html, body { 
 
    width: 100%; 
 
    height: 100%; 
 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
 
    color: #444; 
 
    -webkit-font-smoothing: antialiased; 
 
    background: #f0f0f0; 
 
    position: fixed; 
 
    overflow: hidden; 
 
    margin: 0; 
 
} 
 
#container { 
 
    position: fixed; 
 
    width: 271px; 
 
    height: 215px; 
 
    top: 50%; 
 
    left: 53%; 
 
    margin-top: -140px; 
 
    margin-left: -170px; 
 
\t background: #1781F1; 
 
    border-radius: 3px; 
 
    border: 1px solid #ccc; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1); \t 
 
} 
 
form { 
 
    margin: 0 auto; 
 
    margin-top: 20px; 
 
} 
 
label { 
 
    color: #000000; 
 
    display: inline-block; 
 
    margin-left: 18px; 
 
    padding-top: 10px; 
 
    font-size: 14px; 
 
} 
 
p a { 
 
    font-size: 11px; 
 
    color: #aaa; 
 
    float: right; 
 
    margin-top: -13px; 
 
    margin-right: 20px; 
 
-webkit-transition: all .4s ease; 
 
    -moz-transition: all .4s ease; 
 
    transition: all .4s ease; 
 
} 
 
p a:hover { 
 
    color: #555; 
 
} 
 
input { 
 
    font-family: "Helvetica Neue", Helvetica, sans-serif; 
 
    font-size: 12px; 
 
    outline: none; 
 
} 
 
input[type=text], 
 
input[type=password] { 
 
    color: #777; 
 
    padding-left: 10px; 
 
    margin: 10px; 
 
    margin-top: 12px; 
 
    margin-left: 18px; 
 
    width: 220px; 
 
    height: 35px; 
 
\t border: 1px solid #c7d0d2; 
 
    border-radius: 2px; 
 
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #f5f7f8; 
 
-webkit-transition: all .4s ease; 
 
    -moz-transition: all .4s ease; 
 
    transition: all .4s ease; 
 
\t } 
 
input[type=text]:hover, 
 
input[type=password]:hover { 
 
    border: 1px solid #b6bfc0; 
 
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .7), 0 0 0 5px #f5f7f8; 
 
} 
 
input[type=text]:focus, 
 
input[type=password]:focus { 
 
    border: 1px solid #a8c9e4; 
 
    box-shadow: inset 0 1.5px 3px rgba(190, 190, 190, .4), 0 0 0 5px #e6f2f9; 
 
} 
 
#lower { 
 
    background: #087DFA; 
 
    width: 100%; 
 
    height: 50px; 
 
    margin-top: 10px; 
 
\t box-shadow: inset 0 1px 1px #fff; 
 
    border-top: 1px solid #ccc; 
 
    border-bottom-right-radius: 3px; 
 
    border-bottom-left-radius: 3px; 
 
    border-bottom: 1px solid #ccc; 
 
} 
 
input[type=submit] { 
 
    width: 100px; 
 
    height: 30px; 
 
    margin-left: 80px; 
 
    margin-top: 10px; 
 
font-size: 14px; 
 
    font-weight: bold; 
 
    color: #000000; 
 
    background-color: #797672; /*IE fallback*/ 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#C7C6CF), to(#C7C6CF)); 
 
    background-image: -moz-linear-gradient(top left 90deg, #C7C6CF 0%, #C7C6CF 100%); 
 
    background-image: linear-gradient(top left 90deg, #C7C6CF 0%, #C7C6CF 100%); 
 
    border-radius: 30px; 
 
    border: 1px solid #797672; 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .5); 
 
    cursor: pointer; 
 
} 
 
input[type=submit]:hover { 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#C7C6CF), to(#C7C6CF)); 
 
    background-image: -moz-linear-gradient(top left 90deg, #C7C6CF 0%, #C7C6CF 100%); 
 
    background-image: linear-gradient(top left 90deg, #C7C6CF 0%, #C7C6CF 100%); 
 
} 
 
input[type=submit]:active { 
 
    background-image: -webkit-gradient(linear, left top, left bottom, from(#797672), to(#797672)); 
 
    background-image: -moz-linear-gradient(top left 90deg, #797672 0%, #797672 100%); 
 
    background-image: linear-gradient(top left 90deg, #797672 0%, #797672 100%); 
 
} 
 
.footer { 
 
    position: absolute; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    padding: 0rem; 
 
    background-color: #efefef; 
 
    text-align: center; 
 
} 
 
</style> 
 
</head> 
 
<body> 
 
<!-- Webpage Content--> 
 
\t <div id="page"> 
 
\t \t <div id="logo"> 
 
\t \t \t <h1><a href="#"><b>Firewall Rule Review System</b></a></h1> 
 
\t \t </div> 
 
\t \t <div id="nav"> 
 
\t \t \t <ul> 
 
\t \t \t \t <li class="green"><a href="about.php"><b>About</b></a></li> 
 
\t \t \t \t <li class="orange"><a href="contact.php"><b>Contact</b></a></li> 
 
\t \t \t \t <li class="red"><a href="resetpw.php"><b>Reset password</b></a></li> 
 
\t \t \t </ul> \t 
 
\t \t </div> 
 
\t </div> 
 
\t <div id="container"> 
 
\t  <script src='https://www.google.com/recaptcha/api.js'></script> 
 
     <form method="post" action=""> 
 
      <label for="username"><b>Username:</b></label> 
 
      <input type="text" id="username" name="usern"> 
 
      <label for="password"><b>Password:</b></label> 
 
      <input type="password" id="password" name="pass"> 
 
      <div id="lower"> 
 
       <input type="submit" onclick="ConfirmError()" value="Login" name="login"> 
 
      </div><!--/ lower--> 
 
      <div class="g-recaptcha" data-theme="light" data-sitekey="" style="transform:scale(0.88);-webkit-transform:scale(0.90);transform-origin:0 0;-webkit-transform-origin:0 0;"></div> 
 
     </form> 
 
     
 

 
    </div><!--/ container--> 
 
    <!-- End Page Content --> 
 
    <div class="footer"> 
 
\t <p> 
 
\t \t ©2017 ABC Asia Pte Ltd 
 
\t </p> 
 
\t </div> 
 
</body> 
 
</html>

我为乱码道歉,我的验证码不编码我相信正确的方法。

+0

您的代码不仅凌乱,而且不完整的。你在代码的开头有4个包含,我们可以假设它们包含正确的代码。此外,在测试时,您可能希望将所有内容都复制到一个新页面中,去除所有不需要的代码(如样式,JavaScript - 您并不真正需要它)并测试您的代码。当它工作时,添加任何“金光闪闪金光闪闪“你喜欢它。 –

+0

嗨,我实际上结合PHP和HTML代码在这个页面的原因。如果我真的为这个特定页面调用一个HTML文件,它会影响登录。希望澄清。 –

+1

**不要加密密码**,当攻击者拿到数据库时,他也会得到加密密钥。相反,用随机盐迭代HMAC约100ms持续时间,然后用散列表保存盐。使用诸如'password_hash' /'password_verify','PBKDF2'(又名'Rfc2898DeriveBytes'),'Bcrypt'和类似函数的函数。关键是要让攻击者花费大量时间通过强力查找密码。 – zaph

回答

-1

这可能会帮助你。 代码被删除了所有的样式和JavaScript错误弹出窗口,你可以稍后添加。 假设你的4包含有工作代码。

直接从谷歌服务器调用reCaptcha API。 我也改变了脚本逻辑:

check reCaptcha 
- if OK, run query to authenticate 
     - if query OK, redirect to page 
     - if query not OK - echo "some error" 
- else reCaptcha not OK - can't check if human, echo error 

下面的代码应该给你一个抬头:

<?php 

include_once 'db.php'; //Establishing connection with our database 
include_once 'https.php'; 
include_once 'secure_session_start.php'; 
include_once 'timeout.php'; 


//Declare variables 
secure_session_start(); //Start session 
$error = ""; //Variable for storing our errors. 
$loginsuc = "False"; 
$recaptcha_secret = "<redacted>"; 


if(isset($_POST['submit'])){    

    $username = mysqli_real_escape_string($con, $_POST['usern']);//Encryption 
    $password = md5(mysqli_real_escape_string($con, $_POST['pass']));//Encrpytion  

    // Verifying the captcha with google API 
    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']); 
    $response = json_decode($response, true); 
    if($response['success'] === true){ // save the comments to DB 

     $user = $con->query("SELECT * FROM user WHERE username='" .$username ."' and password='" .$password. "'") or die(); 
     $auser = $user->num_rows;//Checking rows in database 

     if($auser == 1) 
     { 
      $_SESSION['usern'] = $username; 
      $loginsuc = "True";//Changing loginsuc from false to true to trigger if statement later on 
     } 
     else 
     { 

      echo 'Some error'; 

     } 

    } else { 

     echo "couldn't check your are human. Please try again!"; 

    } 


    if($loginsuc == "True"){ 

     header('Location: https://localhost/fwrule/fw/uloginpg.php');//Login Success -> Direct to user login page 
     exit(); //exit() is used so that code below it does not get executed. 

    } 

} 
?> 


<!-- Form --> 
<form method="POST" action="">  

    <label for="username"><b>Username:</b></label> 
    <input type="text" id="username" name="usern"> 
    <label for="password"><b>Password:</b></label> 
    <input type="password" id="password" name="pass"> 


    <!-- Buttons and recaptcha --> 

     <div class="g-recaptcha" data-sitekey="6LfA7BUUAAAAAANVvRjHO_TvtXEQZGVIIKOxiwyZ" ></div> 
    <hr /> 
     <button type="submit">Login</button> 


</form>