Schließen Sie die Anmeldeüberprüfung mit node.js+captchapng+jsonwebtoken ab

In diesem Artikel wird hauptsächlich das Beispiel von node.js+captchapng+jsonwebtoken vorgestellt. Es hat einen gewissen Referenzwert.

Wenn es um die Anmeldeüberprüfung geht. Das kann sich bestimmt jeder vorstellen. Der Verifizierungscode ist 12306. 12306 hat große Anstrengungen unternommen, um Ticketbetrug zu verhindern, und der Verifizierungscode ist immer schwieriger zu identifizieren, und schließlich kann es sein, dass selbst Menschen ihn nicht mehr identifizieren können.

Heute erklärt Ihnen der Herausgeber, wie Sie den Bildverifizierungscode im Knoten implementieren und das Token zur Verifizierung der Anmeldung verwenden. Durch das Studium dieses Artikels erfahren Sie:

1. Verwenden Sie captchapng, um einen Bildbestätigungscode zu generieren

2. Verwenden Sie jsonwebtoken, um die Anmeldebestätigung zu implementieren

1, Bildverifizierungscode-Generierung (alle Codes am Ende)

Schauen wir uns zunächst den Prozess an. Im ersten Schritt muss der Server zufällig einen Satz von vier Codes generieren Ziffern.

Der zweite Schritt besteht darin, diese vier Ziffern auf die Leinwand zu zeichnen, um ein Bild zu erstellen.

Der dritte Schritt besteht darin, diese vier Ziffern zum Vergleich zu speichern, wenn der Benutzer die Daten zurückgibt.

Wo kann man es also speichern? Um Benutzer zu unterscheiden, ist es natürlich am sichersten, sie in der Sitzung zu speichern.

Der erste Schritt besteht darin, eine Anmeldeseite einzurichten. Hier nutzen wir noch „react“,

login.tsx

