天天看點

Email接收驗證碼,以實作登入/注冊/修改密碼

要求

1)實作Email形式的注冊功能和相應的登入功能;

2)實作忘記密碼時的密碼找回功能;

3)存在資料庫中的密碼不能以明文形式存放,即建議在浏覽器端發送請求前,調用js代碼對使用者的密碼做md5加密

分析

第3)點較簡單,重點學習一波email接收驗證碼。

網上粗略了解了一下,PHP自帶mail()函數可實作郵件的收發,但在php5.3版本後需開啟本地email伺服器才能使用。

是以搭建了hmailserver服務,具體參考:

mysql+hmailServer+roundcubemail整合開發(一)

hMailServer安裝使用教程

Hmailserver+mysql+php安裝指南

檔案拓撲

Email接收驗證碼,以實作登入/注冊/修改密碼

代碼及示範

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web實驗2</title>
<script type="text/javascript" src="function.js"></script>
<script type="text/javascript" src="md5.js"></script>
</head>
<body>

<form name="fm1" action="index.php" method="post" οnsubmit="return IsEmpty()">
    <div style="text-align: center;">
        <h1>登入頁面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1><br><br><br>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="text" name="user" placeholder="帳号" id="usr"/>
        <select name="mail">
          <option value="@163.com">@163.com</option>
          <option value="@126.com">@126.com</option>
          <option value="@hdu.edu.cn">@hdu.edu.cn</option>
        </select>
        </br><input type="password" name="password_plain" placeholder="密碼" id="pwd"/>
        <input type=hidden name="password_md5" id="pwd1" />
        <a href="resetpwd.php">忘記密碼?</a>
        </br>
        <input type="submit" name="submit" value="登入" οnclick="enCodePWD()"/>
        <button οnclick="location.href='register.php'" type="button">注冊</button>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</form>
</body>
</html>      

login.php

Email接收驗證碼,以實作登入/注冊/修改密碼

當登入為空

Email接收驗證碼,以實作登入/注冊/修改密碼

亦或

Email接收驗證碼,以實作登入/注冊/修改密碼
Email接收驗證碼,以實作登入/注冊/修改密碼
Email接收驗證碼,以實作登入/注冊/修改密碼
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title>web實驗2</title>
<script type="text/javascript" src="function.js"></script>
<script type="text/javascript" src="md5.js"></script>
</head>
<body>

<form name="fm1" action="" method="post" οnsubmit="return IsEmpty()">
    <div style="text-align: center;">
        <h1>注冊頁面&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1><br><br><br>*
        <input type="text" name="user" placeholder="帳号" id="usr"/>
        <select name="mail">
          <option value="@163.com">@163.com</option>
          <option value="@126.com">@126.com</option>
          <option value="@hdu.edu.cn">@hdu.edu.cn</option>
        </select>
        </br>*
        <input type="password" name="password_plain" placeholder="密碼" id="pwd"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type=hidden name="password_md5" id="pwd1" />
        </br>&nbsp;&nbsp;*
        <input type="text" name="code" placeholder="驗證碼" id="cd"/>
        <button type="submit" name="bttn" value="1" οnclick="IsEmpty()">點選擷取驗證碼</button>
        </br>
        <input type="submit" name="submit" value="注冊" οnclick="enCodePWD()"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</form>
</body>
</html>

<?php
$servername = "localhost";$usernm = "root";$passwd = "root";$dbname = "test";
@$c_user[email protected]$_POST['user'][email protected]$_POST['mail'];@[email protected]$_POST['password_md5'];
if((@$_POST['submit'] || @$_POST['bttn']) && $_POST['user'] && $_POST['password_plain']){
    // 建立連接配接
    $conn = mysqli_connect($servername, $usernm, $passwd, $dbname);
    // 檢測連接配接
    if (!$conn) {
        die("連接配接失敗: ".mysqli_connect_error());
    } 
    else{
        @$sql = "SELECT * FROM client where user='".$c_user."'";
        $result = mysqli_query($conn, $sql);
        //檢錯
        if (!$result) {
        printf("Error: %s\n", mysqli_error($conn));
        exit();
        }
        //查詢使用者是否存在
        if (mysqli_num_rows($result)) {
            echo '<script>alert("使用者已存在!");history.go(-1);</script>';
        }
        else{
            if(@$_POST['bttn'])
                include_once("reqcode.php");
            else
                include_once("reg.php");
        }
        $conn->close();
    }
}
?>      

