Vue.js SPA + ASP.NET WebApi +承载令牌+登录密码和客户端证书身份验证

Question

我正在将ASP.NET WebForms应用程序迁移到具有Vue.js前端和ASP.NET WebApi后端的单页应用程序（这些应用程序将在不同的域中运行）。

我需要实现两种身份验证方案：

1）用户通过其登录名和密码进行身份验证。登录名和密码通过ajax发送到服务器，由OWIN中间件处理，将承载令牌返回给客户端。

2）用户将其证书提交给服务器。服务器检查证书，通过证书序列号查找用户，然后返回承载令牌（如果找到了用户）。

然后，存储令牌将存储并作为任何其他请求的一部分发送到api。

方案2的问题是，仅当发出直接请求（在地址栏中输入网址）时，浏览器证书选择对话框才会出现。如果请求是通过Javascript发送的，则不询问也不发送证书。因此，看来要使此工作有效，唯一的方法是将用户重定向到WebApi Url（配置为requireSsl）。

由于令牌的所有工作都在OWIN内部完成，所以我不知道要在我自己的控制器方法中确切放置什么：

public class AuthController : Controller 
{
    //User gets redirected here
    public ActionResult AuthByCertificate()
    {
        if (Request.ClientCertificate.IsPresent)
        {
            //var user = find user by Request.ClientCertificate.SerialNumber
            //var bearerToken = //generate bearer token - how?
            //return Redirect("https://client_app_url/#"+bearerToken);
        }
        else
        {
            //Return some bad result
        }
    }
}

由于最好将所有身份验证放在一个位置，因此我也想将登录密码处理也放在控制器中（即用户在webapi中进行身份验证，然后重定向到vue clientapp）。但这似乎不是正确的方法。