PHP+Ajax implémente un code de vérification pour vérifier la connexion de l'utilisateur-tutoriel php-php.cn

PHP+Ajax implémente un code de vérification pour vérifier la connexion de l'utilisateur

墨辰丷

Libérer： 2023-03-29 10:00:02

original

3649 Les gens l'ont consulté

Cet article présente principalement les informations pertinentes du code de vérification PHP+AJAX pour vérifier la connexion de l'utilisateur en détail. Les amis intéressés peuvent s'y référer. J'espère qu'il sera utile à tout le monde.

L'un des avantages de l'utilisation d'AJAX pour vérifier la connexion de l'utilisateur est que la page de renvoi n'a pas besoin d'être actualisée. De plus, il est plus sûr d'utiliser le code de vérification, je l'ai donc noté après un certain temps. Au total, trois fichiers sont utilisés :

yz.php : Le fichier PHP qui génère le code de vérification. Le code de vérification sera dans la SESSION pour comparaison et. appel lors de la connexion
index.php: Fichier HTML pour la connexion de l'utilisateur
loginCheck.php: Fichier pour la vérification connexion utilisateur

Les éléments suivants sont analysés un par un :
fichier yz.php

<?php
 session_start();

 //生成验证码图
 Header("Content-type: image/PNG");
 //长与宽
 $im = imagecreate(44,18);
 // 设置背景色:
 $back = ImageColorAllocate($im, 245,245,245);
 // 填充背景色:
 imagefill($im,0,0,$back);

 srand((double)microtime()*1000000);
 $vcodes;
 //生成4位数字
 for($i=0;$i<4;$i++){
  $font = ImageColorAllocate($im, rand(100,255),rand(0,100),rand(100,255));
  $authnum=rand(1,9);
  $vcodes.=$authnum;
  imagestring($im, 5, 2+$i*10, 1, $authnum, $font);
 }

 //加入干扰象素
 for($i=0;$i<100;$i++){
  $randcolor = ImageColorallocate($im,rand(0,255),rand(0,255),rand(0,255));
  imagesetpixel($im, rand()%70 , rand()%30 , $randcolor);
 }
  
 ImagePNG($im);
 ImageDestroy($im);

 // 将四位的验证码保存在 SESSION 里，登录时调用对比
 $_SESSION["VCODE"]=$vcodes;
?>

Copier après la connexion

index.php : Remarque, ne prenez pas $_SESSION["VCODE"] dans ce fichier, sinon il sera pris une étape plus tard, et le code de vérification précédent ne pourra être affiché que après avoir actualisé

Dans loginCheck.php Vérifiez simplement

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312">
<title>管理后台| 请登录</title>
<link rel="stylesheet" type="text/css" href="\css\a.css">
<style type="text/css">
<!--
  #main{
   font-family:宋体;
   font-size:10pt;
   text-align:center;
   margin-top:510px;
  }
  
  body{
   background-attachment:fixed;
   background-position:center;
   background-image:url(./images/w2.jpg);
   background-repeat: no-repeat;
  }
  
  #authCode{background-Color:#F8F9FF;}
  
  table{text-align:center;}

//-->
</style>
<script type="text/javascript" src="./js/trim.js"></script>
<script type="text/javascript">
<!--

 function clearX(){
  document.getElementById(&#39;authCode&#39;).value="";
 }

 // 点击图片重新获得新的验证码：
 function getVCode() { 
  var vcode=document.getElementById(&#39;vcode&#39;); 
  vcode.src =&#39;yz.php?nocache=&#39;+new Date().getTime(); 
 }


 //定义XMLHttpRequest对象
 var xmlHttp;     

 // 创建 XMLHttpRequest:
 function createXmlHttpRequest(){
 var xmlHttp=null;
 try{
  // Firefox, Opera 8.0+, Safari
  xmlHttp=new XMLHttpRequest();
 }catch(e){
  // Internet Explorer
  try{
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }catch(e){
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
 }
 return xmlHttp;
 }

 // AJAX 检查登录: 有密码，要用POST 提交
 function login(){
  var authCode=trim(document.getElementById(&#39;authCode&#39;).value);
  var username=trim(document.getElementById(&#39;username&#39;).value);
  var password=trim(document.getElementById(&#39;password&#39;).value);
  if(username=="" || password=="" || authCode==""){
   alert("请输入用户名和密码和验证码！");
   return false;
  }else{
   if(!xmlHttp) xmlHttp=createXmlHttpRequest();
    var send_string="username="+username+"&password="+password+"&authCode="+authCode+"&fresh="+Math.random();
    xmlHttp.open("POST","loginCheck.php",true); 
    xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    xmlHttp.send(send_string); 
    xmlHttp.onreadystatechange=function(){
     if(xmlHttp.readystate==4 && xmlHttp.status==200){
      var answer=xmlHttp.responseText;
      if(answer=="ok")                     //跳转到管理中心页面
       window.location.href="adminCenter.php";
      else{
       alert("用户名密码或验证码不正确! 请重新输入!");
       document.getElementById(&#39;username&#39;).focus();
      }
    }
   }
  }
 }

//-->
</script>
</head>
<body onload="document.getElementById(&#39;username&#39;).focus();">
 <p id="main">
   <table>
     <tr>
     <td>用户名:<input type="text" id="username" /></td>
     <td>密   码:<input type="password" id="password" /></td>
     <td>验证码:<input type="text" id="authCode" size="6" maxlength="4" value="验证码" onfocus="clearX()"/></td>
     <td><img id="vcode" src="yz.php" alt="看不清？点击换一张" onclick="getVCode()" /></td>
     <td><input id="loginButton" type="submit" value="登 录" onclick="login()"/></td>
     </tr>
    </table>
 </p>
</body>
</html>

Copier après la connexion

loginCheck.php Fichier pour vérifier la connexion de l'utilisateur

<?php 
 session_start();
 include("../conn/connDB.php");
 
 // 取得POST过来的参数:
 $username=$_POST["username"];
 $password=md5($_POST["password"]);
 $authCode=$_POST["authCode"];       
 
 $feedback="no";

//对比是否==SESSION中的验证码，不能放在客户端做，否则取不正确的值
 if($authCode==$_SESSION["VCODE"]){

   $SQL="select * from users where username=&#39;$username&#39; and password=&#39;$password&#39;";
   $result=mysql_query($SQL);
   $rows=mysql_num_rows($result);
  if($rows==1)                       // 验证成功
   $feedback="ok";
   $_SESSION["admin"]=true;           //为了后台安全，存入SESSION，表明 ADMIN 已登录，供后面调用
  }
  
 echo $feedback;
 
?>

Copier après la connexion

Résumé : ce qui précède est l'intégralité du contenu de cet article, J'espère que cela pourra être utile à l'étude de chacun.

Recommandations associées :

Explication détaillée de l'utilisation de l'héritage POO dans la programmation orientée objet PHP

Définition des classes en PHP programmation orientée objet Explication détaillée de l'utilisation

Explication détaillée du développement de sites interactifs simples avec PHP MYSQL

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!