register.php

Email接收驗證碼,以實作登入/注冊/修改密碼

先判斷賬号/密碼是否為空/合法

Email接收驗證碼,以實作登入/注冊/修改密碼

沒輸入驗證碼就注冊

Email接收驗證碼,以實作登入/注冊/修改密碼

注冊使用者已存在

Email接收驗證碼,以實作登入/注冊/修改密碼

否則

Email接收驗證碼,以實作登入/注冊/修改密碼

登入郵箱接收驗證碼

Email接收驗證碼,以實作登入/注冊/修改密碼

驗證碼有效時間1分鐘

Email接收驗證碼,以實作登入/注冊/修改密碼

成功注冊,3s後自動跳轉login.php

Email接收驗證碼,以實作登入/注冊/修改密碼
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="UTF-8">
<title>web實驗2</title>
<script type="text/javascript" src="function.js"></script>
<script type="text/javascript" src="md5.js"></script>
</head>
<body>

<form name="fm1" action="" method="post">
    <div style="text-align: center;">
        <h1>更改密碼&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</h1><br><br><br>*
        <input type="text" name="user" placeholder="帳号" id="usr"/>
        <select name="mail">
          <option value="@163.com">@163.com</option>
          <option value="@126.com">@126.com</option>
          <option value="@hdu.edu.cn">@hdu.edu.cn</option>
        </select>
        </br>*
        <input type="password" name="password_plain" placeholder="新密碼" id="pwd"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <br>*
        <input type="password" name="password_cfm" placeholder="确認密碼" οnblur="return confirm_pwd()" id="pwd2"/></input>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type=hidden name="password_md5" id="pwd1" />
        </br>&nbsp;&nbsp;*
        <input type="text" name="code" placeholder="驗證碼" id="cd"/>
        <button type="submit" name="bttn" value="1" οnclick="IsEmpty()">點選擷取驗證碼</button>
        </br>
        <input type="submit" name="submit" value="送出" οnclick="enCodePWD()"/>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    </div>
</form>
</body>
</html>

<?php
$servername = "localhost";$usernm = "root";$passwd = "root";$dbname = "test";
@$c_user[email protected]$_POST['user'][email protected]$_POST['mail'];@[email protected]$_POST['password_md5'];
if((@$_POST['submit'] || @$_POST['bttn']) && $_POST['user'] && $_POST['password_plain'] && $_POST['password_cfm']){
    // 建立連接配接
    $conn = mysqli_connect($servername, $usernm, $passwd, $dbname);
    // 檢測連接配接
    if (!$conn) {
        die("連接配接失敗: ".mysqli_connect_error());
    } 
    else{
        @$sql = "SELECT * FROM client where user='".$c_user."'";
        $result = mysqli_query($conn, $sql);
        //查詢使用者是否存在
        if (mysqli_num_rows($result)) {
            if(@$_POST['bttn'])
                include_once("reqcode.php");
            else
                include_once("chng.php");
        }
        else{
            echo '<script>alert("使用者不存在!");history.go(-1);</script>';
        }
        $conn->close();
    }
}
?>      

resetpwd.php

Email接收驗證碼,以實作登入/注冊/修改密碼

确認密碼不一緻

Email接收驗證碼,以實作登入/注冊/修改密碼

成功修改

Email接收驗證碼,以實作登入/注冊/修改密碼

(其他示範同注冊頁面)

