站長資訊網下面thinkphp框架教程欄目將給大家介紹tp6+vue-element-admin 制作后臺登錄驗證碼，希望對需要的朋友有所幫助！
tp6+vue-element-admin 制作后臺登錄驗證碼
此處tp6為多應用模式
安裝驗證碼擴展
composer require topthink/think-captcha
在擴展里面找到 Captcha.php
->[此處為我修改過后的代碼]
-
因為之前是session驅動，但是我項目是前后端分離的，所以要改成cache驅動，增加use Cache,然后將所Session相關的都改為Cache
-
有個要注意的地方 就是 check方法，已經在代碼處做了注釋
<?php // +---------------------------------------------------------------------- // | ThinkPHP [ WE CAN DO IT JUST THINK ] // +---------------------------------------------------------------------- // | Copyright (c) 2006-2015 http://thinkphp.cn All rights reserved. // +---------------------------------------------------------------------- // | Licensed ( http://www.apache.org/licenses/LICENSE-2.0 ) // +---------------------------------------------------------------------- // | Author: yunwuxin <448901948@qq.com> // +---------------------------------------------------------------------- namespace thinkcaptcha; use Exception; use thinkConfig; use thinkfacadeLog; use thinkResponse; use thinkSession; use thinkCache; class Captcha { private $im = null; // 驗證碼圖片實例 private $color = null; // 驗證碼字體顏色 /** * @var Config|null */ private $config = null; /** * @var Session|null */ private $cache = null; // 驗證碼字符集合 protected $codeSet = '2345678abcdefhijkmnpqrstuvwxyzABCDEFGHJKLMNPQRTUVWXY'; // 驗證碼過期時間（s） protected $expire = 1800; // 使用中文驗證碼 protected $useZh = false; // 中文驗證碼字符串 protected $zhSet = '們以我到他會作時要動國產的一是工就年階義發成部民可出能方進在了不和有大這主中人上為來分生對于學下級地個用同行面說種過命度革而多子后自社加小機也經力線本電高量長黨得實家定深法表著水理化爭現所二起政三好十戰無農使性前等反體合斗路圖把結第里正新開論之物從當兩些還天資事隊批點育重其思與間內去因件日利相由壓員氣業代全組數果期導平各基或月毛然如應形想制心樣干都向變關問比展那它最及外沒看治提五解系林者米群頭意只明四道馬認次文通但條較克又公孔領軍流入接席位情運器并飛原油放立題質指建區驗活眾很教決特此常石強極土少已根共直團統式轉別造切九你取西持總料連任志觀調七么山程百報更見必真保熱委手改管處己將修支識病象幾先老光專什六型具示復安帶每東增則完風回南廣勞輪科北打積車計給節做務被整聯步類集號列溫裝即毫知軸研單色堅據速防史拉世設達爾場織歷花受求傳口斷況采精金界品判參層止邊清至萬確究書術狀廠須離再目海交權且兒青才證低越際八試規斯近注辦布門鐵需走議縣兵固除般引齒千勝細影濟白格效置推空配刀葉率述今選養德話查差半敵始片施響收華覺備名紅續均藥標記難存測士身緊液派準斤角降維板許破述技消底床田勢端感往神便賀村構照容非搞亞磨族火段算適講按值美態黃易彪服早班麥削信排臺聲該擊素張密害侯草何樹肥繼右屬市嚴徑螺檢左頁抗蘇顯苦英快稱壞移約巴材省黑武培著河帝僅針怎植京助升王眼她抓含苗副雜普談圍食射源例致酸舊卻充足短劃劑宣環落首尺波承粉踐府魚隨考刻靠夠滿夫失包住促枝局菌桿周護巖師舉曲春元超負砂封換太模貧減陽揚江析畝木言球朝醫校古呢稻宋聽唯輸滑站另衛字鼓剛寫劉微略范供阿塊某功套友限項余倒卷創律雨讓骨遠幫初皮播優占死毒圈偉季訓控激找叫云互跟裂糧粒母練塞鋼頂策雙留誤礎吸阻故寸盾晚絲女散焊功株親院冷徹彈錯散商視藝滅版烈零室輕血倍缺厘泵察絕富城沖噴壤簡否柱李望盤磁雄似困鞏益洲脫投送奴側潤蓋揮距觸星松送獲興獨官混紀依未突架寬冬章濕偏紋吃執閥礦寨責熟穩奪硬價努翻奇甲預職評讀背協損棉侵灰雖矛厚羅泥辟告卵箱掌氧恩愛停曾溶營終綱孟錢待盡俄縮沙退陳討奮械載胞幼哪剝迫旋征槽倒握擔仍呀鮮吧卡粗介鉆逐弱腳怕鹽末陰豐霧冠丙街萊貝輻腸付吉滲瑞驚頓擠秒懸姆爛森糖圣凹陶詞遲蠶億矩康遵牧遭幅園腔訂香肉弟屋敏恢忘編印蜂急拿擴傷飛露核緣游振操央伍域甚迅輝異序免紙夜鄉久隸缸夾念蘭映溝乙嗎儒殺汽磷艱晶插埃燃歡鐵補咱芽永瓦傾陣碳演威附牙芽永瓦斜灌歐獻順豬洋腐請透司危括脈宜笑若尾束壯暴企菜穗楚漢愈綠拖牛份染既秋遍鍛玉夏療尖殖井費州訪吹榮銅沿替滾客召旱悟刺腦措貫藏敢令隙爐殼硫煤迎鑄粘探臨薄旬善福縱擇禮愿伏殘雷延煙句純漸耕跑澤慢栽魯赤繁境潮橫掉錐希池敗船假亮謂托伙哲懷割擺貢呈勁財儀沉煉麻罪祖息車穿貨銷齊鼠抽畫飼龍庫守筑房歌寒喜哥洗蝕廢納腹乎錄鏡婦惡脂莊擦險贊鐘搖典柄辯竹谷賣亂虛橋奧伯趕垂途額壁網截野遺靜謀弄掛課鎮妄盛耐援扎慮鍵歸符慶聚繞摩忙舞遇索顧膠羊湖釘仁音跡碎伸燈避泛亡答勇頻皇柳哈揭甘諾概憲濃島襲誰洪謝炮澆斑訊懂靈蛋閉孩釋乳巨徒私銀伊景坦累勻霉杜樂勒隔彎績招紹胡呼痛峰零柴簧午跳居尚丁秦稍追梁折耗堿殊崗挖氏刃劇堆赫荷胸衡勤膜篇登駐案刊秧緩凸役剪川雪鏈漁啦臉戶洛孢勃盟買楊宗焦賽旗濾硅炭股坐蒸凝竟陷槍黎救冒暗洞犯筒您宋弧爆謬涂味津臂障褐陸啊健尊豆拔莫抵桑坡縫警挑污冰柬嘴啥飯塑寄趙喊墊丹渡耳刨虎筆稀昆浪薩茶滴淺擁穴覆倫娘噸浸袖珠雌媽紫戲塔錘震歲貌潔剖牢鋒疑霸閃埔猛訴刷狠忽災鬧喬唐漏聞沈熔氯荒莖男凡搶像漿旁玻亦忠唱蒙予紛捕鎖尤乘烏智淡允叛畜俘摸銹掃畢璃寶芯爺鑒秘凈蔣鈣肩騰枯拋軌堂拌爸循誘祝勵肯酒繩窮塘燥泡袋朗喂鋁軟渠顆慣貿糞綜墻趨彼屆墨礙啟逆卸航衣孫齡嶺騙休借'; // 使用背景圖片 protected $useImgBg = false; // 驗證碼字體大小(px) protected $fontSize = 25; // 是否畫混淆曲線 protected $useCurve = true; // 是否添加雜點 protected $useNoise = true; // 驗證碼圖片高度 protected $imageH = 0; // 驗證碼圖片寬度 protected $imageW = 0; // 驗證碼位數 protected $length = 5; // 驗證碼字體，不設置隨機獲取 protected $fontttf = ''; // 背景顏色 protected $bg = [243, 251, 254]; //算術驗證碼 protected $math = false; /** * 架構方法 設置參數 * @access public * @param Config $config * @param Session $session */ public function __construct(Config $config, Cache $cache) { $this->config = $config; $this->cache = $cache; } /** * 配置驗證碼 * @param string|null $config */ protected function configure(string $config = null): void { if (is_null($config)) { $config = $this->config->get('captcha', []); } else { $config = $this->config->get('captcha.' . $config, []); } foreach ($config as $key => $val) { if (property_exists($this, $key)) { $this->{$key} = $val; } } } /** * 創建驗證碼 * @return array * @throws Exception */ protected function generate(): array { $bag = ''; if ($this->math) { $this->useZh = false; $this->length = 5; $x = random_int(10, 30); $y = random_int(1, 9); $bag = "{$x} + {$y} = "; $key = $x + $y; $key .= ''; } else { if ($this->useZh) { $characters = preg_split('/(?<!^)(?!$)/u', $this->zhSet); } else { $characters = str_split($this->codeSet); } for ($i = 0; $i < $this->length; $i++) { $bag .= $characters[rand(0, count($characters) - 1)]; } $key = mb_strtolower($bag, 'UTF-8'); } $hash = password_hash($key, PASSWORD_BCRYPT, ['cost' => 10]); $this->cache->set('captcha', [ 'key' => $hash, ]); Log::info($bag); Log::info($hash); return [ 'value' => $bag, 'key' => $hash, ]; } /** * 驗證驗證碼是否正確 * @access public * @param string $code 用戶驗證碼 * @return bool 用戶驗證碼是否正確 */ public function check(string $code): bool { if (!$this->cache->has('captcha')) { return false; } // $key = $this->cache->get('captcha.key'); //改為cache以后，是數組，不是對象，所以不能這么取值 $key1 = $this->cache->get('captcha'); $key = $key1['key']; Log::info($key); $code = mb_strtolower($code, 'UTF-8'); // Log::info($code); $res = password_verify($code, $key); if ($res) { $this->cache->delete('captcha'); } return $res; } /** * 輸出驗證碼并把驗證碼的值保存的session中 * @access public * @param null|string $config * @param bool $api * @return Response */ public function create(string $config = null, bool $api = false): Response { $this->configure($config); $generator = $this->generate(); // 圖片寬(px) $this->imageW || $this->imageW = $this->length * $this->fontSize * 1.5 + $this->length * $this->fontSize / 2; // 圖片高(px) $this->imageH || $this->imageH = $this->fontSize * 2.5; // 建立一幅 $this->imageW x $this->imageH 的圖像 $this->im = imagecreate($this->imageW, $this->imageH); // 設置背景 imagecolorallocate($this->im, $this->bg[0], $this->bg[1], $this->bg[2]); // 驗證碼字體隨機顏色 $this->color = imagecolorallocate($this->im, mt_rand(1, 150), mt_rand(1, 150), mt_rand(1, 150)); // 驗證碼使用隨機字體 $ttfPath = __DIR__ . '/../assets/' . ($this->useZh ? 'zhttfs' : 'ttfs') . '/'; if (empty($this->fontttf)) { $dir = dir($ttfPath); $ttfs = []; while (false !== ($file = $dir->read())) { if ('.' != $file[0] && substr($file, -4) == '.ttf') { $ttfs[] = $file; } } $dir->close(); $this->fontttf = $ttfs[array_rand($ttfs)]; } $fontttf = $ttfPath . $this->fontttf; if ($this->useImgBg) { $this->background(); } if ($this->useNoise) { // 繪雜點 $this->writeNoise(); } if ($this->useCurve) { // 繪干擾線 $this->writeCurve(); } // 繪驗證碼 $text = $this->useZh ? preg_split('/(?<!^)(?!$)/u', $generator['value']) : str_split($generator['value']); // 驗證碼 foreach ($text as $index => $char) { $x = $this->fontSize * ($index + 1) * mt_rand(1.2, 1.6) * ($this->math ? 1 : 1.5); $y = $this->fontSize + mt_rand(10, 20); $angle = $this->math ? 0 : mt_rand(-40, 40); imagettftext($this->im, $this->fontSize, $angle, $x, $y, $this->color, $fontttf, $char); } ob_start(); // 輸出圖像 imagepng($this->im); $content = ob_get_clean(); imagedestroy($this->im); return response($content, 200, ['Content-Length' => strlen($content)])->contentType('image/png'); } /** * 畫一條由兩條連在一起構成的隨機正弦函數曲線作干擾線(你可以改成更帥的曲線函數) * * 高中的數學公式咋都忘了涅，寫出來 * 正弦型函數解析式：y=Asin(ωx+φ)+b * 各常數值對函數圖像的影響： * A：決定峰值（即縱向拉伸壓縮的倍數） * b：表示波形在Y軸的位置關系或縱向移動距離（上加下減） * φ：決定波形與X軸位置關系或橫向移動距離（左加右減） * ω：決定周期（最小正周期T=2π/∣ω∣） * */ protected function writeCurve(): void { $px = $py = 0; // 曲線前部分 $A = mt_rand(1, $this->imageH / 2); // 振幅 $b = mt_rand(-$this->imageH / 4, $this->imageH / 4); // Y軸方向偏移量 $f = mt_rand(-$this->imageH / 4, $this->imageH / 4); // X軸方向偏移量 $T = mt_rand($this->imageH, $this->imageW * 2); // 周期 $w = (2 * M_PI) / $T; $px1 = 0; // 曲線橫坐標起始位置 $px2 = mt_rand($this->imageW / 2, $this->imageW * 0.8); // 曲線橫坐標結束位置 for ($px = $px1; $px <= $px2; $px = $px + 1) { if (0 != $w) { $py = $A * sin($w * $px + $f) + $b + $this->imageH / 2; // y = Asin(ωx+φ) + b $i = (int) ($this->fontSize / 5); while ($i > 0) { imagesetpixel($this->im, $px + $i, $py + $i, $this->color); // 這里(while)循環畫像素點比imagettftext和imagestring用字體大小一次畫出（不用這while循環）性能要好很多 $i--; } } } // 曲線后部分 $A = mt_rand(1, $this->imageH / 2); // 振幅 $f = mt_rand(-$this->imageH / 4, $this->imageH / 4); // X軸方向偏移量 $T = mt_rand($this->imageH, $this->imageW * 2); // 周期 $w = (2 * M_PI) / $T; $b = $py - $A * sin($w * $px + $f) - $this->imageH / 2; $px1 = $px2; $px2 = $this->imageW; for ($px = $px1; $px <= $px2; $px = $px + 1) { if (0 != $w) { $py = $A * sin($w * $px + $f) + $b + $this->imageH / 2; // y = Asin(ωx+φ) + b $i = (int) ($this->fontSize / 5); while ($i > 0) { imagesetpixel($this->im, $px + $i, $py + $i, $this->color); $i--; } } } } /** * 畫雜點 * 往圖片上寫不同顏色的字母或數字 */ protected function writeNoise(): void { $codeSet = '2345678abcdefhijkmnpqrstuvwxyz'; for ($i = 0; $i < 10; $i++) { //雜點顏色 $noiseColor = imagecolorallocate($this->im, mt_rand(150, 225), mt_rand(150, 225), mt_rand(150, 225)); for ($j = 0; $j < 5; $j++) { // 繪雜點 imagestring($this->im, 5, mt_rand(-10, $this->imageW), mt_rand(-10, $this->imageH), $codeSet[mt_rand(0, 29)], $noiseColor); } } } /** * 繪制背景圖片 * 注：如果驗證碼輸出圖片比較大，將占用比較多的系統資源 */ protected function background(): void { $path = __DIR__ . '/../assets/bgs/'; $dir = dir($path); $bgs = []; while (false !== ($file = $dir->read())) { if ('.' != $file[0] && substr($file, -4) == '.jpg') { $bgs[] = $path . $file; } } $dir->close(); $gb = $bgs[array_rand($bgs)]; list($width, $height) = @getimagesize($gb); // Resample $bgImage = @imagecreatefromjpeg($gb); @imagecopyresampled($this->im, $bgImage, 0, 0, 0, 0, $this->imageW, $this->imageH, $width, $height); @imagedestroy($bgImage); } }
vue-elemen-admin
login/index.vue
<template> <div> <el-form ref="loginForm" :model="loginForm" :rules="loginRules" autocomplete="on" label-position="left"> <div> <h3>Login Form</h3> </div> <el-form-item prop="username"> <span> <svg-icon icon-class="user" /> </span> <el-input ref="username" v-model="loginForm.username" placeholder="Username" name="username" type="text" tabindex="1" autocomplete="on" /> </el-form-item> <el-tooltip v-model="capsTooltip" content="Caps lock is On" placement="right" manual> <el-form-item prop="password"> <span> <svg-icon icon-class="password" /> </span> <el-input :key="passwordType" ref="password" v-model="loginForm.password" :type="passwordType" placeholder="Password" name="password" tabindex="2" autocomplete="on" @keyup.native="checkCapslock" @blur="capsTooltip = false" @keyup.enter.native="handleLogin" /> <span @click="showPwd"> <svg-icon :icon-class="passwordType === 'password' ? 'eye' : 'eye-open'" /> </span> </el-form-item> </el-tooltip> <el-form-item prop="captcha" style="width:280px"> <el-input ref="captcha" v-model="loginForm.captcha" placeholder="驗證碼" name="captcha" type="text" tabindex="1" autocomplete="on" > </el-input> </el-form-item> <img :src="imgcode" @click="captchas" > <el-button :loading="loading" type="primary" style="width:100%;margin-bottom:30px;" @click.native.prevent="handleLogin">Login</el-button> </el-form> <el-dialog title="Or connect with" :visible.sync="showDialog"> Can not be simulated on local, so please combine you own business simulation! ! ! <br> <br> <br> <social-sign /> </el-dialog> </div> </template> <script> // import { } from '@/api/user' import { validUsername } from '@/utils/validate' import SocialSign from './components/SocialSignin' export default { name: 'Login', components: { SocialSign }, data() { const validateUsername = (rule, value, callback) => { if (!validUsername(value)) { callback(new Error('Please enter the correct user name')) } else { callback() } } const validatePassword = (rule, value, callback) => { if (value.length < 6) { callback(new Error('The password can not be less than 6 digits')) } else { callback() } } return { loginForm: { username: 'admin', password: '222222', captcha:'' }, loginRules: { username: [{ required: true, trigger: 'blur', validator: validateUsername }], password: [{ required: true, trigger: 'blur', validator: validatePassword }], captcha: [{ required: true,trigger: 'blur'}] }, passwordType: 'password', capsTooltip: false, loading: false, showDialog: false, redirect: undefined, otherQuery: {}, imgcode:'' } }, watch: { $route: { handler: function(route) { const query = route.query if (query) { this.redirect = query.redirect this.otherQuery = this.getOtherQuery(query) } }, immediate: true } }, created() { this.captchas() }, mounted() { if (this.loginForm.username === '') { this.$refs.username.focus() } else if (this.loginForm.password === '') { this.$refs.password.focus() } }, destroyed() { }, methods: { checkCapslock(e) { const { key } = e this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z') }, showPwd() { if (this.passwordType === 'password') { this.passwordType = '' } else { this.passwordType = 'password' } this.$nextTick(() => { this.$refs.password.focus() }) }, handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true console.log(this.loginForm) this.$store.dispatch('user/login', this.loginForm) .then(() => { this.$router.push({ path: this.redirect || '/', query: this.otherQuery }) this.loading = false }) .catch(() => { this.loading = false }) } else { console.log('error submit!!') return false } }) }, getOtherQuery(query) { return Object.keys(query).reduce((acc, cur) => { if (cur !== 'redirect') { acc[cur] = query[cur] } return acc }, {}) }, captchas(){ this.imgcode = adminUrl+'/admin/captcha?'+Date.parse(new Date()) } } } </script> <style> /* 修復input 背景不協調 和光標變色 */ /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */ $bg:#283443; $light_gray:#fff; $cursor: #fff; @supports (-webkit-mask: none) and (not (cater-color: $cursor)) { .login-container .el-input input { color: $cursor; } } /* reset element-ui css */ .login-container { .el-input { display: inline-block; height: 47px; width: 85%; input { background: transparent; border: 0px; -webkit-appearance: none; border-radius: 0px; padding: 12px 5px 12px 15px; color: $light_gray; height: 47px; caret-color: $cursor; &:-webkit-autofill { box-shadow: 0 0 0px 1000px $bg inset !important; -webkit-text-fill-color: $cursor !important; } } } .el-form-item { border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(0, 0, 0, 0.1); border-radius: 5px; color: #454545; } } </style> <style scoped> $bg:#2d3a4b; $dark_gray:#889aa4; $light_gray:#eee; .login-container { min-height: 100%; width: 100%; background-color: $bg; overflow: hidden; .login-form { position: relative; width: 520px; max-width: 100%; padding: 160px 35px 0; margin: 0 auto; overflow: hidden; } .tips { font-size: 14px; color: #fff; margin-bottom: 10px; span { &:first-of-type { margin-right: 16px; } } } .svg-container { padding: 6px 5px 6px 15px; color: $dark_gray; vertical-align: middle; width: 30px; display: inline-block; } .title-container { position: relative; .title { font-size: 26px; color: $light_gray; margin: 0px auto 40px auto; text-align: center; font-weight: bold; } } .show-pwd { position: absolute; right: 10px; top: 7px; font-size: 16px; color: $dark_gray; cursor: pointer; user-select: none; } .thirdparty-button { position: absolute; right: 0; bottom: 6px; } @media only screen and (max-width: 470px) { .thirdparty-button { display: none; } } } .picture{ // display: flex; // flex: 1; height: 42px; width: 150px; float: right; margin-top: -65px; } </style>
store/user.js
const actions = { // user login login({ commit }, userInfo) { const { username, password,captcha } = userInfo return new Promise((resolve, reject) => { login({ username: username.trim(), password: password ,captcha:captcha.trim()}).then(response => { const { data } = response commit('SET_TOKEN', data.token) setToken(data.token) resolve() }).catch(error => { reject(error) }) }) },
推薦：《最新的10個thinkphp視頻教程》
