Méthode pour implémenter la fonction d'enregistrement et de connexion des utilisateurs basée sur PHP

Ce cours utilise PHP et la technologie frontale Web pour mettre en œuvre une page d'inscription et de connexion sur un site Web, apprendre et pratiquer la programmation PHP, etc. Les étudiants intéressés peuvent s'y référer.

Cet article présente la réalisation de la fonction d'enregistrement et de connexion des utilisateurs basée sur PHP. Ce projet est divisé en quatre parties : 1. Production de pages frontales, 2. Production de codes de vérification, 3. Implémentation de l'enregistrement et de la connexion. , 4. Amélioration fonctionnelle. Les détails peuvent être trouvés ci-dessous.

Production de code de vérification

1. Introduction à l'expérience

Cette expérience vous amènera à utiliser la pensée orientée objet pour encapsuler un code de vérification. gentil. Et affiché sur l'interface d'inscription et de connexion. Grâce à l'étude de cette expérience, vous comprendrez les idées POO de PHP, ainsi que l'utilisation de la bibliothèque GD et la génération de code de vérification.

1.1 Points de connaissances impliqués

• PHP

• Bibliothèque GD

• Programmation POO
  

1.2 Outils de développement

sublime, un éditeur de texte pratique et rapide. Cliquez sur le coin inférieur gauche du bureau : Menu Application/Développement/sublime

2. Classe de code de vérification d'encapsulation

2.1 Créer un répertoire et préparer les polices
.

Créez un répertoire admin sous le répertoire Web en tant que répertoire backend pour stocker les fichiers de code backend. Créez un répertoire de polices sous admin pour stocker les polices requises pour créer des codes de vérification.

Créez un nouveau fichier Captcha.php sous admin. C'est le fichier de code de vérification que nous devons modifier.

Hiérarchie actuelle des répertoires :

Modifier le fichier Captcha.php :

<?php 
/**
* Captcha class
*/
class Captcha
{
  
  function __construct()
  {
    # code...
  }
}

Ajoutez les propriétés privées et le constructeur de cette classe :

<?php 
/**
* Captcha class
*/
class Captcha
{
  private $codeNum;  //验证码位数
  private $width;  //验证码图片宽度
  private $height;  //验证码图片高度
  private $img;  //图像资源句柄
  private $lineFlag;  //是否生成干扰线条
  private $piexFlag;  //是否生成干扰点
  private $fontSize;  //字体大小
  private $code;  //验证码字符
  private $string;  //生成验证码的字符集
  private $font;  //字体
  function __construct($codeNum = 4,$height = 50,$width = 150,$fontSize = 20,$lineFlag = true,$piexFlag = true)
  {
    $this->string = &#39;qwertyupmkjnhbgvfcdsxa123456789&#39;;  //去除一些相近的字符
    $this->codeNum = $codeNum;
    $this->height = $height;
    $this->width = $width;
    $this->lineFlag = $lineFlag;
    $this->piexFlag = $piexFlag;
    $this->font = dirname(__FILE__).&#39;/fonts/consola.ttf&#39;;
    $this->fontSize = $fontSize;
  }
}

Les fichiers de polices peuvent être téléchargés dans le répertoire des polices avec le commande suivante :

$ wget http://labfile.oss.aliyuncs.com/courses/587/consola.ttf

Ensuite, commencez à écrire la méthode spécifique :

Créer un descripteur de ressource d'image

//创建图像资源  
public function createImage(){
    $this->img = imagecreate($this->width, $this->height);  //创建图像资源
    imagecolorallocate($this->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));  //填充图像背景（使用浅色）
  }

Fonctions associées utilisées

• imagecreate : Créer un nouveau Images basées sur une palette

• imagecolorallocate : attribuer des couleurs à une image

• mt_rand : générer de meilleurs nombres aléatoires

Créez la chaîne de code de vérification et affichez-la sur l'image

//创建验证码  
public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];  //从字符集中随机取出四个字符拼接
    }
     $_SESSION[&#39;code&#39;] = $this->code;  //加入 session 中
  
   //计算每个字符间距
    $diff = $this->width/$this->codeNum;
    for ($i=0; $i < $this->codeNum; $i++) { 
          //为每个字符生成颜色（使用深色）
     $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
     //写入图像
      imagettftext($this->img, $this->fontSize, mt_rand(-30,30), $diff*$i+mt_rand(3,8), mt_rand(20,$this->height-10), $txtColor, $this->font, $this->code[$i]);
    }
  }

Fonctions associées utilisées

• imagecreate : Créer une nouvelle image basée sur une palette

• imagecolorallocate : Attribuer une couleur à une image

• mt_rand : Générer mieux nombres aléatoires

Créer une chaîne de code de vérification et une sortie vers l'image

//创建验证码  
public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];  //从字符集中随机取出四个字符拼接
    }
     $_SESSION[&#39;code&#39;] = $this->code;  //加入 session 中
  
   //计算每个字符间距
    $diff = $this->width/$this->codeNum;
    for ($i=0; $i < $this->codeNum; $i++) { 
          //为每个字符生成颜色（使用深色）
     $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
     //写入图像
      imagettftext($this->img, $this->fontSize, mt_rand(-30,30), $diff*$i+mt_rand(3,8), mt_rand(20,$this->height-10), $txtColor, $this->font, $this->code[$i]);
    }
  }

Fonctions associées utilisées :

• imagettftext : utilisez les polices TrueType pour écrire du texte sur les images

Créer des lignes d'interférence

//创建干扰线条（默认四条）
public function createLines(){
    for ($i=0; $i < 4; $i++) { 
      $color = imagecolorallocate($this->img,mt_rand(0,155),mt_rand(0,155),mt_rand(0,155));  //使用浅色
      imageline($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),mt_rand(0,$this->width),mt_rand(0,$this->height),$color); 
    }
  }

Fonctions associées utilisées :

• imageline : tracer un segment de ligne

Créer des points d'interférence

//创建干扰点 （默认一百个点）
public function createPiex(){
    for ($i=0; $i < 100; $i++) { 
      $color = imagecolorallocate($this->img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
      imagesetpixel($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),$color);
    }
  }

Fonctions associées utilisées :

• imagesetpixel : Dessinez un seul pixel

Image de sortie :

 public function show()
  {
    $this->createImage();
    $this->createCode();
    if ($this->lineFlag) {  //是否创建干扰线条
      $this->createLines();
    }
    if ($this->piexFlag) {  //是否创建干扰点
      $this->createPiex();
    }
    header('Content-type:image/png');  //请求页面的内容是png格式的图像
    imagepng($this->img);  //以png格式输出图像
    imagedestroy($this->img);  //清除图像资源，释放内存
  }

Fonctions associées utilisées :

• imagepng : Afficher une image vers un navigateur ou un fichier au format PNG

• imagedestroy : Détruire une image

Fournir le code de vérification au monde extérieur :

public function getCode(){
    return $this->code;
  }
完整代码如下：
<?php 
/**
* Captcha class
*/
class Captcha
{
  private $codeNum;
  private $width;
  private $height;
  private $img;
  private $lineFlag;
  private $piexFlag;
  private $fontSize;
  private $code;
  private $string;
  private $font;
  function __construct($codeNum = 4,$height = 50,$width = 150,$fontSize = 20,$lineFlag = true,$piexFlag = true)
  {
    $this->string = &#39;qwertyupmkjnhbgvfcdsxa123456789&#39;;
    $this->codeNum = $codeNum;
    $this->height = $height;
    $this->width = $width;
    $this->lineFlag = $lineFlag;
    $this->piexFlag = $piexFlag;
    $this->font = dirname(__FILE__).&#39;/fonts/consola.ttf&#39;;
    $this->fontSize = $fontSize;
  }

  public function createImage(){
    $this->img = imagecreate($this->width, $this->height);
    imagecolorallocate($this->img,mt_rand(0,100),mt_rand(0,100),mt_rand(0,100));
  }

