laravel-admin登陆 滑动验证插件 多平台支持

前记

目前是已有验证码插件的，但是有时候容易输出出错，导致略微麻烦，就想着用滑动验证码，正巧滑动验证码有很多，正巧看到腾讯有免费的滑动验证码，就花了点时间封了一个包。
github地址，欢迎Star。

另有 dcat-admin版

Demo演示

演示站点

支持

截图

img

安装

composer require asundust/auth-captcha

获取密钥

顶象

极验

  • 需要发布配置文件，命令如下

     php artisan vendor:publish --provider="Asundust\AuthCaptcha\AuthCaptchaServiceProvider"

  • 配置代码如下

    'auth-captcha' => [
  'enable' => true,
  'provider' => 'geetest',
  'style' => 'bind', // 隐藏式: bind 弹出式: popup 浮动式: float 自定区域浮动式(与popup类似，由于登录页面无需自定区域，故效果和popup一样的): custom (不填写默认bind)
  'appid' => '{ID}',
  'secret' => '{KEY}',
  'ext_config' => [],
],
  • 访问 https://www.dingxiang-inc.com/business/captcha
  • 官网文档地址

Recaptcha v2(谷歌)

Recaptcha v3(谷歌)

腾讯防水墙

V5验证

Vaptcha

  • 配置代码如下

    'auth-captcha' => [
  'enable' => true,
  'provider' => 'vaptcha',
  'style' => 'invisible', // 隐藏式(类似popup): invisible 点击式: click 嵌入式: embed (不填写默认invisible)
  'appid' => '{VID}',
  'secret' => '{Key}',
  'ext_config' => [],
],
  • 访问 https://www.vaptcha.com
  • 访问 官方使用文档地址

网易易盾

  • 配置代码如下

    'auth-captcha' => [
  'enable' => true,
  'provider' => 'wangyi',
  'style' => '', // 注意后台申请的类型！！！ 常规弹出式: popup 常规嵌入式: embed 常规触发式: float 无感绑定按钮：bind 无感点击式: ''(留空，奇葩设定) (不填写默认popup)
  'appid' => '{captchaId}',
  'secret' => '{secretId}',
  'secret_key' => '{secretKey}', // 这里多了一个额外参数，请注意！！！
  'ext_config' => [],
],
  • 访问 http://dun.163.com/product/captcha
  • 访问 官方使用文档地址

云片

  • 配置代码如下

    'auth-captcha' => [
  'enable' => true,
  'provider' => 'yunpian',
  'style' => '', // flat: 直接嵌入 float: 浮动 dialog: 对话框 external: 外置滑动(拖动滑块时才浮现验证图片，仅适用于滑动拼图验证) (不填写默认dialog) PS：flat和external貌似存在回调bug，不推荐使用
  'appid' => '{APPID}',
  'secret' => '{Secret Id}',
  'secret_key' => '{Secret Key}', // 这里多了一个额外参数，请注意！！！
  'ext_config' => [],
],
  • 访问 https://www.yunpian.com/console/#/captcha/product
  • 访问 官方使用文档地址

配置

  • 在config/admin.php 文件里加入上述配置好的文件。

    'extensions' => [
  'auth-captcha' => [
      // ...
  ],
]

  • 亦可添加ENV配置

    'enable' => env('AUTH_CAPTCHA_ENABLE'),
'appid' => env('AUTH_CAPTCHA_APPID'),
'secret' => env('AUTH_CAPTCHA_SECRET'),
// 'secret_key' => env('AUTH_CAPTCHA_SECRET_KEY'), // 部分需要此第三个参数！！！
// 'host' => env('AUTH_CAPTCHA_HOST'), // 部分需要此第三个参数！！！
// 'domain' => env('AUTH_CAPTCHA_DOMAIN'), // 部分需要此第三个参数！！！
// 'score' => env('AUTH_CAPTCHA_SCORE'), // 部分需要此第三个参数！！！
// 'xxxxxx' => env('AUTH_CAPTCHA_XXXXXX'), // demo

  • 在.env文件下加入

    AUTH_CAPTCHA_ENABLE=true
AUTH_CAPTCHA_APPID=xxxxxx
AUTH_CAPTCHA_SECRET=xxxxxx
#AUTH_CAPTCHA_SECRET_KEY=xxxxxx
#AUTH_CAPTCHA_HOST=xxxxxx
#AUTH_CAPTCHA_DOMAIN=xxxxxx
#AUTH_CAPTCHA_SCORE=xxxxxx
#AUTH_CAPTCHA_XXXXXX=xxxxxx

  • 在resources/lang/zh-CN(example).json 文件里加入如下配置。

    "Sliding validation failed. Please try again.": "滑动验证未通过，请重试。",
"Please complete the validation.": "请完成验证。",
"Config Error.": "配置错误。"

  • 额外配置说明，参考顶象的一个配置

    'ext_config' => [
  'customLanguage' => [
      'init_inform' => '拖动一下',
      'slide_inform' => '向右向右',
  ],
],

使用

在浏览器里打开laravel-admin登陆页

未来

  • 加入回车键监听:heavy_check_mark:
  • 加入更多滑动验证码（持续添加ing）:heavy_check_mark:
  • 加入表单验证
  • 验证码功能模块化，提供给Laravel项目内使用（该想法实现有点难度，看着办吧）

版权属于：塵世不再

本文链接：https://blog.leeay.com/archives/44/

所有文章均采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。 您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。

如果博客部分文章出现空白或异常，请留言或者联系博主修复。

Last modification：April 22, 2021
© Allow specification reprint
如果觉得我的文章对你有用，请随意赞赏