Explain how Laravel8.5 adds verification code mews/captcha

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

2. Configuration

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

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

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

4. Use the verification code on the front end

and add

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

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>

5. The controller generates the verification code

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

6. Verification code verification

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

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!