Thank you for the invitation. Generally speaking, the working steps of the verification code are as follows:

1. In fact, the server generates a 4-digit string, and uses this 4-digit string to generate the image and write it inresponse中, 返回给浏览器, 并把这个4位字符串存在了当前session.

2. After the browser submits, compare the submitted string with the string insessionto complete the verification code.

If not usedsession比如可以设置到cookie中如下(key=test, value=testFor example, you can set it incookieas follows (key=test, value=test):

1. The following number changes are to avoid browser caching problems.
2. There is no need to use any parameters. The server will automatically generate a verification code according to the time file (I want to see if the server can obtain it)

3. The principle of the verification code is to generate a string of random numbers and store them in the session first, and finally generate images and send them to the client for identification. The user submits the answer to the verification code, and the server compares your answer with the random numbers in the session. The same. It means the verification is successful

4.Like 3

5. When used with redis, token or session are generally used, so that it can identify which user the verification code belongs to, such as the following key

>keys * >uid_100_login_verify

pseudocode

Get verification code

User u=User(); u.tmp_id=100;//唯一标识，传给客户端表单 Random rand=new Random(种子); int v=rand.rand();//一般会生成其他得英文字母配合生成复杂的 redisCli.add("uid_100_login_verify",random)//key,value res.return(new Verify());

Verify

User u=User(); u.tmp_id=$POST['tmp_id'];//获取客户端 string value=redisCli.get("uid_100_login_verify");//key return value if($POST['verify_code']===value){ return "验证成功"; }

First one: The general process of verification code is the same as what you described.

The second one:
There is no need to pass a value to the background to generate a verification code.
In the example you gave, the change in the subsequent string of numbers is actually to re-request the URL.
Usually the picture link points to the link to generate the verification code. , use js to change the connection after clicking, that is, add a string of random numbers after it, so that the browser detects that the connection behind src has changed (that string of random strings is used for this), and then it will request the background again to obtain the new Generated verification code image.

The third one:
After the binary image is returned in the background, there is no need to generate a token, but the string of numbers used to generate the verification code needs to be stored in the session. It is safe to save it on the server side and does not need to be returned to the client.

Fourth:
After the user enters the submitted verification code, compare the verification code number submitted by the user with the number in the server session. If they are the same, the verification is passed.

As for finally putting the verification code into redis, you can search for relevant information on how to save the session into redis.

The background code is generally

public void genAuthImage(){

//Generate token uuid
//Write cookie
response.addCookie();--->actually set the set-cookie header information

//Generate pictures and write them out using response
end
}
Front end:

Front end:

chrome check

Console

Uncertain conclusion: When the response type is image/jpg, the cookie cannot be set.
Can anyone who has seen it explain the reason?