totp前端设计(2/2)

二步验证功能(2/2) *测试时发现了其他用户无法正常访问所有功能,这个问题下次再说
2024-03-07 20:35:50 +08:00 · 2024-03-07 20:35:50 +08:00 · e944d3c781
commit e944d3c781
parent 63bc49d63e
5 changed files with 202 additions and 50 deletions
--- a/controllers/UserController.php
+++ b/controllers/UserController.php
@ -14,6 +14,7 @@ use yii\httpclient\Client;
 use yii\web\Controller;
 use yii\web\NotFoundHttpException;
 use yii\filters\VerbFilter;
+use yii\web\RangeNotSatisfiableHttpException;
 use yii\web\Response;

 /**
@ -35,17 +36,17 @@ class UserController extends Controller
                        [
                            'allow' => true,
                            'actions' => ['delete', 'info'],
-                            'roles' => ['user'],
+                            'roles' => ['user'], // only user can do these
                        ],
                        [
                            'allow' => true,
-                            'actions' => ['login', 'register'],
+                            'actions' => ['login', 'register','verify-two-factor'],
                            'roles' => ['?', '@'], // everyone can access public share
                        ],
                        [
                            'allow' => true,
-                            'actions' => ['logout', 'setup-two-factor', 'change-password'],
-                            'roles' => ['@'], // everyone can access public share
+                            'actions' => ['logout', 'setup-two-factor', 'change-password', 'download-recovery-codes', 'remove-two-factor'],
+                            'roles' => ['@'], // only logged-in user can do these
                        ]
                    ],
                ],
@ -59,6 +60,9 @@ class UserController extends Controller
                        'info' => ['GET', 'POST'],
                        'change-password' => ['POST'],
                        'setup-two-factor' => ['POST'],
+                        'download-recovery-codes' => ['GET'],
+                        'remove-two-factor' => ['POST'],
+                        'verify-two-factor' => ['GET','POST'],
                    ],
                ],
            ]
@ -134,16 +138,23 @@ class UserController extends Controller
            }

            if (($captchaResponse !== null && $isCaptchaValid) || ($verifyProvider === 'None')) {
-                if ($model->login()) {
-                    //login success
-                    $user = Yii::$app->user->identity;
+                // 验证用户名和密码
+                $user = User::findOne(['username' => $model->username]);
+                if ($user !== null && $user->validatePassword($model->password)) {
+                    // 如果用户启用了二步验证，将用户重定向到二步验证页面
+                    if ($user->is_otp_enabled) {
+                        Yii::$app->session->set('login_verification', ['id' => $user->id]);
+                        return $this->redirect(['user/verify-two-factor']);
+                    } else {
+                        //login without 2FA
                        $user->last_login = date('Y-m-d H:i:s');
                        $user->last_login_ip = Yii::$app->request->userIP;
-                    if ($user->save(false)) {
-                        return $this->goBack();
-                    } else {
+                        if (!$user->save(false)){
                            Yii::$app->session->setFlash('error', '登陆成功，但出现了内部错误');
                        }
+                        Yii::$app->user->login($user, $model->rememberMe ? 3600 * 24 * 30 : 0);
+                        return $this->goHome();
+                    }
                } else {
                    Yii::$app->session->setFlash('error', '用户名密码错误或账户已禁用');
                }
@ -156,6 +167,41 @@ class UserController extends Controller
        ]);
    }

+    /**
+     * @return Response|string
+     */
+    public function actionVerifyTwoFactor(): Response|string
+    {
+        if (!Yii::$app->session->has('login_verification')) {
+            Yii::$app->session->setFlash('error', '非法访问');
+            return $this->goHome();
+        }
+
+        $model = new User();
+        $user = User::findOne(Yii::$app->session->get('login_verification')['id']);
+
+        if ($model->load(Yii::$app->request->post())) {
+            // 验证二步验证代码
+            $otp = TOTP::createFromSecret($user->otp_secret);
+            if ($otp->verify($model->totp_input)) {
+                $user->last_login = date('Y-m-d H:i:s');
+                $user->last_login_ip = Yii::$app->request->userIP;
+                if (!$user->save(false)){
+                    Yii::$app->session->setFlash('error', '登陆成功，但出现了内部错误');
+                }
+                Yii::$app->user->login($user, $model->rememberMe ? 3600 * 24 * 30 : 0);
+                Yii::$app->session->remove('login_verification');
+                return $this->goHome();
+            } else {
+                Yii::$app->session->setFlash('error', '二步验证代码错误');
+            }
+        }
+
+        return $this->render('verifyTwoFactor', [
+            'model' => $model,
+        ]);
+    }
+
    /**
     * 验证 reCAPTCHA 的响应
     * 无法保证这项服务在中国大陆的可用性
@ -293,6 +339,7 @@ class UserController extends Controller
    }

    /**
+     * @param string|null $focus
     * @return string|Response
     */
    public function actionInfo(string $focus = null): Response|string
@ -320,6 +367,7 @@ class UserController extends Controller
                    'focus' => 'bio',
                    'totp_secret' => $totp_secret,
                    'totp_url' => $totp_url,
