feat: magic-dash-pro模板新增可选的用户登录滑块验证功能

Author: CNFeffery

magic_dash/templates/magic-dash-pro/callbacks/login_c.py

@@ -38,13 +38,16 @@
         State("login-user-name", "value"),
         State("login-password-crypto", "data"),
         State("login-remember-me", "checked"),
+        State("login-slider-captcha", "verifyResult", allow_optional=True),
     ],
     running=[
         [Output("login-button", "loading"), True, False],
     ],
     prevent_initial_call=True,
 )
-def handle_login(nClicks, nSubmit, user_name, password_crypto, remember_me):
+def handle_login(
+    nClicks, nSubmit, user_name, password_crypto, remember_me, slider_verify_result
+):
     """处理用户登录逻辑"""
 
     time.sleep(0.25)
@@ -88,6 +91,24 @@ def handle_login(nClicks, nSubmit, user_name, password_crypto, remember_me):
             "error" if not values.get("login-password") else None,
         ]
 
+    # 处理滑块验证启用场景
+    if BaseConfig.enable_login_captcha:
+        # 验证通过
+        if slider_verify_result and slider_verify_result.get("status") == "success":
+            pass
+        else:
+            set_props(
+                "global-message",
+                {
+                    "children": fac.AntdMessage(
+                        type="error",
+                        content="请先完成滑块验证",
+                    )
+                },
+            )
+
+            return [None] * 4
+
     # 校验用户登录信息
 
     # 根据用户名尝试查询用户

magic_dash/templates/magic-dash-pro/configs/base_config.py

@@ -56,3 +56,6 @@ class BaseConfig:
 
     # 用于登录密码加密传输的RSA私钥文件路径
     rsa_private_key_path: str = "magic_dash_pro_private_key.pem"
+
+    # 针对用户登录页面，是否添加额外的滑块验证
+    enable_login_captcha: bool = False

magic_dash/templates/magic-dash-pro/views/login.py

@@ -169,6 +169,24 @@ def render():
                                             id="login-password-form-item",
                                             label="密码",
                                         ),
+                                        (
+                                            fac.AntdFormItem(
+                                                fuc.FefferySliderCaptcha(
+                                                    id="login-slider-captcha",
+                                                    block=True,
+                                                    mode="slider",
+                                                    tipText={
+                                                        "default": "请按住滑块，拖动到最右边",
+                                                        "moving": "请按住滑块，拖动到最右边",
+                                                        "error": "验证失败，请重新操作",
+                                                        "success": "验证成功",
+                                                    },
+                                                    style=style(width="100%"),
+                                                )
+                                            )
+                                            if BaseConfig.enable_login_captcha
+                                            else None
+                                        ),
                                         fac.AntdCheckbox(
                                             id="login-remember-me", label="记住我"
                                         ),