首页 > 其他分享 >鸿蒙 Next 密码保险箱：账号密码管理全流程

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

时间：2024-11-06 22:10:18浏览次数：1  
标签：string 鸿蒙 width 100% value Next 密码 length 账号密码

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

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

一、账号密码保存

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

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

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

  1. 登录账号场景示例代码
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%')
    }
}

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

  1. 注册账号场景示例代码
import router from '@ohos.router';

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

    onBackPress() {
        this.enAbleAutoFill = false;
        router.back();
        return true;
    }

    aboutToAppear() {
    }

    build() {
        Column() {
            Text('注册账号')
             .fontSize(24)
             .fontColor('#000000')
             .fontWeight(FontWeight.Medium)
             .textAlign(TextAlign.Center)
             .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: '新密码' })
             .enableAutoFill(this.enAbleAutoFill)
             .type(InputType.NEW_PASSWORD)
             .passwordRules('begin:[upper],special:[yes],len:[maxlen:32,minlen:12]')
             .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('80%')
             .height(40)
             .margin({ top: 24 })
             .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%')
    }
}

注册页面中，用户名和新密码输入框属性正确，注册成功跳转页面时，符合条件则触发密码保存提示。

二、账号密码更新

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

  1. 密码保险箱已有账号记录
    当应用触发账号密码自动保存，且密码保险箱中存在同应用下相同账号时，会弹出密码更新提示框。这确保用户在修改密码时，系统能及时响应并提供更新选项。
  2. 其他条件与保存一致
    除上述条件外，如系统设置、界面组件属性、输入内容规范等要求与账号密码保存功能相同。

（二）示例代码（修改账号密码场景）

import router from '@ohos.router';

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

    onBackPress() {
        this.enAbleAutoFill = false;
        router.back();
        return true;
    }

    aboutToAppear() {
    }

    build() {
        Column() {
            Text('修改密码')
             .fontSize(24)
             .fontColor('#000000')
             .fontWeight(FontWeight.Medium)
             .textAlign(TextAlign.Center)
             .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: 12 })
            TextInput({ placeholder: '新密码' })
             .enableAutoFill(this.enAbleAutoFill)
             .type(InputType.NEW_PASSWORD)
             .passwordRules('begin:[lower],special:[yes],len:[maxlen:32,minlen:12]')
             .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('80%')
             .height(40)
             .margin({ top: 24 })
             .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%')
    }
}

在修改密码页面，当用户输入新密码并跳转页面，若密码保险箱中有对应账号，将弹出更新提示，用户可选择更新密码。

三、账号密码填充

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

  1. 系统与密码保存前提
    用户需开启相关系统设置和开关，且密码保险箱已保存当前应用的用户名和密码。这是密码填充的基础条件，确保系统有可用的密码数据。
  2. 界面输入框组件要求
    界面必须同时包含 type 为 InputType.USER_NAME 的用户名输入框和 type 为 InputType.PASSWORD 的密码输入框，且 TextInput 组件的 enableAutoFill 属性为 true。这保证系统能准确识别输入框并进行填充操作。
  3. 用户操作触发填充
    用户首次点击用户名或密码输入框时触发自动填充弹窗。符合用户操作习惯，提供便捷的密码填充体验。

（二）示例代码（登录、修改密码场景）

  1. 登录场景示例代码
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%')
    }
}

登录页面中，满足条件时，用户点击输入框，系统会自动填充已保存的账号密码。

  1. 修改密码场景示例代码
import router from '@ohos.router';

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

    onBackPress() {
        this.enAbleAutoFill = false;
        router.back();
        return true;
    }

    aboutToAppear() {
    }

    build() {
        Column() {
            Text('修改密码')
           .fontSize(24)
           .fontColor('#000000')
           .fontWeight(FontWeight.Medium)
           .textAlign(TextAlign.Center)
           .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: 12 })
            TextInput({ placeholder: '新密码' })
           .enableAutoFill(this.enAbleAutoFill)
           .type(InputType.NEW_PASSWORD)
           .passwordRules('begin:[lower],special:[yes],len:[maxlen:32,minlen:12]')
           .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('80%')
           .height(40)
           .margin({ top: 24 })
           .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%')
    }
}