+                    'is_otp_enabled' => $model->is_otp_enabled
                ]);
            }
        }
@ -331,10 +379,12 @@ class UserController extends Controller
            'focus' => $focus,
            'totp_secret' => $totp_secret,
            'totp_url' => $totp_url,
+            'is_otp_enabled' => $model->is_otp_enabled == 1
        ]);
    }

    /**
+     * 更改密码
     * @return Response|string
     * @throws Exception
     */
@ -354,28 +404,88 @@ class UserController extends Controller
        return $this->redirect(['user/info', 'focus' => 'password']);
    }

-    public function actionSetupTwoFactor()
+    /**
+     * 启用二步验证
+     * @return Response
+     * @throws Exception
+     */
+    public function actionSetupTwoFactor(): Response
    {
-        // ...其他代码...
+        $user = Yii::$app->user->identity;

-        // 生成恢复代码
+        if ($user->load(Yii::$app->request->post())) {
+            $totp_secret = $user->otp_secret;
+            $totp_input = $user->totp_input;
+
+            $otp = TOTP::createFromSecret($totp_secret);
+            if ($otp->verify($totp_input)) {
                $recoveryCodes = $this->generateRecoveryCodes();
-
-        // 保存恢复代码到数据库或其他安全的地方
-
-        // 显示恢复代码给用户
-        Yii::$app->session->setFlash('success', '二步验证已启用。您的恢复代码是：' . implode(', ', $recoveryCodes));
-
-        // ...其他代码...
+                $user->is_otp_enabled = 1;
+                $user->recovery_codes = implode(',', $recoveryCodes);
+                $user->save();
+                Yii::$app->session->setFlash('success', '二步验证已启用');
+            } else {
+                Yii::$app->session->setFlash('error', '二步验证启用失败，请重新添加');
+            }
+        }
+        return $this->redirect(['user/info']);
    }

-    private function generateRecoveryCodes($length = 10, $numCodes = 10)
+    /**
+     * 移除二步验证
+     */
+    public function actionRemoveTwoFactor(): void
+    {
+        $user = Yii::$app->user->identity;
+        if ($user->is_otp_enabled) {
+            $user->otp_secret = null;
+            $user->is_otp_enabled = 0;
+            $user->recovery_codes = null;
+            $user->save();
+            Yii::$app->session->setFlash('success', '二步验证已关闭');
+        } else {
+            Yii::$app->session->setFlash('error', '二步验证未启用,无需关闭');
+        }
+    }
+
+    /**
+     * 生成10组随机的恢复代码
+     * @return array
+     * @throws Exception
+     */
+    private function generateRecoveryCodes(): array
    {
        $codes = [];
-        for ($i = 0; $i < $numCodes; $i++) {
-            $codes[] = Yii::$app->security->generateRandomString($length);
+        for ($i = 0; $i < 10; $i++) {
+            $codes[] = Yii::$app->security->generateRandomString(10);
        }
        return $codes;
    }

+    /**
+     * 获取恢复代码(以txt文本的形式提供)
+     * @return Response|\yii\console\Response
+     * @throws RangeNotSatisfiableHttpException
+     */
+    public function actionDownloadRecoveryCodes(): Response|\yii\console\Response
+    {
+        // 获取当前登录的用户模型
+        $user = Yii::$app->user->identity;
+
+        // 检查用户是否启用了 TOTP
+        if ($user->is_otp_enabled) {
+            // 获取恢复代码
+            $recoveryCodesString = implode("\n", explode(',', $user->recovery_codes));
+            // 发送恢复代码给用户
+            return Yii::$app->response->sendContentAsFile(
+                $recoveryCodesString,
+                'recovery_codes.txt',
+                ['mimeType' => 'text/plain']
+            );
+        } else {
+            // 如果用户没有启用 TOTP，返回一个错误消息
+            Yii::$app->session->setFlash('error', '获取失败，您还没有启用二步验证。');
+            return $this->redirect(['user/info']);
+        }
+    }
 }
