鸿蒙 Next 密码保险箱：账号密码管理全流程

最新推荐文章于 2025-12-25 22:43:36 发布

原创

最新推荐文章于 2025-12-25 22:43:36 发布 · 2.1k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#harmonyos #安全 #华为

本文旨在深入探讨华为鸿蒙HarmonyOS Next系统（截止目前 API12）在开发多语言电商平台方面的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。

在当今数字化时代，安全便捷的账号密码管理对于用户至关重要。鸿蒙 Next 系统的密码保险箱功能，为用户提供了全面的账号密码管理服务，涵盖保存、更新和填充等关键环节。今天，我们将深入探讨其全流程，帮助开发者更好地理解和应用这一功能。

一、账号密码保存

（一）触发条件及注意事项

系统设置与开关开启
用户需事先设置锁屏密码，并开启密码保险箱自动保存和填入账号和密码开关。这是密码保存功能的基石，确保了后续操作在安全框架内进行，同时为密码管理提供必要的权限基础。
界面组件属性正确设置
界面中的 TextInput 输入框组件必须将 enableAutoFill 属性设为 true（默认即为 true）。并且，密码保险箱仅在用户名和密码输入框同时存在时生效。用户名输入框应设定 type 属性为 InputType.USER_NAME，密码输入框则根据场景设定为 InputType.PASSWORD（用于登录和修改密码时的旧密码输入）或 InputType.NEW_PASSWORD（用于注册和修改密码时的新密码输入）。
输入内容规范
用户名和密码输入框不能为空且长度需符合限制。用户名长度不得超过 128 字符，密码长度不得超过 256 字符，确保输入数据的有效性和安全性。
页面跳转触发保存
密码保存操作在页面跳转时被触发。例如，用户完成登录或注册后页面跳转，系统会根据此前的输入内容和设置，判断是否提示用户保存账号密码。

（二）示例代码（登录、注册账号场景）

登录账号场景示例代码

import router from '@ohos.router';

@Entry
@Component
struct LoginPage {
   
   
    @State ReserveAccount: string = "";
    @State ReservePassword: string = "";
    private length: number = 0;

    onBackPress() {
   
   
        router.back();
        return true;
    }

    build() {
   
   
        Column() {
   
   
            Text('账户登录')
             .fontSize(24)
             .fontColor('#000000')
             .fontWeight(FontWeight.Medium)
             .textAlign(TextAlign.Start)
             .width('100%')
             .margin({
   
    top: 18 })
            TextInput({
   
    placeholder: '用户名' })
             .opacity(0.6)
             .type(InputType.USER_NAME)
             .placeholderColor(0x182431)
             .width('100%')
             .placeholderFont({
   
    size: 16, weight: FontWeight.Regular })
             .margin({
   
    top: 32, bottom: 8 })
             .onChange((value: string) => {
   
   
                    this.ReserveAccount = value;
                    this.length = value.length;
                })
             .caretPosition(this.length)
            TextInput({
   
    placeholder: '密码' })
             .type(InputType.PASSWORD)
             .placeholderColor(0x182431)
             .width('100%')
             .opacity(0.6)
             .showPasswordIcon(true)
             .placeholderFont({
   
    size: 16, weight: FontWeight.Regular })
             .onChange((value: string) => {
   
   
                    this.ReservePassword = value;
                })
             .margin({
   
    bottom: 36 })
            Button('登录') {
   
    type: ButtonType.Capsule, stateEffect: false }
             .borderRadius(20)
             .width('100%')
             .height(40)
             .enabled(this.ReserveAccount!== "" && this.ReservePassword!== "")
             .onClick(() => {
   
   
                    router.pushUrl({
   
   
                        url: 'pages/Index', // 此处 pages/Index 为跳转界面地址，请自行修改
                        params: {
   
   
                            src: '账户登录'
                        }
                    }, (err) => {
   
   
                        if (err) {
   
   
                            console.error('Invoke pushUrl failed, code is ${err.code}, message is ${err.message}');
                            return;
                        }
                        console.info('Invoke pushUrl succeeded.');
                    });
                })
        }
         .width('100%')
         .height('100%')
    }
}

在登录页面中，用户名和密码输入框类型正确设置，当用户点击登录且页面跳转成功后，若满足条件，系统会提示保存账号密码。

注册账号场景示例代码

import router from '@ohos.router';

@Entry
@Component
struct RegisterPage {
   
   
    @State ReserveAccount: string = "";
    @State ReservePassword: string = "";
    @State enAbleAutoFill: boolean = true;
    private length: number = 0;

    onBackPress() {