图形验证码

如下图实现图形验证码

1.uniapp中利用天御插件实现

1.前提条件

使用图形验证，必须申请所需要的CaptchaAppid和AppSecretKey（在下面地址中进行申请）

登录 - 腾讯云

2.添加插件

(1)插件需要在微信公众平台中添加 = 》 设置 =》第三方设置 =》 添加插件

 (2)再次重新启动项目到微信开发者工具后，直接添加插件

3.使用 

1.在mainfest.json中进行配置插件

 "plugins" : {
            "t-captcha" : {
                "version" : "1.0.3",
                "provider" : "wxb302e0fc8ab232b4"
            }
        }

 2.在pages.json中进行引入组件

"usingComponents": {
	"t-captcha": "plugin://t-captcha/t-captcha"
 }

3.在对应位置进行使用

<t-captcha
	 id="captcha"
	 app-id="申请的appid"
	 @verify="handlerVerify"
		/>
 

 打开弹框

this.selectComponent('#captcha').show();

成功验证

	        //验证成功
			handlerVerify (ev) {
				// 如果使用了 mpvue，ev.detail 需要换成 ev.mp.detail
				if(ev.detail.ret === 0) {
					// 验证成功
					this.redPackageFlag = ev.detail.ticket;
					console.log('ticket:', ev.detail.ticket)
					EntryApi.checkCaptcha({ticket: ev.detail.ticket}).then(res => {
						if(!res) {
							this.$nextTick(() => {
								 this.selectComponent('#captcha').show()
							})
						}
					})
				} else {
					this.redPackageFlag = ''
				}
			}

插件还提供了其他方法和组件属性

 可能在引入过程中会出现其他错误，可以进行一步一步排查，是否是其他插件影响，或者是某个个步骤没有做造成

2.vue项目 - vue-monoplasty-slide-verifyvue-monoplasty-slide-verify: 基于滑动式的验证码，免于字母验证码的繁琐输入用于网页注册或者登录

实现效果

 

 

 安装

npm install --save vue-monoplasty-slide-verify

引入

import Vue from 'vue';
import SlideVerify from 'vue-monoplasty-slide-verify';
 
Vue.use(SlideVerify);

使用

<slide-verify :l="42"
            :r="10"
            :w="310"
            :h="155"
            slider-text="向右滑动"
            @success="onSuccess"
            @fail="onFail"
            @refresh="onRefresh"
            ></slide-verify>
<div>{{msg}}</div>
 
export default {
        name: 'App',
        data(){
            return {
                msg: '',
            }
        },
        methods: {
            onSuccess(){
                this.msg = 'login success'
            },
            onFail(){
                this.msg = ''
            },
            onRefresh(){
                this.msg = ''
            }
        }
    }