Dieses Mal bringe ich Ihnen den Bildverifizierungscode, wenn Node ein Anmeldebild erstellt. Welche Vorsichtsmaßnahmen muss Node beim Erstellen eines Bildverifizierungscodes treffen? Hier ist ein praktischer Fall, schauen wir uns das an.
Um den grafischen Verifizierungscode hier zu implementieren, verwende ich das SVG-Captcha-Modul im Knoten, das alle Zeichen und Zahlen unterstützen kann. Es wird von allen Plattformen unterstützt und ist sehr einfach zu verwenden.
1. Installieren Sie
cnpm i svg-captcha --save
2. Importieren Sie
var svgCaptcha = require('svg-captcha');
3 >
3-1 Installieren Sie, das zum Speichern der erfassten Sitzung in einem Cookie verwendet wird, um die Überprüfung des Front-End-Zugriffs zu erleichtern cookie-parser
cnpm i cookie-parser --save
cookie-parser
const cookieParase = require('cookie-parser'); app.use(cookieParase());
// 获取验证码 getCaptcha(req, res, next){ var captcha = svgCaptcha.create({ // 翻转颜色 inverse: false, // 字体大小 fontSize: 36, // 噪声线条数 noise: 2, // 宽度 width: 80, // 高度 height: 30, }); // 保存到session,忽略大小写 req.session = captcha.text.toLowerCase(); console.log(req.session); //0xtg 生成的验证码 //保存到cookie 方便前端调用验证 res.cookie('captcha', req.session); res.setHeader('Content-Type', 'image/svg+xml'); res.write(String(captcha.data)); res.end(); },
4. Hintergrundrouting schreiben
// 获取验证码 router.get('/api/getCaptcha', function(req, res, next) { return api.getCaptcha(req, res, next); })
diese Schnittstelle aufruft, werden die Bestätigungscodeinformationen zurückgegeben, die im SVG-Format vorliegen /api/getCaptcha
5. Front-End-Zugriff
<img src="/api/getCaptcha" alt="captcha" >
6. Implementieren Sie die Aktualisierung des Klickbestätigungscodes
Ändern Sie jetzt das Ergebnis des Bestätigungscodes, fügen Sie eine äußere Beschriftung hinzu und binden Sie ein Klickereignis dazu, was ich hier verwendet habe, also ist es vue
, und das gleiche gilt für andere Frameworks @click
<a href="#" rel="external nofollow" @click="editCaptcha"> <img src="/api/getCaptcha" alt="" ref="imgYzm"> </a>
editCaptcha
editCaptcha () { this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random() },
7. Verifizierungscode für die Front-End-Verifizierung
Wir haben den Verifizierungscode gerade im Hintergrund erhalten, aber wie geht das? Überprüfen Sie es im Frontend? Denken Sie daran, dass wir in 3-2 installiert und die generierte Sitzung in einem Cookie gespeichert haben. Hier kann unser Frontend den Wert des Bestätigungscodes abrufen, indem es auf dieses Cookie zugreift. cookie-parser
let captcha = document.cookie.split('=')[1] if(this.yzm != captcha){ return this.$message.warning('验证码错误') }
Verwenden Sie Klassen in ES6, um Vue zu imitieren und eine bidirektionale Bindung herzustellen
vue.js+ Element – Erstellen Sie eine Menübaumstruktur in der Benutzeroberfläche
Das obige ist der detaillierte Inhalt vonDer Knoten erstellt beim Anmelden einen Bildverifizierungscode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!