鴻蒙Next密碼自動填充服務：功能與應用場景全解析

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

本文旨在深入探討華為鴻蒙HarmonyOS Next系統（截止目前 API12）在開發多語言電商平臺方面的技術細節，基於實際開發實踐進行總結。主要作為技術分享與交流載體，難免錯漏，歡迎各位同仁提出寶貴意見和問題，以便共同進步。本文為原創內容，任何形式的轉載必須註明出處及原作者。

在當今數字化時代，使用者在各類應用和網站中需要頻繁地進行登入和註冊操作，記憶和輸入複雜的密碼成為了一項繁瑣且容易出錯的任務。鴻蒙 Next 系統憑藉其先進的密碼自動填充服務，為使用者提供了便捷、安全的密碼管理解決方案。今天，我們就深入探討這項服務的功能與應用場景，揭示其背後的技術奧秘。

一、密碼自動填充服務概述

（一）功能簡介

鴻蒙 Next 的密碼保險箱作為系統原生安全功能，為使用者帶來了前所未有的便捷免密登入體驗。在應用或瀏覽器進行註冊/登入操作時，使用者無需再為記住或手動輸入繁瑣的密碼而煩惱。系統能夠自動識別相關場景，一鍵完成強密碼的自動生成、儲存以及填充操作，實現了密碼管理的自動化和智慧化。

值得注意的是，使用者檢視密碼或使用密碼進行自動填充時，都需要經過嚴格的身份認證。這一過程透過輸入鎖屏密碼或驗證指紋/人臉等生物識別方式來實現，確保只有使用者本人才能訪問密碼，有效保護了使用者的隱私和賬戶安全。

（二）使用場景

  1. 登入場景
    當使用者在密碼保險箱已儲存賬號資料的情況下，開啟應用或網站的登入介面，密碼自動填充服務會立即發揮作用。例如，在常見的社交媒體應用登入時，系統會自動檢測到輸入框，並填充已儲存的使用者名稱和密碼，使用者只需點選登入按鈕即可快速進入應用，大大節省了輸入時間，提升了登入效率。
    若使用者手動輸入賬號密碼進行登入，密碼保險箱會敏銳地捕捉到這一操作，並主動詢問使用者是否同意將本次輸入的賬號密碼儲存至密碼保險箱。這一貼心的設計，方便使用者下次登入時無需再次輸入。

  2. 註冊場景
    在使用者註冊新賬號時，密碼自動填充服務同樣提供了強大的支援。當使用者設定密碼時，系統會自動為其推薦高強度密碼建議，這些建議基於複雜的演算法生成，包含大寫字母、小寫字母、數字和特殊字元的組合，有效提升了密碼的安全性。使用者可視自身需求決定是否採用系統推薦的密碼。
    一旦使用者成功完成註冊賬號，密碼保險箱會再次主動詢問使用者是否進行儲存，確保使用者在註冊過程中無需繁瑣地手動管理密碼，為後續登入提供便利。

  3. 檢視賬號場景
    使用者若想檢視已儲存的賬號資訊，可透過系統設定選單中的“密碼保險箱”選項進行操作。具體路徑為“設定 > 隱私和安全 > 密碼保險箱”。在進入密碼保險箱管理介面之前，使用者需要驗證鎖屏密碼、指紋或人臉等身份資訊，確保只有授權使用者才能檢視敏感的賬號密碼資料。這一介面提供了本機全量賬號檢視能力，使用者可以清晰地瞭解自己在各個應用和網站中儲存的賬號資訊，並可對其進行管理，如修改備註、刪除等操作。

（三）架構介紹

密碼保險箱的架構設計精巧，基於關鍵資產儲存能力，確保使用者的賬號密碼得到安全可靠的儲存和保護。其核心工作流程如下：首先，系統會根據使用者在應用或網頁中的操作自動識別使用賬號密碼的場景，如登入、註冊、修改密碼等。然後，基於識別出的場景，密碼保險箱提供對應的免密登入服務。在填充密碼的過程中，依託統一使用者認證能力，若使用者指定需要使用某條賬號密碼進行填充時，系統會立即進行嚴格的使用者身份資訊認證，透過人臉/指紋或鎖屏密碼等方式，保證正確的人訪問正確的資料，從而為使用者的密碼安全提供全方位的保障。

二、強密碼填充

（一）觸發條件及注意事項

強密碼填充功能的觸發需要滿足一定條件。使用者必須已設定鎖屏密碼，並且開啟密碼保險箱自動儲存和填入賬號和密碼開關。這兩個前置條件確保了密碼填充服務在安全可控的環境下執行。
在介面設計方面，要求必須同時存在 type 為 InputType.USER_NAME（表示使用者名稱輸入框）和 InputType.NEW_PASSWORD（表示新密碼輸入框）的 TextInput 輸入框元件，且 TextInput 元件的 enableAutoFill 屬性的值為 true（預設即為 true）。只有在滿足這些介面佈局和屬性設定要求的情況下，強密碼填充功能才能正常觸發。

