Laravel-Admin 登入 滑動驗證碼外掛 2019-12-30

Laravel-Admin登陸 騰訊滑動驗證外掛

前記

目前是已有驗證碼外掛的，但是有時候容易輸出出錯，導致略微麻煩，就想著用滑動驗證碼，正巧滑動驗證碼有很多，正巧看到有免費的滑動驗證碼，就花了點時間封了一個包。
github地址，歡迎Star。

支援

• 頂象:heavy_check_mark:
• 極驗(賬號試用申請一直無法通過,無奈)
• 數美
• 騰訊防水牆:heavy_check_mark:
• V5驗證:heavy_check_mark:（免費版日限500次）
• Vaptcha:heavy_check_mark:（免費，不過該驗證碼使用難度相對較高）
• 網易:heavy_check_mark:
• 有主流的未發現的、額外有需求的請issue

截圖

安裝

composer require asundust/auth-captcha

獲取金鑰

騰訊防水牆

• 配置程式碼如下

  'auth-captcha' => [
  'enable' => true,
  'provider' => 'tencent',
  'appid' => {AppID},
  'secret' => {AppSecretKey}',
  ],

• 購買 https://007.qq.com/product.html?ADTAG=inde...
• 使用 https://007.qq.com/captcha/
• 關於騰訊防水牆收費的宣告(終身免費5萬次)

頂象

• 配置程式碼如下

  'auth-captcha' => [
  'enable' => true,
  'provider' => 'dingxiang',
  'appid' => {AppID},
  'secret' => {AppSecret}',
  ],

• 訪問 https://www.dingxiang-inc.com/business/cap...

Vaptcha

• 配置程式碼如下

  'auth-captcha' => [
  'enable' => true,
  'provider' => 'vaptcha',
  'appid' => {VID},
  'secret' => {Key}',
  ],

• 訪問 https://www.vaptcha.com/

安裝

composer require asundust/auth-captcha

獲取金鑰

頂象

• 配置程式碼如下

  'auth-captcha' => [
  'enable' => true,
  'provider' => 'dingxiang',
  'style' => 'oneclick', // 彈出式: popup 嵌入式: embed 內聯式: inline 觸發式: oneclick (不填寫預設popup)
  'appid' => {AppID},
  'secret' => {AppSecret},
  'ext_config' => [],
  ],

• 訪問 https://www.dingxiang-inc.com/business/cap...
• 官網文件配置DEMO
• 官網文件地址

騰訊防水牆

• 配置程式碼如下

  'auth-captcha' => [
  'enable' => true,
  'provider' => 'tencent',
  'appid' => {AppID},
  'secret' => {AppSecretKey},
  ],

• 新使用者購買 https://cloud.tencent.com/product/captcha
• 新使用者官方使用文件地址
• 老使用者官方使用文件地址
• 關於騰訊防水牆收費的宣告(新使用者終身免費5萬次)

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
• 訪問 官方使用文件地址

配置

• 在config/admin.php 檔案里加入如下配置。

  'extensions' => [
  'auth-captcha' => [
      // 禁用此外掛設定為false
      'enable' => true,
      // 驗證碼供應商
      'provider' => 'xxxxxx',
      // 驗證碼樣式，可無，預設為彈窗，參見官網文件（不支援“騰訊防水牆”）
      'style' => 'xxxxxx',
      // 金鑰配置
      'appid' => env('AUTH_CAPTCHA_APPID'),
      'secret' => env('AUTH_CAPTCHA_SECRET'),
      'secret_key' => env('AUTH_CAPTCHA_SECRET_KEY'), // 網易易盾需要第三個引數！！！
      // 額外配置，參見官網文件（不支援“騰訊防水牆”）
      'ext_config' => [],
  ],
  ]

• 在.env檔案下加入

  AUTH_CAPTCHA_APPID=xxxxxx
  AUTH_CAPTCHA_SECRET=xxxxxx
  AUTH_CAPTCHA_SECRET_KEY=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登陸頁

未來

• 加入Enter鍵監聽√
• 加入更多滑動驗證碼（持續新增ing）
• 加入表單驗證
• 驗證碼功能模組化，提供給Laravel專案內使用（該想法實現有點難度，看著辦吧）

License

The MIT License (MIT)

本作品採用《CC 協議》，轉載必須註明作者和本文連結