前端 usbkey navigator.usb 登录检测

news2024/11/24 14:26:12

前端 usbkey navigator.usb 实现登录

  • 前言
  • 调用api 报错
  • 总结


前言

navigator.usb 是一个与USB设备交互的API,它允许网页和浏览器扩展程序访问连接到电脑的USB设备。这个API可以让网页直接与USB设备进行数据交换,而无需用户手动安装任何软件。navigator.usb API目前主要支持Chrome OS和Windows操作系统。
以下是navigator.usb API的一些关键特性:

  1. 发现设备:浏览器可以列出所有连接的USB设备,并获取它们的描述信息。
  2. 请求访问设备:用户可以选择允许网页访问特定的USB设备。
  3. 传输数据:一旦获得访问权限,网页可以向USB设备发送数据或从设备接收数据。
  4. 控制设备:某些USB设备可能支持通过网页控制其功能,如播放/暂停、快进等。
  5. 事件监听:开发者可以监听USB事件,如设备连接、断开、数据传输完成等。
    要注意的是,为了安全起见,Chrome要求所有使用navigator.usb API的页面都必须是HTTPS。
    对于开发者来说,使用navigator.usb API需要进行用户授权,并在页面中包含相应的权限声明。在实际使用时,开发者需要处理USB设备的权限请求,并在用户授权后进行数据传输。
    总的来说,navigator.usb API为网页提供了直接与USB设备交互的能力,为开发者和用户提供了更多便捷和可能性。但同时,也需要关注数据安全和用户隐私保护。

提示: 一定是在 HTTPS 环境下才能有作用
提示: 一定是在 HTTPS 环境下才能有作用
提示: 一定是在 HTTPS 环境下才能有作用


调用api 报错

要求必须是用户触发, 所以必须要写点击事件内

const button = document.querySelector('.login-btn');
button.addEventListener('click', async (e) => {
    e.preventDefault();
    // 显示加载指示器或提示用户
    console.log('正在尝试连接USB设备...');
    layer.msg('正在尝试连接USB设备...');
    try {
        const device = await navigator.usb.requestDevice({filters: []});
        console.log('连接成功,设备信息:', device);
        layer.msg('连接成功');
    } catch (error) {
        console.error('连接USB设备失败:', error);
        layer.msg('连接USB设备失败!');
    }
});

总结

刚开始接触遇到的问题还有些懵, 但是毕竟这个涉及到安全相关的限制多还是能理解的,多做尝试

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1301802.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络实验】实验三 IP网络规划与路由设计(头歌)

目录 一、知识点 二、实验任务 三、头歌测试 一、知识点 IP子网掩码的两种表示方法 32位IP子网掩码,特点是从高位开始连续都是1,后面是连续的0,它有以下两种表示方法: 传统表示法,如:255.255.255.0IP前…

四年成长总结

树叶绿了又落下,树叶落下又绿了……季节如此,时间依然。 每到快结束的时候,总是不免的使人伤怀起来,可能是昨天的昨天仍旧使人“忆”,明天的未知使人“追”,不论是昨天亦或是明天,“斯为泰山而…

如何进行落地的数据分析,并提出落地的分析建议?

落地的数据分析是指将数据分析结果应用到实际业务中,以提供有价值的决策支持和改进方案。在进行落地的数据分析前,需要明确分析目标和需求,制定合适的分析方法和步骤,并在分析过程中不断优化和验证分析结果。以下是进行落地的数据…

AI PC行业深度研究报告:AI PC革新端侧AI交互体验

今天分享的人工智能系列深度研究报告:《AI PC行业深度研究报告:AI PC革新端侧AI交互体验》。 (报告出品方:华创证券) 报告共计:28页 点击添加图片描述(最多60个字)编辑 一、硬件端…

爬虫 selenium语法 (八)

目录 一、为什么使用selenium 二、selenium语法——元素定位 1.根据 id 找到对象 2.根据标签属性的属性值找到对象 3.根据Xpath语句获取对象 4.根据标签名获取对象 5.使用bs语法获取对象 6.通过链接文本获取对象 三、selenium语法——访问元素信息 1.获取属性的属性值…

Leetcode—228.汇总区间【简单】

2023每日刷题&#xff08;五十六&#xff09; Leetcode—228.汇总区间 解题思路 我们可以用双指针left 和 right找出每个区间的左右端点。 遍历数组&#xff0c;当right 1< n 且 nums[right1]nums[right]1 时&#xff0c;指针right向右移动&#xff0c;否则区间 [left, …

15:00面试,15:06就出来了,问的问题太变态了。。

刚从小厂出来&#xff0c;没想到在另一家公司我又寄了。 在这家公司上班&#xff0c;每天都要加班&#xff0c;但看在钱给的比较多的份上&#xff0c;也就不太计较了。但万万没想到5月一纸通知&#xff0c;所有人不准加班了&#xff0c;不仅加班费没有了&#xff0c;薪资还要降…

成都工业学院Web技术基础(WEB)实验八:BOM、DOM基本操作

写在前面 1、基于2022级计算机大类实验指导书 2、代码仅提供参考&#xff0c;前端变化比较大&#xff0c;按照要求&#xff0c;只能做到像&#xff0c;不能做到一模一样 3、图片和文字仅为示例&#xff0c;需要自行替换 4、如果代码不满足你的要求&#xff0c;请寻求其他的…