<?php
$servername = "localhost";$usernm = "root";$passwd = "root";$dbname = "test";
if(@$_POST['submit']){
    $c_user=$_POST['user'].$_POST['mail'];$c_password=$_POST['password_md5'];
}
// 建立連接配接
$conn = mysqli_connect($servername, $usernm, $passwd, $dbname);
// 檢測連接配接
if (!$conn) {
    die("連接配接失敗: ".mysqli_connect_error());
} 
else{
    @$sql = "SELECT * FROM client where user='".$c_user."' and "."password='".$c_password."'";
    $result = mysqli_query($conn, $sql);
    //檢錯
    if (!$result) {
    printf("Error: %s\n", mysqli_error($conn));
    exit();
    }
    //查詢成功
    if (mysqli_num_rows($result)) {
        //輸出資料
        $row = mysqli_fetch_assoc($result);
        $username=$row["user"];
        echo "Welcome~:".$username."<br>"."Ur password~:".$row["password"];
    }
    else{
        echo '<script>alert("使用者名或密碼錯誤!");history.go(-1);</script>';

    }
    $conn->close();
}
?>      

index.php

Email接收驗證碼,以實作登入/注冊/修改密碼
<?php

session_start();

$rd = rand(100000,999999);
$to = $c_user;
$subject = "驗證碼";
$message = $rd;
$from = "[email protected]";
$headers = "From: $from";
if(mail($to,$subject,$message,$headers)){
    echo "<br><br><div style='text-align: center;'>:)<br>驗證碼已發送至郵箱:".$c_user."<br>注冊密碼:".$_POST['password_plain']."<br>請注意查收!!!</div>";
}

setcookie('rd', $rd, time()+5*60);//驗證碼
setcookie('tm', time(), time()+5*60);//驗證碼失效時間的起始時間戳

?>      

reqcode.php

<?php
//檢測驗證碼是否為空
if(!$_POST['code']){
    echo '<script>alert("驗證碼為空!");history.go(-1);</script>';
    exit();
}
//驗證碼失效時間為60秒
if (time() - @$_COOKIE['tm'] < 60){
    if ($_POST['code'] == $_COOKIE["rd"]) {
        @$sqli = "INSERT INTO client (user,password) VALUES ('".$c_user."','".$c_password."')";
        $result = mysqli_query($conn, $sqli);
        if ($result) {
            header('refresh:3; url=login.php');
            echo "<br><br><div style='text-align: center;'>):<br>注冊成功,請登入!</div>";;
        }
    }
    else{
        echo "<br><br><div style='text-align: center;'>:(<br>驗證碼錯誤!</div>";
    }
}
else{
    echo "<br><br><div style='text-align: center;'>:(<br>驗證碼已過期!</div>";
}

?>      

reg.php

<?php
//檢測驗證碼是否為空
if(!$_POST['code']){
    echo '<script>alert("驗證碼為空!");history.go(-1);</script>';
    exit();
}
//驗證碼失效時間為60秒
if (time() - @$_COOKIE['tm'] < 60){
    if ($_POST['code'] == $_COOKIE["rd"]) {
        @$sqli = "UPDATE client SET password = '".$c_password."' WHERE user = '".$c_user."'";
        $result = mysqli_query($conn, $sqli);
        if ($result) {
            header('refresh:3; url=login.php');
            echo "<br><br><div style='text-align: center;'>):<br>密碼修改成功,請登入!</div>";;
        }
    }
    else{
        echo "<br><br><div style='text-align: center;'>:(<br>驗證碼錯誤!</div>";
    }
}
else{
    echo "<br><br><div style='text-align: center;'>:(<br>驗證碼已過期!</div>";
}

?>      

chng.php

//md5加密密碼
function enCodePWD(){
    document.getElementById('pwd1').value=md5(document.getElementById('pwd').value);
}

