提到登錄驗(yàn)證蔬捷，大家肯定能想到的就是12306的驗(yàn)證碼了吧垄提。12306為了防止刷票，可以說是煞費(fèi)苦心周拐，驗(yàn)證碼也越來越難識別铡俐，最終即使是人也可能識別不了了。
今天妥粟，小編就給大家說一下node如何實(shí)現(xiàn)圖片驗(yàn)證碼审丘，以及使用token驗(yàn)證登錄。學(xué)習(xí)本文你將學(xué)到：
1.使用captchapng生成圖片驗(yàn)證碼
2.使用jsonwebtoken實(shí)現(xiàn)登錄驗(yàn)證
一勾给、圖片驗(yàn)證碼生成（最后有全部代碼）
首先滩报，我們理一下流程，第一步服務(wù)器要隨機(jī)生成一組四位數(shù)播急。
第二步脓钾，將這四位數(shù)用canvas繪圖生成圖片。
第三步桩警，我們要將這四位數(shù)存起來可训，以便用戶返回數(shù)據(jù)時做對比。
那么存到哪里呢捶枢？很明顯為了區(qū)分用戶握截，存到session最為穩(wěn)妥。
第一步柱蟀，先要有一個登錄頁面。在這里我們依然用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 : '',
password : '',
yzNoId : '',
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(
<div>
<div 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>
</div>
<div className="content">
<div 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="驗(yàn)證碼"/>
<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>
</div>
</div>
</div>
)
}
}
頁面是這樣的
Paste_Image.png
我們需要通過服務(wù)器給一張驗(yàn)證圖片蚜厉。
router/index.js 添加如下代碼
var Login = require('./controller/login');
var login = new Login;
router.get('/captcha', login.captcha);
router.post('/login',login.loginer);
login是定義在控制器的一個類的實(shí)例长已，captcha，loginer是它的方法。分別是返回驗(yàn)證圖片术瓮、登錄驗(yàn)證康聂。
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); //隨機(jī)生成數(shù)字
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: '驗(yàn)證碼錯誤'
});
}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
captcha方法是生成一張含四位數(shù)字的圖片，然后將圖片保存到session中胞四。
將此方法在 router/index.js 中引用
router.get('/captcha', login.captcha);
也就是說我們訪問localhost:3000/captcha就會返回一張圖片恬汁。
captcha.png
有了這個連接后我們就可以通過圖片的src屬性拿到該圖片，但是當(dāng)點(diǎn)擊圖片的時候要重新刷新辜伟，所以我們需要給圖片添加一個點(diǎn)擊刷新事件氓侧。將下面代碼插入到
login.tsx中
setHash() {
this.setState({
hash : Math.random()
})
}
img標(biāo)簽也變成了
<img src={"http://localhost:3000/captcha?aaa="+this.state.hash} className="yz-img" onClick={this.setHash.bind(this)} />
此時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 : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
public async sbumit(params : any) : Promise<any>{
let res = await axios.post('http://localhost:3000/login',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(
<div>
<div 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>
</div>
<div className="content">
<div 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="驗(yàn)證碼"/>
<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>
</div>
</div>
</div>
)
}
}
這樣只要點(diǎn)擊img，就會隨機(jī)生成一個hash导狡，然后就會調(diào)用新的圖片出來约巷。
接著我們進(jìn)行登錄驗(yàn)證。
loginer方法就是進(jìn)行登錄驗(yàn)證的旱捧。
拿到用戶的用戶名信息独郎，密碼以及驗(yàn)證碼一次對比，最后返回登錄是否成功數(shù)據(jù)枚赡。
當(dāng)用戶登陸成功以后氓癌，下次登錄就不需要再次登錄了，以往的方法可以選則session或者cookie的方式贫橙，在這里我們使用token贪婉。因?yàn)楝F(xiàn)在已經(jīng)實(shí)現(xiàn)了前后端分離開發(fā)，我們更傾向于構(gòu)建單頁面配合ajax構(gòu)建應(yīng)用料皇。而token最適合這種開發(fā)模式不過了谓松。
token登錄驗(yàn)證
token是一串經(jīng)過加密的字符串，登錄成功以后返回給用戶保存践剂，然后用戶在請求接口時鬼譬，都帶這個token。所以我們需要對token進(jìn)行加密逊脯。
Json Web Token就是專門解決這個問題的优质，原理就不做詳解了，其實(shí)就是按照一定的方式得到一個字符串军洼，然后在通過某種方式解開巩螃。
我們要做的第一步就是
當(dāng)用戶登錄成功后，創(chuàng)建一個token返回給用戶匕争。
第二步：用戶拿到token后應(yīng)該把token存到本地避乏。
第三步：需要寫一個中間層，每次用戶請求時我們驗(yàn)證用戶攜帶的token是否正確甘桑。正確返回數(shù)據(jù)拍皮，不正確返回警告歹叮。
用戶每次請求數(shù)據(jù)的時候要在header里把token帶上。
第一步：還是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); //隨機(jī)生成數(shù)字
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: '驗(yàn)證碼錯誤'
});
}else if(userName == "chenxuehui" && password == "123321"){
// 設(shè)置token
var datas = {userName:"chenxuehui"}
//調(diào)用../middleware/token 下方法設(shè)置
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
這次在loginer方法里面我們加入設(shè)置token铆帽，并返回給用戶咆耿。setToken方法是設(shè)置token的方法。
第二步：用戶拿到后保存爹橱。
在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 : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
public async sbumit(params : any) : Promise<any>{
let res = await axios.post('http://localhost:3000/login',params);
if(res.data.verson){
sessionStorage.setItem('token',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(
<div>
<div 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>
</div>
<div className="content">
<div 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="驗(yàn)證碼"/>
<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>
</div>
</div>
</div>
)
}
}
在sbumit方法里我們將token放到了sessonstorage里面萨螺。
第三步：設(shè)置中間件每次請求接口時，驗(yàn)證token,如果解析成功加入到請求頭里面愧驱。
./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) {
//存在token慰技，解析token
jwt.verify(token, 'cxh' , function(err,decoded) {
if(err) {
// 解析失敗直接返回失敗警告
return res.json({success:false,msg:'token錯誤'})
}else {
//解析成功加入請求信息，繼續(xù)調(diào)用后面方法
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
testToken方法是驗(yàn)證token冯键，setToken是設(shè)置token方法
假如沒有登錄請求是這樣的
Paste_Image.png
在 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")
});
//獲取圖片驗(yàn)證碼
router.get('/captcha', login.captcha);
//登錄驗(yàn)證
router.post('/login',login.loginer);
//請求數(shù)據(jù)時 t.testToken 驗(yàn)證token
router.post('/list',t.testToken,function(req, res, next){
res.json({
//在請求信息里面拿到數(shù)據(jù)
username : req.userInfo.userName,
success : true,
result : [
{
name:'1111111'
},
{
name :'22222'
}
]
})
})
module.exports = router;
我們在另一個頁面調(diào)用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 : ''
}
}
async getList(): Promise<any>{
let token = sessionStorage.getItem('token');
const config = {
// 請求頭信息
headers: {'x-access-token': token}
}
let res = await axios.post('http://localhost:3000/list',{},config);
if(!res.data.success){
browserHistory.push('/login');
return;
}
this.setState({
data : res.data
})
}
render(){
const { data } = this.state;
return(
<div>
<div 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>
</div>
<div className="content">
Home
<span onClick={this.getList.bind(this)}>獲取數(shù)據(jù)</span>
<div>{
data ? data.result.map( (val,k) => {
return <li key = {k}>{val.name}</li>
}) : null
}</div>
</div>
</div>
)
}
}
export default Home
當(dāng)調(diào)用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); //隨機(jī)生成數(shù)字
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: '驗(yàn)證碼錯誤'
});
}else if(userName == "chenxuehui" && password == "123321"){
// 設(shè)置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 : '',
password : '',
yzNoId : '',
hash : Math.random()
}
}
public async sbumit(params : any) : Promise<any>{
let res = await axios.post('http://localhost:3000/login',params);
if(res.data.verson){
sessionStorage.setItem('token',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(
<div>
<div 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>
</div>
<div className="content">
<div 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="驗(yàn)證碼"/>
<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>
</div>
</div>
</div>
)
}
}
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 : ''
}
}
async getList(): Promise<any>{
let token = sessionStorage.getItem('token');
const config = {
// 請求頭信息
headers: {'x-access-token': token}
}
let res = await axios.post('http://localhost:3000/list',{},config);
if(!res.data.success){
browserHistory.push('/login');
return;
}
this.setState({
data : res.data
})
}
render(){
const { data } = this.state;
return(
<div>
<div 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>
</div>
<div className="content">
Home
<span onClick={this.getList.bind(this)}>獲取數(shù)據(jù)</span>
<div>{
data ? data.result.map( (val,k) => {
return <li key = {k}>{val.name}</li>
}) : null
}</div>
</div>
</div>
)
}
}
export default Home
