ASP.NET MVC Know Your Customers

2021-12-27

KYC 在金融業正夯，而到了資訊系統開發，就是認識你的網站拜訪。說明 ASP.NET 設計統計來訪 Requests 使用的瀏覽器技術、作業系統、螢幕比例以及來源位置等資訊，讓應用系統能夠根據統計資料加以回饋改善。

說明

資料表設計

CREATE TABLE [dbo].[KYC](
	[Id] [int] IDENTITY(1,1) NOT NULL PRIMARY,
	[HttpReferer] [nvarchar](256) NULL,
	[UserAD] [varchar](32) NULL,
	[AuthenticationType] [varchar](32) NULL,
	[ClientIP] [varchar](135) NOT NULL,
	[ClientPort] [int] NULL,
	[Browser] [varchar](64) NULL,
	[OS] [varchar](64) NULL,
	[ScreenHeight] [smallint] NULL,
	[ScreenWidrh] [smallint] NULL,
	[ScreenRatio] [smallint] NULL,
	[TimeStamp] [datetime2](7) NOT NULL,
GO

ALTER TABLE [dbo].[KYC] ADD CONSTRAINT [DF_KYC_TimeStamp] 
  DEFAULT (getdate()) FOR [TimeStamp]

Controller Design

為了分析作業系統與瀏覽器資訊，使用 Nuget 安裝 UAParser (3.1.47) 協助進行分析 User Agent。

[AllowCORS]
public ActionResult KYC(short sh = 0, short sw = 0, short sr = 0, string Msg = "")
{
    Guests guests = new Guests();
    var uaParser = UAParser.Parser.GetDefault();
    var parseResult = 
      uaParser.Parse(HttpContext.Request.ServerVariables["HTTP_USER_AGENT"]);
    guests.HttpReferer = 
      HttpContext.Request.ServerVariables["http_referer"];
    guests.UserAD = User.Identity.Name;
    guests.AuthenticationType = User.Identity.AuthenticationType;
    guests.ClientIP = HttpContext.Request.UserHostAddress;
    guests.ClientPort = 
      Int32.Parse(HttpContext.Request.ServerVariables["REMOTE_PORT"]);
    guests.Browser = parseResult.UA.ToString();
    guests.OS = parseResult.OS.ToString();
    guests.ScreenHeight = sh;
    guests.ScreenWidrh = sw;
    guests.ScreenRatio = sr;

    if (ModelState.IsValid)
    {
        db.Guests.Add(guests);
        db.SaveChanges();
        return Json(200, JsonRequestBehavior.AllowGet);
    }

    return Json(500, JsonRequestBehavior.AllowGet);
}

為了要讓不同的應用程式跨源呼叫，回應標題必須加上 Access-Control-Allow-Origin，利用 Filter 的方式設計與包裝，並修飾 Controller。

public class AllowCORSAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext
          .Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}

Client Usage

如果是當代瀏覽器，可以使用 fetch API，但 fetch API 需要注意自組 query string：

fetch('localhost:8888/KYC/?' + new URLSearchParams({
    sh: screen.height,
    sw: screen.width,
    sr: Math.round(window.devicePixelRatio * 100),
    msg: 'fetch API'
}).toString())

為了要相容 IE11 可以改為使用 jQuery 的 get method：

<script src="https://code.jquery.com/jquery-3.6.0.min.js" 
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
  crossorigin="anonymous">
</script>

<script>
$.get("localhost:8888/KYC", 
  {
    sh: screen.height,
    sw: screen.width,
    sr: Math.round(window.devicePixelRatio * 100),
    msg: 'systemName'
  });
</script>