鴻蒙 Next 密碼保險箱：賬號密碼管理全流程

SameX發表於2024-11-06
鴻蒙密碼

本文旨在深入探討華為鴻蒙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 密碼保險箱賬號密碼管理全流程的詳細闡述，包括儲存、更新和填充功能的觸發條件、注意事項及示例程式碼，我們可以清晰地瞭解如何在應用中整合這一強大的功能，為使用者提供更加安全、便捷的賬號密碼管理體驗。

相關文章