PHPLaravel框架中驗證碼點選無法重新整理
阿新 • • 發佈：2019-01-10
PHPLaravel框架中驗證碼點選無法重新整理
驗證碼無法點選重新整理相容解決方案
關鍵部分
我們先看這段程式碼關鍵部分
<li> <input type="text" class="code" name="code"/> <span><i class="fa fa-check-square-o"></i></span> <img src="{{url('admin/code')}}" alt="" onclick="this.src='{{url('admin/code')}}'"> </li>
這段程式碼在谷歌和360瀏覽器中是可以正常發揮作用的,滑鼠點選驗證碼圖片位置即可重新整理更換驗證碼,而在火狐和相容之星IE瀏覽器中卻怎麼點也無法重新整理.
這是因為瀏覽器認為你點選後,請求地址並沒有變化,所以沒有進行重新整理.
這時候可以新增一個隨機函式在後面,欺騙瀏覽器,讓它覺得每次點選請求地址都不一樣!
修改程式碼如下 ↓
<li> <input type="text" class="code" name="code"/> <span><i class="fa fa-check-square-o"></i></span> <img src="{{url('admin/code')}}" alt="" onclick="this.src='{{url('admin/code')}}?'+Math.random()"> </li>
現在可以相容每個瀏覽器實現點選重新整理驗證碼了!
其他位置配置
routes.php ↓
Route::group(['middleware' => ['web']], function () {
Route::get('/', function () {
return view('welcome');
});
Route::get('admin/login','Admin\[email protected]');
Route::get('admin/code','Admin\[email protected] LoginController.php ↓
<?php
namespace App\Http\Controllers\Admin;
use Illuminate\Http\Request;
use App\Http\Requests;
require_once 'org/code/Code.class.php';
class LoginController extends CommonController
{
public function login()
{
return view('admin.login');
}
public function code()
{
$code = new \Code;
$code->make();
}
public function getcode()
{
$code = new \Code;
echo $code->get();
}
}
login.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="/admin/style/css/ch-ui.admin.css">
<link rel="stylesheet" href="/admin/style/font/css/font-awesome.min.css">
</head>
<body style="background:#F3F3F4;">
<div class="login_box">
<h1>Blog</h1>
<h2>歡迎使用部落格管理平臺</h2>
<div class="form">
<p style="color:red">使用者名稱錯誤</p>
<form action="#" method="post">
<ul>
<li>
<input type="text" name="username" class="text"/>
<span><i class="fa fa-user" value=""></i></span>
</li>
<li>
<input type="password" name="password" class="text"/>
<span><i class="fa fa-lock"></i></span>
</li>
<li>
<input type="text" class="code" name="code"/>
<span><i class="fa fa-check-square-o"></i></span>
<img src="{{url('admin/code')}}" alt="" onclick="this.src='{{url('admin/code')}}?'+Math.random()">
</li>
<li>
<input type="submit" value="立即登陸"/>
</li>
</ul>
</form>
<p><a href="#">返回首頁</a> © 2016 Powered by <a href="http://www.houdunwang.com" target="_blank">http://www.houdunwang.com</a></p>
</div>
</div>
</body>
</html>
二維碼原始碼(模板)
<?php
class Code{
//資源
private $img;
//畫布寬度
private $width=100;
//畫布高度
private $height=30;
//背景顏色
private $bgColor='#ffffff';
//驗證碼
private $code;
//驗證碼的隨機種子
private $codeStr='23456789abcdefghjkmnpqrstuvwsyz';
//驗證碼長度
private $codeLen=4;
//驗證碼字型
private $font;
//驗證碼字型大小
private $fontSize=16;
//驗證碼字型顏色
private $fontColor='';
public function __construct() {
}
//建立驗證碼
public function make()
{
if(empty($this->font))
{
$this->font = __DIR__.'/consola.ttf';
}
$this->create();//生成驗證碼
header("Content-type:image/png");
imagepng($this->img);
imagedestroy($this->img);
exit;
}
//設定字型檔案
public function font($font)
{
$this->font= $font;
return $this;
}
//設定文字大小
public function fontSize($fontSize)
{
$this->fontSize=$fontSize;
return $this;
}
//設定字型顏色
public function fontColor($fontColor)
{
$this->fontColor = $fontColor;
return $this;
}
//驗證碼數量
public function num($num)
{
$this->codeLen=$num;
return $this;
}
//設定寬度
public function width($width)
{
$this->width = $width;
return $this;
}
//設定高度
public function height($height)
{
$this->height = $height;
return $this;
}
//設定背景顏色
public function background($color)
{
$this->bgColor = $color;
return $this;
}
//返回驗證碼
public function get() {
return $_SESSION['code'];
}
//生成驗證碼
private function createCode() {
$code = '';
for ($i = 0; $i < $this->codeLen; $i++) {
$code .= $this->codeStr [mt_rand(0, strlen($this->codeStr) - 1)];
}
$this->code = strtoupper($code);
$_SESSION['code'] = $this->code;
}
//建畫布
private function create() {
if (!$this->checkGD())
return false;
$w = $this->width;
$h = $this->height;
$bgColor = $this->bgColor;
$img = imagecreatetruecolor($w, $h);
$bgColor = imagecolorallocate($img, hexdec(substr($bgColor, 1, 2)), hexdec(substr($bgColor, 3, 2)), hexdec(substr($bgColor, 5, 2)));
imagefill($img, 0, 0, $bgColor);
$this->img = $img;
$this->createLine();
$this->createFont();
$this->createPix();
$this->createRec();
}
//畫線
private function createLine(){
$w = $this->width;
$h = $this->height;
$line_color = "#dcdcdc";
$color = imagecolorallocate($this->img, hexdec(substr($line_color, 1, 2)), hexdec(substr($line_color, 3, 2)), hexdec(substr($line_color, 5, 2)));
$l = $h/5;
for($i=1;$i<$l;$i++){
$step =$i*5;
imageline($this->img, 0, $step, $w,$step, $color);
}
$l= $w/10;
for($i=1;$i<$l;$i++){
$step =$i*10;
imageline($this->img, $step, 0, $step,$h, $color);
}
}
//畫矩形邊框
private function createRec() {
//imagerectangle($this->img, 0, 0, $this->width - 1, $this->height - 1, $this->fontColor);
}
//寫入驗證碼文字
private function createFont() {
$this->createCode();
$color = $this->fontColor;
if (!empty($color)) {
$fontColor = imagecolorallocate($this->img, hexdec(substr($color, 1, 2)), hexdec(substr($color, 3, 2)), hexdec(substr($color, 5, 2)));
}
$x = ($this->width - 10) / $this->codeLen;
for ($i = 0; $i < $this->codeLen; $i++) {
if (empty($color)) {
$fontColor = imagecolorallocate($this->img, mt_rand(50, 155), mt_rand(50, 155), mt_rand(50, 155));
}
imagettftext($this->img, $this->fontSize, mt_rand(- 30, 30), $x * $i + mt_rand(6, 10), mt_rand($this->height / 1.3, $this->height - 5), $fontColor, $this->font, $this->code [$i]);
}
$this->fontColor = $fontColor;
}
//畫線
private function createPix() {
$pix_color = $this->fontColor;
for ($i = 0; $i < 50; $i++) {
imagesetpixel($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), $pix_color);
}
for ($i = 0; $i < 2; $i++) {
imageline($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height), $pix_color);
}
//畫圓弧
for ($i = 0; $i < 1; $i++) {
// 設定畫線寬度
imagearc($this->img, mt_rand(0, $this->width), mt_rand(0, $this->height), mt_rand(0, $this->width), mt_rand(0, $this->height)
, mt_rand(0, 160), mt_rand(0, 200), $pix_color);
}
imagesetthickness($this->img, 1);
}
//驗證GD庫
private function checkGD() {
return extension_loaded('gd') && function_exists("imagepng");
}
}