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

随笔

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

引入

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

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

实现过程

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

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

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

>>做出反馈

>>登录成功/失败

初始化项目信息

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

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

创建页面布局

接下来，我们需要创建一个简单的页面布局，包含一个欢迎标题、说明文本和两个按钮。请将以下代码插入到 <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>// 判断是否可以使用指纹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.');}});}
</script>

添加事件监听器

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

<script>const getfinger = document.querySelector('#getfinger');getfinger.addEventListener('click', registerFingerprint);
</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="https://cdnjs.cloudflare.com/ajax/libs/fingerprintjs2/2.1.0/fingerprint2.min.js"></script><script src="https://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>