function IsEmpty(){
    var usr = document.getElementById("usr");
    //判斷使用者名是否為空
    if(usr.value==""){
        alert(":( 使用者名不能為空!");
        return false;
    }
    //判斷使用者名是否合法
    if(/^[a-zA-Z0-9]{6,14}$/.test(usr.value) != true){
        alert(":( 使用者名不合法!");
        return false;
    }
    var passwd = document.getElementById("pwd");
    //判斷密碼是否為空
    if(passwd.value==""){
        alert(":( 密碼不能為空!");
        return false;
    }
    return true;
}

function confirm_pwd(){
    var passwd = document.getElementById("pwd");
    var passwd_cfm = document.getElementById("pwd2");
    if(passwd.value != passwd_cfm.value){
        alert("密碼不一緻");
        passwd_cfm.value = "";
        return false;
    }
    return true;
}

/*
var wait=11;
function renew_btn(){
    var btn=document.getElementById("btn");
    if(wait == 0){
        btn.removeAttribute("disabled");
        btn.innerHTML="重新擷取驗證碼";
        wait=60;
    }
    else{
        if(wait == 11){
        alert("驗證碼已發送至你的郵箱,請盡快查收~!");
        }
        btn.setAttribute("disabled", true);
        if(wait<10){
            btn.innerHTML="&nbsp;&nbsp;重新發送(0"+wait+")&nbsp;&nbsp;";
        }
        else{
            btn.innerHTML="&nbsp;&nbsp;重新發送("+wait+")&nbsp;&nbsp;";
        }
        wait--;
        setTimeout(function(){renew_btn()},1000)
    }
}
*/      

function.js

