zoukankan      html  css  js  c++  java
  • 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});
    })
  • 相关阅读:
    day1-python简介+安装
    dgango中admin下添加搜索功能
    调用zabbix 分组api
    python 调用zabbix api实现查询主机信息,输出所有主机ip
    python实现用户登录界面
    怎样过滤跨站恶意脚本攻击(XSS)
    java服务安装(一):使用java service wrapper及maven打zip包
    详解Maven项目利用java service wrapper将Java程序生成Windows服务
    使用tomcat7-maven-plugin部署Web项目
    常用Maven插件介绍
  • 原文地址:https://www.cnblogs.com/lskzj/p/10040381.html
Copyright © 2011-2022 走看看