（二）示例程式碼（註冊、修改密碼場景）

  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%')
    }
}

在上述程式碼中，使用者名稱輸入框的 type 屬性設定為 InputType.USER_NAME，新密碼輸入框的 type 屬性設定為 InputType.NEW_PASSWORD，並透過 passwordRules 屬性設定了強密碼規則。當使用者點選新密碼輸入框時，如果滿足觸發條件，系統將自動生成符合規則的強密碼並填充到輸入框中。

  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 的密碼自動填充服務同樣表現出色。以華為開發者網站（https://developer.huawei.com/）為例，當使用者在網站中輸入使用者名稱和密碼併成功登陸後，ArkWeb 會智慧地提示使用者是否將使用者名稱和密碼儲存到密碼保險箱中。
下次再次開啟相同的網站時，點選使用者名稱或者密碼框，會彈出密碼保險箱的填充提示。使用者可以選擇提示框中的使用者名稱，透過認證（如輸入鎖屏密碼、指紋或人臉驗證）後，就能直接在網頁中填入之前儲存的使用者名稱和密碼，實現快速登入。此外，使用者還可以點選“使用其他賬號”，從密碼保險箱中選擇儲存的其他賬號進行登入，或者選擇“手動輸入”進行手動填寫賬號密碼。這種便捷的操作方式，大大提升了使用者在網頁登入場景中的體驗，同時也保障了賬號密碼的安全性。

（二）網頁密碼儲存規格

ArkWeb 依賴密碼錶單提交成功後，觸發頁面跳轉到其他頁面，才能觸發密碼儲存機制。這一設計確保了密碼儲存操作在登入成功且頁面狀態穩定後進行，避免了因登入失敗或頁面異常導致的密碼儲存錯誤。
需要注意的是，Native 應用透過 ArkWeb 實現 H5 登入時，登入成功後請勿立即銷燬 ArkWeb 例項，否則將無法提示密碼儲存。這一點在開發過程中需要特別關注，以確保密碼儲存功能的正常運作。

（三）網頁密碼錶單規格

  1. 推薦的密碼登入表單
    為了確保密碼自動填充服務能夠準確識別和處理網頁中的使用者名稱和密碼元素，推薦使用靜態的登入頁面或登入表單元素，避免透過 js 指令碼在頁面中動態插入<form>、<input>等表單元素。使用者名稱和密碼輸入框均應使用<input>元素實現，並整合在同一個<form>內，且預設可編輯。在登入場景中，有且最多隻能有一個 type="password"型別的<input>元素。
    點選按鈕觸發登入後，登入成功應當觸發跳轉到新的頁面，這有助於系統判斷登入操作的完成狀態，從而正確執行密碼儲存等後續操作。使用者名稱框應攜帶 autocomplete="username"屬性，並攜帶 id 或 name 屬性，且建議採用系統推薦的值，以便演算法能夠準確推斷使用者名稱元素。

  2. 不支援自動填充的密碼登入表單型別

    • 初始頁面內無使用者名稱密碼錶單元素，點選登入跳轉頁面後，新增非<form>型別的使用者名稱密碼錶單，這種情況不符合密碼自動填充服務的要求，無法實現自動填充功能。
    • 密碼輸入框攜帶了 autocomplete="new-password"屬性，這與系統預期的密碼輸入框屬性不符，將導致無法自動填充密碼。
    • 使用者名稱輸入框 type="number"，驗證碼輸入框 type="number"，且無密碼輸入框的情況，也無法觸發密碼自動填充服務，因為系統無法識別這種不符合常規登入表單結構的佈局。
    • 使用者名稱和密碼元素中間存在其他<input>元素，可能會導致演算法推斷出的使用者名稱元素不符合使用者預期，從而影響密碼自動填充功能的正常使用。
    • 網頁透過 javascript 指令碼變更了<input>元素的焦點或者修改<input>元素的 value，這種動態操作可能會干擾密碼自動填充服務對錶單元素的識別和處理，導致無法正常填充密碼。
    • 使用者名稱<input>元素上 id、name、label 內容中匹配到特定的密碼型別標識（如“pin”、“parola”等），或者其 autocomplete 屬性為“one-time-code”或者“cc-”，或者能正則匹配到信用卡標識，這些情況都可能導致系統無法正確識別使用者名稱元素，進而影響密碼自動填充功能。
    • 頁面載入完成時，<input>的 type 屬性不是“password”，點選登入才變成“password”型別，這種動態變化的輸入框型別也不符合密碼自動填充服務的要求，可能導致無法正常填充密碼。

透過對鴻蒙 Next 密碼自動填充服務的詳細解析，我們可以看到其在功能設計和應用場景方面的全面性和優越性。無論是在應用內還是網頁端，該服務都為使用者提供了便捷、安全的密碼管理解決方案，有效提升了使用者體驗，降低了密碼管理的複雜性和風險。希望本文能夠幫助各位更好地理解和應用這一功能，為使用者打造更加安全、便捷的應用環境。

相關文章