如何實(shí)現(xiàn) Web 端指紋登錄
前言
現(xiàn)在越來(lái)越多的筆記本電腦內(nèi)置了指紋識(shí)別，用于快速?gòu)逆i屏進(jìn)入桌面，一些客戶(hù)端的軟件也支持通過(guò)指紋來(lái)認(rèn)證用戶(hù)身份。
前幾天我在想，既然客戶(hù)端軟件能調(diào)用指紋設(shè)備，web端應(yīng)該也可以調(diào)用，經(jīng)過(guò)一番折騰后，終于實(shí)現(xiàn)了這個(gè)功能，并應(yīng)用在了我的開(kāi)源項(xiàng)目中。
本文就跟大家分享下我的實(shí)現(xiàn)思路以及過(guò)程，歡迎各位感興趣的開(kāi)發(fā)者閱讀本文。
實(shí)現(xiàn)思路
瀏覽器提供了Web Authentication API, 我們可以利用這套API來(lái)調(diào)用用戶(hù)的指紋設(shè)備來(lái)實(shí)現(xiàn)用戶(hù)信息認(rèn)證。
https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Authentication_API
注冊(cè)指紋
首先，我們需要拿到服務(wù)端返回的用戶(hù)憑證，隨后將用戶(hù)憑證傳給指紋設(shè)備，調(diào)起系統(tǒng)的指紋認(rèn)證，認(rèn)證通過(guò)后，回調(diào)函數(shù)會(huì)返回設(shè)備id與客戶(hù)端信息，我們需要將這些信息保存在服務(wù)端，用于后面調(diào)用指紋設(shè)備來(lái)驗(yàn)證用戶(hù)身份，從而實(shí)現(xiàn)登錄。
接下來(lái)，我們總結(jié)下注冊(cè)指紋的過(guò)程，如下所示：
- 用戶(hù)使用其他方式在網(wǎng)站登錄成功后，服務(wù)端返回用戶(hù)憑證，將用戶(hù)憑證保存到本地
- 檢測(cè)客戶(hù)端是否存在指紋設(shè)備
- 如果存在，將服務(wù)端返回的用戶(hù)憑證與用戶(hù)信息傳遞給指紋注冊(cè)函數(shù)來(lái)創(chuàng)建指紋
- 身份認(rèn)證成功，回調(diào)函數(shù)返回設(shè)備id與客戶(hù)端信息，將設(shè)備id保存到本地
- 將設(shè)備id與客戶(hù)端信息發(fā)送至服務(wù)端，將其存儲(chǔ)到指定用戶(hù)數(shù)據(jù)中。
注意：注冊(cè)指紋只能工作在使用 https 連接，或是使用 localhost的網(wǎng)站中。
指紋認(rèn)證
用戶(hù)在我們網(wǎng)站授權(quán)指紋登錄后，會(huì)將用戶(hù)憑證與設(shè)備id保存在本地，當(dāng)用戶(hù)進(jìn)入我們網(wǎng)站時(shí)，會(huì)從本地拿到這兩條數(shù)據(jù)，提示它是否需要通過(guò)指紋來(lái)登錄系統(tǒng)，同意之后則將設(shè)備id與用戶(hù)憑證傳給指紋設(shè)備，調(diào)起系統(tǒng)的指紋認(rèn)證，認(rèn)證通過(guò)后，調(diào)用登錄接口，獲取用戶(hù)信息。
接下來(lái)，我們總結(jié)下指紋認(rèn)證的過(guò)程，如下所示：
- 從本地獲取用戶(hù)憑證與設(shè)備id
- 檢測(cè)客戶(hù)端是否存在指紋設(shè)備
- 如果存在，將用戶(hù)憑證與設(shè)備id傳給指紋認(rèn)證函數(shù)進(jìn)行校驗(yàn)
- 身份認(rèn)證成功，調(diào)用登錄接口獲取用戶(hù)信息
注意：指紋認(rèn)證只能工作在使用 https 連接，或是使用 localhost的網(wǎng)站中。
實(shí)現(xiàn)過(guò)程
上一個(gè)章節(jié)，我們捋清了指紋登錄的具體實(shí)現(xiàn)思路，接下來(lái)我們來(lái)看下具體的實(shí)現(xiàn)過(guò)程與代碼。
服務(wù)端實(shí)現(xiàn)
首先，我們需要在服務(wù)端寫(xiě)3個(gè)接口：獲取TouchID、注冊(cè)TouchID、指紋登錄
獲取TouchID
這個(gè)接口用于判斷登錄用戶(hù)是否已經(jīng)在本網(wǎng)站注冊(cè)了指紋，如果已經(jīng)注冊(cè)則返回TouchID到客戶(hù)端，方便用戶(hù)下次登錄。
- controller層代碼如下
- @ApiOperation(value = "獲取TouchID", notes = "通過(guò)用戶(hù)id獲取指紋登錄所需憑據(jù)")
- @CrossOrigin()
- @RequestMapping(value = "/getTouchID", method = RequestMethod.POST)
- public ResultVO<?> getTouchID(@ApiParam(name = "傳入userId", required = true) @Valid @RequestBody GetTouchIdDto touchIdDto, @RequestHeader(value = "token") String token) {
- JSONObject result = userService.getTouchID(JwtUtil.getUserId(token));
- if (result.getEnum(ResultEnum.class, "code").getCode() == 0) {
- // touchId獲取成功
- return ResultVOUtil.success(result.getString("touchId"));
- }
- // 返回錯(cuò)誤信息
- return ResultVOUtil.error(result.getEnum(ResultEnum.class, "code").getCode(), result.getEnum(ResultEnum.class, "code").getMessage());
- }
- 接口具體實(shí)現(xiàn)代碼如下
- // 獲取TouchID
- @Override
- public JSONObject getTouchID(String userId) {
- JSONObject returnResult = new JSONObject();
- // 根據(jù)當(dāng)前用戶(hù)id從數(shù)據(jù)庫(kù)查詢(xún)touchId
- User user = userMapper.getTouchId(userId);
- String touchId = user.getTouchId();
- if (touchId != null) {
- // touchId存在
- returnResult.put("code", ResultEnum.GET_TOUCHID_SUCCESS);
- returnResult.put("touchId", touchId);
- return returnResult;
- }
- // touchId不存在
- returnResult.put("code", ResultEnum.GET_TOUCHID_ERR);
- return returnResult;
- }
注冊(cè)TouchID
這個(gè)接口用于接收客戶(hù)端指紋設(shè)備返回的TouchID與客戶(hù)端信息，將獲取到的信息保存到數(shù)據(jù)庫(kù)的指定用戶(hù)。
- controller層代碼如下
@ApiOperation(value = "注冊(cè)TouchID", notes = "保存客戶(hù)端返回的touchid等信息")
- @CrossOrigin()
- @RequestMapping(value = "/registeredTouchID", method = RequestMethod.POST)
- public ResultVO<?> registeredTouchID(@ApiParam(name = "傳入userId", required = true) @Valid @RequestBody SetTouchIdDto touchIdDto, @RequestHeader(value = "token") String token) {
- JSONObject result = userService.registeredTouchID(touchIdDto.getTouchId(), touchIdDto.getClientDataJson(), JwtUtil.getUserId(token));
- if (result.getEnum(ResultEnum.class, "code").getCode() == 0) {
- // touchId獲取成功
- return ResultVOUtil.success(result.getString("data"));
- }
- // 返回錯(cuò)誤信息
- return ResultVOUtil.error(result.getEnum(ResultEnum.class, "code").getCode(), result.getEnum(ResultEnum.class, "code").getMessage());
- }
- 接口具體實(shí)現(xiàn)代碼如下
- // 注冊(cè)TouchID
- @Override
- public JSONObject registeredTouchID(String touchId, String clientDataJson, String userId) {
- JSONObject result = new JSONObject();
- User row = new User();
- row.setTouchId(touchId);
- row.setClientDataJson(clientDataJson);
- row.setUserId(userId);
- // 根據(jù)userId更新touchId與客戶(hù)端信息
- int updateResult = userMapper.updateTouchId(row);
- if (updateResult>0) {
- result.put("code", ResultEnum.SET_TOUCHED_SUCCESS);
- result.put("data", "touch_id設(shè)置成功");
- return result;
- }
- result.put("code", ResultEnum.SET_TOUCHED_ERR);
- return result;
- }
指紋登錄
這個(gè)接口接收客戶(hù)端發(fā)送的用戶(hù)憑證與touchId，隨后將其和數(shù)據(jù)庫(kù)中的數(shù)據(jù)進(jìn)行校驗(yàn)，返回用戶(hù)信息。
- controller層代碼如下
- @ApiOperation(value = "指紋登錄", notes = "通過(guò)touchId與用戶(hù)憑證登錄系統(tǒng)")
- @CrossOrigin()
- @RequestMapping(value = "/touchIdLogin", method = RequestMethod.POST)
- public ResultVO<?> touchIdLogin(@ApiParam(name = "傳入Touch ID與用戶(hù)憑證", required = true) @Valid @RequestBody TouchIDLoginDto touchIDLogin) {
- JSONObject result = userService.touchIdLogin(touchIDLogin.getTouchId(), touchIDLogin.getCertificate());
- return LoginUtil.getLoginResult(result);
- }
- 接口具體實(shí)現(xiàn)代碼如下
- // 指紋登錄
- @Override
- public JSONObject touchIdLogin(String touchId, String certificate) {
- JSONObject returnResult = new JSONObject();
- User row = new User();
- row.setTouchId(touchId);
- row.setUuid(certificate);
- User user = userMapper.selectUserForTouchId(row);
- String useruserName = user.getUserName();
- String useruserId = user.getUserId();
- // 用戶(hù)名為null則返回錯(cuò)誤信息
- if (userName == null) {
- // 指紋認(rèn)證失敗
- returnResult.put("code", ResultEnum.TOUCHID_LOGIN_ERR);
- return returnResult;
- }
- // 指紋認(rèn)證成功，返回用戶(hù)信息至客戶(hù)端
- // ... 此處代碼省略，根據(jù)自己的需要返回用戶(hù)信息即可 ...//
- returnResult.put("code", ResultEnum.LOGIN_SUCCESS);
- return returnResult;
- }
前端實(shí)現(xiàn)
前端部分，需要將現(xiàn)有的登錄邏輯和指紋認(rèn)證相結(jié)合，我們需要實(shí)現(xiàn)兩個(gè)函數(shù)：指紋注冊(cè)、指紋登錄。
指紋注冊(cè)
這個(gè)函數(shù)我們需要接收3個(gè)參數(shù)：用戶(hù)名、用戶(hù)id、用戶(hù)憑證，我們需要這三個(gè)參數(shù)來(lái)調(diào)用指紋設(shè)備來(lái)生成指紋，具體的實(shí)現(xiàn)代碼如下：
- touchIDRegistered: async function(
- userName: string,
- userId: string,
- certificate: string
- ) {
- // 校驗(yàn)設(shè)備是否支持touchID
- const hasTouchID = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
- if (
- hasTouchID &&
- window.confirm("檢測(cè)到您的設(shè)備支持指紋登錄，是否啟用？")
- ) {
- // 更新注冊(cè)憑證
- thisthis.touchIDOptions.publicKey.challenge = this.base64ToArrayBuffer(
- certificate
- );
- // 更新用戶(hù)名、用戶(hù)id
- this.touchIDOptions.publicKey.user.name = userName;
- this.touchIDOptions.publicKey.user.displayName = userName;
- thisthis.touchIDOptions.publicKey.user.id = this.base64ToArrayBuffer(
- userId
- );
- // 調(diào)用指紋設(shè)備，創(chuàng)建指紋
- const publicKeyCredential = await navigator.credentials.create(
- this.touchIDOptions
- );
- if (publicKeyCredential && "rawId" in publicKeyCredential) {
- // 將rowId轉(zhuǎn)為base64
- const rawId = publicKeyCredential["rawId"];
- const touchId = this.arrayBufferToBase64(rawId);
- const response = publicKeyCredential["response"];
- // 獲取客戶(hù)端信息
- const clientDataJSON = this.arrayBufferToString(
- response["clientDataJSON"]
- );
- // 調(diào)用注冊(cè)TouchID接口
- this.$api.touchIdLogingAPI
- .registeredTouchID({
- touchId: touchId,
- clientDataJson: clientDataJSON
- })
- .then((res: responseDataType<string>) => {
- if (res.code === 0) {
- // 保存touchId用于指紋登錄
- localStorage.setItem("touchId", touchId);
- return;
- }
- alert(res.msg);
- });
- }
- }
- }
上面函數(shù)中在創(chuàng)建指紋時(shí)，用到了一個(gè)對(duì)象，它是創(chuàng)建指紋必須要傳的，它的定義以及每個(gè)參數(shù)的解釋如下所示：
- const touchIDOptions = {
- publicKey: {
- rp: { name: "chat-system" }, // 網(wǎng)站信息
- user: {
- name: "", // 用戶(hù)名
- id: "", // 用戶(hù)id(ArrayBuffer)
- displayName: "" // 用戶(hù)名
- },
- pubKeyCredParams: [
- {
- type: "public-key",
- alg: -7 // 接受的算法
- }
- ],
- challenge: "", // 憑證(touchIDOptions)
- authenticatorSelection: {
- authenticatorAttachment: "platform"
- }
- }
- }
由于touchIDOptions中，有的參數(shù)需要ArrayBuffer類(lèi)型，我們數(shù)據(jù)庫(kù)保存的數(shù)據(jù)是base64格式的，因此我們需要實(shí)現(xiàn)base64與ArrayBuffer之間相互轉(zhuǎn)換的函數(shù)，實(shí)現(xiàn)代碼如下：
- base64ToArrayBuffer: function(base64: string) {
- const binaryString = window.atob(base64);
- const len = binaryString.length;
- const bytes = new Uint8Array(len);
- for (let i = 0; i < len; i++) {
- bytes[i] = binaryString.charCodeAt(i);
- }
- return bytes.buffer;
- },
- arrayBufferToBase64: function(buffer: ArrayBuffer) {
- let binary = "";
- const bytes = new Uint8Array(buffer);
- const len = bytes.byteLength;
- for (let i = 0; i < len; i++) {
- binary += String.fromCharCode(bytes[i]);
- }
- return window.btoa(binary);
- }
指紋認(rèn)證通過(guò)后，會(huì)在回調(diào)函數(shù)中返回客戶(hù)端信息，數(shù)據(jù)類(lèi)型是ArrayBuffer，數(shù)據(jù)庫(kù)需要的格式是string類(lèi)型，因此我們需要實(shí)現(xiàn)ArrayBuffer轉(zhuǎn)string的函數(shù)，實(shí)現(xiàn)代碼如下：
- arrayBufferToString: function(buffer: ArrayBuffer) {
- let binary = "";
- const bytes = new Uint8Array(buffer);
- const len = bytes.byteLength;
- for (let i = 0; i < len; i++) {
- binary += String.fromCharCode(bytes[i]);
- }
- return binary;
- }
注意⚠️：用戶(hù)憑證中不能包含 _ 和 **-**這兩個(gè)字符，否則base64ToArrayBuffer函數(shù)將無(wú)法成功轉(zhuǎn)換。
指紋登錄
這個(gè)函數(shù)接收2個(gè)參數(shù)：用戶(hù)憑證、設(shè)備id，我們會(huì)通過(guò)這兩個(gè)參數(shù)來(lái)調(diào)起客戶(hù)端的指紋設(shè)備來(lái)驗(yàn)證身份，具體的實(shí)現(xiàn)代碼如下：
- touchIDLogin: async function(certificate: string, touchId: string) {
- // 校驗(yàn)設(shè)備是否支持touchID
- const hasTouchID = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
- if (hasTouchID) {
- // 更新登錄憑證
- thisthis.touchIDLoginOptions.publicKey.challenge = this.base64ToArrayBuffer(
- certificate
- );
- // 更新touchID
- this.touchIDLoginOptions.publicKey.allowCredentials[0].id = this.base64ToArrayBuffer(
- touchId
- );
- // 開(kāi)始校驗(yàn)指紋
- await navigator.credentials.get(this.touchIDLoginOptions);
- // 調(diào)用指紋登錄接口
- this.$api.touchIdLogingAPI
- .touchIdLogin({
- touchId: touchId,
- certificate: certificate
- })
- .then((res: responseDataType) => {
- if (res.code == 0) {
- // 存儲(chǔ)當(dāng)前用戶(hù)信息
- localStorage.setItem("token", res.data.token);
- localStorage.setItem("refreshToken", res.data.refreshToken);
- localStorage.setItem("profilePicture", res.data.avatarSrc);
- localStorage.setItem("userID", res.data.userID);
- localStorage.setItem("username", res.data.username);
- const certificate = res.data.certificate;
- localStorage.setItem("certificate", certificate);
- // 跳轉(zhuǎn)消息組件
- this.$router.push({
- name: "message"
- });
- return;
- }
- // 切回登錄界面
- this.isLoginStatus = loginStatusEnum.NOT_LOGGED_IN;
- alert(res.msg);
- });
- }
- }
注意⚠️：注冊(cè)新的指紋后，舊的Touch id就會(huì)失效，只能通過(guò)新的Touch ID來(lái)登錄，否則系統(tǒng)無(wú)法調(diào)起指紋設(shè)備，會(huì)報(bào)錯(cuò)：認(rèn)證出了點(diǎn)問(wèn)題。
整合現(xiàn)有登錄邏輯
完成上述步驟后，我們已經(jīng)實(shí)現(xiàn)了整個(gè)指紋的注冊(cè)、登錄的邏輯，接下來(lái)我們來(lái)看看如何將其與現(xiàn)有登錄進(jìn)行整合。
調(diào)用指紋注冊(cè)
當(dāng)用戶(hù)使用用戶(hù)名、密碼或者第三方平臺(tái)授權(quán)登錄成功后，我們就調(diào)用指紋注冊(cè)函數(shù)，提示用戶(hù)是否對(duì)本網(wǎng)站進(jìn)行授權(quán)，實(shí)現(xiàn)代碼如下：
- authLogin: function(state: string, code: string, platform: string) {
- this.$api.authLoginAPI
- .authorizeLogin({
- state: state,
- code: code,
- platform: platform
- })
- .then(async (res: responseDataType) => {
- if (res.code == 0) {
- // ... 授權(quán)登錄成功，其他代碼省略 ... //
- // 保存用戶(hù)憑證，用于指紋登錄
- const certificate = res.data.certificate;
- localStorage.setItem("certificate", certificate);
- // 校驗(yàn)設(shè)備是否支持touchID
- const hasTouchID = await PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable();
- if (hasTouchID) {
- // ... 其他代碼省略 ... //
- // 獲取Touch ID，檢測(cè)用戶(hù)是否已授權(quán)本網(wǎng)站指紋登錄
- this.$api.touchIdLogingAPI
- .getTouchID({
- userId: userId
- })
- .then(async (res: responseDataType) => {
- if (res.code !== 0) {
- // touchId不存在, 詢(xún)問(wèn)用戶(hù)是否注冊(cè)touchId
- await this.touchIDRegistered(username, userId, certificate);
- }
- // 保存touchid
- localStorage.setItem("touchId", res.data);
- // 跳轉(zhuǎn)消息組件
- await this.$router.push({
- name: "message"
- });
- });
- return;
- }
- // 設(shè)備不支持touchID，直接跳轉(zhuǎn)消息組件
- await this.$router.push({
- name: "message"
- });
- return;
- }
- // 登錄失敗，切回登錄界面
- this.isLoginStatus = loginStatusEnum.NOT_LOGGED_IN;
- alert(res.msg);
- });
- }
最終的效果如下所示：
每次第三方平臺(tái)授權(quán)登錄時(shí)都會(huì)檢測(cè)當(dāng)前用戶(hù)是否已授權(quán)本網(wǎng)站，如果已授權(quán)則將Touch ID保存至本地，用于通過(guò)指紋直接登錄。
調(diào)用指紋登錄
當(dāng)?shù)卿涰?yè)面加載完畢1s后，我們從用戶(hù)本地取出用戶(hù)憑證與Touch ID，如果存在則提示用戶(hù)是否需要通過(guò)指紋來(lái)登錄系統(tǒng)，具體代碼如下所示：
- mounted() {
- const touchId = localStorage.getItem("touchId");
- const certificate = localStorage.getItem("certificate");
- // 如果touchId存在，則調(diào)用指紋登錄
- if (touchId && certificate) {
- // 提示用戶(hù)是否需要touchId登錄
- setTimeout(() => {
- if (window.confirm("您已授權(quán)本網(wǎng)站通過(guò)指紋登錄，是否立即登錄？")) {
- this.touchIDLogin(certificate, touchId);
- }
- }, 1000);
- }
- }
最終效果如下所示：
項(xiàng)目地址
本文代碼的完整地址請(qǐng)移步：Login.vue
- 在線(xiàn)體驗(yàn)地址：chat-system
- 項(xiàng)目GitHub地址：chat-system-github