import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  handleUserName(e) : any {
    this.setState({
      userName : e.target.value
    })
  }
  handlePassword(e) : any {
    this.setState({
      password : e.target.value
    })
  }
  handleYzId(e) : any {
    this.setState({
      yzNoId : e.target.value
    })
  }
  render(){
    const { userName, password, yzNoId } = this.state;
    return(
      <p>
        <p className="nav-wrap">
          <ul className="nav">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/imgLoad">上传</Link></li>
            <li><Link to="/login">登陆</Link></li>
          </ul>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha"} className="yz-img" />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

Die Seite sieht so aus

Wir müssen ein Bestätigungsbild über den Server senden.

router/index.js Fügen Sie den folgenden Code hinzu

var Login = require('./controller/login');
var login = new Login;
router.get('/captcha', login.captcha);
router.post('/login',login.loginer);
login是定义在控制器的一个类的实例，captcha，loginer是它的方法。分别是返回验证图片、登录验证。
controller/login.js

var rf = require('fs');
var captchapng = require('captchapng');
class Login {
  constructor(){}
  captcha(req, res, next) {
    var str = parseInt(Math.random()*9000+1000);  //随机生成数字
    req.session.captcha = str;  // 存入session
    var p = new captchapng(80, 30, str); //生成图片
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img, 'base64');
    res.writeHead(200, {
      'Content-Type': 'image/png'
    });
    res.end(imgbase64);
  }
  loginer(req, res, next) {
    let captcha = req.body.captcha;
    let userName = req.body.userName;
    let password = req.body.password;
    if (captcha != req.session.captcha) {
      res.status(400).send({
        message: '验证码错误'
      });
    }else if(userName == "chenxuehui" && password == "123321"){
      res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
    }else{
      res.json({"code":0,"verson":false,"msg":"密码错误"});
    }
  }
}
module.exports = Login

Die Captcha-Methode besteht darin, ein Bild mit vier Ziffern zu generieren und dann Das Bild wird in der Sitzung gespeichert.

Referenzieren Sie diese Methode in router/index.js

router.get('/captcha', login.captcha);

Das heißt, wenn wir auf localhost:3000/captcha zugreifen ein Bild.

Mit dieser Verbindung können wir das Bild über das src-Attribut des Bildes abrufen, aber wenn auf das Bild geklickt wird, muss es aktualisiert werden, also müssen wir es hinzufügen ein Click-Refresh-Ereignis. Fügen Sie den folgenden Code in login.tsx ein

setHash() {
    this.setState({
      hash : Math.random()
    })
}

Das img-Tag wird auch zu

Code kopieren Der Code lautet wie folgt:

🎜>
Auf diese Weise wird, solange Sie auf img klicken, zufällig ein Hash generiert und dann das neue Bild aufgerufen.

Dann fahren wir mit der Anmeldebestätigung fort.

Die Anmeldemethode wird zur Anmeldeüberprüfung verwendet.

Erhalten Sie zum Vergleich die Benutzernameninformationen, das Passwort und den Bestätigungscode des Benutzers und geben Sie schließlich Daten darüber zurück, ob die Anmeldung erfolgreich war.

import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  public async sbumit(params : any) : Promise<any>{
    let res = await axios.post(&#39;http://localhost:3000/login&#39;,params);
  }
  handleUserName(e) : any {
    this.setState({
      userName : e.target.value
    })
  }
  handlePassword(e) : any {
    this.setState({
      password : e.target.value
    })
  }
  handleYzId(e) : any {
    this.setState({
      yzNoId : e.target.value
    })
  }
  setHash() {
    this.setState({
      hash : Math.random()
    })
  }
  render(){
    const { userName, password, yzNoId } = this.state;
    return(
      <p>
        <p className="nav-wrap">
          <ul className="nav">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/imgLoad">上传</Link></li>
            <li><Link to="/login">登陆</Link></li>
          </ul>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

Wenn sich der Benutzer erfolgreich anmeldet, muss er sich beim nächsten Mal nicht erneut anmelden. In der Vergangenheit können Sie zwischen Sitzung und Cookie wählen. Da wir jetzt die getrennte Entwicklung von Front-End und Back-End implementiert haben, neigen wir eher dazu, eine einzelne Seite zu erstellen und Ajax zum Erstellen von Anwendungen zu verwenden. Token ist für dieses Entwicklungsmodell am besten geeignet.

Token-Anmeldebestätigung

Token ist eine verschlüsselte Zeichenfolge, die dem Benutzer zur Speicherung zurückgegeben wird die Schnittstelle. Wir müssen also das Token verschlüsseln.

Json Web Token wurde speziell entwickelt, um dieses Problem zu lösen. Das Prinzip wird nicht im Detail erklärt. Tatsächlich besteht es darin, eine Zeichenfolge auf eine bestimmte Weise zu erhalten und sie dann auf eine bestimmte Weise zu entschlüsseln .

Der erste Schritt, den wir tun müssen, ist

Wenn sich der Benutzer erfolgreich anmeldet, erstellen Sie ein Token und geben Sie es an den Benutzer zurück.

Schritt 2: Nachdem der Benutzer das Token erhalten hat, sollte er das Token lokal speichern.

Schritt 3: Wir müssen eine Zwischenschicht schreiben. Bei jeder Benutzeranfrage überprüfen wir, ob das vom Benutzer getragene Token korrekt ist. Die Daten werden korrekt zurückgegeben, die Warnung wird falsch zurückgegeben.

Benutzer müssen das Token jedes Mal im Header angeben, wenn sie Daten anfordern.

Schritt eins: Immer noch controller/login.js

Dieses Mal fügen wir das Einstellungstoken in der Anmeldemethode hinzu und kehren zu zurück Benutzer. Die setToken-Methode ist eine Methode zum Festlegen von Token.

Schritt 2: Speichern, nachdem der Benutzer es erhalten hat.

In login.tsx wird es wie folgt

var rf = require('fs');
var jwt = require('jsonwebtoken');
var captchapng = require('captchapng');
var Tokens = require('../middleware/token')
var t = new Tokens;
class Login {
  constructor(){}
  captcha(req, res, next) {
    var str = parseInt(Math.random()*9000+1000);  //随机生成数字
    req.session.captcha = str;  // 存入session
    var p = new captchapng(80, 30, str); //生成图片
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img, 'base64');
    res.writeHead(200, {
      'Content-Type': 'image/png'
    });
    res.end(imgbase64);
  }
  loginer(req, res, next) {
    let captcha = req.body.captcha;
    let userName = req.body.userName;
    let password = req.body.password;
    if (captcha != req.session.captcha) {
      res.status(400).send({
        message: '验证码错误'
      });
    }else if(userName == "chenxuehui" && password == "123321"){
      // 设置token
      var datas = {userName:"chenxuehui"}
        //调用../middleware/token 下方法设置
      var token = t.setToken('cxh',300,datas)
      res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
    }else{
      res.json({"code":0,"verson":false,"msg":"密码错误"});
    }
  }
}

module.exports = Login

In der Sbumit-Methode legen wir den Token in Sessionstorage.

Schritt 3: Stellen Sie die Middleware so ein, dass sie das Token bei jeder Anforderung an die Schnittstelle überprüft. Wenn die Analyse erfolgreich ist, wird es dem Anforderungsheader hinzugefügt.

./middleware/token.js

import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  public async sbumit(params : any) : Promise<any>{
    let res = await axios.post(&#39;http://localhost:3000/login&#39;,params);
    if(res.data.verson){
      sessionStorage.setItem(&#39;token&#39;,res.data.token);
      browserHistory.push("/home")
    }
  }
  handleUserName(e) : any {
    this.setState({
      userName : e.target.value
    })
  }
  handlePassword(e) : any {
    this.setState({
      password : e.target.value
    })
  }
  handleYzId(e) : any {
    this.setState({
      yzNoId : e.target.value
    })
  }
  setHash() {
    this.setState({
      hash : Math.random()
    })
  }
  render(){
    const { userName, password, yzNoId } = this.state;
    return(
      <p>
        <p className="nav-wrap">
          <ul className="nav">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/imgLoad">上传</Link></li>
            <li><Link to="/login">登陆</Link></li>
          </ul>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

Die testToken-Methode dient zum Überprüfen des Tokens und setToken zum Festlegen des Tokens Methode

Wenn keine Anmeldeanforderung vorliegt, ist dies so

在 router/index.js

var express = require('express');
var router = express.Router();
var rf = require('fs');
var Login = require('./controller/login');
var Tokens = require('./middleware/token')
var t = new Tokens;
var login = new Login;
//主页
router.get('/', function(req, res, next) {
  res.render("wap/index")
});
//获取图片验证码
router.get('/captcha', login.captcha);
//登录验证
router.post('/login',login.loginer);
//请求数据时 t.testToken 验证token
router.post('/list',t.testToken,function(req, res, next){
  res.json({
    //在请求信息里面拿到数据
    username : req.userInfo.userName,
    success : true,
    result : [
      {
        name:'1111111'
      },
      {
        name :'22222'
      }
    ]
  })
})
module.exports = router;

我们在另一个页面调用list接口试一下

import * as axios from 'axios';
import { transToken } from '../decorator/index'


class Home extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      data : &#39;&#39;
    }
  }
  async getList(): Promise<any>{
    let token = sessionStorage.getItem(&#39;token&#39;);
    const config = {
     // 请求头信息
     headers: {&#39;x-access-token&#39;: token}      
    }
    let res = await axios.post(&#39;http://localhost:3000/list&#39;,{},config);
    if(!res.data.success){
      browserHistory.push(&#39;/login&#39;);
      return;
    }
    this.setState({
      data : res.data
    })
  }
  render(){
    const { data } = this.state;
    return(
      <p>
        <p className="nav-wrap">
          <ul className="nav">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/imgLoad">上传</Link></li>
            <li><Link to="/login">登陆</Link></li>
          </ul>
        </p>
        <p className="content">
          Home
          <span onClick={this.getList.bind(this)}>获取数据</span>
          <p>{
            data ? data.result.map( (val,k) => {
              return <li key = {k}>{val.name}</li>
            }) : null
          }</p>
        </p>
      </p>
      
    )
  }
}
export default Home

当调用getList时，如果此时没有登录res.data.success就会为false，则跳到登录页。

全部代码

node.js

app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var session = require("express-session");
var ejs = require('ejs');

var index = require('./routes/index');


var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
// app.set('view engine', 'jade');
app.engine('html', ejs.__express);
app.set('view engine', 'html');
app.use(session({
  secret:"dabao",
  resave:false,
  saveUninitialized:true,
  cookie:{}
}));
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser({limit: 5000000}));
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, '')));

app.use('/', index);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
 var err = new Error('Not Found');
 err.status = 404;
 next(err);
});

// error handler
app.use(function(err, req, res, next) {
 // set locals, only providing error in development
 res.locals.message = err.message;
 res.locals.error = req.app.get('env') === 'development' ? err : {};

 // render the error page
 res.status(err.status || 500);
 res.render('error');
});

module.exports = app;

index.js

var express = require('express');
var router = express.Router();
var rf = require('fs');
var Login = require('./controller/login');
var Tokens = require('./middleware/token')
var t = new Tokens;
var login = new Login;
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render("wap/index")
});
router.post('/upLoadImg',function(req,res,next){
  let imgData = req.body.imgData;
  console.log(imgData)
  let base64Data = imgData.replace(/^data:image\/\w+;base64,/, "");
  let dataBuffer = new Buffer(base64Data, 'base64');
  let timer = Number( new Date() );
  console.log(timer)
  rf.writeFile("views/images/artCover"+timer+".png",dataBuffer, function(err) {
    if(err) {
     res.json({"code":400,"verson":false,"msg":err});
    }else {
     res.json({"code":100,"verson":true,"url":"views/src/common/images/artCover/"+timer+".png"});
    }
  });
})
router.get('/captcha', login.captcha);
router.post('/login',login.loginer);
router.post('/list',t.testToken,function(req, res, next){
  // 先解析token 
  console.log(req.userInfo)
  res.json({
    username : req.userInfo.userName,
    success : true,
    result : [
      {
        name:'1111111'
      },
      {
        name :'22222'
      }
    ]
  })
})
module.exports = router;

