实现前端指纹登录的简单示例
2023-12-17 22:53:02
随笔
一切的失败都来源于实力不足
引入
如今的指纹识别已经充分运用到平板、笔记本电脑、手机甚至在用户支付中也是大有造诣，所以指纹作为我们用户独属于自己的身份识别信号也是相当重要的，正是这种独特的身份信号保存着我们的隐私信息
在现代网页应用中，用户验证是非常重要的一环。除了传统的用户名和密码登录方式外，指纹登录逐渐成为一种便捷且安全的认证方式。本文将介绍一个简单的前端指纹登录示例
实现过程
>>检测是否可以使用指纹
>>获取用户指纹信息并存储到本地
>>当用户再次登录时与本地中的数据进行对比
>>做出反馈
>>登录成功/失败
初始化项目信息
首先，先来了解两个第三方库：
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>结论
通过以上步骤，我们成功创建了一个简单的前端指纹登录示例。用户可以点击 "录入指纹" 按钮来录入指纹，然后在之后的登录过程中点击 "指纹登录" 按钮进行指纹认证。
请注意，这只是一个简单的演示示例，实际中可能需要更复杂的逻辑和安全性措施来保护用户的指纹数据。在实际应用中，建议使用后端服务器来处理指纹数据的存储和验证，以确保数据的安全性。
文章来源:https://blog.csdn.net/2202_75675550/article/details/135050476
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！