When you log in, you need to add two-factor authentication, and you need to add a verification code to achieve pure front-end input refresh verification.
Without further ado, go straight to the code!
TS code:
import { Component, ElementRef, ViewChild, OnInit } from '@angular/core'; @Component({ selector: 'app-verify-code', templateUrl: './verify-code.component.html', }) export class VerifyCodeComponent implements OnInit { @ViewChild('verifyCanvas') verifyCanvas: ElementRef; codeLength = 4; Options = {// Default options parameters id: 'v_container', // container ID canvasId: 'verifyCanvas', // Canvas ID width: 100, // Default canvas width height: 40, // Default canvas height type: 'blend', // graphic verification code default type blend: alphanumeric type, number: pure number, letter: pure letter code: '', numArr: [], letterArr: [], }; ctx; constructor() {} ngOnInit() { this.ctx = this.verifyCanvas.nativeElement.getContext('2d'); This. The options. NumArr = '0,1,2,3,4,5,6,7,8,9'. The split (', '); this.options.letterArr = this.getAllLetter(); this.refresh(); } refresh() {this.options.code = "; this.ctx.textBaseline = 'middle'; this.ctx.fillStyle = this.randomColor(180, 240); this.ctx.fillRect(0, 0, this.options.width, this.options.height); let txtArr = []; If (this. Options. Type = = = 'blend') {/ / verification code types txtArr = this. Options. NumArr. Concat (this) options) letterArr); } else if (this.options.type === 'number') { txtArr = this.options.numArr; } else { txtArr = this.options.letterArr; } for (let i = 1; i <= this.codeLength; i++) { const txt = txtArr[this.randomNum(0, txtArr.length)]; this.options.code += txt; this.ctx.font = this.randomNum(this.options.height / 2, this.options.height) + 'px SimHei'; This.ctx.fillstyle = this.randomColor(50, 160); This.ctx. shadowOffsetX = this.randomNum(-3, 3); this.ctx.shadowOffsetY = this.randomNum(-3, 3); this.ctx.shadowBlur = this.randomNum(-3, 3); This.ctx. shadowColor = 'rgba(0, 0, 0, 0.3)'; const x = (this.options.width / (this.codeLength + 1)) * i; const y = this.options.height / 2; const deg = this.randomNum(-30, 30); // Set the rotation Angle and the origin of the coordinates this.ctx.translate(x, y); this.ctx.rotate((deg * Math.PI) / 180); this.ctx.fillText(txt, 0, 0); This.ctx. rotate((-deg * math.pi) / 180); this.ctx.translate(-x, -y); } for (let I = 0; i < 2; i++) { this.ctx.strokeStyle = this.randomColor(40, 180); this.ctx.beginPath(); this.ctx.moveTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height)); this.ctx.lineTo(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height)); this.ctx.stroke(); } for (let I = 0; i < this.options.width / 2; i++) { this.ctx.fillStyle = this.randomColor(0, 255); this.ctx.beginPath(); this.ctx.arc(this.randomNum(0, this.options.width), this.randomNum(0, this.options.height), 1, 0, 2 * Math.PI); this.ctx.fill(); }} // Validate (code) {const code1 = code.tolowerCase (); const v_code = this.options.code.toLowerCase(); // console.log(code1 + ' ---- ' + v_code); if (code1 === v_code) { return true; } else { this.refresh(); return false; } // Generate an array of letters getAllLetter() {const 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 randomNum(min, Max) {return math.floor (math.random () * (max-min) + min); } // generate a randomColor(min, Max) {const r = this.randomNum(min, Max); const g = this.randomNum(min, max); const b = this.randomNum(min, max); return 'rgb(' + r + ',' + g + ',' + b + ')'; }}Copy the codeHTML code:
<div id="v_container" (click)="refresh()" style="width: 100px;" > <canvas #verifyCanvas width="100" height="40" style="cursor: pointer;" ></canvas> <a (click)="refresh()" style="margin-left: 25px;" Word-wrap: break-word! Important; "> </a> </div>Copy the code