README

双因素认证

安装

安装此扩展的首选方式是通过 composer。

运行以下命令

composer require devmary/yii2-auth:@dev

或者添加以下内容到你的 composer.json 文件的 require 部分。

"devmary/yii2-auth": "*"

配置

将以下行添加到你的主配置文件中

'modules' => [
    'auth' => [
        'class' => 'devmary\auth\Module',
    ],
],

更新数据库架构

你需要做的最后一件事是通过应用迁移来更新你的数据库架构。确保你已经正确配置了 db 应用组件，并运行以下命令

$ php yii migrate/up --migrationPath=@vendor/devmary/yii2-auth/migrations

使用方法

扩展安装后，向你的登录表单添加操作

$form = ActiveForm::begin([
    ...
    'action' => ['auth/login/ajax-login'],
    ...
]);

并在你的登录视图文件中使用以下代码

    <?php $form = ActiveForm::begin([
        'id' => 'check-google-code',
        'layout' => 'horizontal',
        'action' => ['auth/login/ajax-login'],
    ]); ?>

    <?php yii\bootstrap\Modal::begin([
        'id' => 'check-code',
        'size' => 'modal-sm',
        'clientOptions' => [
            'backdrop' => false, 'keyboard' => true
        ]
    ]); ?>

    <div class="form-group field-loginform-checkcode">
        <label class="col-lg-12" for="loginform-checkcode">Google Authenticator code</label>
        <div class="col-lg-12"><?= Html::textInput('LoginForm[checkCode]', '', ['class' => 'form-control', 'id' => 'loginform-checkcode']); ?></div>
        <div class="col-lg-12"><div class="help-block help-block-error "></div></div>
    </div>

    <div class="form-group">
        <div class="col-lg-12">
            <?= Html::submitButton('Send', ['class' => 'btn btn-primary', 'name' => 'send-code-button', 'id' => 'send-code-button']) ?>
        </div>
    </div>

    <?php yii\bootstrap\Modal::end(); ?>

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

$styles = <<< CSS
#check-code {
    background: rgba(0, 0, 0, 0.49);
}
#check-code .modal-dialog {
    margin: 30vh auto;
}
CSS;
$this->registerCss($styles);
$script = <<< JS
$('form#login-form').on('submit', function(e){
    e.preventDefault();
    var form = $(this);
    $.ajax({
        url    : form.attr('action'),
        type   : 'post',
        data   : form.serialize(),
        beforeSend: function(){
            $('body').css('opacity', '0.7');
        },
        success: function (response) {
            $('body').css('opacity', '1');
            var data = JSON.parse(response);
            if (data.success) {

            } else {
                var errorMsg = data.data['loginform-password'][0];
                jQuery('.field-loginform-password').addClass('has-error');
                jQuery('.field-loginform-password .help-block-error').html(errorMsg);
                console.log(data.data);
            }

            if(data.modal){
                jQuery('#check-code').modal();
            }
        },
    });
});
jQuery('#check-google-code').submit(function(e){
    e.preventDefault();
    var loginForm = $('form#login-form');
    console.log('send code');
        var code = $('#loginform-checkcode').val();
        var data = 'code=' + code + '&loginform=' + loginForm.serialize();
        $.ajax({
            url: '/auth/login/check-code',
            type: 'POST',
            data: data,
            beforeSend: function(){
                $('body').css('opacity', '0.7');
                jQuery('.field-loginform-checkcode').removeClass('has-error');
                jQuery('.field-loginform-checkcode .help-block-error').html('')
            },
            success: function(result) {
                $('body').css('opacity', '1');
                if(result == 'error') {
                    jQuery('.field-loginform-checkcode').addClass('has-error');
                    jQuery('.field-loginform-checkcode .help-block-error').html('Invalid code');
                }
                if(result == 'success') {
                    jQuery('#auth-2fa').submit();
                }
                console.log(result);
            }
        });
});

JS;

$this->registerJs($script);

可用操作

/auth/settings 显示双因素认证的设置表单