2020-02-27 django 网站接入 阿里云盾 智能人机验证

准备工作

首先开通阿里云盾功能，然后点击新增配置

image.png

填写完信息之后点击系统代码集成
、

集成 html 代码

拿登录页面举例

                    <form method="post" id="curForm" action="{% url 'article:login' %}">
                        {%csrf_token%}
                        <div class="layui-form-item" style="display: none;">
                            <!-- <label class="layui-form-label">账号</label> -->
                            <div class="layui-input-inline">
                                <input type="text" id="next_url" name="next" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">账号</label>
                            <div class="layui-input-inline">
                                <input type="text" id="MemberCode" name="username" class="layui-input " value="{{ username }}">
                            </div>
                        </div>

                        <!---------------------注意这里------------------------------------------->
                        <input type="text" name="token" id="token" style="display: none">
                        <input type="text" name="sessionId" id="sessionId" style="display: none">
                        <input type="text" name="sig" id="sig" style="display: none">


                        <div class="layui-form-item">
                            <label class="layui-form-label">密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="MemberPassword" name="password" class="layui-input "
                                       value="">
                            </div>
                        </div>

                       <!---------------------还有这里------------------------------------------->
                        <div class="layui-form-item">
                            <div class="layui-input-inline verify_input">
                                <div id="sc" style="margin: 0;"></div>
                            </div>
                        </div>

                        <p style="color: red">{{ message }}</p>
                        <p><a class="color-green" href="{% url 'article:forget' %}">忘记密码？</a></p>
                        <button class="layui-btn" style="margin-top: 15px;" id="login_button">登录</button>
                    </form>

然后配置 js

• 添加js 文件:

    <script src="//g.alicdn.com/sd/smartCaptcha/0.0.4/index.js"></script>
    <script src="//g.alicdn.com/sd/quizCaptcha/0.0.1/index.js"></script>

• 添加 js 代码

<script>
    window.NVC_Opt = {
        appkey: '这里写自己的 appkey',
        scene: 'ic_login',
        renderTo: '#captcha',
        trans: {"key1": "code0", "nvcCode": 200},
        elements: [
            '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
            '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
        ],
        bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
        bg_front: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABQCAMAAADY1yDdAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAADUExURefk5w+ruswAAAAfSURBVFjD7cExAQAAAMKg9U9tCU+gAAAAAAAAAIC3AR+QAAFPlUGoAAAAAElFTkSuQmCC',
        obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
        bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
        obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
        bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
        upLang: {
            "cn": {
                _ggk_guide: "请摁住鼠标左键，刮出两面盾牌",
                _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
                _ggk_loading: "加载中",
                _ggk_fail: ['呀，盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
                _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
                _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
                _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
            }
        }
    };
    </script>
    <script src="//g.alicdn.com/sd/nvc/1.1.112/guide.js"></script>
    <script>
    // 下面可以调整按钮大小
    window.onload = function () {
        var ic = new smartCaptcha({
            renderTo: '#sc',
            width: 350,
            height: 38,
            default_txt: '点击按钮开始智能验证',
            success_txt: '验证成功',
            fail_txt: '验证失败，请在此点击按钮刷新',
            scaning_txt: '智能检测中',
            success: function (data) {
                $("#token").val(NVC_Opt.token);
                $("#sessionId").val(data.sessionId);
                $("#sig").val(data.sig);
            },
            fail: function (data) {
                console.log('ic error');
            }
        });
        ic.init();
    };
</script>

前端这样就完成啦

后端集成

我用的是 Django 后端，这里只讲配追，其他系统自行摸索

后端业务判断

import xml.sax
import xml.sax.handler
from aliyunsdkcore import client
from aliyunsdkafs.request.v20180112 import AuthenticateSigRequest
from aliyunsdkcore.profile import region_provider


def check_valid_code(token, sig, sessionId):
   # YOUR ACCESS_KEY、YOUR ACCESS_SECRET请替换成您的阿里云accesskey id和secret
   clt = client.AcsClient(settings.ALI_VALID_ACCESS_KEY, settings.ALI_VALID_ACCESS_SECRET, settings.ALI_VALID_REGON)
   request = AuthenticateSigRequest.AuthenticateSigRequest()
   # 必填参数：从前端获取，不可更改，android和ios只传这个参数即可
   request.set_SessionId(sessionId)
   # 必填参数：从前端获取，不可更改
   request.set_Sig(sig)
   # 必填参数：从前端获取，不可更改
   request.set_Token(token)
   # 必填参数：从前端获取，不可更改
   request.set_Scene('ic_login')
   # 必填参数：后端填写
   request.set_AppKey('<阿里云盾开通的时候获得的Appkey>')
   # 必填参数：后端填写
   request.set_RemoteIp("我感觉这里随便填写")
   result = clt.do_action(request)  # 返回code 100表示验签通过，900表示验签失败

   xh = XMLHandler()
   xml.sax.parseString(result, xh)
   ret = xh.getDict()

   return ret

            token = request.POST.get("token", '')
            sig = request.POST.get("sig", '')
            session_id = request.POST.get("sessionId", '')
            valid_result = check_valid_code(token, sig, session_id)
            if not valid_result.get("Code", "") == "100":
                return JsonResponse({"msg": "云盾验证失败!"})
            # 下面做验证成功的逻辑，无论传上来什么，先验证云盾，防止穷举漏洞

自此，阿里云盾集成结束，前端接受并显示后端发送的验证结果即可