Umbraco 10：如何修改双因素认证（2FA）的Angular或C#视图？

方案一：通过后端拦截修改视图路径（贴合Umbraco原生逻辑） #

你观察到PostLogin接口返回的twoFactorView字段是后端决定加载视图的核心，可以通过以下方式修改：

• 重写AuthenticationApiController：创建自定义控制器继承Umbraco原生的AuthenticationController，重写PostLogin方法，将返回的twoFactorView路径替换为你的自定义视图路径（比如views\\custom\\duo-login-2fa.html），再注册该控制器替换原生路由。
• 使用Action Filter拦截响应：编写轻量过滤器修改返回值，示例代码如下：

public class ModifyTwoFactorViewFilter : IActionFilter
{
    public void OnActionExecuting(ActionExecutingContext context) { }

    public void OnActionExecuted(ActionExecutedContext context)
    {
        if (context.Controller is AuthenticationController && context.ActionDescriptor.ActionName == "PostLogin")
        {
            var result = context.Result as JsonResult;
            if (result?.Value is Dictionary<string, object> responseData)
            {
                if (responseData.ContainsKey("twoFactorView"))
                {
                    responseData["twoFactorView"] = "views\\custom\\duo-login-2fa.html";
                }
            }
        }
    }
}

在Startup中注册过滤器：

builder.Services.AddMvc(options =>
{
    options.Filters.Add<ModifyTwoFactorViewFilter>();
});

方案二：Angular层面替换模板（适合前端自定义逻辑） #

你已成功重写Umbraco.Login2faController，可以同步替换对应模板：

1. 在App_Plugins/Duo2FA目录下创建自定义视图duo-login-2fa.html，按Duo交互逻辑编写（比如仅显示确认提示，无需输入框）。
2. 用$templateCache替换原生模板，同时完善控制器逻辑：

angular.module("umbraco")
.run(function($templateCache) {
    $templateCache.put("views/common/login-2fa.html", 
        '<div class="umb-login-container">' +
        '   <div class="umb-login-content">' +
        '       <h1>请在Duo移动应用中确认登录</h1>' +
        '       <div class="umb-btn-group">' +
        '           <button ng-click="verifyDuo()" class="btn btn-primary">重新发送请求</button>' +
        '       </div>' +
        '   </div>' +
        '</div>'
    );
})
.controller("Umbraco.Login2faController", function ($scope, $http, authResource, userService, twoFactorLoginResource) {
    $scope.verifyDuo = function() {
        $http.post("/umbraco/backoffice/api/Duo2FA/VerifyLogin", {userId: $scope.userId})
        .then(function(response) {
            if (response.data.success) {
                authResource.finishLogin().then(function() {
                    window.location.href = "/umbraco";
                });
            }
        });
    };

    // 页面加载自动发起验证请求
    $scope.verifyDuo();
});

3. 创建package.manifest注册前端资源，确保Umbraco后台加载：

{
    "javascript": [
        "/App_Plugins/Duo2FA/duo-login-controller.js"
    ],
    "css": [
        "/App_Plugins/Duo2FA/duo-styles.css"
    ]
}

关于ConfigureTwoFactorController视图的修改 #

针对Umbraco.Editors.ConfigureTwoFactorController的视图，可复用上述思路：

• 后端层面：若视图路径由接口返回，用Action Filter或重写控制器修改路径；
• 前端层面：用$templateCache替换原生模板（比如views/editors/configuretwofactor.html），或重写控制器时指定自定义模板。

内容的提问来源于stack exchange，提问作者atoms