• Angular2+nodejs 图片验证码的实现


    //login.component.ts
    import { DomSanitizer } from '@angular/platform-browser';//用来转换innerhtml
    import { CookieService } from 'ngx-cookie-service';
    import { ActivatedRoute, Router } from "@angular/router";
    import { CaptchapngService } from '../../../core/services/captchapng.service'
    constructor(
        private activatedRoute: ActivatedRoute,
        private CaptchapngService: CaptchapngService,
        private DomSanitizer: DomSanitizer,
        private Router:Router,
        private CookieService: CookieService,
    ) {
      ....
    }
    ....
    //svg获取验证码的方法,借助nodejs的svg-captcha getSvgCaptchapng() { if(event){ event.preventDefault(); } this.CaptchapngService.getSvgCaptch().subscribe( (res: Response) => { let body = res.json() if (body && body.success) { this.CookieService.set('tempYz', body.data.tempsession) this.Yzimg = this.DomSanitizer.bypassSecurityTrustHtml(body.data.img); //将<svg></svg>转换一下,方便在页面上使用innerHTML } } ) }

    service

    import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import { Observable, of } from 'rxjs';
    import { map, catchError } from 'rxjs/operators'
    @Injectable()
    export class CaptchapngService {
        constructor(private http: Http) {
        }
        //通用
        private handleError<T>(operation = 'operation', result?: T) {
            return (error: any): Observable<T> => {
                return of(result as T);
            }
        }
        getSvgCaptch() {
            let data = {
                size: 4,  //验证码长度
                 200,
                height: 100,
                background: "#f4f3f2",//干扰线条数
                noise: 2,
                fontSize: 60,
                ignoreChars: '0o1i',   //验证码字符中排除'0o1i'
                color: true // 验证码的字符是否有颜色,默认没有,如果设定了背景,则默认有 
            }
            return this.http.post('http://localhost:5000/user/svg-captcha', data).pipe(
                map((res: any) => res),
                catchError(this.handleError('getSvgCaptchhandleError'))
            )
        }
    }

    nodejs

    const svgCaptcha = require('svg-captcha');
    
    //获取svg验证码
    server.post('/user/svg-captcha',(req,res)=>{
        console.log('getsvg-captcha......')
         var option = req.body;
        // 验证码,有两个属性,text是字符,data是svg代码
        var code = svgCaptcha.create(option);
        // 返回数据直接放入页面元素展示即可
        data = {
            img: code.data,
            tempsession: code.text.toLowerCase()
        }
        res.json({'success':true, data:data});
    })
  • 相关阅读:
    微软发布3款SQL Injection(SQL 注入)攻击检测工具
    TortoiseSVN 使用介绍
    windows下的Bug跟踪管理软件Bugfree的安装
    国内PHP开源建站程序一览
    55个经典开源Windows工具
    JavaScript代码格式化工具(JS代码分析必备)
    Javascript工具 使用packer来压缩JS文件
    开源UML设计工具StarUML
    看似简单的问题其实不简单
    Javascript工具 使用JSDoc建立JavaScript代码的文档
  • 原文地址:https://www.cnblogs.com/lskzj/p/10040381.html
Copyright © 2020-2023  润新知