コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > バックエンド開発 > PHPチュートリアル > 本文

PHPをベースにしたユーザー登録・ログイン機能の実装

高洛峰
リリース： 2023-03-03 16:12:02
オリジナル
2033 人が閲覧しました

本記事では、PHPによるユーザー登録・ログイン機能の実現について、1.フロントエンドページの制作、2.認証コードの制作、3.登録・ログインの実装、4.機能改善の4つに分けて紹介します。 。詳細は以下をご覧ください。

検証コードの作成

1. 実験の導入

この実験では、オブジェクト指向の考え方を使用して検証コード クラスをカプセル化します。そして、登録およびログインインターフェイスに表示されます。この実験を学ぶことで、PHP の OOP の考え方、GD ライブラリの使用法、検証コードの生成について理解できるようになります。

1.1 関係する知識ポイント

PHP

GDライブラリ

OOPプログラミング

1.2 開発ツール

sublime、便利で高速なテキストエディター。デスクトップの左下隅をクリックします: Application menu/Development/sublime

2. カプセル化検証コードクラス

2.1 ディレクトリを作成し、フォントを準備します

バックエンドディレクトリとして Web ディレクトリに admin ディレクトリを作成しますバックエンドコードドキュメントを保存します。 admin の下に fonts ディレクトリを作成し、検証コードの作成に必要なフォントを保存します。

管理下に新しい Captcha.php ファイルを作成します。これは編集する必要がある検証コード ファイルです。現在のディレクトリの階層構造:

Captcha.php ファイルを編集: PHPをベースにしたユーザー登録・ログイン機能の実装

<?php
/**
* Captcha class
*/
class Captcha
{
   
  function __construct()
  {
    # 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;
  }
}
ログイン後にコピー
e

フォント ファイルは次のコマンドでダウンロードできます以下からダウンロードします フォントディレクトリに移動します:

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

次に、特定のメソッドの記述を開始します:


画像リソースハンドルを作成します

//创建图像资源 
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));  //填充图像背景（使用浅色）
  }
ログイン後にコピー

使用される関連関数

imagecreate: 新しいパレットベースの画像を作成します

imagecolorallocate: 画像に色を割り当てます

mt_rand: より良い乱数を生成します

検証コード文字列を作成し、 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]);
    }
  }
ログイン後にコピー
ログイン後にコピー

使用する関連関数

imagecreate: 新しいパレットベースの画像を作成します

imagecolorallocate: 画像に色を割り当てます

mt_rand: より良い乱数を生成します

検証コード文字列を作成し、に出力します画像 

//创建验证码 
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]);
    }
  }
ログイン後にコピー
ログイン後にコピー

使用関連機能:

imagettftext: TrueType フォントを使用して画像にテキストを書き込みます

干渉線を作成します 

//创建干扰线条（默认四条）
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);
    }
  }
ログイン後にコピー

使用関連機能:

imageline : 線を描画しますセグメント

干渉点の作成

//创建干扰点 （默认一百个点）
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);
    }
  }
ログイン後にコピー

使用される関連関数:

imagesetpixel: 単一ピクセルを描画

出力画像: 

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


使用される関連関数:

imagepng: 画像をブラウザまたは PNG 形式のファイル

imagedestroy: 画像を破棄します

検証コードを外部に提供します: 

public function getCode(){
    return $this->code;
  }
ログイン後にコピー

完全なコードは次のとおりです: 

string = 'qwertyupmkjnhbgvfcdsxa123456789';
    $this->codeNum = $codeNum;
    $this->height = $height;
    $this->width = $width;
    $this->lineFlag = $lineFlag;
    $this->piexFlag = $piexFlag;
    $this->font = dirname(__FILE__).'/fonts/consola.ttf';
    $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['code'] = $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('Content-type:image/png');
    imagepng($this->img);
    imagedestroy($this->img);
  }
 
  public function getCode(){
    return $this->code;
  }
}
ログイン後にコピー

上記は検証コードの完全なコードですクラス 。非常にシンプルに見えますが、多くの画像処理機能が使用されており、上記の関連機能に必要なリンクと使用方法も作成しました。これらの関数を丸暗記する必要はありません。不明な点があれば、いつでも PHP の公式ドキュメントを参照してください。最も重要なことは、中国語のドキュメントがあることです。

2.2 確認コードを使用する


パッケージ化されたので、使用を開始できます。ここでは便宜上、Captcha クラスの直下でこのクラスを呼び出します。 

session_start(); //开启session
$captcha = new Captcha();  //实例化验证码类(可自定义参数)
$captcha->show();  //调用输出
ログイン後にコピー

3. フロントエンドの表示

バックエンドは検証コードを準備しており、フロントエンド インターフェイスを表示できます。 Index.php 登録およびログインフォームの認証コード部分: 

<div class="form-group">
 <div 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>
 </div>
</div>
ログイン後にコピー

img タグにクリックイベントの JS コードを追加することで、クリックして認証コードを変更する機能を実現できます。

レンダリング:


4. 改善

PHPをベースにしたユーザー登録・ログイン機能の実装

これまでのところ、検証コードモジュールは基本的に完成しています。ここで学んだ後は、誰もがオブジェクト指向プログラミングについてより深く理解できるはずです。 OOP思考のヒントにも気付きました。 OOP の 3 つの主要な特徴: カプセル化、継承、ポリモーフィズム。ここではカプセル化の考え方を少しだけ使用します。この検証コード クラスの改良と改善を続けて、より完璧なクラスを設計できます。この実験は、PHP には多くの関数があるので、丸暗記せずに公式ドキュメントをよく読んでください。


関連ラベル：
注册登录功能
ソース：php.cn
前の記事：Cakephp で Captcha を使用してより安全な検証コードを実装する 次の記事：Cakephpのローカライズと国際化について詳しく解説
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Vuetify v-card は v-col で可能なすべての高さに適合します vueとvuetifyを使用してログイン/登録ページを構築しています。以下にコードを置きます (私はイタリア人なのでテキストはイタリア語ですが、理解できると思います): <v...
から 2024-04-06 10:29:26
0
1
406
API 呼び出し後に Axios POST が返されます: ERR_EMPTY_RESPONSE Node.JS アプリケーションで登録フォームを作成しようとしています。 AXIOSpost リクエストを行うと、データはデータベースに保存されますが、実際の Promise は依...
から 2024-04-03 14:16:50
0
1
405
getRedirectResult メソッドを使用して Google OAuth ユーザー データを抽出し、Firebase Firestore に保存するにはどうすればよいですか? Firebase Authentication を使用して、メール/パスワードと GoogleOAuth ログインという 2 つの方法でウェブサイト上のユーザーを認証しています。ユ...
から 2024-04-02 15:32:42
0
1
367
Postman を使用して登録機能をテストするためにリクエスト本文を入力できない *修正済み* 私は、ユーザーが登録、ログイン、投稿の作成、プロフィールと投稿の編集、投稿の削除、自分自身の完全な削除ができる、非常にシンプルなソーシャル メディア アプリケーションを開発していま...
から 2024-04-01 10:09:37
0
1
348
有効な電子メールアドレスにもかかわらず、JavaScript を使用した電子メール検証が機能しない htmlとjavascriptを使用して「ログイン」用と「登録」用の2つのフォームを作成しています。 JavaScript を使用して、フォームへの入力が有効かどうかを確認していま...
から 2024-03-30 14:49:34
0
1
333
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート