This time I will bring you the function of node to realize the picture when logging in Verification code. What are the precautions for node to realize the function of picture verification code when logging in. The following is a practical case. Get up and take a look.
To implement the graphical verification code here, I use the svg-captcha module in node, which can support all characters and numbers. It is supported by all platforms and is very simple to use.
1. Install
1 |
|
2. Import
1 |
|
3. Get the verification code
3-1 Install cookie-parser
, which is used to save the obtained session to cookies to facilitate front-end access verification
cnpm i cookie-parser --save
3-2 Use cookie-parser
1 2 |
|
This way you can use cookies in the project
3-3 Get the verification code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
|
This only implements the function of generating the verification code, so what about access?
4. Write background routing
1 2 3 4 |
|
When the front end calls this interface /api/getCaptcha
, the verification code information is returned, which is in svg format
5. Front-end access
1 |
|
But now we have needs again. When this verification code is clicked, the verification code It will be refreshed
6. Click the verification code to refresh
Change the result of the verification code just now, add an outer a label to it, and bind it to Click event, I used vue
here, so it is @click
, the same is true for other frameworks.
1 2 3 |
|
Click eventeditCaptcha
1 2 3 |
|
This realizes the problem of clicking the verification code to refresh
7. Front-end verification verification code
We just got the verification code in the background, but the front-end needs How to verify?
Remember that we installed cookie-parser
in 3-2, and saved the generated session in a cookie in 3-3. Here our front-end can access this cookie Got the value of the verification code.
Why should it be stored in cookies? Because the session generated by the backend cannot be accessed by the frontend, if we wait to access it, there is no security at all, so we save a copy in a cookie for frontend access.
1 2 3 4 |
|
I won’t go into details about the final front-end input of account and password verification code for login verification, etc. The specific idea is this.
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!
Recommended reading:
Vue implements two-way data binding function (with code)
ES6 imitates Vue to implement two-way binding Defined function
The above is the detailed content of node implements the image verification code function when logging in. For more information, please follow other related articles on the PHP Chinese website!