Shulou(Shulou.com)06/02 Report--

This article mainly shows you "how the front end calls the background tp6 CAPTCHA". The content is simple and clear. I hope it can help you solve your doubts. Let me lead you to study and learn this article "how to call the background tp6 CAPTCHA at the front end".

Environment

Front end: uni-app

Backend: thinkphp6

When working on the front-end login page, you want to call the verification code function of the back-end thinkphp6 on the login page, so try to obtain the image address of captcha through the api interface at the back-end. The method you try is to set the backend api method getCaptcha. In the method, you can get the image address by calling captcha_src (), and then return it to the front end to display the CAPTCHA image normally. But the problem is that the CAPTCHA is always prompted when logging in. Later, after comparison, it was found that the sessionID of the CAPTCHA obtained was inconsistent with the sessionID when I logged in and submitted, so the verification failed.

Why is it that when the front end points to the CAPTCHA address of thinkphp6 through the src address of the img tag, the sessionID generated by the background is different from the sessionID generated by me during the current page operation? this mechanism is still unclear.

Later, I saw that there is a method create () that generates the CAPTCHA directly in the captcha class. After testing, calling this method through api can generate CAPTCHA and the sessionID is the same as the sessionID when I log in later, but there is another problem. This create () method returns the response method, and the front-end uni.request cannot be obtained, resulting in the CAPTCHA image cannot be displayed. After thinking about it, it is determined to modify the captcha class and modify the create () method to another new method, which returns the base64 code of the generated CAPTCHA, and then returns the string result to the front end, and finally the front end can display and verify the login normally.

The specific code is as follows:

1. Add the method createApi () of the captcha class, which is actually a copy of create (), with the following modifications:

$base64_data = _ 'data:image/png;base64,'. Base64_encode ($content); / / base64 encoding of the composite image return $base64_data;2. Api method call returns public function getCaptcha () {$captcha = Captcha::createApi (); return apiResultShow (config ("status.success"), lang ("success"), $captcha);}

3. The front end receives the display verification code

.. getCaptcha () {var request_data = {}; var sign = this.sign (request_data) Uni.request ({url:'/ url/api/member/getCaptcha', data: {sign:sign} Method: 'POST', header: {"Content-Security-Policy": "upgrade-insecure-requests", "X-Requested-With": "XMLHttpRequest" }, dataType:'json' Success: (res) = > {if (res.data.status = = 0) {var img_src = res.data.result This.captchaSrc = img_src;} else {this.captchaSrc = "" }) }, the above is all the contents of the article "how to call the background tp6 CAPTCHA at the front end". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.