“This is the first day of my participation in the First Challenge 2022. For details: First Challenge 2022”
preface
Slider verification is more common means of man-machine identification, but their own do half will really do not come out, think about this thing is still very difficult to consider, how to identify whether it is man-machine? This article introduces Vue+ Ali cloud verification to make this small function.
Integrated Aliyun verification
What the front end needs
- appkey
- scene
- The back-end to cooperate
The introduction of Ali Cloud verification
public/index.html
<head>
<script src="https://g.alicdn.com/AWSC/AWSC/awsc.js"></script>
</head>
Copy the code
vue.config.js
module.exports = {
configureWebpack: {
externals: {
AWSC: 'AWSC',
},
}
}
Copy the code
Encapsulate a validation component
Train of thought is very simple actually, function is unitary also.
- Initialize loading ali cloud verification control
- Refresh the validation control
There are two main points
1. In Mounted, an error occurs when the Dom is not fully loaded. 2. Check whether the monitor inside the Watch is refreshed 3.. Remember to customize the styles
Let’s start writing the component
NoCaptcha.vue
<template>
<div>
<div id="nc">
</div>
</div>
</template>
<script>
export default {
// After the authentication succeeds, the server reports an error (such as an account or password error), and you need to reset the slider
props: {
reload: {
type: Boolean.default: false,}},data() {
return {
ic: ' './ / noCaptcha instance
};
},
watch: {
reload: {
handler(newV) {
console.log(newV);
if (newV) {
this.nc.reset(); // Reset the slider}}},},mounted() {
this.init(); // Initialize method
},
methods: {
init() {
const self = this;
// instantiate nc
// eslint-disable-next-line no-undef
AWSC.use('nc'.function(state, module) {
/ / initialization
self.nc = module.init({
// You can find the corresponding appKey field value on the configuration management TAB of ali Cloud verification code console. Be sure to fill in the value correctly.
appkey: 'FFFF0N00000000005CE9'.// You can find the corresponding scene value on the configuration management TAB page of ali Cloud verification code console, please be sure to fill in the correct value.
scene: 'nc_login'.// The DOM ID of the slider rendering.
renderTo: 'nc'.// you can record the sessionId (sessionId), signature string (sig), request unique identifier (token) fields in this callback parameter, and send the business request together with your server invocation check.
success: function(data) {
data.scene = 'nc_login'
self.$emit('slideCallback', data);
},
// Trigger this callback parameter when sliding validation fails.
fail: function(failCode) {
this.$message('Sliding verification failed, failure number${failCode}`);
console.log(failCode);
},
// This callback parameter is triggered when the verification code is not loaded correctly.
error: function(errorCode) {
this.$message(Verification code loading exception, exception number${errorCode}`);
console.log(errorCode);
self.$emit('slideCallback', {cls:false}); }}); }); ,}}};</script>
<style lang="scss" scoped>
#nc {
width: 100%;
display: contents;
}
/deep/.nc-container #nc_1_wrapper {
width: 100%;
height: 36px;
line-height: 36px;
#nc_1_n1t.#nc_1__bg.#nc_1_n1z.#nc_1__scale_text..nc-lang-cnt {
height: 36px;
line-height: 36px; }}</style>
Copy the code
Using the component
Questions to consider
- What if the validation control is not loaded? (For example, IE does not support it)
- Operations personnel are not required
- Use the username password and then verify that the automatic login event is invoked
It’s very simple to verify that the control failed to load and there is a callback, let the back end add a parameter, did not load the validation component, let him know to pass
<template>
// Other code omitted
<NoCaptcha @slideCallback="finishSlide" :reload="reload" />
</template>
<script>
// Other code omitted
import NoCaptcha from '@/components/NoCaptch.vue';
data() {
return {
reload: false,}},method: {
// Click login
login() {
/ / verification slightly
this.reload = false; // After validation, reset the slider to false
// Back-end login interface
xx()
.then(() = > {
// The login success code is omitted
})
.catch((err) = > {
// Other code omitted
this.reload = true; // The slider needs to be reset
console.log(err || 'This user has no menu permission, please contact the administrator.'); // Error message
});
},
// Complete the slide
finishSlide(data) {
// Use return values as needed
console.log('the session ID', data.sessionId)
console.log('Signature string', data.sig)
console.log('Slider request token', data.token)
if (data.cls === false) {// Verify load failed
this.loginForm.cls = false
}
if (data.sessionId) {// Non-man-machine operation
this.loginForm.scene = data.scene
this.loginForm.ncToken = data.token
this.loginForm.sig = data.sig
this.loginForm.sessionId = data.sessionId
delete this.loginForm.cls
}
if (this.loginForm.username && this.loginForm.password) {// Enter the user name and password
this.login()
}
},
}
</script>
Copy the code
thinking
- Can this control be implemented if the front end does it or the back end does it?
- Do you understand the sliding verification mechanism?
- Can this be achieved with absolute security?
PS: I have thought about it for a while. The front end needs to introduce the SDK of Aliyun, which will collect user data. Then after the slider is completed, the data will be analyzed to determine whether it is man-machine. The algorithm is a secret, of course, because there’s money to be made. In fact, the sliding algorithm can be simulated, not absolutely safe, just an additional step.
Write in the last
I am Liangcheng A, a front-end, love technology and love life.
I’m very happy to meet you.
If you want to learn more, please click here and look forward to your little ⭐⭐
-
If there are any errors in this article, please correct them in the comments section. If this article helped you, please like it and follow 😊
-
This article was first published in nuggets. Reprint is prohibited without permission 💌