极验验证Geetest与发送短信验证码

安装

composer require germey/geetest

在config/app.php的providers里添加

Germey\Geetest\GeetestServiceProvider::class

在aliases里添加

'Geetest' => Germey\Geetest\Geetest::class

配置

php artisan vendor:publish --tag=geetest

在config文件夹里生成 geetest.php,在resource/view下生成了vendor/geetest.blade.php

注册Geetest账号

[图片上传失败...(image-7ffc4b-1512912175614)]

配置

GEETEST_ID=0f1097bef7xxxxxx9afdeced970c63e4
GEETEST_KEY=c070f0628xxxxxxe68e138b55c56fb3b

在需要验证码的表单添加

{!! Geetest::render() !!}

例如：

<form action="/" method="post">
    <input name="_token" type="hidden" value="{{ csrf_token() }}">
    <input type="text" name="name" placeholder="name">
    {!! Geetest::render() !!}
    <input type="submit" value="submit">
</form>

在表单页面上渲染的geetest为resource/view/vendor/geetest.blade.php

点击发送短信按钮

此步要判断是否经过极验验证

<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>

<script style="text/javascript">
    $("#getVerifyCode").click(function () {
        var mobile = $("input[name='mobile']").val()
        if (mobile === '' || mobile === null || mobile === undefined) {
            alert('请填写手机号码！')
        } else {
            $.ajax({
                url: '/geetest/validate',
                type: "post",
                data: {
                    _token: "{{csrf_token()}}",
                    mobile: mobile,
                    geetest_challenge: $(" input[ name='geetest_challenge' ] ").val(),
                    geetest_validate: $(" input[ name='geetest_validate' ] ").val(),
                    geetest_seccode: $(" input[ name='geetest_seccode' ] ").val(),
                },
                dataType: "json",
                success: function(result) {
                    console.log(result)
                    alert('验证成功')
                },
                error: function(xhr){
                    alert('请先点击按钮进行验证！')
                }
            });
        }
    })
</script>

在web.php加上路由

Route::post('/geetest/validate', 'Auth\LoginController@postValidate');

controller里添加相应的方法

/**
     * @param Request $request
     * @return bool
     */
    public function postValidate(Request $request)
    {
        $this->validate($request, [
            'geetest_challenge' => 'geetest',
        ], [
            'geetest' => config('geetest.server_fail_alert')
        ]);
        return response()->json([]);
    }

使用laravel-sms实现发送短信验证码

安装详细步骤请参考项目所在github，此处略。

上面极验验证成功后，点击发送短信的按钮会自动发送短信，扩展js代码如下
头部加上 laravel-sms.js

<script src="/js/laravel-sms.js"></script>

完整代码如下：

<script src="http://cdn.bootcss.com/jquery/2.1.0/jquery.min.js"></script>
<script src="/js/laravel-sms.js"></script>

<script style="text/javascript">
    $("#getVerifyCode").click(function () {
        var mobile = $("input[name='mobile']").val()
        if (mobile === '' || mobile === null || mobile === undefined) {
            alert('请填写手机号码！')
        } else {
            $.ajax({
                url: '/geetest/validate', //此处url固定，不需要添加相应的路由
                type: "post",
                data: {
                    _token: "{{csrf_token()}}",
                    mobile: mobile,
                    geetest_challenge: $(" input[ name='geetest_challenge' ] ").val(),
                    geetest_validate: $(" input[ name='geetest_validate' ] ").val(),
                    geetest_seccode: $(" input[ name='geetest_seccode' ] ").val(),
                },
                dataType: "json",
                success: function(result) {
                    console.log(result)
                    $.ajax({  //此处发送短信
                        url: '/laravel-sms/verify-code', //此处url固定，不需要添加相应的路由
                        type: "post",
                        dataType: "json",
                        data : {
                            _token: "{{csrf_token()}}",
                            mobile: $('input[name=mobile]').val()
                        },
                        success: function(result){
                            alert('验证码发送成功，请注意查收！')
                        }
                    })
                },
                error: function(xhr){
                    alert('请先点击按钮进行验证！')
                }
            });
        }
    })
</script>

验证码后端工作

use SmsManager as Manager; //引入到头部
use Illuminate\Support\Facades\Validator; //引入到头部

public function register(Request $request)
    {
        //服务端验证极验验证
        $validator = Validator::make($request->all(), [
            'mobile'     => 'required|confirm_mobile_not_change|confirm_rule:mobile_required',
            'verifyCode' => 'required|verify_code',
        ]);
        if ($validator->fails()) {
            //验证失败后建议清空存储的发送状态，防止用户重复试错
            Manager::forgetState();
            return redirect()->back()->withErrors($validator);
        }
        $msgdata =Manager::retrieveAllData();
        if ($msgdata['_state']['sent']) {
            $code = $msgdata['_state']['code'];
            $to = $msgdata['_state']['to'];
            if ($request->get('mobile') === $to && $request->get('verifyCode') === $code) {
                //这里写验证成功后的正常逻辑
            }
        }
    }