Python crawler tutorial: Teach you to implement a sliding captcha in 200 lines of code

Do network crawler students must have seen a variety of verification code, more advanced slide, click and other styles, it seems very complex, but in fact their core principle is still very clear, this article roughly explains the principle of these verification code and take you to achieve a sliding verification code.

In fact, the verification of this type of captcha is divided into two steps:

1. The first step is the front-end verification. Generally speaking, the login registration page is accompanied by a form submission when it is clicked, and a JavaScript event is triggered during the form submission. If a captcha is added, an additional verification is added at the time of form submission to determine whether the captcha has successfully completed the operation. If not, simply cancel the submission of the form and say “your validation failed, please revalidate” or something like that. So this step will prevent the “gentleman”.

2. The second step is the server verification. It means that after the form is submitted, there will be a request is sent to the server, the request contains a lot of data, such as user name, password, if docking the authentication code, there will be additional verification code values, or the more complex the encrypted Token value, the server will check for sending information, if the verification through, The entire request is successful, and a normal response is returned, otherwise an incorrect response is returned. Therefore, if you want to directly construct form submission through the program, the server can do further verification, because the submitted verification code information is related to the server Session, plus some CSRF verification, so this step can prevent “fraud”.

The above are the two stages of the verification code, generally speaking, for security, in the development of a website, both the client and the server need to add verification, so as to ensure security.

This article mainly to introduce the first stage, which is the front-end verification verification code implementation, the following to introduce the drag verification code concrete implementation.

demand

So the front end to complete a qualified verification code, what on earth need to make it like?

1. First of all, the verification code has a rough prototype. Since it is a drag verification code, it is necessary to drag the block and the target block.

2. The verification code of a function is to circumvent the automatic operation of the machine, so we need through the path to determine the drag process is real people, or a machine, so we need to record the path of the drag, path after calculation can be sent to the backend for further classification, such as docking deep learning model to classify drag track whether people.

These are the two basic requirements of captchas, so let’s implement them here.

The results of

Here are the results:



Drag a verification code example

It can be seen that there is an initial slider and a target slider in the figure. The verification can only be successful if the initial slider is dragged to the target slider, and then the drag track is printed below, including its X and Y coordinates.

Once you have this content, you can submit it to the form, and the track data can be encrypted and verified to see if it’s legitimate.

The specific implementation

Here’s how this works. The core code is actually only 200 lines, but the entire core flow is explained below.

Since Vue is so popular, I will use Vue here to implement, the specific environment configuration is not described here, need to install:

Node.js：https://nodejs.org/en/

Vue-Cli：https://cli.vuejs.org/zh/

Once the installation is complete, you can use the vue command to create a new project:

vue create drag-captcha
Copy the code


Then find a nice landscape and put it in the public directory, which we’ll refer to later.

There needs to be a core of other packages called vue – drag – drop, the making address is: https://github.com/cameronhimself/vue-drag-drop, use this command to install under the directory:

npm install --save vue-drag-drop
Copy the code


Once installed, we can use it to implement captcha.

First, vue-drag-drop provides two components, one called drag and one called drop. The first is the Drag object, and the second is the Drop object. We use these two components to construct two sliders. Drag the Drag slider onto the Drop slider successfully. So, all we need to do is declare both of them and add some detection methods. As for the drag function, vue-drag-drop is already wrapped up for us.

Here we can change the contents of app. vue directly, and declare two components in <template> :

<template>
 <div id="app">
 <div id="wrapper" :style="wrapperStyle">
 <drop class="drop" id="target"
 :class="{ 'over': state.over }"
 @dragover="onDragOver"
 @dragleave="onDragLeave"
 :style="targetStyle">
 </drop>
 <drag class="drag" id="source"
 :transfer-data="true"
 @dragstart="onDragStart"
 @dragend="onDragEnd"
 @drag="onDrag" v-if=! "" state.dragged"
 :style="sourceStyle">
 <div slot="image" id="float" :style="sourceStyle">
 </div>
 </drag>
 </div>
 </div>
</template>
Copy the code

It is clear that a <drop> and a <drag> component have some properties bound to them. The following describes the common properties of these two components.

Drop

In the case of the Drop component, it is a placed object, and the dragged slider will be placed on the Drop, indicating that the drag was successful. It has two main events to listen for, one called dragover and one called dragleave, for events that Drag objects are dragged on and off, respectively.

