1、阿里云滑块官网文档:
https://help.aliyun.com/document_detail/193141.html?spm=a2c4g.11186623.0.0.16c12f52RdQoK0
<!-- 阿里云滑块验证:引入js文件,注意t的版本,不同t的版本操作不同-->
<script type="text/javascript" charset="utf-8" src="https://g.alicdn.com/sd/nch5/index.js">
</script>
uniapp封装的组件如下:
注意:建议将
nch5.js库
下载到本地引入,为解决:cdn方式引入,偶现
滑块不出现的问题。
<!--
* @Descripttion: 【阿里云】滑块验证组件
* @Author: XXX
* @Date: 2023-02-15 11:26:49
* @LastEditors:
* @LastEditTime:
* @Document: 参考:[阿里云文档] https://help.aliyun.com/document_detail/193141.html?spm=a2c4g.11186623.0.0.16c12f52RdQoK0
-->
<template>
<view class="validate-slider-wrap">
<view class="slider-title">请先进行滑动验证</view>
<view id="captcha" class="captcha"></view>
</view>
</template>
<script>
import '../../libs/nch5.js' // 将nch5库下载本地引入
export default {
props: {
title: {
type: String,
default: '',
required: false
},
},
data() {
return {
appkey: "xxx", // 阿里云后台配置参数
scene: "xxx", // 阿里云后台配置参数
nc_token: [this.appkey, (new Date()).getTime(), Math.random()].join(':')
}
},
mounted() {
let that = this;
let nc = NoCaptcha.init({
renderTo: '#captcha',
appkey: that.appkey,
scene: that.scene,
token: that.nc_token,
trans: {"key1": "code200"},
// elementID: ["usernameID"],
is_Opt: 0,
language: "cn",
timeout: 10000,
retryTimes: 5,
errorTimes: 5,
inline: false,
apimap: {
// 'analyze': '//a.com/nocaptcha/analyze.jsonp',
// 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
},
bannerHidden: false,
initHidden: false,
callback: function (data) {
console.log('滑块验证成功');
const params = {
slider_token: that.nc_token,
slider_scene: that.scene,
slider_sig: data.sig,
slider_session_id: data.csessionid
}
that.$emit('validate-success', params) // 触发父组件的validate-success事件,并传参
},
error: function (err) {
uni.showToast({
title: err.message || '阿里云滑块验证失败',
icon: 'error',
duration: 2000
});
console.log('滑动验证错误', err)
}
});
NoCaptcha.setEnabled(true);
nc.reset(); // 请务必确保这里调用一次reset()方法
NoCaptcha.upLang('cn', {
'LOADING': "加载中...",// 加载
'SLIDER_LABEL': "请向右滑动验证",// 等待滑动
'CHECK_Y': "验证通过",// 通过
'ERROR_TITLE': "非常抱歉,这出错了...",// 拦截
'CHECK_N': "验证未通过", // 准备唤醒二次验证
'OVERLAY_INFORM': "经检测你当前操作环境存在风险,请输入验证码",// 二次验证
'TIPS_TITLE': "验证码错误,请重新输入"// 验证码输错时的提示
});
},
}
</script>
<style lang="scss" scoped>
.validate-slider-wrap {
.slider-title {
font-size: 32rpx;
font-weight: bold;
text-align: center;
line-height: 4em;
}
}
</style>