0.0.9 • Published 2 years ago

shdr-proflie-captcha v0.0.9

Weekly downloads
-
License
ISC
Repository
github
Last release
2 years ago

接入指南

  • features 参见Captcha+compoment+design++and+Access+Guide

  • npm 接入

    import ProflieCaptcha from 'shdr-proflie-captcha'
    import 'shdr-proflie-captcha/dist/style.css'
    
    const ProflieCaptchaInstance = new ProflieCaptcha({
      successText: '成功', // 弹出成功显示文案
      errorText: '哎呀,再试一次', // 弹出失败显示文案
      mode: 'modal',     // 是否是弹窗展示
      modalTitleText: '安全验证',  // 弹窗头部文案
      cb: function,    // 初始化captcha图形,可用于埋点
      constainer: HTMLElement       // document.querySelector('#app') as HTMLElement
    })
    
    <!-- 获取captcha 数据信息 -->
    ProflieCaptchaInstance.captchaInfoParams
    
    <!-- 本地开发调试加上代理 -->
    <!-- 安全性考虑 接口target参见 profile-service api -->
    
    server: {
        proxy: {
          '/api': {
            target: 'XXX',
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, ''),
          }
        }
      }
    
     <!-- 线上环境 node服务代理, 其他服务参考即可 -->
    app.get(config.urlPath('/captcha'), async (req, res) => {
      const http: IFastHttpClient = req.app.get(FAST_HTTP_CLIENT);
      const url = `${captchaService}/captcha`;
      const {status, data} = await http.get(url);
      res.status(status).send({status, data});
    });
    
    app.post(config.urlPath('/captcha/verify'), async (req, res) => {
      const httpClient: IFastHttpClient = req.app.get(FAST_HTTP_CLIENT);
      const url = `${captchaService}/captcha/verify`;
      const {status, data} = await httpClient.post(url, req.body);
      if (status >= 400) {
        return res.send({status, data: {}, message: data.error});
      }
      return res.send({status, data, message: 'ok'});
    });

    nginx 反向代理

      server {
        # 监听端口
        listen 8080;
        # 主机名称
        server_name localhost;
        # 根目录
        root /usr/local/var/dzm;
        # 匹配协议
        location / {
            index index.html;
        }
        // 监听包含 /api/ 的链接
        location /api/ {
            // 匹配到后转发到这个域名地址
            proxy_pass http://${captchaService};
        }
      }
  • script 接入

    <link rel="stylesheet" href="dist/style.css">
    <script src="dist/profile-captcha.umd.js"></script>
      <script>
        window.ProflieCaptchaInstance = new ProflieCaptcha({
          successText: '成功',
          errorText: '哎呀,再试一次',
          mode: 'modal',
          modalTitleText: '安全验证'
        });
      </script>
  • 事件监听

      <!-- 自定义监听 拖拽结束 -->
      document.addEventListener("@profile-captcha:dragEnd", function (info:any) {
        console.log(info, "@profile-captcha:dragEnd");
        // (document.querySelector('.slider.success') as HTMLElement).className+=' color-success';
      
      });
    
    
      <!-- 校验通过事件 -->
      document.addEventListener("@profile-captcha:verifyCaptchaSuccess", (info: any) => {
        console.log(info, "@profile-captcha:verifyCaptchaSuccess");
        window.location.href = 'http://www.baidu.com/'
        // (document.querySelector('.slider.success') as HTMLElement).className+=' color-success';
      });
0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago

0.0.3

2 years ago

0.0.2

2 years ago

0.0.1

2 years ago