이 글에서는 로그인 인증을 구현하기 위한 node.js+captchapng+jsonwebtoken의 예를 주로 소개합니다. 관심 있는 분들은 이에 대해 알아볼 수 있습니다.
로그인 인증에 관해서라면 누구나 확실히 12306을 떠올릴 것입니다. 인증 코드. 12306은 티켓 사기를 방지하기 위해 많은 노력을 기울였고, 인증코드는 점점 식별하기 어려워졌고, 결국 인간조차 식별하지 못하게 될 수도 있습니다.
오늘 편집자는 노드에 이미지 인증 코드를 구현하는 방법과 토큰을 사용하여 로그인을 인증하는 방법을 알려줄 것입니다. 이 글을 공부하고 나면 다음 내용을 배울 수 있습니다.
1. captchapng를 사용하여 이미지 확인 코드 생성
2. jsonwebtoken을 사용하여 로그인 확인 구현
1. 이미지 확인 코드 생성(모든 코드는 끝에 있음)
우선, 다음은 프로세스를 이해합니다. 첫 번째 단계는 서버가 4자리 숫자 집합을 무작위로 생성하는 것입니다.
두 번째 단계는 이 네 자리 숫자를 캔버스에 그려 그림을 생성하는 것입니다.
세 번째 단계는 사용자가 데이터를 반환할 때 비교할 수 있도록 이 4자리 숫자를 저장하는 것입니다.
그럼 어디에 저장할까요? 물론 사용자를 구별하기 위해서는 세션에 저장해 두는 것이 가장 안전하다.
첫 번째 단계는 로그인 페이지를 만드는 것입니다. 여기서는 여전히 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( <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> ) } }
페이지는 다음과 같습니다
서버를 통해 인증 사진을 제공해야 합니다.
router/index.js 다음 코드를 추가합니다.
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
보안문자 방식은 4자리 숫자가 포함된 그림을 생성한 후 해당 그림을 세션에 저장하는 것입니다.
router/index.js
router.get('/captcha', login.captcha);
에서 이 메서드를 참조하세요. 즉, localhost:3000/captcha를 방문하면 사진이 반환됩니다.
이렇게 연결하면 이미지의 src 속성을 통해 이미지를 얻을 수 있는데, 이미지를 클릭하면 새로고침을 해야 하므로 이미지에 클릭 새로고침 이벤트를 추가해야 합니다. login.tsx에 다음 코드를 삽입하세요
setHash() { this.setState({ hash : Math.random() }) }
img 태그도
코드를 복사하세요 코드는 다음과 같습니다.
afd6e977ec829464f8ce64b9bb58f556
현재 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( <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> ) } }
이렇게 img를 클릭하면 무작위로 해시가 생성되고, 그 후 새로운 이미지가 호출됩니다.
그럼 로그인 인증을 진행하겠습니다.
로그인 인증은 로그인 방법을 사용합니다.
비교를 위해 사용자의 사용자 이름 정보, 비밀번호 및 인증 코드를 가져오고 마지막으로 로그인 성공 여부에 대한 데이터를 반환합니다.
사용자가 성공적으로 로그인한 후에는 다음 번에 다시 로그인할 필요가 없습니다. 과거에는 세션이나 쿠키를 선택할 수 있었습니다. 이제 프런트엔드와 백엔드를 별도로 개발했기 때문에 단일 페이지를 구축하고 Ajax를 사용하여 애플리케이션을 구축하는 경향이 더 커졌습니다. 토큰은 이 개발 모델에 가장 적합합니다.
토큰 로그인 확인
토큰은 암호화된 문자열입니다. 로그인에 성공하면 저장을 위해 사용자에게 반환됩니다. 그런 다음 사용자는 인터페이스를 요청할 때 이 토큰을 가져옵니다. 그래서 우리는 토큰을 암호화해야 합니다.
Json Web Token은 이 문제를 해결하기 위해 특별히 설계되었습니다. 원리는 자세히 설명하지 않겠습니다. 실제로는 특정 방식으로 문자열을 얻은 다음 특정 방식으로 풀어내는 것입니다.
우리가 해야 할 첫 번째 단계는
사용자가 성공적으로 로그인하면 토큰을 생성하여 사용자에게 반환하는 것입니다.
2단계: 사용자는 토큰을 얻은 후 토큰을 로컬에 저장해야 합니다.
3단계: 중간 레이어를 작성해야 합니다. 사용자가 요청할 때마다 사용자가 소지한 토큰이 올바른지 확인합니다. 데이터는 올바르게 반환되었지만 경고는 잘못 반환되었습니다.
사용자는 데이터를 요청할 때마다 헤더에 토큰을 가져와야 합니다.
1단계: 여전히 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"} //调用../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
이번에는 로그인 메소드에 설정 토큰을 추가하고 이를 사용자에게 반환합니다. setToken 메소드는 토큰을 설정하는 메소드입니다.
2단계: 사용자가 받은 후 저장합니다.
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( <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> ) } }
sbumit 방식에서는 토큰을 sessonstorage에 넣습니다.
3단계: 인터페이스가 요청될 때마다 토큰을 확인하도록 미들웨어를 설정합니다. 구문 분석에 성공하면 요청 헤더에 추가됩니다.
./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 { //解析成功加入请求信息,继续调用后面方法 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 방식은 토큰 검증, setToken 방식은 토큰 방식 설정
로그인 요청이 없을 경우 이런 모습
在 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 : '' } } 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( <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 : '', 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( <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 : '' } } 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( <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
위 내용은 node.js+captchapng+jsonwebtoken을 사용하여 로그인 확인을 완료하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!