主页 > 电脑硬件 >

实现前端指纹登录的简单示例

电脑硬件
2025-07-21 19:11:54

随笔

一切的失败都来源于实力不足

引入

如今的指纹识别已经充分运用到平板、笔记本电脑、手机甚至在用户支付中也是大有造诣，所以指纹作为我们用户独属于自己的身份识别信号也是相当重要的，正是这种独特的身份信号保存着我们的隐私信息

在现代网页应用中，用户验证是非常重要的一环。除了传统的用户名和密码登录方式外，指纹登录逐渐成为一种便捷且安全的认证方式。本文将介绍一个简单的前端指纹登录示例

实现过程

>>检测是否可以使用指纹

>>获取用户指纹信息并存储到本地

>>当用户再次登录时与本地中的数据进行对比

>>做出反馈

>>登录成功/失败

初始化项目信息

首先，先来了解两个第三方库：

fingerprintjs2 是一个用于在浏览器中生成客户端指纹的 JavaScript 库。它可以收集多种浏览器环境和设备信息，生成唯一的标识符，用于识别用户或设备

crypto-js是一个 JavaScript 加密库，提供了多种加密算法和常用的加密操作函数。它可以用于在浏览器和Node.js 环境中进行数据加密、解密、哈希计算等操作

请将以下代码插入到 <head> 标签内：

接下来，我们需要创建一个简单的页面布局，包含一个欢迎标题、说明文本和两个按钮。请将以下代码插入到 <body> 标签内：

<h1>欢迎来到我的网站</h1> <p>这是一个简单的示例页面，用于演示前端指纹登录的实现。</p> <p>你可以点击下面的按钮进行登录：</p> <button class="button" style="border: none;" id="getfinger">录入指纹</button> <a href="#" class="button" onclick="loginWithFingerprint()">指纹登录</a> 实现功能函数

接下来，我们需要编写一些 JavaScript 函数来实现指纹登录的功能。请将以下代码插入到 <script> 标签内：

最后，我们需要为按钮添加事件监听器，以便在用户点击按钮时触发对应的功能函数。请将以下代码插入到 <script> 标签内：

最终的 HTML 代码如下：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>前端指纹登录示例</title>  <script src=" cdnjs.cloudflare /ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script> <script src=" cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>  <style> body { background-color: #f0f0f0; font-family: Arial, sans-serif; font-size: 14px; } h1 { color: #333333; font-size: 24px; margin-top: 20px; } p { color: #666666; line-height: 1.5em; margin-bottom: 10px; } .button { display: inline-block; padding: 8px 16px; background-color: #4285f4; color: #ffffff; text-decoration: none; border-radius: 4px; } </style> </head> <body>  <h1>欢迎来到我的网站</h1> <p>这是一个简单的示例页面，用于演示前端指纹登录的实现。</p> <p>你可以点击下面的按钮进行登录：</p> <button class="button" style="border: none;" id="getfinger">录入指纹</button> <a href="#" class="button" onclick="loginWithFingerprint()">指纹登录</a>  <script> // 判断是否可以使用指纹 if (window.navigator && window.navigator.credentials && window.navigator.credentials.get) { console.log('指纹识别功能可用'); } else { console.log('指纹识别功能不可用'); } // 录入用户指纹 function registerFingerprint() { console.log('Place your finger on the fingerprint sensor:'); Fingerprint2.get(function (components) { const fingerprint = JSON.stringify(components); const fingerprintHash = CryptoJS.SHA256(fingerprint).toString(); // 将指纹哈希值保存到文件中 // 这里可以根据实际需求选择适当的存储方式（如数据库） console.log('Fingerprint registered:', fingerprintHash); let hash = []; hash.push(fingerprintHash); localStorage.setItem('hash', hash); }); } // 进行指纹识别 function loginWithFingerprint() { console.log('Place your finger on the fingerprint sensor:'); Fingerprint2.get(function (components) { const fingerprint = JSON.stringify(components); const fingerprintHash = CryptoJS.SHA256(fingerprint).toString(); // 从文件中获取之前保存的指纹哈希值 // 这里需要根据实际的存储方式进行读取操作 let hashArray = localStorage.getItem('hash'); const savedFingerprintHash = hashArray; if (savedFingerprintHash.includes(fingerprintHash)) { console.log('Fingerprint authentication successful. Access granted.'); } else { console.log('Fingerprint authentication failed. Access denied.'); } }); } // 添加事件监听器 const getfinger = document.querySelector('#getfinger'); getfinger.addEventListener('click', registerFingerprint); </script> </body> </html> 结论

通过以上步骤，我们成功创建了一个简单的前端指纹登录示例。用户可以点击 "录入指纹" 按钮来录入指纹，然后在之后的登录过程中点击 "指纹登录" 按钮进行指纹认证。

请注意，这只是一个简单的演示示例，实际中可能需要更复杂的逻辑和安全性措施来保护用户的指纹数据。在实际应用中，建议使用后端服务器来处理指纹数据的存储和验证，以确保数据的安全性。

标签：

实现前端指纹登录的简单示例由讯客互联电脑硬件栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“实现前端指纹登录的简单示例”

上一篇
JAVA主流日志框架梳理学习及使用

下一篇
Java网络编程——安全网络通信