Using aliyun’s slider verification, first register and apply for appKey.
- Public > index.html to introduce JS
<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">
<! -- Domestic use -->
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/nch5/index.js?t=2015052012"></script>
<! If your main users are from overseas, please use the following JS resources instead -->
<! -- <script type="text/javascript" charset="utf-8" src="//aeis.alicdn.com/sd/nch5/index.js?t=2015052012"></script> -->
</head>
Copy the code- Create a file no-captcha.vue
<template>
<div id="__nc" style="width:100%; margin-bottom:20px;">
<div id="nc"></div>
</div>
</template>
<script>
export default {
name: "machineCheck".data() {
return {
platform: ' '.isWeChat: false,}},mounted() {
// this.platformfunc (
this.check()
},
props: {
logVal: Number
},
methods: {
// Determine the model system
platformFunC() {
const u = navigator.userAgent;
const ua = navigator.userAgent.toLowerCase();
let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; / / android terminal
letisiOS = !! u.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/); / / ios terminal
let weChat = ua.match(/MicroMessenger/i) = ="micromessenger";
if (isiOS) {
this.platform = 'ios';
} else if (isAndroid) {
this.platform = 'android';
}
this.isWeChat = weChat;
},
check(){
let _that = this
// instantiate nc
const nc_token = ["The appKey you applied for", (new Date()).getTime(), Math.random()].join(':');
const nc = NoCaptcha.init({
renderTo: '#nc'.appkey: 'appKey you applied for'.scene: 'nc_message_h5'.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) {
data.nc_token = nc_token
data.scene = 'nc_message_h5'
let dataArr = data
_that.$emit('ncData', dataArr)
if (_that.logVal === 1) {
_that.childMethod()
}
if (_that.platform === 'ios') {
window.webkit.messageHandlers.getNcData.postMessage(JSON.stringify(dataArr));
} else if (_that.platform === 'android') {
window.js.getNcData(JSON.stringify(dataArr));
}
// console.log(data)
// window.console && console.log('nc_token：' + nc_token)
// window.console && console.log(' csessionId: '+ data.csessionid)
// window.console && console.log('sig：' + data.sig)
},
error: function (s) {}}); NoCaptcha.setEnabled(true);
nc.reset();// Be sure to call the reset() method once
NoCaptcha.upLang('cn', {
'LOADING':"Loading..."./ / load
'SLIDER_LABEL': "Please swipe right to verify.".// Wait for the slide
'CHECK_Y':"Verified"./ / by
'ERROR_TITLE':"I'm very sorry, this is a mistake..."./ / intercept
'CHECK_N':"Verification failed".// Prepare to wake up secondary validation
'OVERLAY_INFORM':"Risk detected in your current operating environment, please enter the verification code.".// Double check
'TIPS_TITLE':"Verification code error, please re-enter"// The verification code is incorrectly entered
});
},
childMethod() {
// console.log(this.$parent.$parent)
this.$parent.$parent.reSendCode(); }}}</script>
<style scoped></style>
Copy the code- Introduce the above components in pages that require slider validation
<template>
<div>
<section class="four_container">
<div class="form_section">
<el-form>
<el-form-item label="Name" style="padding-left: 14px">
<el-input
v-model="search_form.userName"
placeholder="Please fill in your identification name."
></el-input>
</el-form-item>
<el-form-item label="Certificate No.">
<el-input
v-model="search_form.cardNo"
placeholder="Please fill in your id number."
></el-input>
</el-form-item>
<el-form-item label="Mobile phone Number">
<div class="getCodeBox">
<el-input
v-model="search_form.userPhone"
placeholder="Please fill in your cell phone number."
maxlength="11"
></el-input>
<p
:class="isSendCode ? 'sendCode' : 'sendCode_no'"
@click="isSendCode ? sendCode() : ''"
>
{{ codeText }}
</p>
</div>
</el-form-item>
<machineCheck
v-on:ncData="ncData"
:logVal="1"
v-if="ncShow"
></machineCheck>
<el-form-item label="Verification code">
<el-input
v-model="search_form.captcha"
placeholder="Please enter your mobile verification code."
maxlength="6"
></el-input>
</el-form-item>
</el-form>
<p
:class="isSearchData ? 'search_button_op' : 'search_button'"
@click="isSearchData ? submit_search() : ''"
>The query</p>
</div>
</section>
</div>
</template>
<script>
import axiosApi from ".. /.. /.. /network/dataRequest/DataRequest.js";
import machineCheck from ".. /.. /.. /components/comMon/no-captcha.vue";
import axios from "axios";
export default {
name: "".data() {
return {
isSendCode: false.// Whether the send verification code button can be clicked
isSearchData: false.// Check whether the button can be clicked
codeText: "Obtain captcha code".// SMS verification code
codeStatus: 0.// The status of sending the verification code
totalTime: 60.// Total countdown time
interverTime: null./ / timer
ncShow: false.// Man-machine check display hidden
nc_DataArr: {},
code_form: {
captchaType: "scoreOffline".nc_token: "".phoneNumber: "".scene: "".sessionId: "".sig: "",},search_form: {
captcha: "".cardNo: "".userName: "".userPhone: "",}}; },watch: {},
props: {},
components: { machineCheck },
mounted() {},
methods: {
ncData(ncData) {
this.nc_DataArr = ncData;
},
// Click send verification code
sendCode() {
// Prevent users from clicking again
if (!this.interverTime) {
if (this.search_form.userPhone) {
// Check whether the user's phone number is correct
if (!/^1[3456789]\d{9}$/.test(this.search_form.userPhone.trim())) {
this.ncShow = false;
this.$message({
showClose: true.message: "Mobile phone number format error".type: "error"});return false;
} else {
this.nc_DataArr = {};
if (this.nc_DataArr.code ! = =0) {
this.ncShow = true;
return false;
}
this.reSendCode(); }}else {
this.ncShow = false;
this.$message({
showClose: true.message: "Cell phone number cannot be empty.".type: "error"}); }}},// Send the duplicate part of the verification code
reSendCode() {
this.startTime();
this.code_form = {
captchaType: "scoreOffline".nc_token: this.nc_DataArr.nc_token,
phoneNumber: this.search_form.userPhone,
scene: "nc_message_h5".sessionId: this.nc_DataArr.csessionid,
sig: this.nc_DataArr.sig,
};
let that = this;
axiosApi.captchaUserMachineSendApi(this.code_form).then((res) = > {
console.log(res);
if (res.data.code == 0) {
that.ncShow = false;
} else {
this.$message({
showClose: true.message: res.data.msg,
type: "error"}); } that.ncShow =false;
});
},
// Start the timer
startTime() {
this.codeStatus = 1;
this.isSendCode = false;
this.interverTime = setInterval(() = > {
this.totalTime--;
this.codeText = this.totalTime + "Retrieve in seconds";
if (this.totalTime <= 0) {
this.clearTime(); }},1000);
},
// Clear the timer and initialize the data
clearTime() {
clearInterval(this.interverTime);
this.totalTime = 60;
this.codeText = "Obtain captcha code";
this.codeStatus = 0;
this.interverTime = null;
this.isSendCode = true; ,}}};</script>
<style scoped lang="scss" rel="stylesheet/scss"></style>
Copy the code