shdr-proflie-captcha v0.0.9

接入指南

• 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';
    });