在修改密码页面，当用户点击用户名或旧密码输入框时，若密码保险箱中有保存的账号密码，系统会自动填充，方便用户修改密码操作。同时，用户输入新密码后，若满足条件，密码保险箱也会相应更新密码记录。

通过以上对鸿蒙 Next 密码保险箱账号密码管理全流程的详细阐述，包括保存、更新和填充功能的触发条件、注意事项及示例代码，我们可以清晰地了解如何在应用中集成这一强大的功能，为用户提供更加安全、便捷的账号密码管理体验。

标签：string,鸿蒙,width,100%,value,Next,密码,length,账号密码
From： https://www.cnblogs.com/samex/p/18531163

相关文章

  • 鸿蒙Next安全之应用加密：保障应用代码安全
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）在开发多语言电商平台方面的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。在数字化浪潮......
  • 深入探索鸿蒙Next密码自动填充服务：高级功能与适配场景
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）在开发多语言电商平台方面的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。在当今数字化......
  • 鸿蒙 Next 密码自动填充服务实战：构建安全登录模块
    本文旨在深入探讨华为鸿蒙HarmonyOSNext系统（截止目前API12）在开发多语言电商平台方面的技术细节，基于实际开发实践进行总结。主要作为技术分享与交流载体，难免错漏，欢迎各位同仁提出宝贵意见和问题，以便共同进步。本文为原创内容，任何形式的转载必须注明出处及原作者。在当今数字化......
  • 鸿蒙Next如何接入微信支付
    大家好，这是我工作中接触到的鸿蒙Next接入微信支付，有使用到，分享给大家，轻松便捷前提:你已有鸿蒙版本的微信，并且微信余额或绑定银行卡有钱，因为内测的微信暂不支持收红包和转账，2.你的应用已有安卓或IOS端的微信支付，否则的话，工作量将不止如此正文：首先需要你公司这边去申请开通鸿蒙......
  • Next 设置字体文件cdn 或者本地
    @font-face{font-family:'font-ali-bold';src:url('https://cdnurl/Alibaba-PuHuiTi-Bold.woff2')format('woff2');font-weight:normal;font-style:normal;}tailwind设置fontFamily 直接使用变量，  直接在className上写  font......
  • 安卓端和鸿蒙性能测试环境脚本-sh+python
    背景：做安卓和鸿蒙性能测试，需要搭建环境，把常用的几个pip包和虚拟环境等记录一下，在新的电脑上可以快速安装（仅作为个人记录）准备工作mac电脑python版本>=3.7.9sh脚本#!/usr/local/bin/bash##########################################################################Fil......
  • 鸿蒙开发进阶（HarmonyOS ）FileUri开发指南(C/C++)
     鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）HarmonyOSNEXT应用开发案例实践总结合（持续更新......）HarmonyOSNEXT应用开发性能优化实践总结（持续更新......）场景介......
  • 鸿蒙开发进阶（HarmonyOS）时域可分层视频编码
     鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）HarmonyOSNEXT应用开发案例实践总结合（持续更新......）HarmonyOSNEXT应用开发性能优化实践总结（持续更新......）基础概......
  • 鸿蒙开发进阶（OpenHarmony）扩展组件-系统调用
    鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）HarmonyOSNEXT应用开发案例实践总结合（持续更新......）HarmonyOSNEXT应用开发性能优化实践总结（持续更新......）基本概念......
  • 华为大气啊！HarmonyOS NEXT公测发福利~这个可以有
    HarmonyOSNEXT火热公测中，首批100万名公测用户速来领取多重权益！华为视频、华为阅读、音乐、主题、云空间、天际通等应用会员一应俱全；还有爱奇艺、哔哩哔哩、芒果TV、WPS、喜马拉雅、优酷六大应用的会员季卡6选2，这一波不得不说华为大气！......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99