鸿蒙PC下的Electron框架环境与运行示例——生物识别密码保险柜核心生物识别技术说明
鸿蒙领航者
·
华为官方下载地址：https://devcloud.cn-north-4.huaweicloud.com/codehub/project/b19f5ea8ffd4492ea8c06ca2ebf3f858/codehub/2821214/home?ref=electron34-release
鸿蒙PC运行示例：
生物识别密码保险柜核心生物识别技术演示视频
生物识别密码保险柜核心生物识别技术效果演示
仓库源码地址
https://atomgit.com/feng8403000/ElectronFingerprintSafe
仓库下载与解压
仓库拉到最低下，下载最新的版本：
下载最新版本后解压：
压缩包里面两个文件夹:
运行的必要文件：
我们要编码的文件：
环境需求
| 类别 | 要求 | 说明 |
|---|---|---|
| 设备 | 鸿蒙 PC(2in1 形态) | arm64(aarch64)架构,musl libc |
| 系统 | HarmonyOS NEXT(PC 版) | API 20 / SDK 6.0.0(20) |
| IDE | DevEco Studio 5.0.5+ | 用于打开 ohos_hap 工程、签名、构建 HAP |
| Node.js | 18+(推荐 20.x) | hvigor 构建依赖;必须 musl 版(glibc 官方二进制无法运行) |
| 生物识别 | 设备已录入指纹 | ATL3 等级;应用声明 ACCESS_BIOMETRIC 权限 |
| 账号 | 华为开发者账号(已实名) | 用于 AGC 申请调试证书与 Profile |
Node环境安装
我们可以直接进行安装，这里我安装了：DevNode-OH与OhNode两个Node的环境。
我这里安装的版本是：
对应的npm是：
PC版本DevEco Studio
这里需要申请：
申请完毕后就能直接下载了。
用于打开 ohos_hap 工程、签名(登录华为账号申请调试证书/Profile)。
打开DevEco Studio登陆
登陆操作在右上角的设置按钮上。
正确打开Electron的ohos_hap的文件夹
确认路径：
确认后通过DevEco Studio的左上角的打开文件夹/文件的操作来打开这个文件夹。
签名
这里签名有的时候签不上，是因为登陆的时候可能有问题，我们多次点击就行啊，使劲点，点个几十下就能登陆了。
正确登陆的签名效果
未登录显示的错误内容
使劲点登陆吧，加油。
修改主页代码
主页的index.html代码路径
web_engine/src/main/resources/resfile/resources/app/index.html
添加一下代码，我这里的代码可以直接替换上。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; style-src 'unsafe-inline'">
<title>欢迎</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
font-family: "HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
background: linear-gradient(160deg, #0a1a3a 0%, #123a6b 55%, #1c5fa8 100%);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
user-select: none;
}
.card {
text-align: center;
padding: 56px 72px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.07);
backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.logo { width: 88px; height: 88px; margin-bottom: 22px; }
h1 { font-size: 30px; font-weight: 600; letter-spacing: 2px; margin-bottom: 10px; }
.sub { font-size: 15px; color: rgba(255, 255, 255, 0.72); margin-bottom: 30px; }
.line {
width: 64px; height: 3px; margin: 0 auto 30px;
border-radius: 2px;
background: linear-gradient(90deg, #4fc3f7, #81d4fa);
}
.info { font-size: 13px; line-height: 2.1; color: rgba(255, 255, 255, 0.6); }
.badge {
display: inline-block; margin-top: 22px;
padding: 6px 18px; border-radius: 999px;
font-size: 12px; letter-spacing: 1px;
background: rgba(79, 195, 247, 0.16);
border: 1px solid rgba(79, 195, 247, 0.4);
color: #81d4fa;
}
</style>
</head>
<body>
<div class="card">
<img class="logo" src="electron_white.png" alt="Electron">
<h1>欢迎使用</h1>
<div class="line"></div>
<p class="sub">HarmonyOS × Electron 单机应用</p>
<p class="info">
本应用完全离线运行<br>
所有数据保存在本地设备,不上传任何信息
</p>
<span class="badge">离线就绪</span>
</div>
</body>
</html>
写完了可以运行了：
运行完毕：
部署过程鱼骨图
【系统基座】 【工具链】 【账号与签名】
鸿蒙PC 2in1 DevEco Studio 5.0.5+ 开发者账号+实名认证
aarch64 / musl libc HarmonyOS SDK 6.0.0(20) AGC 申请调试证书
默认 shell = zsh hdc / ohos clang 自带 Profile 绑定设备 UDID
\ \ \
\ \ \
──────────┼────────────────────────┼────────────────────────┼──────► 指纹保险柜
/ / / 环境就绪
/ / /
【Node 环境】 【应用与桥接】 【真机验证】
华为云镜像下载 apk resfile/resources/app Build → 签名 → hdc 安装
解压得 musl 二进制 6 文件:指纹/加密/界面 锁定屏指纹弹窗联调
文件管理器放置(坑1) callArkTSFunction 桥 诊断日志定位问题(坑3)
PATH 写入 ~/.zshrc(坑2) 3 参数限制(坑4) 失焦豁免弹窗误锁(坑5)
指纹核心技术
存储到fingerprint.js文件中：
/**
* fingerprint.js — 鸿蒙生物识别(指纹/人脸)桥接核心模块
*
* 供 Electron 主进程 require 使用:
* const { FingerprintAuth } = require('./fingerprint');
* const fp = new FingerprintAuth(systemPreferences, (tag, msg) => console.log(tag, msg));
*
* 底层走宿主工程 DeviceUserAuthAdapter(经 AKI 桥):
* - DeviceUserAuthAdapter.CheckBiometricAvailable 检测可用性(指纹优先,其次人脸)
* - DeviceUserAuthAdapter.StartUserAuth(prompt, callback(bool), enableBiom)
* AKI 限制:带回调时总参数 ≤ 3;省略 biomType 时适配器默认走指纹分支
* - EtsBridge.TestReturnString 桥连通性探针
*/
class FingerprintAuth {
/**
* @param {object} systemPreferences Electron 的 systemPreferences 模块
* @param {function} [logger] 可选日志函数 (tag, message) => void
*/
constructor(systemPreferences, logger = () => {}) {
if (!systemPreferences?.callArkTSFunction) {
throw new Error('FingerprintAuth: 需要 Electron systemPreferences 模块');
}
this.sysPrefs = systemPreferences;
this.log = logger;
this._busy = false; // 指纹弹窗进行中(供窗口失焦豁免判断)
this.AUTH_TIMEOUT_MS = 60 * 1000;
}
/** 底层桥调用 */
_call(name, returnType, params) {
return this.sysPrefs.callArkTSFunction(name, returnType, params);
}
/** 桥连通性探针:验证 callArkTSFunction 通路是否正常 */
probe() {
try {
const r = this._call('EtsBridge.TestReturnString', 'string', []);
this.log('Probe', `TestReturnString => ${JSON.stringify(r)}`);
return true;
} catch (e) {
this.log('Probe', `ERROR ${e?.message ?? e}`);
return false;
}
}
/** 设备是否具备生物识别能力(回调值同步可达;不可达时视为不可用) */
available() {
try {
let result = null;
this.log('CheckBiometric', '调用桥: DeviceUserAuthAdapter.CheckBiometricAvailable');
this._call('DeviceUserAuthAdapter.CheckBiometricAvailable', 'void', [(v) => {
result = v;
this.log('CheckBiometric', `回调返回: ${JSON.stringify(v)} (${typeof v})`);
}]);
this.log('CheckBiometric', `同步读取结果: ${JSON.stringify(result)}`);
return result === true || result === 1;
} catch (e) {
this.log('CheckBiometric', `ERROR ${e?.message ?? e}`);
return false;
}
}
/** 指纹弹窗是否进行中(窗口失焦豁免用) */
isBusy() {
return this._busy;
}
/**
* 调起系统生物识别验证弹窗
* @param {string} prompt 弹窗标题(如"进入验证"/"查看验证")
* @returns {Promise<boolean>} 验证通过返回 true;超时/失败返回 false;桥不可用抛错
*/
authenticate(prompt) {
return new Promise((resolve, reject) => {
let settled = false;
this._busy = true;
const done = (ok) => {
this.log('StartUserAuth', `回调返回: ${ok} (${typeof ok})`);
if (!settled) { settled = true; this._busy = false; resolve(ok === true || ok === 1); }
};
try {
const name = 'DeviceUserAuthAdapter.StartUserAuth';
this.log('StartUserAuth', `调用桥: ${name}, 参数=[${JSON.stringify(prompt)}, callback, true]`);
this._call(name, 'void', [prompt, done, true]);
this.log('StartUserAuth', '桥调用未抛异常,等待回调…');
// 桥不回调时的超时保护
setTimeout(() => {
if (!settled) {
this.log('StartUserAuth', `${this.AUTH_TIMEOUT_MS / 1000} 秒超时:回调始终未到达(桥未注册或宿主未响应)`);
done(false);
}
}, this.AUTH_TIMEOUT_MS);
} catch (e) {
this._busy = false;
this.log('StartUserAuth', `ERROR ${e?.message ?? e}`);
reject(e);
}
});
}
}
module.exports = { FingerprintAuth };
指纹效果
点击后直接会弹出鸿蒙PC的指纹识别，识别完毕后即可进入到操作面板。
操作面板：
核心功能就是密码的保护，还加了一些其它的功能。
踩坑记录(部署阶段)
| 问题编号 | 坑 | 根因 | 解法 |
|---|---|---|---|
| 1 | 终端下载/复制的 ELF 全部 Permission denied | 鸿蒙 PC 对"终端新写入的二进制"有执行白名单 | 二进制改由文件管理器手动复制放置 |
| 2 | node: command not found | 默认 shell 是 zsh,不读 .bashrc/.profile | 配置写入 ~/.zshrc(其余三文件同步) |
| 3 | 指纹调用无任何反应,无报错 | 无日志无从排查 | 建立 文档/vault_diag/diag.log 诊断体系,锁定屏可查 |
| 4 | TypeError: Function parameters are supported only when total parameter count is 3 or fewer | AKI 桥限制:带回调时总参数 ≤ 3 | StartUserAuth 省略 biomType(默认走指纹分支),3 参数调用 |
| 5 | 指纹验证时被踢回锁定屏 | 系统指纹弹窗导致窗口失焦,触发防窥屏锁定 | fp.isBusy() 期间豁免失焦锁定 |
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献540条内容
所有评论(0)