controller/login.js

var rf = require('fs');
var jwt = require('jsonwebtoken');
var captchapng = require('captchapng');
var Tokens = require('../middleware/token')
var t = new Tokens;
class Login {
  constructor(){}
  captcha(req, res, next) {
    var str = parseInt(Math.random()*9000+1000);  //随机生成数字
    req.session.captcha = str;  // 存入session
    var p = new captchapng(80, 30, str); //生成图片
    p.color(0, 0, 0, 0);
    p.color(80, 80, 80, 255);
    var img = p.getBase64();
    var imgbase64 = new Buffer(img, 'base64');
    res.writeHead(200, {
      'Content-Type': 'image/png'
    });
    res.end(imgbase64);
  }
  loginer(req, res, next) {
    let captcha = req.body.captcha;
    let userName = req.body.userName;
    let password = req.body.password;
    if (captcha != req.session.captcha) {
      res.status(400).send({
        message: '验证码错误'
      });
    }else if(userName == "chenxuehui" && password == "123321"){
      // 设置token
      var datas = {userName:"chenxuehui"}
      var token = t.setToken('cxh',300,datas)
      res.json({"code":100,"verson":true,"msg":"登陆成功","token":token});
    }else{
      res.json({"code":0,"verson":false,"msg":"密码错误"});
    }
  }
}
module.exports = Login

