Harmony Next - 应用适配密码自动填充

冯志浩
933 阅读4分钟

前言

在现在的 iOS 或者 Android 系统中，用户在登录应用的时候，可以使用系统的密码自动填充功能来进行账户的登录。这样的流程无疑比用户自己输入账户密码要简单明了的多，也更加的安全。那么，鸿蒙系统是否支持应用密码自动填充呢？答案当然是支持的。

在鸿蒙系统中，它是通过原生功能 - 密码保险箱来给用户提供了便捷的免密登录体验。当用户将应用的账号密码保存到密码保险箱之后，后续再登录的时候只需要输入输入锁屏密码或验证指纹/人脸，就可以使用密码自动填充的功能了。

下面让我们来看一下，代码层面上如何实现这一功能吧！

准备事项

想要使用密码自动填充的功能，我们的设备必须开启密码保险箱的功能。我们可以在以下路径去打开 设置 -> 隐私和安全 -> 密码保险箱。

如果未设置锁屏密码，打开密码保险箱的时候会提示要先设置锁屏密码。设置完锁屏密码之后，打开自动填充和保存选项即可。

前期工作准备就绪，下面开始代码逻辑实现。

构建注册页面

首先，我们需要构建一个用户注册的页面，代码如下：


@Entry
@Component
struct RegisterView {
  @Provide('pageInfos') pageInfos: NavPathStack = new NavPathStack();

  @Builder
  PageMap(name: string) {
    if (name == LoginView.name) {
      LoginView();
    }
  }

  build() {
    Navigation(this.pageInfos) {
      Column({space: 20}) {
        Row({space: 16}) {
          Text("用户名")
          TextInput({placeholder: '请输入用户名'})
            .type(InputType.USER_NAME)
            .width('80%')
        }
        .padding({left: 16, right: 16})
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')

        Row({space: 16}) {
          Text("密码")
          TextInput({placeholder: '请输入密码'})
            .type(InputType.NEW_PASSWORD)
            .width('80%')
        }
        .padding({left: 16, right: 16})
        .justifyContent(FlexAlign.SpaceBetween)
        .width('100%')

        Button("注册")
          .onClick(() => {
            this.pageInfos.pushPathByName(LoginView.name, undefined)
          })
      }
      .height('100%')
      .width('100%')
    }
    .navDestination(this.PageMap)
    .titleMode(NavigationTitleMode.Mini)
    .hideBackButton(true)
    .height('100%')
    .width('100%')
  }
}

代码解读：

  • 因为密码保存是在页面跳转时才会触发，所以这里首先创建了导航栈实例，然后实现了一个路由表函数。
  • 构建了两个文本输入框用来输入用户名和密码，需要注意的是：只能用 TextInput 组件才能使用系统的密码保存和自动填充功能，自定义组件是不行的。而且 TextInput 组件还要将 type 设置为 USER_NAME、NEW_PASSWORD、Password。三个参数的含义官方解释如下：
InputType名称描述使用场景
USER_NAME用户名输入模式。用于登录、注册等场景的用户名输入。
Password密码输入模式。支持输入数字、字母、下划线、空格、特殊字符。密码显示小眼睛图标并且默认会将文字变成圆点。用于登录、注册等场景的密码输入。
NEW_PASSWORD新密码输入模式。用于注册、修改密码等场景的新密码输入。
  • 注册按钮，点击跳转到登录页，用来触发密码保存。

运行项目，输入用户名之后，当我们点击密码输入框时，系统会弹窗提示自动生成的高强度密码。效果图如下：

截屏2024-08-07 15.01.24.png

点击使用密码，密码即可自动填充到密码输入框中。点击密码后面的刷新按钮可以再次生成新密码。

登录页面

登录页面的代码和注册页面基本一致，这里就不重复贴代码了，唯一的区别就是密码输入框的 type 由 NEW_PASSWORD 改为 Password：

// 登录页面的密码输入框
TextInput({placeholder: '请输入密码'})
  .type(InputType.Password)
  .width('80%')

在登录页面，如果已经将用户的账号和密码保存到了密码保险箱，那点击用户名输入框则会弹出下图弹窗：

截屏2024-08-07 15.01.08.png

点击 使用XXX 按钮即可自动填充用户名和密码。

如果在注册页面输入已经保存到密码保险箱的账户名，跳转页面的时候，会提示你是否更新密码，如下图：

截屏2024-08-07 15.11.10.png

自定义强密码规则

如果系统自动生成的强密码不符合我们的业务需求，我们还可以自定义密码生成规则。默认的强密码规则为：以字母开头；包含大小写字母和数字且长度为16位。

假设，我们需要生成一个小写字母开头，包含特殊字符(!@#$%^&*)且长度为 20 的密码：

TextInput({ placeholder: '新密码' })
    .enableAutoFill(true)
    .type(InputType.NEW_PASSWORD)
    .passwordRules('begin:[lower],special:[yes],len:[fixedlen:20]')

但需要注意的是：强密码中一定包含大写字母、小写字母、数字三种字符。

具体的详细规则请参见官方文档。

avatar
文章
阅读
粉丝