Explain how Laravel8.5 adds verification code mews/captcha-Laravel-php.cn

Explain how Laravel8.5 adds verification code mews/captcha

藏色散人

Release： 2022-01-04 10:01:47

forward

2788 people have browsed it

The following tutorial column of Laravel will explain how to add the verification code mews/captcha in Laravel8.5. I hope it will be helpful to everyone!

1. Install the verification code package through composer

Execute the following command in Composer

composer require mews/captcha

Copy after login

2. Configuration

Find the aliases array in config/app.php and add the following code

'Captcha' => Mews\Captcha\CaptchaServiceProvider::class,

Copy after login

3. Generate the configuration file

Execute the following command in Composer, if it pops up option, select config, the tag of my config is 11, enter 11 and press Enter, then the configuration file will be generated in the config folder; the length in the configuration file is the number of digits to generate the verification code;

 php artisan vendor:publish

Copy after login

4. Use the verification code on the front end

and add

<img src="{{captcha_src()}}">

Copy after login

where needed if vue.js is used. This can be done like this

/*html部分*/
<img class="codeImg" :src="urlCode" style="cursor: pointer" @click="getCode">

/*js部分*/
<script>
new Vue({
    el: &#39;.main&#39;,
    data: {
        urlCode:"",
    },
    created(){
        this.getCode();
    },
    methods: {
        getCode(){
            let domain = document.domain;
            $.get(&#39;http://&#39;+domain+&#39;/getCode&#39;,(res)=>{
                this.urlCode =res.code;
            })
        },
        goLogin(){
            document.onkeyup = (event) => {
                let e = event || window.event;
                if(e && e.keyCode==13){
                    //执行登录
                }
            };
        },
    }
})
</script>

Copy after login

5. The controller generates the verification code

public function codes()
    {
        return response()->json([
            &#39;code&#39; => \captcha_src() //返回前端图像验证码
        ]);
    }

Copy after login

6. Verification code verification

if(!captcha_check($params[&#39;code&#39;])){
   return Response()->json([&#39;code&#39; => 201, &#39;msg&#39; => &#39;验证码有误&#39;]);
  }

Copy after login

Related recommendations: The latest five Laravel video tutorials

The above is the detailed content of Explain how Laravel8.5 adds verification code mews/captcha. For more information, please follow other related articles on the PHP Chinese website!