middleware/token.js

var jwt = require('jsonwebtoken');

class Tokens {
  constructor(){}
  testToken(req,res,next) {
    var token = req.body.token || req.query.token || req.headers['x-access-token'];

    if(token) {
      jwt.verify(token, 'cxh' , function(err,decoded) {
        if(err) {
          return res.json({success:false,msg:'token错误'})
        }else {
          req.userInfo = decoded;
          next()
        }
      })
    }else {
      return res.status(403).send({success:false,msg:"没有token"})
    }
  }
  setToken(name,time,data) {
    var jwtSecret = name;
    var token = jwt.sign(data, jwtSecret, {
      expiresIn: time
    })
    return token;
  }
}
module.exports = Tokens

react部分

login.tsx

import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
export default class Login extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      userName : &#39;&#39;,
      password : &#39;&#39;,
      yzNoId  : &#39;&#39;,
      hash : Math.random()
    }
  }
  public async sbumit(params : any) : Promise<any>{
    let res = await axios.post(&#39;http://localhost:3000/login&#39;,params);
    if(res.data.verson){
      sessionStorage.setItem(&#39;token&#39;,res.data.token);
      browserHistory.push("/home")
    }
  }
  handleUserName(e) : any {
    this.setState({
      userName : e.target.value
    })
  }
  handlePassword(e) : any {
    this.setState({
      password : e.target.value
    })
  }
  handleYzId(e) : any {
    this.setState({
      yzNoId : e.target.value
    })
  }
  setHash() {
    this.setState({
      hash : Math.random()
    })
  }
  render(){
    const { userName, password, yzNoId } = this.state;
    return(
      <p>
        <p className="nav-wrap">
          <ul className="nav">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/imgLoad">上传</Link></li>
            <li><Link to="/login">登陆</Link></li>
          </ul>
        </p>
        <p className="content">
          <p className="login-warp">
            <p>
              <input type="text" className="username" value={userName} onChange={this.handleUserName.bind(this)} placeholder="用户名"/>
            </p>
            <p>
              <input type="text" className="password" value={password} onChange={this.handlePassword.bind(this)} placeholder="密码"/>  
            </p>  
            <p>
              <input type="text" className="yz" value={yzNoId} onChange={this.handleYzId.bind(this)} placeholder="验证码"/>
              <img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />  
            </p>
            <p>
              <input type="button" className="submit" value="登陆" onClick={this.sbumit.bind(this,{userName:userName,password:password,captcha:yzNoId})} /> 
            </p>  
          </p>
        </p>
      </p>
    )
  }
}

home.js 获取列表信息

import * as React from 'react'
import * as ReactDom from 'react-dom'
import {Link, browserHistory} from 'react-router';
import * as axios from 'axios';
class Home extends React.Component<any,any>{
  constructor(props){
    super(props)
    this.state = {
      data : &#39;&#39;
    }
  }
  async getList(): Promise<any>{
    let token = sessionStorage.getItem(&#39;token&#39;);
    const config = {
     // 请求头信息
     headers: {&#39;x-access-token&#39;: token}      
    }
    let res = await axios.post(&#39;http://localhost:3000/list&#39;,{},config);
    if(!res.data.success){
      browserHistory.push(&#39;/login&#39;);
      return;
    }
    this.setState({
      data : res.data
    })
  }
  render(){
    const { data } = this.state;
    return(
      <p>
        <p className="nav-wrap">
          <ul className="nav">
            <li><Link to="/home">首页</Link></li>
            <li><Link to="/imgLoad">上传</Link></li>
            <li><Link to="/login">登陆</Link></li>
          </ul>
        </p>
        <p className="content">
          Home
          <span onClick={this.getList.bind(this)}>获取数据</span>
          <p>{
            data ? data.result.map( (val,k) => {
              return <li key = {k}>{val.name}</li>
            }) : null
          }</p>
        </p>
      </p>
      
    )
  }
}
export default Home

Das obige ist der detaillierte Inhalt vonSchließen Sie die Anmeldeüberprüfung mit node.js+captchapng+jsonwebtoken ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!