调用阿里云web API实现滑块验证码

本来想着弄一个算术验证码的,后来发现这玩意儿对我自己也太不友好了,果断换个不费脑子的。

滑块验证码的实现原理

实现方式:根据用户在滑块滑动的响应时间,拖动速度等数据来验证。

优点:显著提高用户体验。

调用阿里云web API实现图形验证码

登录阿里云→控制台云盾选择验证码 在这里插入图片描述 接下来就按图行事吧~ 在这里插入图片描述 在这里插入图片描述

在这里插入图片描述 第一次使用选择新增配置 在这里插入图片描述

在这里插入图片描述

在这里插入图片描述 根据接入文档,编写调用代码。

在这里插入图片描述 eg: login.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心随笔-博客管理登录</title>
    <link href="../../static/images/icon/blogicon.ico" th:href="@{/images/icon/blogicon.ico}" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/mystyle.css" th:href="@{/css/mystyle.css}">
  <script src="../../js/jquery.min.js" th:src="@{js/jquery.min.js}"></script>
  <!-- 国内使用 -->
  <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head>
<body>

<br>
<br>
<br>
 <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
   <div class="ui container">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui teal image header">
           <div class="content">
             管理后台登录
           </div>
         </h2>
         <form class="ui large form" method="post" action="#" th:action="@{/admin/login}">
           <div class="ui  segment">
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="username" placeholder="用户名">
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="password" placeholder="密码">
               </div>
             </div>
             <div class="field">
<!--               <label>验证:</label>-->
               <div class="ui left icon input">
<!--                 <i class="check square icon"></i>-->
                 <div id="your-dom-id" class="nc-container"></div>
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <button class="ui fluid large submit button" id="btOK" disabled="disabled">登   录</button>
               </div>
<!--               <input type="submit" id="btOK"  value="登录" disabled="disabled">-->
             </div>
           </div>

           <div class="ui error mini message"></div>
           <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">用户名和密码错误</div>

         </form>

       </div>
     </div>
   </div>
 </div>
</body>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="../../static/js/myscript.js" th:src="@{js/myscript.js}"></script>

</body>
</html>

mystyle.css

#btOK{
    border: none;
    color: white;
    text-align: center;
    display: inline-block;
    font-size: 16px;
  }

myscript.js

$('.ui.form').form({
    fields : {
        username : {
            identifier: 'username',
            rules: [{
                type : 'empty',
                prompt: '请输入用户名'
            }]
        },
        password : {
            identifier: 'password',
            rules: [{
                type : 'empty',
                prompt: '请输入密码'
            }]
        }
    }
});

var nc_token = ["FFFF0N00000000009DF0", (new Date()).getTime(), Math.random()].join(':');
var NC_Opt =
        {
          renderTo: "#your-dom-id",
          appkey: "FFFF0N00000000009DF0",
          scene: "nc_login",
          token: nc_token,
          customWidth: 390,
          trans:{"key1":"code0"},
          elementID: ["usernameID"],
          is_Opt: 0,
          language: "cn",
          isEnabled: true,
          timeout: 3000,
          times:5,
          apimap: {
            // 'analyze': '//a.com/nocaptcha/analyze.jsonp',
            // 'get_captcha': '//b.com/get_captcha/ver3',
            // 'get_captcha': '//pin3.aliyun.com/get_captcha/ver3'
            // 'get_img': '//c.com/get_img',
            // 'checkcode': '//d.com/captcha/checkcode.jsonp',
            // 'umid_Url': '//e.com/security/umscript/3.2.1/um.js',
            // 'uab_Url': '//aeu.alicdn.com/js/uac/909.js',
            // 'umid_serUrl': 'https://g.com/service/um.json'
          },
          callback: function (data) {
            $("#btOK").prop("disabled", "");
            $("#btOK").css("background-color", "#00b5ad")
            // window.console && console.log(nc_token)
            // window.console && console.log(data.csessionid)
            // window.console && console.log(data.sig)
          }
        }
var nc = new noCaptcha(NC_Opt)
nc.upLang('cn', {
  _startTEXT: "请按住滑块,拖动到最右边",
  _yesTEXT: "验证通过",
  _error300: "哎呀,出错了,点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
  _errorNetwork: "网络不给力,请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
})

效果演示:

在这里插入图片描述

2 在这里插入图片描述

3

在这里插入图片描述

欢迎访问我的小站: 心随笔~

end
  • 作者:btfqn1024(联系作者)
  • 发表时间:2021-04-21 20:15
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 转载声明:转载请附上原文链接
  • 公众号转载:请在文末添加作者公众号二维码(公众号二维码见右边,欢迎关注)
  • 评论