node.js+captchapng+jsonwebtoken을 사용하여 로그인 확인을 완료하세요.
- 巴扎黑원래의
- 2017-08-18 10:34:302238검색
이 글에서는 로그인 인증을 구현하기 위한 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 = TokenstestToken 방식은 토큰 검증, 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 = Loginmiddleware/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 = Tokensreact部分
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
이전 기사：js로 간단한 대화 상자 만들기 튜토리얼다음 기사：js로 간단한 대화 상자 만들기 튜토리얼