当前位置：网站首页>Develop two modes of BS mode verification code with VFP to make your website more secure
Develop two modes of BS mode verification code with VFP to make your website more secure
2022-06-25 11:42:00 【VFP of Garfield】
The verification code on the website is usually placed on the login or registration page . Its role is to protect website security , Generally, websites have to use CAPTCHA to prevent large-scale machine registration , Machine violence to crack data passwords and other hazards .
Despite the existence of verification code , Login becomes a little more difficult , But for website security , This function is still necessary .
We make use of VFP Qiyou framework development BS Website , There will also be such problems , So for website security , We also need to add a verification code to the web page we develop .
Library and tool descriptions ：
front end ：vue+axios Back end ：VFP Qiyou three-tier development framework
Add verification code to the website , There are two ways ： The front end generates the front end judgment ; Back end generates back-end judgment . Next, let's elaborate on .
The first one is ： Generate verification code at the front of the page , Judge before submitting data .
When you submit the form , To prevent automatic program submission , Generally, verification code is provided , stay Form Of submit Pre use to detect whether the verification code is correct in advance . In this way, if the input verification code is consistent with the pre generated verification code , Data submission is allowed , Otherwise, data submission is not allowed . In a certain program, it avoids the malicious submission of data by users and increases the burden on the server .
Implementation steps ： When the page loads , Through the front end JS Load the verification code picture . The following is the specific implementation of the core code .
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/vue.min.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/jsyzm.js"></script>
<style type="text/css">
body,html {width: 100%;text-align: center;}
#picyzm {width: 100px;height: 40px;display: inline;line-height: 40px;margin: 0 0 0 0px;}
#code_input {width: 120px;height: 40px;display: inline;line-height: 40px;margin: 0 0 0 0px;font-size:24px;}
#btn {margin: 0px;background-color: blue;color: #fff;border-radius: 5px;border: 0;width: 100px;height: 40px;dispaly:inline;}
img{margin:0px;padding:0px;height: 40px;display: inline;line-height: 40px;cursor:hand;}
</style>
</head>
<body>
<!— Omitted here form Inside user name And password Part of the code -->
<div id="app">
<input type="text" id="code_input" v-model:value="cYZM" placeholder=" Enter the verification code in this box ">
<div id="picyzm" ></div>
<input type="button" value=" verification " id="btn" v-on:click="toCX"> </div>
<script>
var vm = new Vue({
el: "#app",
data: {
cYZM: "",
verifyCode:""
},
mounted:function(){
// Initialization captcha
this.verifyCode = new GVerify({
id : "picyzm",
type : "blend"
});
},
methods: {
toCX: function() {
var res = this.verifyCode.validate(this.cYZM);
if (!res){ alert(' Verification code error ') }
else {alert(' Verification passed ')}
},
}
})
</script>
</body>
</html>
2 Generate verification code JS The code base （JSYZM.js） Do not rely on JQuery
Be careful options Object's type The types that properties can accept （ Default type of graphic verification code blend: Alphanumeric mix type 、number: Pure number 、letter: Pure letter ）
!(function(window, document) {
function GVerify(options) { // Create a graphic captcha object , receive options Object as parameter
this.options = { // Default options Parameter values
id: "", // Containers Id
canvasId: "verifyCanvas", // canvas Of ID
width: "100", // Default canvas Width
height: "30", // Default canvas Height
type: "blend", // Default type of graphic verification code blend: Alphanumeric mix type 、number: Pure number 、letter: Pure letter
code: ""
}
if(Object.prototype.toString.call(options) == "[object Object]"){// Determine the type of the incoming parameter
for(var i in options) { // According to the parameters passed in , Change the default parameter value
this.options[i] = options[i];
}
}else{
this.options.id = options;
}
this.options.numArr = "0,1,2,3,4,5,6,7,8,9".split(",");
this.options.letterArr = getAllLetter();
this._init();
this.refresh();
}
GVerify.prototype = {
/** Version number * */
version: '1.0.0',
/** Initialization method * */
_init: function() {
var con = document.getElementById(this.options.id);
var canvas = document.createElement("canvas");
this.options.width = con.offsetWidth > 0 ? con.offsetWidth : "100";
this.options.height = con.offsetHeight > 0 ? con.offsetHeight : "30";
canvas.id = this.options.canvasId;
canvas.width = this.options.width;
canvas.height = this.options.height;
canvas.style.cursor = "pointer";
canvas.innerHTML = " Your browser version does not support canvas";
con.appendChild(canvas);
var parent = this;
canvas.onclick = function(){
parent.refresh();
}
},
/** Generate verification code * */
refresh: function() {
this.options.code = "";
var canvas = document.getElementById(this.options.canvasId);
if(canvas.getContext) {
var ctx = canvas.getContext('2d');
}else{
return;
}
ctx.textBaseline = "middle";
ctx.fillStyle = randomColor(180, 240);
ctx.fillRect(0, 0, this.options.width, this.options.height);
if(this.options.type == "blend") { // Determine the type of verification code
var txtArr = this.options.numArr.concat(this.options.letterArr);
} else if(this.options.type == "number") {
var txtArr = this.options.numArr;
} else {
var txtArr = this.options.letterArr;
}
for(var i = 1; i <= 4; i++) {
var txt = txtArr[randomNum(0, txtArr.length)];
this.options.code += txt;
ctx.font = randomNum(this.options.height/2, this.options.height) + 'px SimHei'; // Randomly generate font size
ctx.fillStyle = randomColor(50, 160); // Randomly generate font colors
ctx.shadowOffsetX = randomNum(-3, 3);
ctx.shadowOffsetY = randomNum(-3, 3);
ctx.shadowBlur = randomNum(-3, 3);
ctx.shadowColor = "rgba(0, 0, 0, 0.3)";
var x = this.options.width / 5 * i;
var y = this.options.height / 2;
var deg = randomNum(-30, 30);
/** Set the rotation angle and coordinate origin * */
ctx.translate(x, y);
ctx.rotate(deg * Math.PI / 180);
ctx.fillText(txt, 0, 0);
/** Restore rotation angle and coordinate origin * */
ctx.rotate(-deg * Math.PI / 180);
ctx.translate(-x, -y);
}
/** Draw interference line * */
for(var i = 0; i < 4; i++) {
ctx.strokeStyle = randomColor(40, 180);
ctx.beginPath();
ctx.moveTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.lineTo(randomNum(0, this.options.width), randomNum(0, this.options.height));
ctx.stroke();
}
/** Plot interference point * */
for(var i = 0; i < this.options.width/4; i++) {
ctx.fillStyle = randomColor(0, 255);
ctx.beginPath();
ctx.arc(randomNum(0, this.options.width), randomNum(0, this.options.height), 1, 0, 2 * Math.PI);
ctx.fill();
}
},
/** Verification code * */
validate: function(code){
var code = code.toLowerCase();
var v_code = this.options.code.toLowerCase();
if(code == v_code){
return true;
}else{
return false;
}
}
}
/** Generate an array of letters * */
function getAllLetter() {
var letterStr = "a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z";
return letterStr.split(",");
}
/** Generate a random number * */
function randomNum(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/** Generate a random color * */
function randomColor(min, max) {
var r = randomNum(min, max);
var g = randomNum(min, max);
var b = randomNum(min, max);
return "rgb(" + r + "," + g + "," + b + ")";
}
window.GVerify = GVerify;
})(window, document);
Such verification code , Build on the front end , Front end judgment , Simple and clear , But there are disadvantages . If you bypass the login page , Directly initiate login detection , At this time, the verification code is in an invalid state , The server is still vulnerable to malicious attacks .
The second kind ： Generate verification code at the back end , Front end display , When submitting data, the backend will break the verification code .
Implementation steps ： Front page rendering , Call the verification code image generated in the background , Display at front end , Submit to the background for judgment . Note that this verification code has a problem of judging the timeliness .
The code is as follows
1 Web page file (login4.html)
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="./js/vue.min.js"></script>
<script src="./js/axios.js"></script>
<style type="text/css">
body,html {width: 100%;text-align: center;}
#txt {display: inline; }
#picyzm {width: 100px;height: 40px;display: inline;line-height: 40px;margin: 0 0 0 0px;}
#code_input {width: 120px;height: 40px;display: inline;line-height: 40px;margin: 0 0 0 0px;font-size:24px;}
#btn {margin: 0px;background-color: blue;color: #fff;border-radius: 5px;border: 0;width: 100px;height: 40px;dispaly:inline;}
img{margin:0px;padding:0px;height: 40px;display: inline;line-height: 40px;cursor:hand;}
</style>
</head>
<body>
<div id="app"><div id="txt"> Please enter the verification code ：</div>
<input type="text" id="code_input" v-model="cYZM" placeholder='' titlw=" Enter verification code ">
<img id="picyzm" v-bind:src="imgsrc" @click='changebmp' title=' Click Replace verification code '>
<input type="button" value=" verification " id="btn" @click="toCX">
</div>
</body>
</html>
<script>
var vm = new Vue({
el: "#app",
data: {
yoururl:'http://192.168.0.105:801/',
imgsrc: '',
cYZM: '',
verifyCode:'',
imgcs: {
// yzmstr: '',
// yzmwidth: 4,
// yzmheight: 1.2,
// yzmfont: '',
// yzmpath: ''
},
},
mounted: function() {
this.changebmp()
},
methods: {
toCX: function() {
if(this.cYZM==null|| this.cYZM==''||this.cYZM==undefined){
alert(null)
return
}
var that=this
axios.get(that.$data.yoururl+'makeyzm.fsp?proc=checkyzm',{params:{key:that.$data.cYZM}})
.then(function(res){ alert(res.data) })
.catch(function(res){ alert(res.data) })
},
changebmp:function(){
var that = this;
axios.get(that.$data.yoururl+'makeyzm.fsp',{params:{}})
.then(function(res) {that.$data.imgsrc = res.data })
.catch(function(res) {console.log('error:')
console.log(res)
})
}
}
})
</script>
2 VFP Back end processing files (makeyzm.prg)
It uses a lblAutoSize function , Convert text to characters .
DEFINE CLASS makeyzm as session
*********** following one two Create a directory under the directory of the website yzmimg
*********start of one *********
protected subpath
subpath="yzmimg"
*********end of one ***********
*********start of two *********
PROCEDURE init
LOCAL sp
sp=getwwwrootpath(this.subpath)
IF NOT DIRECTORY(sp) THEN
mkdir("&sp")
ENDIF
ENDPROC
*********end of two ***********
*********** If there is a directory under the root directory of the website yzmimg Deleting two part
PROCEDURE ondefault
RETURN this.lblAutoSize()
ENDPROC
*** Save verification code
PROCEDURE saveyzm
PARAMETERS lyzm
SELECT 0
USE zyzm
APPEND BLANK
REPLACE cyzm WITH lyzm
REPLACE yzmdt WITH DATETIME()
USE IN SELECT('zyzm')
ENDPROC
*** Verification code
PROCEDURE checkyzm
PRIVATE yzmtext,result
yzmtext=httpqueryparams("key")
SELECT 0
USE zyzm
LOCATE FOR ALLTRIM(cyzm)==ALLTRIM(yzmtext) AND (DATETIME()-yzmdt)/60<5
IF FOUND()
result=' The verification code is entered correctly '
ELSE
result=' The verification period is expired or the verification code is entered incorrectly , Please click the verification code to refresh '
ENDIF
USE IN SELECT('zyzm')
RETURN result
ENDPROC
Need source code , Please pay attention to “ Garfield's VFP” official account , Input YZM You can get the download link .
More information :http://www.sn58.cn
边栏推荐
- Detailed explanation of spark specification
- How to realize the rich text editor function of mobile terminal
- Shichuang energy rushes to the scientific innovation board: it plans to raise 1.1 billion yuan, with an annual revenue of 700million yuan and a 36% decrease in net profit
- Arrays. asList()
- Comparison between relu and SIGMOD
- C disk uses 100% cleaning method
- Under what circumstances will Flink combine operator chains to form operator chains?
- Recommend a virtual machine software available for M1 computer
- Kingbasees plug-in DBMS of Jincang database_ UTILITY
- What are the ways to simulate and burn programs? (including common tools and usage)
猜你喜欢
Detailed explanation of Flink checkpoint specific operation process and summary of error reporting and debugging methods
Niuke: rotation array
Evaluating the overall situation of each class in a university based on entropy weight method (formula explanation + simple tool introduction)
Manually rollback abnormal data
SQL injection vulnerability (type chapter)
TCP如何处理三次握手和四次挥手期间的异常
金太阳教育美股上市：市值3.6亿美元 成小盘中概股
Source code analysis of AQS & reentrantlock
Eureka accesses the console and reports an error: whitelabel error page
Specific meanings of node and edge in Flink graph
随机推荐
SMS verification before deleting JSP
Where do the guests come from
PHP如何提取字符串中的图片地址
Semaphore source code analysis
How TCP handles exceptions during three handshakes and four waves
Customize to prevent repeated submission of annotations (using redis)
時創能源沖刺科創板：擬募資11億 年營收7億淨利反降36%
JSON format processing
Data Lake survey
Jincang database kingbasees plug-in force_ view
.Net Core 中使用工厂模式
Source code analysis of AQS & reentrantlock
Niuke: rotation array
How PHP extracts image addresses from strings
Idea uses the fast request interface for debugging
Handler、Message、Looper、MessageQueue
Sword finger offer II 091 Painting house: application of state machine DP
Design and implementation of university laboratory goods management information system based on SSH
如何实现移动端富文本编辑器功能
Sentinel integrated Nacos data source