In this case, the onDragOver and onDragLeave callbacks are set for the two events respectively. The onDragOver object is fired when the Drag object is placed on the Drop object, and the onDragLeave event is fired when the Drag object is dragged off.

In this case we only need a global variable to record whether or not we have dragged the slider to the target location, for example we can have a global variable state, and we use the over property to indicate whether or not we have dragged the slider to the target location.

So the onDragOver and onDragLeave events can be implemented like this:

onDragOver() {
 this.state.over = true
},
onDragLeave() {
 this.state.over = false
}
Copy the code

Drag

For the Drag component, which is a Drag object, we need to Drag the Drag slider onto the Drop slider to indicate that the Drag is successful. It has three main times to listen for: dragstart, drag and dragend, respectively representing dragstart, drag, dragend three events, we also set three callback methods onDragStart, onDrag, onDragEnd.

So for the onDragStart method, how do you implement that? This should handle the action immediately after the drag, because we need to record the trace, so declare a trace global variable to hold the trace information, and what onDragStart does is initialize the trace to be empty, and record the initial drag position so that we can calculate the drag path later, So it can be implemented as follows:

onDragStart(data, event) {
 this.init = {
 x: event.offsetX,
 y: event.offsetY,
 }
 this.trace = []
}
Copy the code

For the onDrag method, this is a set of drag actions that are handled during the drag process. In this case, we calculate the offset position of the drag and store it in the trace variable, so we can do as follows:

onDrag(data, event) {
 let offsetX = event.offsetX - this.init.x
 let offsetY = event.offsetY - this.init.y
 this.trace.push({
 x: offsetX,
 y: offsetY,
 })
}
Copy the code

For the onDragEnd method, it is checking the final result. Just now, we used the over attribute in the state variable to represent whether the drag was dragged to the target position. Here, we also defined another attribute to represent whether the drag was completed. The dragging attribute represents whether they are dragging, so logically the whole method is to detect the over attribute, then assign values to the dragging and dragging attributes, and then do some corresponding hints as follows:

onDragEnd() {
 if (this.state.over) {
 this.state.dragging = false
 this.state.dragged = true
 this.$message.success('Drag succeeded')}else {
 this.state.dragging = false
 this.state.dragged = false
 this.$message.error('Drag failed')
 }
 this.state.over = false
 }
Copy the code

OK, this is the main logic implementation, so we can complete the drag slider definition and drag listening.

Next, there are some style problems. For image rendering, CSS background-image style is directly used to set. If you want to display a certain range of image, background-position is used to set.

Well, the style Settings here can also be implemented in JavaScript, and we define them as computed properties:

wrapperStyle() {
 return {
 width: this.size.width + 'px',
 height: this.size.height + 'px',
 backgroundImage: 'url(' + this.image + ') ',
 backgroundSize: 'cover'}},targetStyle() {
 return {
 left: this.block.x + 'px',
 top: this.block.y + 'px'}},sourceStyle() {
 return {
 backgroundImage: 'url(' + this.image + ') ',
 backgroundSize: this.size.width + 'px ' + this.size.height + 'px',
 backgroundPosition: -this.block.x + 'px ' + -this.block.y + 'px'}}Copy the code

The slot part of the Drag component is also worth noting:

<div slot="image" id="float" :style="sourceStyle"></div>
Copy the code


This section defines the style of the image that moves with the mouse during the Drag process, and it defines the same style as the Drag slider so that during the Drag process, a Drag slider is displayed that moves with the mouse.

Finally, after the drag is complete, output the slide track, which I will display directly on the page. Add the following definition to the <template> area:

<div>
 <p v-if="state.dragged" id="trace"> Drag trace: {{trace}} </p> </div>Copy the code

Ok, so that’s some of the core code, there are some details that can be improved, such as the random initialization of the slider, and drag style Settings.

One last look at the effect:



Drag a verification code example

You can see that we first Drag the Drag slider, and when the Drag slider is dragged over the Drop slider, a white stroke appears, indicating that we have dragged to the target position. Then let go, trigger the onDragEnd method, show the drag track, the entire verification code is successful.

Of course, this is just the front end, but if you add form verification to this foundation, then add back end verification, and then add track recognition, then you have a complete captcha system, and that’s it.