旅游网站建设技术有哪些简洁型网页

旅游网站建设技术有哪些,简洁型网页,做影集的网站或软件下载,郑州哪个医院看妇科病最好的医院在鸿蒙与 Electron 的融合开发中#xff0c;跨端权限管控与身份认证是企业级应用的安全基石。比如 Electron 桌面端需要验证鸿蒙设备的用户身份#xff0c;鸿蒙端需要根据用户权限限制 Electron 端的操作范围#xff0c;二者结合才能保障跨端应用的安全性。本文将结合鸿蒙身…在鸿蒙与 Electron 的融合开发中跨端权限管控与身份认证是企业级应用的安全基石。比如 Electron 桌面端需要验证鸿蒙设备的用户身份鸿蒙端需要根据用户权限限制 Electron 端的操作范围二者结合才能保障跨端应用的安全性。本文将结合鸿蒙身份认证服务Account Kit和 Electron 的权限管理机制实现 “鸿蒙身份认证 跨端权限同步 细粒度操作管控” 的完整方案附带可直接运行的代码案例和工程化配置助力开发者落地安全的跨端应用。一、核心价值与应用场景1. 核心价值统一身份认证依托鸿蒙 Account Kit 实现华为账号一键登录Electron 端共享认证信息无需重复登录提升用户体验。跨端权限同步鸿蒙端配置的用户权限如管理员、普通用户实时同步到 Electron 端确保多端权限一致。细粒度权限管控针对 Electron 端的不同操作如文件修改、数据删除基于鸿蒙认证的权限进行细粒度管控。2. 典型应用场景企业办公系统员工通过鸿蒙手机的华为账号登录Electron 桌面端自动获取身份信息根据岗位权限访问不同的办公模块。工业控制系统运维人员通过鸿蒙平板认证身份后Electron 监控端获得设备操作权限普通用户仅能查看数据无法修改。智能家居管理家庭用户通过鸿蒙手机认证后Electron 端获得智能家居的控制权限访客仅能查看设备状态。二、环境搭建与前置准备1. 基础环境要求ElectronNode.jsv18、Electronv28、axiosHTTP 请求、wsWebSocket 权限同步、jwt-decode令牌解析鸿蒙DevEco Studio最新版、鸿蒙 SDKAPI 10、鸿蒙真机 / 模拟器开启开发者模式、华为开发者联盟账号开通 Account Kit安全依赖鸿蒙端集成 Account Kit SDKElectron 端实现 JWT 令牌验证逻辑2. 工程化初始化2.1 创建 Electron 工程bash运行# 初始化项目 mkdir harmony-electron-auth cd harmony-electron-auth npm init -y # 安装核心依赖 npm install electron electron-builder axios ws jwt-decode --save npm install nodemon --save-dev2.2 配置 package.jsonjson{ name: harmony-electron-auth, version: 1.0.0, main: main/index.js, scripts: { start: electron ., dev: nodemon --exec electron ., build: electron-builder }, build: { appId: com.example.harmonyauth, productName: HarmonyElectronAuth, directories: { output: dist }, win: { target: nsis }, mac: { target: dmg }, linux: { target: deb } } }2.3 鸿蒙工程配置Account Kit 与权限在鸿蒙工程的entry/src/main/module.json5中添加权限与元数据json5{ module: { name: entry, type: entry, requestPermissions: [ { name: ohos.permission.INTERNET }, { name: ohos.permission.DISTRIBUTED_DATASYNC }, { name: com.huawei.hms.permission.HMS_AUTH_SERVICE }, { name: ohos.permission.GET_ACCOUNT_INFO } ], metaData: [ { name: com.huawei.hms.client.appid, value: 你的华为开发者联盟APP_ID // 替换为实际APP_ID } ] } }在鸿蒙工程的build.gradle中添加 Account Kit 依赖groovydependencies { // 鸿蒙Account Kit SDK implementation com.huawei.hms:ohos-account:6.11.0.300 }三、核心代码案例跨端身份认证与权限管控整体流程说明鸿蒙端集成 Account Kit 实现华为账号一键登录获取用户身份信息和权限模拟配置通过 WebSocket 将认证令牌和权限信息发送到 Electron 端。Electron 端接收鸿蒙端的认证信息解析令牌验证身份根据权限信息管控用户操作同时将操作日志反馈到鸿蒙端。步骤 1鸿蒙端实现华为账号登录与权限配置1.1 鸿蒙端身份认证工具类Account Kit 集成typescript运行// entry/src/main/ets/utils/AuthUtil.ets import account from ohos.account.distributedAccount; import common from ohos.app.ability.common; // 用户信息与权限结构 export interface UserInfo { userId: string; userName: string; userType: admin | user | guest; // 管理员、普通用户、访客 token: string; // 认证令牌模拟JWT } // 初始化分布式账号管理 let accountManager: account.DistributedAccountManager | null null; // 初始化认证工具 export function initAuth(context: common.UIAbilityContext) { accountManager account.getDistributedAccountManager(context); } // 华为账号一键登录 export async function huaweiAccountLogin(): PromiseUserInfo | null { if (!accountManager) { console.error(分布式账号管理未初始化); return null; } try { // 获取华为账号信息实际需调用Account Kit的登录接口 const accountInfo await accountManager.getAccountInfo(); const userId accountInfo.userId || default_user; const userName accountInfo.userName || 华为用户; // 模拟权限配置根据用户ID分配权限实际项目可从服务端获取 let userType: admin | user | guest user; if (userId.includes(admin)) { userType admin; } else if (userId.includes(guest)) { userType guest; } // 生成模拟JWT令牌实际项目由服务端颁发 const token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VySWQiOiJ${userId}IiwidXNlck5hbWUiOiJ${userName}IiwidXNlclR5cGUiOiJ${userType}IiwiZXhwIjoxNzE5ODk5OTkyfQ.模拟签名; const userInfo: UserInfo { userId, userName, userType, token }; console.log(华为账号登录成功, userInfo); return userInfo; } catch (error) { console.error(华为账号登录失败, error); return null; } }1.2 鸿蒙端 WebSocket 客户端发送认证与权限信息typescript运行// entry/src/main/ets/utils/WsClient.ets import webSocket from ohos.net.webSocket; import { BusinessError } from ohos.base; import { UserInfo } from ./AuthUtil; // WebSocket实例 let ws: webSocket.WebSocket | null null; // 连接Electron的WebSocket服务 export async function connectElectronWs(serverIp: string, port: number) { try { ws webSocket.createWebSocket(); // 监听连接成功 ws.on(open, () { console.log(已连接到Electron WebSocket服务); }); // 监听Electron端的操作日志 ws.on(message, (message: string | ArrayBuffer) { const log JSON.parse(message.toString()); console.log(收到Electron操作日志, log); }); // 监听连接关闭 ws.on(close, (code: number, reason: string) { console.log(WebSocket连接关闭${code} - ${reason}); // 自动重连 setTimeout(() { connectElectronWs(serverIp, port); }, 5000); }); // 监听错误 ws.on(error, (error: BusinessError) { console.error(WebSocket错误, error); }); // 连接服务 await ws.connect(ws://${serverIp}:8080); } catch (error) { console.error(连接WebSocket失败, error); setTimeout(() { connectElectronWs(serverIp, port); }, 5000); } } // 发送用户认证与权限信息到Electron export function sendUserInfoToElectron(userInfo: UserInfo) { if (ws ws.readyState webSocket.ReadyState.OPEN) { ws.send(JSON.stringify({ type: auth, data: userInfo })); } else { console.error(WebSocket未连接无法发送用户信息); } } // 关闭WebSocket连接 export function closeWs() { if (ws) { ws.close(); ws null; } }1.3 鸿蒙端页面登录与权限展示typescript运行// entry/src/main/ets/pages/Index.ets import { initAuth, huaweiAccountLogin, UserInfo } from ../utils/AuthUtil; import { connectElectronWs, sendUserInfoToElectron, closeWs } from ../utils/WsClient; import common from ohos.app.ability.common; Entry Component struct Index { State message: string 未登录; State userInfo: UserInfo | null null; private context getContext(this) as common.UIAbilityContext; aboutToAppear() { // 初始化认证工具 initAuth(this.context); // 连接Electron的WebSocket服务替换为实际Electron IP connectElectronWs(192.168.1.101, 8080); } aboutToDisappear() { closeWs(); } // 华为账号登录 async onLogin() { const userInfo await huaweiAccountLogin(); if (userInfo) { this.userInfo userInfo; this.message 欢迎${userInfo.userName}${userInfo.userType}; // 发送用户信息到Electron sendUserInfoToElectron(userInfo); } else { this.message 登录失败; } } build() { Column() { Text(this.message) .fontSize(20) .fontWeight(FontWeight.Bold) .margin({ top: 100, bottom: 50 }) .textAlign(TextAlign.Center); Button(华为账号一键登录) .fontSize(18) .width(200) .height(50) .onClick(() { this.onLogin(); }); // 权限说明 if (this.userInfo) { Text(权限说明 - 管理员可执行所有操作 - 普通用户可查看、修改数据 - 访客仅可查看数据) .fontSize(16) .margin({ top: 50 }) .textAlign(TextAlign.Center); } } .width(100%) .height(100%) .backgroundColor(Color.White); } }步骤 2Electron 端实现认证验证与权限管控2.1 Electron 主进程WebSocket 服务 权限管理javascript运行// main/index.js const { app, BrowserWindow, ipcMain } require(electron); const path require(path); const WebSocket require(ws); const jwtDecode require(jwt-decode); // 全局变量 let mainWindow; let wss; // WebSocket服务 let currentUser null; // 当前登录用户信息 let harmonyWs null; // 鸿蒙客户端连接 // 创建Electron窗口 function createWindow() { mainWindow new BrowserWindow({ width: 1000, height: 700, webPreferences: { preload: path.join(__dirname, ../preload/index.js), contextIsolation: true, sandbox: false } }); mainWindow.loadFile(path.join(__dirname, ../renderer/index.html)); mainWindow.webContents.openDevTools(); } // 启动WebSocket服务端口8080 function startWsServer() { wss new WebSocket.Server({ port: 8080 }); console.log(Electron WebSocket服务已启动端口8080); wss.on(connection, (ws) { harmonyWs ws; console.log(鸿蒙设备已连接); // 接收鸿蒙端的认证信息 ws.on(message, (data) { const message JSON.parse(data.toString()); if (message.type auth) { // 验证并存储用户信息 verifyUserInfo(message.data); } }); // 监听连接关闭 ws.on(close, () { console.log(鸿蒙设备连接关闭); harmonyWs null; currentUser null; // 通知渲染进程用户登出 mainWindow.webContents.send(user-change, null); }); ws.on(error, (err) { console.error(WebSocket错误, err); harmonyWs null; }); }); } // 验证用户信息解析JWT令牌实际项目需验证签名 function verifyUserInfo(userInfo) { try { // 解析JWT令牌 const decoded jwtDecode(userInfo.token); // 验证令牌有效性实际项目需调用服务端接口验证 if (decoded.userId userInfo.userId) { currentUser { userId: userInfo.userId, userName: userInfo.userName, userType: userInfo.userType, token: userInfo.token }; console.log(用户认证成功, currentUser); // 通知渲染进程用户登录 mainWindow.webContents.send(user-change, currentUser); } else { console.error(令牌验证失败用户ID不匹配); currentUser null; mainWindow.webContents.send(user-change, null); } } catch (error) { console.error(令牌解析失败, error); currentUser null; mainWindow.webContents.send(user-change, null); } } // 权限校验接口 ipcMain.handle(check-permission, (event, operation) { if (!currentUser) { return { allow: false, message: 未登录 }; } // 定义不同权限可执行的操作 const permissionMap { admin: [view, edit, delete, config], // 管理员所有操作 user: [view, edit], // 普通用户查看、编辑 guest: [view] // 访客仅查看 }; const allow permissionMap[currentUser.userType].includes(operation); const message allow ? 权限通过 : 当前用户${currentUser.userType}无${operation}权限; // 记录操作日志并发送到鸿蒙端 sendOperationLog(operation, allow); return { allow, message }; }); // 发送操作日志到鸿蒙端 function sendOperationLog(operation, allow) { if (harmonyWs harmonyWs.readyState WebSocket.OPEN) { const log { time: new Date().toLocaleString(), user: currentUser ? currentUser.userName : 未登录, operation, result: allow ? 成功 : 失败 }; harmonyWs.send(JSON.stringify(log)); } } // 暴露获取当前用户的接口 ipcMain.handle(get-current-user, () { return currentUser; }); // 应用就绪后初始化 app.whenReady().then(() { createWindow(); startWsServer(); app.on(activate, () { if (BrowserWindow.getAllWindows().length 0) createWindow(); }); }); app.on(window-all-closed, () { if (process.platform ! darwin) { if (wss) wss.close(); app.quit(); } });2.2 Electron 预加载脚本暴露 APIjavascript运行// preload/index.js const { contextBridge, ipcRenderer } require(electron); contextBridge.exposeInMainWorld(electronApi, { // 获取当前用户信息 getCurrentUser: () ipcRenderer.invoke(get-current-user), // 检查操作权限 checkPermission: (operation) ipcRenderer.invoke(check-permission, operation), // 监听用户信息变化 onUserChange: (callback) ipcRenderer.on(user-change, (event, user) callback(user)), // 移除监听 removeUserChangeListener: () ipcRenderer.removeAllListeners(user-change) });2.3 Electron 渲染进程权限操作展示html预览!-- renderer/index.html -- !DOCTYPE html html langzh-CN head meta charsetUTF-8 title鸿蒙Electron身份认证与权限管控/title style body { font-family: Arial, sans-serif; padding: 20px; background-color: #f5f5f5; margin: 0; } .container { max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1); } .user-info { padding: 20px; border-radius: 8px; background-color: #e9ecef; margin-bottom: 30px; } .operation-group { margin-bottom: 20px; } button { padding: 10px 20px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; font-size: 16px; } .view-btn { background-color: #007bff; color: white; } .edit-btn { background-color: #28a745; color: white; } .delete-btn { background-color: #dc3545; color: white; } .config-btn { background-color: #ffc107; color: black; } .log { margin-top: 30px; padding: 20px; border: 1px solid #eee; border-radius: 8px; max-height: 300px; overflow-y: auto; } /style /head body div classcontainer h1鸿蒙Electron身份认证与权限管控/h1 !-- 用户信息展示 -- div classuser-info iduserInfo p未登录请在鸿蒙设备端完成华为账号登录/p /div !-- 操作按钮组 -- div classoperation-group h3操作权限测试/h3 button classview-btn onclickhandleOperation(view)查看数据/button button classedit-btn onclickhandleOperation(edit)编辑数据/button button classdelete-btn onclickhandleOperation(delete)删除数据/button button classconfig-btn onclickhandleOperation(config)配置设备/button /div !-- 操作日志 -- div classlog idlog p操作日志将显示在这里.../p /div /div script const userInfoDiv document.getElementById(userInfo); const logDiv document.getElementById(log); // 日志添加函数 function addLog(message) { const now new Date().toLocaleString(); const logItem document.createElement(p); logItem.innerHTML [${now}] ${message}; logDiv.appendChild(logItem); // 滚动到最新日志 logDiv.scrollTop logDiv.scrollHeight; } // 更新用户信息展示 async function updateUserInfo(user) { if (user) { userInfoDiv.innerHTML h3当前用户信息/h3 p用户ID${user.userId}/p p用户名${user.userName}/p p用户类型${user.userType}/p ; addLog(用户${user.userName}${user.userType}登录成功); } else { userInfoDiv.innerHTML p未登录请在鸿蒙设备端完成华为账号登录/p; addLog(用户已登出); } } // 处理操作请求 async function handleOperation(operation) { const result await window.electronApi.checkPermission(operation); if (result.allow) { addLog(✅ ${result.message}执行${operation}操作); } else { addLog(❌ ${result.message}禁止执行${operation}操作); } } // 初始化获取当前用户 window.electronApi.getCurrentUser().then(user { updateUserInfo(user); }); // 监听用户信息变化 window.electronApi.onUserChange(updateUserInfo); // 页面关闭时移除监听 window.onbeforeunload () { window.electronApi.removeUserChangeListener(); }; /script /body /html四、运行与测试流程1. 鸿蒙侧运行在 DevEco Studio 中替换鸿蒙代码中的 Electron 设备 IP 地址确保两者处于同一局域网。替换module.json5中的华为开发者联盟 APP_ID。将鸿蒙工程运行到真机 / 模拟器点击 “华为账号一键登录” 按钮完成登录。2. Electron 侧运行执行命令启动 Electron 应用bash运行npm run start查看 Electron 界面将显示鸿蒙端推送的用户信息。点击不同的操作按钮查看、编辑、删除、配置验证权限管控是否生效。鸿蒙端的控制台将接收 Electron 端的操作日志。3. 测试验证点鸿蒙端登录后Electron 端是否自动获取并展示用户信息。不同用户类型管理员、普通用户、访客执行操作时权限校验是否正确。鸿蒙端断开连接后Electron 端是否自动登出并禁止操作。Electron 端的操作日志是否同步到鸿蒙端。五、工程化优化与避坑指南1. 优化建议令牌安全验证本文仅解析 JWT 令牌实际项目需在服务端验证令牌签名防止令牌伪造。权限动态更新从服务端获取用户权限支持权限的动态调整无需重启应用。操作日志持久化将 Electron 端的操作日志存储到本地文件或鸿蒙分布式数据库便于审计。多设备权限同步支持多个 Electron 设备共享鸿蒙端的认证信息实现多端权限一致。2. 常见坑点与解决方案华为账号登录失败确保鸿蒙工程的agconnect-services.json文件配置正确Account Kit 服务已开通设备已登录华为账号。WebSocket 连接失败检查 Electron 与鸿蒙设备的网络连通性关闭防火墙确认端口未被占用。权限校验不生效检查permissionMap中的权限配置是否正确用户类型是否与配置匹配。令牌解析失败确保 JWT 令牌格式正确Electron 端的jwt-decode依赖已正确安装。六、扩展场景服务端统一认证本文采用鸿蒙端直接推送认证信息的方式实际企业项目中可引入服务端统一认证服务端搭建 OAuth2.0 认证服务集成华为账号登录接口颁发有效 JWT 令牌。鸿蒙端调用服务端认证接口完成登录获取令牌。Electron 端通过令牌向服务端验证身份并获取权限实现更安全的跨端认证。七、总结本文通过鸿蒙 Account Kit 实现华为账号一键登录结合 WebSocket 和 Electron 的权限管理机制完成了跨端身份认证与权限管控的完整方案。这种方案保障了跨端应用的安全性同时提升了用户体验可直接应用于企业级跨端项目开发。开发者可基于本文的思路拓展更多功能如添加用户角色管理、操作日志审计、权限策略动态配置等进一步完善跨端安全体系。随着鸿蒙生态的不断完善Electron 与鸿蒙的融合将为跨端应用的安全开发带来更多可能性。欢迎大家加入[开源鸿蒙跨平台开发者社区](https://openharmonycrossplatform.csdn.net)一起共建开源鸿蒙跨平台生态。