阿里云滑块验证前端启动验证案例

最新推荐文章于 2024-06-05 15:59:02 发布

优秀的秃顶美男子

最新推荐文章于 2024-06-05 15:59:02 发布

阅读量3k

点赞数

分类专栏：前端文章标签： js

原文链接：https://blog.csdn.net/qq_41485414/article/details/80240758

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

前端源码

新建一个html文件贴入官网前端源码

<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <!-- 国内使用 -->
    <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
    <!-- 若您的主要用户来源于海外，请替换使用下面的js资源 -->
   <!-- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script>  -->
</head>
<body>
    <div id="__nc" style="margin-left:auto;margin-right:auto;width:80%;height:100px;padding-top:100px;">
        <div id="nc"></div>
    </div>
    <script> 
    var nc_token = ["CF_APP_1", (new Date()).getTime(), Math.random()].join(':');
    var nc=NoCaptcha.init({
        renderTo: '#nc',
        appkey: 'CF_APP_1',
        scene: 'register',
        token: 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) {
            window.console && console.log(nc_token)
            window.console && console.log(data.csessionid)
            window.console && console.log(data.sig)
 
            //请求接口调用验签
        },
        error: function (s) {
        }
    });
    NoCaptcha.setEnabled(true);
    nc.reset();//请务必确保这里调用一次reset()方法
    NoCaptcha.upLang('cn', {
        'LOADING':"加载中...",//加载
        'SLIDER_LABEL': "请向右滑动验证",//等待滑动
        'CHECK_Y':"验证通过",//通过
        'ERROR_TITLE':"非常抱歉，这出错了...",//拦截
        'CHECK_N':"验证未通过", //准备唤醒二次验证
        'OVERLAY_INFORM':"经检测你当前操作环境存在风险，请输入验证码",//二次验证
        'TIPS_TITLE':"验证码错误，请重新输入"//验证码输错时的提示
    });
    </script>
</body>
</html>

需要放入服务器容器才能打开验证

将文件放入nginx 中的html 目录下
在这里插入图片描述
启动 nginx

start nginx

启动成功访问 nginx 端口加文件名(默认index.html)

在这里插入图片描述

优秀的秃顶美男子

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
阿里云滑块验证前端启动验证案例

前端源码新建一个html文件贴入官网前端源码<html><head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">  <sc
复制链接

扫一扫