实现Web端指纹登录

本文转载自微信公众号「神奇的程序员k」，作者神奇的程序员k。转载本文请联系神奇的程序员K公众号。

前言

现在越来越多的笔记本电脑内置了指纹识别，用于快速从锁屏进入桌面，一些客户端的软件也支持通过指纹来认证用户身份。

前几天我在想，既然客户端软件能调用指纹设备，web端应该也可以调用，经过一番折腾后，终于实现了这个功能，并应用在了我的开源项目中。

本文就跟大家分享下我的实现思路以及过程，欢迎各位感兴趣的开发者阅读本文。

实现思路

浏览器提供了Web Authentication API, 我们可以利用这套API来调用用户的指纹设备来实现用户信息认证。

最终的实现效果视频如下所示：

web端指纹登录的实现

注册指纹

首先，我们需要拿到服务端返回的用户凭证，随后将用户凭证传给指纹设备，调起系统的指纹认证，认证通过后，回调函数会返回设备id与客户端信息，我们需要将这些信息保存在服务端，用于后面调用指纹设备来验证用户身份，从而实现登录。

接下来，我们总结下注册指纹的过程，如下所示：

用户使用其他方式在网站登录成功后，服务端返回用户凭证，将用户凭证保存到本地

检测客户端是否存在指纹设备

如果存在，将服务端返回的用户凭证与用户信息传递给指纹注册函数来创建指纹

身份认证成功，回调函数返回设备id与客户端信息，将设备id保存到本地

将设备id与客户端信息发送至服务端，将其存储到指定用户数据中。

注意：注册指纹只能工作在使用 https 连接，或是使用 localhost的网站中。

指纹认证

用户在我们网站授权指纹登录后，会将用户凭证与设备id保存在本地，当用户进入我们网站时，会从本地拿到这两条数据，提示它是否需要通过指纹来登录系统，同意之后则将设备id与用户凭证传给指纹设备，调起系统的指纹认证，认证通过后，调用登录接口，获取用户信息。

接下来，我们总结下指纹认证的过程，如下所示：

• 从本地获取用户凭证与设备id
• 检测客户端是否存在指纹设备
• 如果存在，将用户凭证与设备id传给指纹认证函数进行校验
• 身份认证成功，调用登录接口获取用户信息

注意：指纹认证只能工作在使用 https 连接，或是使用 localhost的网站中。

实现过程

上一个章节，我们捋清了指纹登录的具体实现思路，接下来我们来看下具体的实现过程与代码。

服务端实现

首先，我们需要在服务端写3个接口：获取TouchID、注册TouchID、指纹登录

获取TouchID

这个接口用于判断登录用户是否已经在本网站注册了指纹，如果已经注册则返回TouchID到客户端，方便用户下次登录。

• controller层代码如下

• 接口具体实现代码如下

注册TouchID

这个接口用于接收客户端指纹设备返回的TouchID与客户端信息，将获取到的信息保存到数据库的指定用户。

• controller层代码如下

• 接口具体实现代码如下

指纹登录

这个接口接收客户端发送的用户凭证与touchId，随后将其和数据库中的数据进行校验，返回用户信息。

• controller层代码如下

• 接口具体实现代码如下

前端实现

前端部分，需要将现有的登录逻辑和指纹认证相结合，我们需要实现两个函数：指纹注册、指纹登录。

指纹注册

这个函数我们需要接收3个参数：用户名、用户id、用户凭证，我们需要这三个参数来调用指纹设备来生成指纹，具体的实现代码如下：

上面函数中在创建指纹时，用到了一个对象，它是创建指纹必须要传的，它的定义以及每个参数的解释如下所示：

由于touchIDOptions中，有的参数需要ArrayBuffer类型，我们数据库保存的数据是base64格式的，因此我们需要实现base64与ArrayBuffer之间相互转换的函数，实现代码如下：

指纹认证通过后，会在回调函数中返回客户端信息，数据类型是ArrayBuffer，数据库需要的格式是string类型，因此我们需要实现ArrayBuffer转string的函数，实现代码如下：

注意：用户凭证中不能包含 _ 和 -这两个字符，否则base64ToArrayBuffer函数将无法成功转换。

指纹登录

这个函数接收2个参数：用户凭证、设备id，我们会通过这两个参数来调起客户端的指纹设备来验证身份，具体的实现代码如下：

注意：注册新的指纹后，旧的Touch id就会失效，只能通过新的Touch ID来登录，否则系统无法调起指纹设备，会报错：认证出了点问题。

整合现有登录逻辑

完成上述步骤后，我们已经实现了整个指纹的注册、登录的逻辑，接下来我们来看看如何将其与现有登录进行整合。

调用指纹注册

当用户使用用户名、密码或者第三方平台授权登录成功后，我们就调用指纹注册函数，提示用户是否对本网站进行授权，实现代码如下：

最终的效果如下所示：

每次第三方平台授权登录时都会检测当前用户是否已授权本网站，如果已授权则将Touch ID保存至本地，用于通过指纹直接登录。

调用指纹登录

当登录页面加载完毕1s后，我们从用户本地取出用户凭证与Touch ID，如果存在则提示用户是否需要通过指纹来登录系统，具体代码如下所示：

最终效果如下所示：

项目地址

本文代码的完整地址请移步：Login.vue

• 在线体验地址：chat-system
• 项目GitHub地址：chat-system-github