前言
访问设备的检测，一般来说，我们只需要再前端获取到“Navigator”参数，就可以详细的分析出各种访问设备，浏览器，平台，版本等信息，如下图。
然后再通过编写一些 js 代码，可能还会利用到正则表达式，就可以识别出来访者用的具体是哪些设备了。
还可以利用一些成熟的第三方工具包，比如 device.js，react 用户还可以用更加强大的 react-device-detective.js，当然缺点也很明显，就是要隔三岔五的去更新这些包。
此外，在客户端检测设备类型有一个难题，就是很难去甄别爬虫类的访问，这就可能会导致记录数据时产生一些垃圾数据。
尽管如此，大部分时候，我们还是会选择在客户端来进行设备检测，毕竟这种方式来得最直接，也最快捷。
“新”方法
我最近在 GitHub 上偶然发现了一个基于.net core 的库，可以非常方便的检测市面上常见的大部分设备，除了电脑，手机，平板，还支持手表，电视，车载设备，IOT 设备的检测，而且几乎是全平台，全浏览器，全引擎支持，异常强大。
出于好奇心，我就在本地的项目上试了一下，简直不要太舒适！
这里我就简单安利一下这个库，放一下我这边的集成案例，也会写到集成方法，但还是推荐大家去他的主页去查看，传送门👉：https://github.com/wangkanai/wangkanai/tree/main/Detection。
安装
如果用 vs 进行开发的话，直接在 vs 的 nuget 包搜索 Wangkanai.Detection 这个包，或者在程序包管理控制台执行
PM> install-package Wangkanai.Detection
复制代码
配置服务
这里官方的案例是
public void ConfigureServices(IServiceCollection services){ // Add detection services container and device resolver service. services.AddDetection();
// Needed by Wangkanai Detection services.AddSession(options => { options.IdleTimeout = TimeSpan.FromSeconds(10); options.Cookie.HttpOnly = true; options.Cookie.IsEssential = true; });
// Add framework services. services.AddControllersWithViews();}
复制代码
配置 Detection 服务，需要同时配置 Session 和对应的框架服务，比如如果用 mvc 或者 razorpage 的模式，就要注入 AddControllersWithViews。
这里，我们就根据实际情况来调整就好了。
注入容器
配置好服务后，最后注入中间件时，要注意，探测服务要在 Routing 服务之前注入，顺序很重要
//..其他服务
//设备检测服务中间件要再Routing中间件之前注入app.UseDetection();
app.UseRouting();
//..其他服务
复制代码
修改_ViewImports
在视图文件中找到_ViewImports.cshtml 文件，然后加入新的 taghelper
@using CheckInSystem
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers@addTagHelper *, Wangkanai.Detection
复制代码
到此，基础的配置就完成了，后续就可以实际去使用 Detection 来帮助我们检测设备了。
案例
这里，我提供一个我这边的集成测试的一个案例，当然官方也提供了基于 mvc 框架的案例代码，可以到👉【这里】👈查看
@{ Layout = "_LayoutHt";}@inject Wangkanai.Detection.Services.IDetectionService DetectionService@using Wangkanai.Detection.Models;@{ ViewData["Title"] = "Detection";}<div class="container"> <form> <article> <header style="text-align:center;font-size:larger;font-weight:bolder">设备检测报告</header> <label for="deviceType"> 设备类型 @{ var DeviceType = DetectionService.Device.Type; if (DeviceType == Device.Tablet || DeviceType == Device.Desktop || DeviceType == Device.Mobile) { <input type="text" aria-invalid="false" id="deviceType-" name="deviceType" value="@DeviceType" data-flag="yes" readonly> } else { <input type="text" aria-invalid="true" id="deviceType" name="deviceType" value="@DeviceType" data-flag="none" readonly> <small>建议您在手机，平板电脑或者桌面电脑进行操作</small> } } </label>
<label for="platformName"> 系统平台 @{ var PlatformName = DetectionService.Platform.Name; if (PlatformName == Platform.Unknown || PlatformName == Platform.Others) { <input type="text" aria-invalid="true" id="platformName" name="platformName" value="@DetectionService.Platform.Name" data-flag="no" readonly> <small>建议您使用常见的操作系统平台进行操作，如Windows,Android,Linux,AppleOS(Mac OS,IOS,IPadOS),ChromeOS</small> } else { <input type="text" aria-invalid="false" id="platformName" name="platformName" value="@DetectionService.Platform.Name" data-flag="yes" readonly> } } </label>
<label for="platformVersion" style="display:none"> 平台版本（检测的不准） <input type="text" aria-invalid="false" id="platformVersion" name="platformVersion" value="@DetectionService.Platform.Version" readonly> </label>
<label for="platformProcessor"> 系统架构 <input type="text" aria-invalid="false" id="platformProcessor" name="platformProcessor" value="@DetectionService.Platform.Processor" readonly> </label>
<label for="browserName"> 浏览器 @{ var BrowserName = DetectionService.Browser.Name; if (BrowserName == Browser.Unknown || BrowserName == Browser.InternetExplorer || BrowserName == Browser.Opera) { <input type="text" aria-invalid="true" id="browserName" name="browserName" value="@BrowserName" data-flag="no" readonly> <small>建议您使用现代浏览器进行访问，如Chrome，Safari，FireFox，新版Edge 浏览器</small> } else { <input type="text" aria-invalid="false" id="browserName" name="browserName" value="@BrowserName" data-flag="yes" readonly> } } </label>
<label for="browserVersion"> 浏览器版本 @{ var BrowserVersion = DetectionService.Browser.Version; if (BrowserName == Browser.Chrome && BrowserVersion.Major < 80) { <input type="text" aria-invalid="true" id="browserName" name="browserName" value="@BrowserVersion" data-flag="no" readonly> <small>您的浏览器版本较低，建议升级至最新版本</small> } else if (BrowserName == Browser.Safari && BrowserVersion.Major < 10) { <input type="text" aria-invalid="true" id="browserName" name="browserName" value="@BrowserVersion" data-flag="no" readonly> <small>您的浏览器版本较低，建议升级至最新版本</small> } else if (BrowserName == Browser.Firefox && BrowserVersion.Major < 90) { <input type="text" aria-invalid="true" id="browserName" name="browserName" value="@BrowserVersion" data-flag="no" readonly> <small>您的浏览器版本较低，建议升级至最新版本</small> } else if (BrowserName == Browser.Edge && BrowserVersion.Major < 100) { <input type="text" aria-invalid="true" id="browserName" name="browserName" value="@BrowserVersion" data-flag="no" readonly> <small>您的浏览器版本较低，建议升级至最新版本</small> } else { <input type="text" aria-invalid="false" id="browserName" name="browserName" value="@BrowserVersion" data-flag="yes" readonly> } } </label>
<label for="Engine"> 引擎 @{ var EngineName = DetectionService.Engine.Name; if (EngineName == Engine.Blink || EngineName == Engine.WebKit || EngineName == Engine.Gecko || EngineName == Engine.Edge) { <input type="text" aria-invalid="false" id="Engine" name="Engine" value="@EngineName" data-flag="yes" readonly> } else { <input type="text" aria-invalid="false" id="Engine" name="Engine" value="@EngineName" data-flag="no" readonly> <small>请使用Chrome，FireFox，Safari，新版Edge 浏览器的最新版本</small> } } </label>
<p style="display:none">@DetectionService.UserAgent</p>
<p style="display:none">@DetectionService.Crawler.IsCrawler</p>
<footer style="text-align:center"> <a role="button" href="" id="result" class="secondary outline" aria-busy="true">请稍后...</a> <a role="button" href="/examination/index" id="btnBack" class="outline">返回</a> </footer> </article> </form></div>
<script> setTimeout(v => { let inputs = $("input"); let flag = true; for (var item of inputs) { if ($(item).data("flag") == 'no') { flag = false; break; } } if (flag) { $("#result").html("检测项全部通过，😀").css("color", "#43a047").css("border-color", "#43a047").removeAttr("aria-busy"); } else { $("#result").html("部分检测项不通过，😓").css("color", "#e53935").css("border-color", "#e53935").removeAttr("aria-busy"); } }, 1000)</script>
复制代码
最后的效果就是这样啦，贴几个图👇
补充
这里，我只用到了设备类型，系统平台，架构，浏览器，版本，引擎几个属性，实际上该库还可以检测爬虫，以及更多的检测方法，大家可以到其主页查看。
好了，就这样吧，很简单，有很好用的一个库，为设备检测提供了新思路。
评论