-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path阿里云滑动验证.html
130 lines (119 loc) · 5.13 KB
/
阿里云滑动验证.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<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">
<!-- 国内使用 -->
<style>
* {
padding: 0;
margin: 0;
}
</style>
<style type="text/css">
.nc-container #nc_1_wrapper {
width: 100% !important;
height: 44px !important;
line-height: 44px !important;
font-size: 15px !important;
}
.nc_iconfont,
.btn_ok {
font-size: 22px !important;
}
.nc_scale {
height: 44px !important;
}
.nc-container .nc_scale span {
height: 42px !important;
line-height: 44px !important;
}
.nc-container .nc_scale .scale_text {
line-height: 44px !important;
}
.nc-container .nc_wrapper .errloading {
line-height: 28px !important;
text-indent: 5px !important;
}
</style>
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></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"></div>
<script>
sliderMount('FFFF0N00000000009F46', 'nc_message_h5');
function sliderMount(aliYunAppkey, aliYunScene) {
// 实例化nc
AWSC.use("nc", function (state, module) {
// 初始化
window.nc = module.init({
// 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
appkey: aliYunAppkey,
//使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
scene: aliYunScene,
// 声明滑动验证需要渲染的目标ID。
renderTo: "nc",
//前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
success: function (data) {
// window.console && console.log(data)
data.state = 'success';
data.scene = aliYunScene;
if (params.device === 'android') {
window.sliderInterface.getSlideData(JSON.stringify(data));
} else if (params.device === 'iPhone') {
window.webkit.messageHandlers.getSlideData.postMessage(data);
}
},
// 滑动验证失败时触发该回调参数。
fail: function (failCode) {
// window.console && console.log(failCode)
var data = {
state: 'error',
errorCode: failCode
}
if (params.device === 'android') {
window.sliderInterface.getSlideData(JSON.stringify(data));
} else if (params.device === 'iPhone') {
window.webkit.messageHandlers.getSlideData.postMessage(data);
}
},
// 验证码加载出现异常时触发该回调参数。
error: function (errorCode) {
// window.console && console.log(errorCode)
var data = {
state: 'error',
errorCode: errorCode
}
if (params.device === 'android') {
window.sliderInterface.getSlideData(JSON.stringify(data));
} else if (params.device === 'iPhone') {
window.webkit.messageHandlers.getSlideData.postMessage(data);
}
}
});
})
}
/**
* @param {string} url
* @returns {Object}
*/
function param2Obj(url) {
const search = url.split('?')[1]
if (!search) {
return {}
}
return JSON.parse(
'{"' +
decodeURIComponent(search)
.replace(/"/g, '\\"')
.replace(/&/g, '","')
.replace(/=/g, '":"')
.replace(/\+/g, ' ') +
'"}'
)
}
</script>
</body>
</html>