Laravel-Admin Dcat-Admin 登入 滑動驗證碼外掛 2021-04-22

asundust發表於2019-06-25
Laravel

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

前記

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

另有 dcat-admin版

支援

截圖

img

安裝

composer require asundust/auth-captcha

獲取金鑰

頂象

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

極驗

  • 需要釋出配置檔案，命令如下
 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' => [],
],

hCaptcha

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'hcaptcha',
    'style' => 'invisible', // 隱藏式: invisible 核取方塊: display (不填寫預設invisible)
    'appid' => '{sitekey}',
    'secret' => '{secret}',
],

Recaptcha v2(谷歌)

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'recaptchav2',
    'style' => 'invisible', // 隱藏式: invisible 核取方塊: display (不填寫預設invisible)
    'appid' => '{site_key}',
    'secret' => '{secret}',
    // 'domain' => 'https://www.google.com', // 服務域名，可選，無此選項預設為 https://recaptcha.net
],

Recaptcha v3(谷歌)

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'recaptcha',
    'appid' => '{site_key}',
    'secret' => '{secret}',
    // 'domain' => 'https://www.google.com', // 服務域名，可選，無此選項預設為 https://recaptcha.net
    // 'score' => '0.5', // 可信任分數，可選，無此選項預設為 0.7
],

騰訊防水牆

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'tencent',
    'appid' => '{AppID}',
    'secret' => '{AppSecretKey}',
],

V5驗證

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'verify5',
    'appid' => '{APP ID}',
    'secret' => '{APP Key}',
    'host' => '{Host}',
],

Vaptcha

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'vaptcha',
    'style' => 'invisible', // 隱藏式: invisible 點選式: click 嵌入式: embed (不填寫預設invisible)
    'appid' => '{VID}',
    'secret' => '{Key}',
    'ext_config' => [],
],

網易易盾

  • 配置程式碼如下
'auth-captcha' => [
    'enable' => true,
    'provider' => 'wangyi',
    'style' => '', // 注意後臺申請的型別！！！ 常規彈出式: popup 常規嵌入式: embed 常規觸發式: float 無感繫結按鈕：bind 無感點選式: ''(留空，奇葩設定) (不填寫預設popup)
    'appid' => '{captchaId}',
    'secret' => '{secretId}',
    'secret_key' => '{secretKey}', // 這裡多了一個額外引數，請注意！！！
    'ext_config' => [],
],

雲片

  • 配置程式碼如下
'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' => [],
],

配置

  • 在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登陸頁

重寫登陸頁

  • 在auth-captcha增加一個controller配置項，並填寫App\Admin\Controllers\AuthController::class，程式碼如下
'extensions' => [
    'auth-captcha' => [
        // ...
        'controller' => App\Admin\Controllers\AuthController::class
    ],
]
  • 在App\Admin\Controllers下新建AuthController控制器，程式碼如下
<?php

namespace App\Admin\Controllers;

use Asundust\AuthCaptcha\Http\Controllers\AuthCaptchaController;

class AuthController extends AuthCaptchaController
{
    public function getLogin()
    {
        // 原先程式碼在 \Asundust\AuthCaptcha\Http\Controllers\AuthCaptchaController::getLogin
        // 這裡重寫自己的邏輯
    }

    public function postLogin()
    {
        // 原先程式碼在 \Asundust\AuthCaptcha\Http\Controllers\AuthCaptchaController::postLogin
        // 這裡重寫自己的邏輯
    }

    // 重寫其他方法 具體檢視 Encore\Admin\Controllers\AuthController
}

注意事項

  • 有些外掛重寫了路由可能導致外掛不生效如laravel-admin iframe-tabs，
    在auth-captcha增加一個controller配置項，並填寫Asundust\AuthCaptcha\Http\Controllers\AuthCaptchaController::class，程式碼如下
'extensions' => [
    'auth-captcha' => [
        // ...
        'controller' => Asundust\AuthCaptcha\Http\Controllers\AuthCaptchaController::class
    ],
]

未來

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

License

The MIT License (MIT)

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

相關文章