检测客户端访问设备的一种新方法

前言

访问设备的检测，一般来说，我们只需要再前端获取到“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>

最后的效果就是这样啦，贴几个图👇

补充

这里，我只用到了设备类型，系统平台，架构，浏览器，版本，引擎几个属性，实际上该库还可以检测爬虫，以及更多的检测方法，大家可以到其主页查看。

好了，就这样吧，很简单，有很好用的一个库，为设备检测提供了新思路。

本文同步发表于InfoQ:检测客户端访问设备的一种新方法_.net core_为自己带盐_InfoQ写作社区