Heim > Web-Frontend > js-Tutorial > Hauptteil

Der Knoten erstellt beim Anmelden einen Bildverifizierungscode

php中世界最好的语言
Freigeben: 2018-06-07 11:05:07
Original
2092 Leute haben es durchsucht

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
Nach dem Login kopieren

2. Importieren Sie

var svgCaptcha = require('svg-captcha');
Nach dem Login kopieren
, wo verwendet wird

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

3- 2 Verwenden Sie

cookie-parser

const cookieParase = require('cookie-parser');
app.use(cookieParase());
Nach dem Login kopieren
, um Cookies im Projekt zu verwenden

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();
 },
Nach dem Login kopieren
Dadurch wird nur die Funktion zum Generieren eines Bestätigungscodes implementiert. Was ist also damit? Zugang?

4. Hintergrundrouting schreiben

// 获取验证码
router.get('/api/getCaptcha', function(req, res, next) {
 return api.getCaptcha(req, res, next);
})
Nach dem Login kopieren
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" >
Nach dem Login kopieren

Aber jetzt haben wir wieder Bedarf aktualisiert werden

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>
Nach dem Login kopieren
Klick-Ereignis

editCaptcha

editCaptcha () {
  this.$refs.imgYzm.src = '/api/getCaptcha?d='+Math.random()
},
Nach dem Login kopieren
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

Warum sollte es in Cookies gespeichert werden? Da das Frontend nicht auf die vom Backend generierte Sitzung zugreifen kann, gibt es überhaupt keine Sicherheit, wenn wir auf den Zugriff warten. Daher speichern wir eine Kopie in einem Cookie für den Frontend-Zugriff.

let captcha = document.cookie.split('=')[1]
  if(this.yzm != captcha){
   return this.$message.warning('验证码错误')
  }
Nach dem Login kopieren
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:

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!