c2-C语言--指针

1.用一级指针遍历一维数组 结论 buf[i]<>*(buf i) <> *(p i)<> p[i] #include <stdio.h>int main(){int buf[5] {10,20 ,30 ,40,50}; //buf[0] --- int // buf --&buf[0] ----int *int *p buf;//&buf[0] --- &*(buf0)printf(&quo…

声明式数据建模、定义简单易懂:下一代 ORM 助你效率倍增 | 开源日报 No.102

prisma/prisma Stars: 34.0k License: Apache-2.0 Prisma 是一个下一代 ORM&#xff0c;包括以下工具&#xff1a; Prisma Client&#xff1a;为 Node.js 和 TypeScript 自动生成的类型安全查询构建器Prisma Migrate&#xff1a;声明式数据建模和迁移系统Prisma Studio&#…

【解刊】IEEE(trans),CCF-A,IF7.9,潜力好刊

计算机类 • 好刊解读 今天小编带来IEEE旗下计算机领域高分好刊&#xff0c;CCF-A类推荐的期刊解读&#xff0c;如您有投稿需求&#xff0c;可作为重点关注&#xff01;后文有相关领域真实发表案例&#xff0c;供您投稿参考~ 01 期刊简介 IEEE Transactions on Mobile Compu…

科研试剂2913223-17-1激酶抑制剂 KWCN-41

KWCN-41 激酶抑制剂 2913223-17-1&#xff08;源自星戈瑞&#xff09; EFdA-TP 核苷逆转录酶抑制剂 950913-56-1 (RT) 3-O-Methylviridicatin TNF-α的抑制剂 6152-57-4 Zidebactam sodium salt β-内酰胺酶抑制剂 1706777-46-9 Triacsin C 酰基辅酶A合成酶抑制剂 76896-80…

【lesson4】数据类型之数值类型

文章目录 数据分类数值类型tinyint类型有符号类型测试无符号类型测试 bit类型测试 float类型有符号测试无符号测试 decimal类型测试 数据分类 数值类型 tinyint类型 说明&#xff1a;tinyint 有符号能存储的范围是-128-127&#xff0c;无符号能存储的范围是0~255 有符号类型…

AI 绘画 | Stable Diffusion 艺术二维码制作

前言 这篇文章教会你如果用Stable Diffusion WEB UI制作艺术二维码,什么是艺术二维码呢?就是普通二维码和艺术图片融合后的二维码图片,如下图所示。主要原理还是使用controlNet的control_v1p_sd15_qrcode_monster模型和光影模型control_v1p_sd15_brightness。 教程 准备…

推荐4个优秀的 Python 时间序列分析库

时间序列分析在金融和医疗保健等领域至关重要&#xff0c;在这些领域&#xff0c;理解随时间变化的数据模式至关重要。在本文中&#xff0c;我们将介绍四个主要的Python库——statmodels、tslearn、tssearch和tsfresh——每个库都针对时间序列分析的不同方面进行了定制。这些库…

【每日一题】1631. 最小体力消耗路径-2023.12.11

题目&#xff1a; 1631. 最小体力消耗路径 你准备参加一场远足活动。给你一个二维 rows x columns 的地图 heights &#xff0c;其中 heights[row][col] 表示格子 (row, col) 的高度。一开始你在最左上角的格子 (0, 0) &#xff0c;且你希望去最右下角的格子 (rows-1, column…

太阳能光伏企业网站建设效果如何

光伏行业近些年发展也比较迅速&#xff0c;其服务/产品拓展度较高&#xff0c;对企业来说&#xff0c;合作商较少更需要多地域寻找目标客户及信息承载展示、拓展等&#xff0c;传统线下方式单一且不足&#xff0c;线上成为众商家经营的方向。 1、品牌宣传、信息呈现难 太阳能…

C/C++ 题目:给定字符串s1和s2,判断s1是否是s2的子序列

判断子序列一个字符串是否是另一个字符串的子序列 解释&#xff1a;字符串的一个子序列是原始字符串删除一些&#xff08;也可以不删除&#xff09;字符&#xff0c;不改变剩余字符相对位置形成的新字符串。 如&#xff0c;"ace"是"abcde"的一个子序…

git 关于分支、merge、commit提交

最近开始用git终端提交代码&#xff0c;梳理了一些知识点 一 关于分支 关于分支&#xff0c;git的分支分为本地分支远程分支两种分支&#xff0c;在上传代码时&#xff0c;我们要确保当前本地分支连接了一个远程分支。 我们可以通过下面代码查看当前的本地分支&#xff1a; g…

.NET 8 编写 LiteDB vs SQLite 数据库 CRUD 接口性能测试(测试篇)

WebAppDbTest 项目测试 测试工具 ltt介绍安装使用方式1、Drill2、Hammer3、Nailgun 测试主机规格配置CRUD 性能测试对比1、ltt 工具测试1.1、AddSingle 单条数据添加1.2、AddBulk 批量数据&#xff08;1000&#xff09;条添加1.3、GetSingle 单条数据查询1.4、GetAll 多条&…