node.js+captchapng+jsonwebtoken 로그 인 인증 예제 구현

30727 단어 node.jscaptchapn
로그 인 인증 하면 12306 의 인증 코드 를 생각 하 실 수 있 을 겁 니 다.12306 표를 긁 는 것 을 막 기 위해 고심 했다 고 할 수 있 고 인증번호 도 점점 식별 하기 어려워 지면 서 결국은 사람 이라도 식별 하지 못 할 수도 있다.
오늘 은 node 가 이미지 인증 코드 를 어떻게 실현 하 는 지,token 인증 로그 인 을 사용 하 는 지 알려 드 리 겠 습 니 다.본문 을 공부 하면 너 는 배 울 것 이다.
1.captchapng 을 사용 하여 이미지 인증 코드 생 성
2.jsonwebtoken 을 사용 하여 로그 인 인증 실현
1.이미지 인증 코드 생 성(마지막 에 모든 코드 가 있 음)
우선,첫 번 째 서버 는 무 작위 로 네 자리 수 를 만들어 야 합 니 다.
두 번 째 단 계 는 이 네 자 리 를 canvas 그림 으로 그림 을 만 듭 니 다.
세 번 째 단 계 는 사용자 가 데 이 터 를 되 돌 릴 때 대비 할 수 있 도록 이 네 자릿수 를 저장 해 야 한다.
그럼 어디 에 저장 할 까요?사용 자 를 구분 하기 위해 서 는 session 에 저장 하 는 것 이 가장 타당 하 다 는 것 이 분명 하 다.
첫 번 째 단 계 는 로그 인 페이지 가 있어 야 합 니 다.여기 서 우 리 는 여전히 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="   "/>
              <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>
    )
  }
}
페이지 가 이 렇 습 니 다.

우 리 는 서버 를 통 해 인증 그림 을 한 장 줘 야 한다.
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
captcha 방법 은 네 자리 숫자 를 포함 한 그림 을 만 들 고 그림 을 session 에 저장 하 는 것 입 니 다.
이 방법 을 router/index.js 에서 참조 합 니 다.

router.get('/captcha', login.captcha);
즉,우리 가 localhost:3000/captcha 를 방문 하면 사진 한 장 을 되 돌려 주 는 것 이다.

이 연결 이 있 으 면 우 리 는 그림 의 src 속성 을 통 해 이 그림 을 얻 을 수 있 습 니 다.그러나 그림 을 클릭 할 때 다시 새로 고침 해 야 하기 때문에 그림 에 새로 고침 이 벤트 를 추가 해 야 합 니 다.아래 코드 를 login.tsx 에 삽입 합 니 다.

setHash() {
    this.setState({
      hash : Math.random()
    })
}
img 태그 도 바 뀌 었 어 요.


<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="   "/>
              <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>
    )
  }
}
이렇게 img 을 누 르 면 랜 덤 으로 hash 를 생 성하 고 새로운 그림 을 호출 합 니 다.
이어서 우 리 는 로그 인 검증 을 진행한다.
loginer 방법 은 로그 인 검증 을 하 는 것 입 니 다.
사용자 의 사용자 이름 정보,비밀번호,인증 코드 를 비교 하여 로그 인 성공 여 부 를 되 돌려 줍 니 다.
사용자 가 로그 인 에 성공 한 후에 다음 로그 인 은 다시 로그 인 할 필요 가 없습니다.예전 의 방법 은 session 이나 쿠키 방식 을 선택 할 수 있 습 니 다.여기 서 저 희 는 token 을 사용 합 니 다.현재 전후 단 분리 개발 이 실현 되 었 기 때문에 우 리 는 단일 페이지 를 구축 하여 ajax 구축 응용 에 맞 추 는 경향 이 있 습 니 다.토 큰 은 이런 개발 모델 에 가장 적합 하 다.
token 로그 인 인증
token 은 암호 화 된 문자열 입 니 다.로그 인 에 성공 한 후에 사용자 에 게 저장 한 다음 에 사용자 가 인 터 페 이 스 를 요청 할 때 이 token 을 가 져 옵 니 다.그래서 우 리 는 token 을 암호 화해 야 한다.
JSon Web Token 은 이 문 제 를 전문 적 으로 해결 하 는 것 으로 원 리 는 상세 하 게 설명 하지 않 습 니 다.사실은 일정한 방식 으로 문자열 을 얻 은 다음 에 어떤 방식 으로 풀 어야 합 니 다.
우리 가 해 야 할 첫 번 째 단 계 는...
사용자 가 로그 인 에 성공 하면 token 을 만들어 사용자 에 게 되 돌려 줍 니 다.
두 번 째 단계:사용자 가 token 을 받 은 후에 token 을 로 컬 에 저장 해 야 합 니 다.
세 번 째 단계:중간 층 을 써 야 합 니 다.사용자 가 요청 할 때마다 저 희 는 사용자 가 가지 고 있 는 token 이 정확 한 지 검증 해 야 합 니 다.데 이 터 를 정확하게 되 돌려 주 고 경 고 를 정확하게 되 돌려 주지 않 습 니 다.
사용 자 는 데 이 터 를 요청 할 때마다 header 에서 token 을 가 져 가 야 합 니 다.
STEP 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
이번에 loginer 방법 에 token 설정 을 추가 하여 사용자 에 게 되 돌려 줍 니 다.setToken 방법 은 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="   "/>
              <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 에 넣 었 다.
세 번 째 단계:중간 부품 이 인 터 페 이 스 를 요청 할 때마다 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 {
                   //          ，        
          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 방법 은 token 을 검증 하 는 것 이 고 setToken 은 token 을 설정 하 는 방법 입 니 다.
로그 인 요청 이 없 으 면 이 렇 습 니 다.

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(
      <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)}>    </span>
          <div>{
            data ? data.result.map( (val,k) => {
              return <li key = {k}>{val.name}</li>
            }) : null
          }</div>
        </div>
      </div>
      
    )
  }
}
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
반응 부분
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="   "/>
              <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)}>    </span>
          <div>{
            data ? data.result.map( (val,k) => {
              return <li key = {k}>{val.name}</li>
            }) : null
          }</div>
        </div>
      </div>
      
    )
  }
}
export default Home
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
jQuery Layer 팝 업 층 에서 부모 페이지 로 전송 하 는 구현 코드
위 챗 애플 릿 은 공공 js 의 방법 에 대한 인 스 턴 스 를 참조 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage