How to implement CAPTCHA login by Vue

In this article Xiaobian for you to introduce in detail "Vue how to achieve CAPTCHA login", the content is detailed, the steps are clear, the details are handled properly, I hope this "Vue how to achieve CAPTCHA login" article can help you solve your doubts, following the editor's ideas slowly in-depth, let's learn new knowledge.

Effect display

Step 1: create a CAPTCHA component

Here is the code of the component. You can name the file name yourself. I will name it SIdentify.vue here.

Export default {name: "SIdentify", props: {identifyCode: {type: String, default: '1234'}, fontSizeMin: {type: Number, default: 25}, fontSizeMax: {type: Number Default: 30}, backgroundColorMin: {type: Number, default: 255}, backgroundColorMax: {type: Number, default: 255}, colorMin: {type: Number Default: 0}, colorMax: {type: Number, default: 160}, lineColorMin: {type: Number, default: 100}, lineColorMax: {type: Number Default: 255}, dotColorMin: {type: Number, default: 0}, dotColorMax: {type: Number, default: 255}, contentWidth: {type: Number Default: 112}, contentHeight: {type: Number, default: 31}}, methods: {/ / generate a random number randomNum (min Max) {return Math.floor (Math.random () * (max-min) + min)}, / / generate a random color randomColor (min, max) {let r = this.randomNum (min, max) let g = this.randomNum (min, max) let b = this.randomNum (min) Max) return 'rgb (' + r +','+ g +','+ b +')'} DrawPic () {let canvas = document.getElementById ('smurcanvasa') let ctx = canvas.getContext ('2d') ctx.textBaseline =' bottom' / / drawing background ctx.fillStyle = this.randomColor (this.backgroundColorMin, this.backgroundColorMax) ctx.fillRect (0,0, this.contentWidth This.contentHeight) / / draw text for (let I = 0 I < this.identifyCode.length This.drawText (ctx, this.identifyCode [I], I)} this.drawLine (ctx) this.drawDot (ctx)}, drawText (ctx, txt, I) {ctx.fillStyle = this.randomColor (this.colorMin) This.colorMax) ctx.font = this.randomNum (this.fontSizeMin, this.fontSizeMax) +'px SimHei' let x = (I + 1) * (this.contentWidth / (this.identifyCode.length + 1)) let y = this.randomNum (this.fontSizeMax, this.contentHeight-5) var deg = this.randomNum (- 45) 45) / / modify coordinate origin and rotation angle ctx.translate (x, y) ctx.rotate (deg * Math.PI / 180) ctx.fillText (txt, 0 0) / / restore coordinate origin and rotation angle ctx.rotate (- deg * Math.PI / 180) ctx.translate (- x,-y)}, drawLine (ctx) {/ / draw interference line for (let I = 0) I < 5 ) {ctx.strokeStyle = this.randomColor (this.lineColorMin, this.lineColorMax) ctx.beginPath () ctx.moveTo (this.randomNum (0, this.contentWidth), this.randomNum (0, this.contentHeight)) ctx.lineTo (this.randomNum (0, this.contentWidth), this.randomNum (0) This.contentHeight)) ctx.stroke ()}, drawDot (ctx) {/ / drawing interference points for (let I = 0) I < 80 This.randomColor +) {ctx.fillStyle = this.randomColor (0255) ctx.beginPath () ctx.arc (this.randomNum (0, this.contentWidth), this.randomNum (0, this.contentHeight), 1, 0, 2 * Math.PI) ctx.fill ()} Watch: {identifyCode () {this.drawPic ()}}, mounted () {this.drawPic ()}} .s-canvas {height: 38px }. S-canvas canvas {margin-top: 1px; margin-left: 8px;} step 2: introduce the CAPTCHA component and register for use

Here, the value of identifyCode in data is the value of the generated verification code, which can be used to perform logical operations on its own. In fact, the SIdentify component is only used to display the verification code picture, so you can log in as a pseudo mobile verification code without this component.

/ / introduce login authentication component import SIdentify from "@ / components/SIdentify" Export default {name: "SIdentify", components: {SIdentify}, data () {return {identifyCode: ", / / password login graphic verification code identifyCodes:" 1234567890abcdefghizklmnopqrstuvwxyz ", / / basis for generating graphic verification code}} Methods: {/ / Refresh CAPTCHA refreshIdentifyCode () {this.identifyCode = "" This.makeIdentifyCode (4);}, / / generate a 4-digit random verification code makeIdentifyCode (l) {for (let I = 0; I < l; iCAP +) {this.identifyCode + = this.identifyCodes [this.randomNum (0, this.identifyCodes.length)] }}, / / generate a single CAPTCHA randomNum (min, max) {return Math.floor (Math.random () * (max-min) + min);},}, mounted () {/ / initialize CAPTCHA this.identifyCode = " This.makeIdentifyCode (4);},}, read here, this article "how to achieve CAPTCHA login" article has been introduced, want to master the knowledge of this article also need everyone to practice and use in order to understand, if you want to know more related articles, welcome to follow the industry information channel.