--- a/models/User.php
+++ b/models/User.php
@ -58,7 +58,7 @@ class User extends ActiveRecord implements IdentityInterface
        return [
            [['status', 'is_encryption_enabled', 'is_otp_enabled'], 'integer'],
            [['created_at', 'last_login'], 'safe'],
-            [['bio'], 'string'],
+            [['bio', 'totp_input'], 'string'],
            [['encryption_key', 'otp_secret', 'recovery_codes'], 'string', 'max' => 255],
            [['last_login_ip'], 'string', 'max' => 45],
            [['username', 'password'], 'required', 'on' => 'login'],
--- a/views/user/info.php
+++ b/views/user/info.php
@ -1,5 +1,5 @@
 <?php
-//这个页面仿照Windows 11设置中的账户页面设计
+//这个页面部分仿照Windows 11设置中的账户页面设计

 /* @var $this yii\web\View */
 /* @var $model app\models\User */
@ -11,6 +11,8 @@

 /* @var $totp_url string */

+/* @var $is_otp_enabled bool */
+
 use app\assets\FontAwesomeAsset;
 use app\models\User;
 use app\utils\FileSizeHelper;
@ -239,13 +241,11 @@ $user = new User();
                                </h5>
                                <div>
                                    <div class="form-check form-switch">
-                                        <input class="form-check-input" type="checkbox" role="switch" id="totp-enabled"
-                                               data-bs-toggle="modal"
-                                               data-bs-target="#totpSetupModal">
+                                        <input class="form-check-input" type="checkbox" role="switch"
+                                               id="totp-enabled" <?= $is_otp_enabled ? 'checked' : '' ?>>
                                        <label class="form-check-label" for="totp-enabled" data-bs-toggle="modal"
                                               data-bs-target="#totpSetupModal">启用 TOTP</label>
                                    </div>
-                                    <!--暂时放在这里-->
                                </div>
                            </li>
                            <li class="list-group-item">
@ -254,9 +254,7 @@ $user = new User();
                                    备用码
                                </h5>
                                <div>
-                                    <button id="generate-backup-codes" class="btn btn-outline-primary btn-sm">
-                                        生成备用码
-                                    </button>
+                                    <?= Html::a('获取恢复代码(请妥善保存)', Url::to(['user/download-recovery-codes']), ['class' => 'btn btn-outline-primary btn-sm', 'id' => 'generate-backup-codes']) ?>
                                </div>
                            </li>
                        </ul>
@ -333,7 +331,8 @@ Modal::begin([
                <li>
                    <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.authenticator2&hl=en_US">Google
                        Authenticator</a></li>
-                <li><a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US">Microsoft Authenticator</a></li>
+                <li><a href="https://play.google.com/store/apps/details?id=com.azure.authenticator&hl=en_US">Microsoft
+                        Authenticator</a></li>
                <li><a href="https://play.google.com/store/apps/details?id=com.authy.authy&hl=en">Authy</a></li>
                <!-- Add more applications as needed -->
            </ul>
@ -344,16 +343,18 @@ Modal::begin([
                        onclick="navigator.clipboard.writeText('<?= $totp_secret ?>')">Copy
                </button>
            </div>
-            <?php $form = ActiveForm::begin([
-                'action' => ['user/actionSetupTwoFactor'],
+            <?php
+            if (!$is_otp_enabled) {
+                $form = ActiveForm::begin([
+                    'action' => ['user/setup-two-factor'],
                    'method' => 'post'
-            ]); ?>
-
-            <?= Html::activeHiddenInput($user, 'totp_secret', ['value' => $totp_secret]) ?>
-            <?= $form->field($user, 'totp_input')->textInput()->label('最后一步! 输入TOTP应用程序上显示的密码以启用二步验证') ?>
-            <?= Html::submitButton('启用二步验证', ['class' => 'btn btn-primary']) ?>
-
-            <?php ActiveForm::end(); ?>
+                ]);
+                echo Html::activeHiddenInput($user, 'otp_secret', ['value' => $totp_secret]);
+                echo $form->field($user, 'totp_input')->textInput()->label('最后一步! 输入TOTP应用程序上显示的密码以启用二步验证');
+                echo Html::submitButton('启用二步验证', ['class' => 'btn btn-primary']);
+                ActiveForm::end();
+            }
+            ?>
        </div>
    </div>
 <?php
--- a/views/user/verifyTwoFactor.php
+++ b/views/user/verifyTwoFactor.php
@ -0,0 +1,28 @@
+<?php
+
+use yii\bootstrap5\Html;
+use yii\bootstrap5\ActiveForm;
+
+/** @var yii\web\View $this */
+/** @var app\models\User $model */
+
+$this->title = '2FA验证';
+$this->params['breadcrumbs'][] = $this->title;
+?>
+<div class="user-login-2fa">
+    <h1><?= Html::encode($this->title) ?></h1>
+
+    <p>请在下方输入二步验证代码:</p>
+
+    <div class="row">
+        <div class="col-lg-5">
+            <?php $form = ActiveForm::begin(); ?>
+
+            <?= $form->field($model, 'totp_input')->passwordInput()->label('二步验证代码') ?>
+            <div class="form-group">
+                <?= Html::submitButton('提交', ['class' => 'btn btn-primary']) ?>
+            </div>
+            <?php ActiveForm::end(); ?>
+        </div>
+    </div>
+</div><!-- user-login-2fa -->
--- a/web/js/user-info.js
+++ b/web/js/user-info.js
@ -6,4 +6,17 @@ $(document).ready(function() {
            $('#deleteButton').prop('disabled', true);
        }
    });
+    $('#totp-enabled').change(function () {
+        if (this.checked) {
+            $('#totpSetupModal').modal('show');
+        }else {
+            $.post('index.php?r=user%2Fremove-two-factor', function () {
+                location.reload();
+            });
+        }
+    });
+    $('#totpSetupModal').on('hidden.bs.modal', function () {
+        $('#totp-enabled').prop('checked', false);
+    });
+
 });