!function(n){"use strict";function t(n,t){var r=(65535&n)+(65535&t);return(n>>16)+(t>>16)+(r>>16)<<16|65535&r}function r(n,t){return n<<t|n>>>32-t}function e(n,e,o,u,c,f){return t(r(t(t(e,n),t(u,f)),c),o)}function o(n,t,r,o,u,c,f){return e(t&r|~t&o,n,t,u,c,f)}function u(n,t,r,o,u,c,f){return e(t&o|r&~o,n,t,u,c,f)}function c(n,t,r,o,u,c,f){return e(t^r^o,n,t,u,c,f)}function f(n,t,r,o,u,c,f){return e(r^(t|~o),n,t,u,c,f)}function i(n,r){n[r>>5]|=128<<r%32,n[14+(r+64>>>9<<4)]=r;var e,i,a,d,h,l=1732584193,g=-271733879,v=-1732584194,m=271733878;for(e=0;e<n.length;e+=16)i=l,a=g,d=v,h=m,g=f(g=f(g=f(g=f(g=c(g=c(g=c(g=c(g=u(g=u(g=u(g=u(g=o(g=o(g=o(g=o(g,v=o(v,m=o(m,l=o(l,g,v,m,n[e],7,-680876936),g,v,n[e+1],12,-389564586),l,g,n[e+2],17,606105819),m,l,n[e+3],22,-1044525330),v=o(v,m=o(m,l=o(l,g,v,m,n[e+4],7,-176418897),g,v,n[e+5],12,1200080426),l,g,n[e+6],17,-1473231341),m,l,n[e+7],22,-45705983),v=o(v,m=o(m,l=o(l,g,v,m,n[e+8],7,1770035416),g,v,n[e+9],12,-1958414417),l,g,n[e+10],17,-42063),m,l,n[e+11],22,-1990404162),v=o(v,m=o(m,l=o(l,g,v,m,n[e+12],7,1804603682),g,v,n[e+13],12,-40341101),l,g,n[e+14],17,-1502002290),m,l,n[e+15],22,1236535329),v=u(v,m=u(m,l=u(l,g,v,m,n[e+1],5,-165796510),g,v,n[e+6],9,-1069501632),l,g,n[e+11],14,643717713),m,l,n[e],20,-373897302),v=u(v,m=u(m,l=u(l,g,v,m,n[e+5],5,-701558691),g,v,n[e+10],9,38016083),l,g,n[e+15],14,-660478335),m,l,n[e+4],20,-405537848),v=u(v,m=u(m,l=u(l,g,v,m,n[e+9],5,568446438),g,v,n[e+14],9,-1019803690),l,g,n[e+3],14,-187363961),m,l,n[e+8],20,1163531501),v=u(v,m=u(m,l=u(l,g,v,m,n[e+13],5,-1444681467),g,v,n[e+2],9,-51403784),l,g,n[e+7],14,1735328473),m,l,n[e+12],20,-1926607734),v=c(v,m=c(m,l=c(l,g,v,m,n[e+5],4,-378558),g,v,n[e+8],11,-2022574463),l,g,n[e+11],16,1839030562),m,l,n[e+14],23,-35309556),v=c(v,m=c(m,l=c(l,g,v,m,n[e+1],4,-1530992060),g,v,n[e+4],11,1272893353),l,g,n[e+7],16,-155497632),m,l,n[e+10],23,-1094730640),v=c(v,m=c(m,l=c(l,g,v,m,n[e+13],4,681279174),g,v,n[e],11,-358537222),l,g,n[e+3],16,-722521979),m,l,n[e+6],23,76029189),v=c(v,m=c(m,l=c(l,g,v,m,n[e+9],4,-640364487),g,v,n[e+12],11,-421815835),l,g,n[e+15],16,530742520),m,l,n[e+2],23,-995338651),v=f(v,m=f(m,l=f(l,g,v,m,n[e],6,-198630844),g,v,n[e+7],10,1126891415),l,g,n[e+14],15,-1416354905),m,l,n[e+5],21,-57434055),v=f(v,m=f(m,l=f(l,g,v,m,n[e+12],6,1700485571),g,v,n[e+3],10,-1894986606),l,g,n[e+10],15,-1051523),m,l,n[e+1],21,-2054922799),v=f(v,m=f(m,l=f(l,g,v,m,n[e+8],6,1873313359),g,v,n[e+15],10,-30611744),l,g,n[e+6],15,-1560198380),m,l,n[e+13],21,1309151649),v=f(v,m=f(m,l=f(l,g,v,m,n[e+4],6,-145523070),g,v,n[e+11],10,-1120210379),l,g,n[e+2],15,718787259),m,l,n[e+9],21,-343485551),l=t(l,i),g=t(g,a),v=t(v,d),m=t(m,h);return[l,g,v,m]}function a(n){var t,r="",e=32*n.length;for(t=0;t<e;t+=8)r+=String.fromCharCode(n[t>>5]>>>t%32&255);return r}function d(n){var t,r=[];for(r[(n.length>>2)-1]=void 0,t=0;t<r.length;t+=1)r[t]=0;var e=8*n.length;for(t=0;t<e;t+=8)r[t>>5]|=(255&n.charCodeAt(t/8))<<t%32;return r}function h(n){return a(i(d(n),8*n.length))}function l(n,t){var r,e,o=d(n),u=[],c=[];for(u[15]=c[15]=void 0,o.length>16&&(o=i(o,8*n.length)),r=0;r<16;r+=1)u[r]=909522486^o[r],c[r]=1549556828^o[r];return e=i(u.concat(d(t)),512+8*t.length),a(i(c.concat(e),640))}function g(n){var t,r,e="";for(r=0;r<n.length;r+=1)t=n.charCodeAt(r),e+="0123456789abcdef".charAt(t>>>4&15)+"0123456789abcdef".charAt(15&t);return e}function v(n){return unescape(encodeURIComponent(n))}function m(n){return h(v(n))}function p(n){return g(m(n))}function s(n,t){return l(v(n),v(t))}function C(n,t){return g(s(n,t))}function A(n,t,r){return t?r?s(t,n):C(t,n):r?m(n):p(n)}"function"==typeof define&&define.amd?define(function(){return A}):"object"==typeof module&&module.exports?module.exports=A:n.md5=A}(this);      

md5.js

轉載于:https://www.cnblogs.com/p0pl4r/p/10758395.html