Heim > Artikel > Web-Frontend > Der Knoten implementiert beim Anmelden die Bildverifizierungscodefunktion
Dieses Mal bringe ich Ihnen einen Knoten zum Implementieren der Bild-Bestätigungscode--Funktion beim Anmelden. Was sind die Vorsichtsmaßnahmen für die Implementierung der Bild-Bestätigungscode-Funktion beim Anmelden? Folgendes ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.
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');, wo verwendet wird
3 >
3-1 Installieren Sie, das zum Speichern der erhaltenen cookie-parser
Sitzung in Cookies verwendet wird, um die Überprüfung des Front-End-Zugriffs zu erleichtern
cnpm i cookie-parser --save
cookie-parser
const cookieParase = require('cookie-parser'); app.use(cookieParase());, damit Sie Cookies im Projekt verwenden können 3-3 Holen Sie sich den Bestätigungscode
// 获取验证码 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(); },Dies ist nur ein Implementierung Wenn Sie die Funktion haben, einen Bestätigungscode zu generieren, wie wäre es mit dem Zugriff darauf?
4. Hintergrundrouting schreiben
// 获取验证码 router.get('/api/getCaptcha', function(req, res, next) { return api.getCaptcha(req, res, next); })Wenn das Frontend
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" >Wenn Sie auf diesen Bestätigungscode klicken, wird der Bestätigungscode angezeigt aktualisiert werden
6. Aktualisieren Sie den Klickbestätigungscode.
Ä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>Klick-Ereignis
editCaptcha
editCaptcha () { this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random() },Auf diese Weise wird das Problem beim Klicken auf den Verifizierungscode zum Aktualisieren ist aufgetreten
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('验证码错误') }Ich werde nicht näher auf die endgültige Frontend-Eingabe des Konto- und Passwort-Verifizierungscodes für die Anmeldebestätigung usw. eingehen. Die konkrete Idee ist diese. Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! Empfohlene Lektüre:
Vue implementiert die bidirektionale Datenbindungsfunktion (mit Code)
ES6 imitiert Vue zur Implementierung Zwei-Wege-Bindung Benutzerdefinierte Funktion
Das obige ist der detaillierte Inhalt vonDer Knoten implementiert beim Anmelden die Bildverifizierungscodefunktion. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!