一、 安裝擴(kuò)展包
composer require gregwar/captcha
二、定義路由
//路由分組
Route::group(['prefix'=>'admin','namespace'=>'Admin'],function (){
//登錄顯示 name給路由起一個(gè)別名
Route::get('login','LoginController@index')->name('admin.login');
//登錄方法 name給路由起一個(gè)別名
Route::post('login','LoginController@login')->name('admin.login');
//定義圖形驗(yàn)證碼路由
Route::get('img_code','CommonController@imgCode')->name('admin.img_code');
});
三、 生成圖形驗(yàn)證碼類
?php
namespace App\Http\Controllers\Admin;
use App\Http\Controllers\Controller;
use Carbon\Carbon;
use Gregwar\Captcha\CaptchaBuilder;
use Gregwar\Captcha\PhraseBuilder;
class CommonController extends Controller
{
//驗(yàn)證碼
public function imgCode()
{
$phrase = new PhraseBuilder;
// 設(shè)置驗(yàn)證碼位數(shù)
$code = $phrase->build(4);
// 生成驗(yàn)證碼圖片的Builder對(duì)象，配置相應(yīng)屬性
$builder = new CaptchaBuilder($code, $phrase);
// 設(shè)置背景顏色25,25,112
$builder->setBackgroundColor(34, 0, 45);
// 設(shè)置傾斜角度
$builder->setMaxAngle(25);
// 設(shè)置驗(yàn)證碼后面最大行數(shù)
$builder->setMaxBehindLines(10);
// 設(shè)置驗(yàn)證碼前面最大行數(shù)
$builder->setMaxFrontLines(10);
// 設(shè)置驗(yàn)證碼顏色
$builder->setTextColor(230, 81, 175);
// 可以設(shè)置圖片寬高及字體
$builder->build($width = 150, $height = 40, $font = null);
// 獲取驗(yàn)證碼的內(nèi)容
$phrase = $builder->getPhrase();
// 把內(nèi)容存入 cache，10分鐘后過期
$client_id = md5( rand(1,1000).time());
\Cache::put($client_id, $phrase, Carbon::now()->addMinutes(10));
// 組裝接口數(shù)據(jù)
$data = [
'client' => $client_id,
'captcha' => $builder->inline(),
];
return $data;
}
}
四、接口調(diào)用
script>
//頁面加載完畢事件
$(function(){
getCaptCha();
});
//獲取圖形驗(yàn)證碼的方法
var getCaptCha = function (){
$.ajax({
url:"{{route('admin.img_code')}}",
success(res){
$("#client").val(res.client);
$("#img_code").attr('src',res.captcha);
}
})
}
/script>
五、頁面展現(xiàn)
input type="hidden" id="client" name="client" >
div class="row cl">
div class="formControls col-xs-8 col-xs-offset-3">
input name="captcha" class="input-text size-L" type="text" placeholder="驗(yàn)證碼" onblur="if(this.value==''){this.value='驗(yàn)證碼:'}" onclick="if(this.value=='驗(yàn)證碼:'){this.value='';}" value="" style="width:150px;">
img id="img_code" src="" onclick="getCaptCha()"> a id="kanbuq" onclick="getCaptCha()" href="javascript:;" rel="external nofollow" >看不清，換一張/a> /div>
/div>
前臺(tái)頁面實(shí)現(xiàn)效果：
六、后臺(tái)登錄接口進(jìn)行校驗(yàn)驗(yàn)證碼是否正確
//登錄方法
public function login(Request $request)
{
//接收所有參數(shù)
$params = $request->all();
//取出驗(yàn)證碼是否一致
$captcha = \Cache::get($params['client']);
if ($params['captcha'] != $captcha){
return redirect(route('admin.login'))->withErrors(['error' => '驗(yàn)證碼錯(cuò)誤']);
}
}
到此這篇關(guān)于Laravel8 使用圖形驗(yàn)證碼做登錄的文章就介紹到這了,更多相關(guān)Laravel圖形驗(yàn)證碼內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:- Laravel5.2使用Captcha生成驗(yàn)證碼實(shí)現(xiàn)登錄（session巨坑）
- 用Laravel Sms實(shí)現(xiàn)laravel短信驗(yàn)證碼的發(fā)送的實(shí)現(xiàn)
- laravel中短信發(fā)送驗(yàn)證碼的實(shí)現(xiàn)方法
- Laravel下生成驗(yàn)證碼的類
- 使用 laravel sms 構(gòu)建短信驗(yàn)證碼發(fā)送校驗(yàn)功能
- laravel5.4生成驗(yàn)證碼的代碼
- laravel5.4生成驗(yàn)證碼的實(shí)例講解