  public function createCode(){
    $strlen = strlen($this->string)-1;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $this->code .= $this->string[mt_rand(0,$strlen)];
    }
    $_SESSION[&#39;code&#39;] = $this->code;
    $diff = $this->width/$this->codeNum;
    for ($i=0; $i < $this->codeNum; $i++) { 
      $txtColor = imagecolorallocate($this->img,mt_rand(100,255),mt_rand(100,255),mt_rand(100,255));
      imagettftext($this->img, $this->fontSize, mt_rand(-30,30), $diff*$i+mt_rand(3,8), mt_rand(20,$this->height-10), $txtColor, $this->font, $this->code[$i]);
    }
  }

  public function createLines(){
    for ($i=0; $i < 4; $i++) { 
      $color = imagecolorallocate($this->img,mt_rand(0,155),mt_rand(0,155),mt_rand(0,155));
      imageline($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),mt_rand(0,$this->width),mt_rand(0,$this->height),$color); 
    }
  }

  public function createPiexs(){
    for ($i=0; $i < 100; $i++) { 
      $color = imagecolorallocate($this->img,mt_rand(0,255),mt_rand(0,255),mt_rand(0,255));
      imagesetpixel($this->img,mt_rand(0,$this->width),mt_rand(0,$this->height),$color);
    }
  }

  public function show()
  {
    $this->createImage();
    $this->createCode();
    if ($this->lineFlag) {
      $this->createLines();
    }
    if ($this->piexFlag) {
      $this->createPiexs();
    }
    header(&#39;Content-type:image/png&#39;);
    imagepng($this->img);
    imagedestroy($this->img);
  }

  public function getCode(){
    return $this->code;
  }
}

Ce qui précède contient tous les codes de la catégorie des codes de vérification. Cela semble assez simple, mais il utilise de nombreuses fonctions de traitement d'image. J'ai également créé les liens et les instructions d'utilisation nécessaires pour les fonctions liées ci-dessus. Il n'est pas nécessaire de mémoriser ces fonctions par cœur. Si vous rencontrez quelque chose de flou, veuillez vous référer à la documentation officielle de PHP à tout moment. Le plus important est qu'il existe une documentation en chinois.

2.2 Utilisation du code de vérification

Maintenant qu'il a été emballé, vous pouvez commencer à l'utiliser. Pour plus de commodité, cette classe est appelée directement sous la classe Captcha :

session_start(); //开启session
$captcha = new Captcha();  //实例化验证码类(可自定义参数)
$captcha->show();  //调用输出

3. Affichage frontal

Le backend a préparé le code de vérification, et l'interface front-end peut être affichée. Modifiez la partie code de vérification du formulaire d'inscription et de connexion dans index.php :

<p class="form-group">
 <p class="col-sm-12">
   <img src="admin/Captcha.php" alt="" id="codeimg" onclick="javascript:this.src = &#39;admin/Captcha.php?&#39;+Math.random();">
   <span>Click to Switch</span>
 </p>
</p>

La balise img ajoute le code js de l'événement click, afin que la fonction de cliquer pour changer le code de vérification puisse être réalisée !

Rendu :

4. Amélioration

Jusqu'à présent, notre code de vérification Le module est fondamentalement complet. Après avoir étudié ici, tout le monde devrait avoir une meilleure compréhension de la programmation orientée objet. J'ai également réalisé un soupçon de réflexion POO. Les trois caractéristiques majeures de la POO : l'encapsulation, l'héritage et le polymorphisme. Nous n'utilisons ici qu'un petit peu l'idée d'encapsulation. Vous pouvez continuer à affiner et améliorer cette classe de code de vérification et concevoir une classe plus parfaite. Cette expérience nous apprend également que PHP a de nombreuses fonctions, alors ne les mémorisez pas par cœur et lisez davantage de documents officiels.

Résumé : ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun.

Recommandations associées :

phpRéaliser des enveloppes rouges en espèces via le paiement WeChat

vérification automatique thinkPHP , Explication détaillée des problèmes d'ajout automatique et d'erreur de formulaire

phpRéalisation du paiement d'entreprise avec WeChat Pay

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!