阿里云滑块验证组件

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>