yii2後臺添加驗證碼 無腦版

後臺登陸驗證碼添加

最終樣式。

 

分3步（使用原始controller 即site/login登陸）  1 修改model 2修改controller 3修改view

第一步 找到登陸model修改

尋找site/login  找到$model = new LoginForm();  IDE點擊loginForm跳轉到待修改model

site/login方法以下（原始方法）
/**
 * Login action.
 *
 * @return string
 */
public function actionLogin()
{
    if (!Yii::$app->user->isGuest) {
        return $this->goHome();
    }

    $model = new LoginForm();
    if ($model->load(Yii::$app->request->post()) && $model->login()) {
        return $this->goBack();
    } else {
        $model->password = '';

        return $this->render('login', [
            'model' => $model,
        ]);
    }
}

model修改部分

/**
 * Login form
 */
class LoginForm extends Model
{
    public $username;
    public $password;
    public $rememberMe = true;
    public $captcha;

    private $_user;


    /**
     * {@inheritdoc}
     */
    public function rules()
    {
        return [
            // username and password are both required
            [['username', 'password'], 'required'],
            // rememberMe must be a boolean value
            ['rememberMe', 'boolean'],
            // password is validated by validatePassword()
            ['password', 'validatePassword'],
            ['captcha','required','message'=>'驗證碼不能爲空'],  //必須輸入驗證碼
            ['captcha','captcha','message'=>'驗證碼不正確']
        ];
    }

public function attributeLabels()
{
    return [
        'username'=>'用戶名',
        'password'=>'密碼',
        'rememberMe'=>'記住我',
        'captcha' => '驗證碼',
    ];
}

 

第二步 sitecontroller修改

/**
 * {@inheritdoc}
 */
public function behaviors()
{
    return [
        'access' => [
            'class' => AccessControl::className(),
            'rules' => [
                [
                    'actions' => ['login', 'error','captcha'],
                    'allow' => true,
                ],
                [
                    'actions' => ['logout', 'index'],
                    'allow' => true,
                    'roles' => ['@'],
                ],
            ],
        ],
        'verbs' => [
            'class' => VerbFilter::className(),
            'actions' => [
                'logout' => ['post'],
            ],
        ],
    ];
}

/**
 * {@inheritdoc}
 */
public function actions()
{
    return [
        'error' => [
            'class' => 'yii\web\ErrorAction',
        ],
        'captcha'=>[
            'class' => 'yii\captcha\CaptchaAction',
            'maxLength' => 4,
            'minLength' => 4 ,
        ],
    ];
}

第三步 view修改

use yii\captcha\Captcha;

use yii\helpers\Url;

<div class="login-box-body">
    <p class="login-box-msg">xxxxx管理平臺</p>

    <?php $form = ActiveForm::begin(['id' => 'login-form', 'enableClientValidation' => false]); ?>

    <?= $form
        ->field($model, 'username', $fieldOptions1)
        ->label(false)
        ->textInput(['placeholder' => '用戶名']) ?>

    <?= $form
        ->field($model, 'password', $fieldOptions2)
        ->label(false)
        ->passwordInput(['placeholder' => '密碼']) ?>



    <?= $form->field($model, 'captcha',['options' => ['class' => 'form-group form-group-lg']])
        ->label(false)
        ->widget(Captcha::className(), [
            'template' => '{input}{image}',
            'options' => ['maxlength' => 4, 'style' => 'width: 190px; padding: 5px;', 'placeholder' => '請輸入驗證碼'],
            'imageOptions' => ['alt' => '驗證碼','id' => 'login_code', 'src' => '', 'data-api' =>  Url::toRoute(['site/captcha'], true)],
        ]) ?>

    <div class="row">
        <div class="col-xs-8">
            <?= $form->field($model, 'rememberMe')

                ->checkbox() ?>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
            <?= Html::submitButton('登陸', ['class' => 'btn btn-primary btn-block btn-flat', 'name' => 'login-button']) ?>
        </div>
        <!-- /.col -->
    </div>


    <?php ActiveForm::end(); ?>

    <!-- /.social-auth-links -->

</div>

完工。