鴻蒙 Next 密碼自動填充服務實戰：構建安全登入模組

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

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

在當今數字化時代，使用者對於應用的安全性和便捷性要求越來越高。密碼自動填充服務作為鴻蒙 Next 系統的一項重要安全特性，能夠極大地提升使用者登入體驗，同時保障賬號密碼的安全管理。本文將透過一個實戰案例，詳細介紹如何在鴻蒙 Next 應用中構建安全登入模組，充分利用密碼自動填充服務的功能。

一、專案準備與環境搭建

（一）建立鴻蒙 Next 專案

首先，我們需要使用鴻蒙 Next 的開發工具建立一個新的專案。在建立過程中，選擇合適的專案模板，例如“Empty Ability”模板，它提供了一個基礎的專案結構，方便我們進行後續的開發。

（二）匯入相關依賴

為了實現密碼自動填充服務，我們需要匯入相關的依賴庫。在鴻蒙 Next 中，主要涉及到 ArkUI 相關的元件庫以及密碼保險箱相關的安全庫。在專案的配置檔案（如build.gradle或module.json5）中，新增相應的依賴項，確保專案能夠正確引用這些庫。例如：

dependencies {
    implementation 'ohos.arkui:arkui-framework:1.0.0'
    implementation 'ohos.security:password-vault:1.0.0'
}

這裡的版本號僅為示例，實際開發中應根據鴻蒙 Next 的官方文件和專案需求選擇合適的版本。

二、登入頁面佈局設計

（一）使用 ArkUI 元件構建介面

使用 ArkUI 元件來構建登入頁面的使用者介面。首先，建立一個Column元件作為頁面的容器，然後在其中新增Text元件用於顯示頁面標題，如“登入”。接著，新增兩個TextInput元件，分別用於輸入使用者名稱和密碼。例如：

import { Column, Text, TextInput } from '@ohos.arkui';

@Entry
@Component
struct LoginPage {
    build() {
        Column() {
            Text('登入')
             .fontSize(24)
             .fontWeight(FontWeight.Bold)
             .margin({ top: 20 })
            TextInput({ placeholder: '請輸入使用者名稱' })
             .width('90%')
             .height(40)
             .margin({ top: 20 })
            TextInput({ placeholder: '請輸入密碼' })
             .width('90%')
             .height(40)
             .margin({ top: 10 })
        }
    }
}

（二）確保輸入框符合密碼自動填充要求

為了使密碼自動填充功能正常工作，需要確保使用者名稱和密碼輸入框的屬性設定正確。對於使用者名稱輸入框，將其type屬性設定為InputType.USER_NAME；對於密碼輸入框，將其type屬性設定為InputType.PASSWORD，並且確保enableAutoFill屬性為true（預設即為true）。例如：

TextInput({ placeholder: '請輸入使用者名稱' })
 .width('90%')
 .height(40)
 .margin({ top: 20 })
 .type(InputType.USER_NAME)
TextInput({ placeholder: '請輸入密碼' })
 .width('90%')
 .height(40)
 .margin({ top: 10 })
 .type(InputType.PASSWORD)
 .enableAutoFill(true)

三、實現密碼自動填充功能

（一）處理登入頁面的自動填充邏輯

在登入頁面的程式碼中，需要處理密碼自動填充的邏輯。當使用者首次點選使用者名稱或密碼輸入框時，系統會觸發自動填充彈窗。我們需要監聽這個事件，並在彈窗出現時，根據使用者選擇填充相應的使用者名稱和密碼。例如：

import { TextInput, InputType, onAutoFill } from '@ohos.arkui';

@Entry
@Component
struct LoginPage {
    @State username: string = '';
    @State password: string = '';

    build() {
        Column() {
            Text('登入')
             .fontSize(24)
             .fontWeight(FontWeight.Bold)
             .margin({ top: 20 })
            TextInput({ placeholder: '請輸入使用者名稱', text: this.username })
             .width('90%')
             .height(40)
             .margin({ top: 20 })
             .type(InputType.USER_NAME)
             .onAutoFill((event: AutoFillEvent) => {
                    this.username = event.value;
                })
            TextInput({ placeholder: '請輸入密碼', text: this.password })
             .width('90%')
             .height(40)
             .margin({ top: 10 })
             .type(InputType.PASSWORD)
             .enableAutoFill(true)
             .onAutoFill((event: AutoFillEvent) => {
                    this.password = event.value;
                })
        }
    }
}

在上述程式碼中，透過onAutoFill事件監聽器，當自動填充事件觸發時，將填充的值賦給相應的狀態變數（username和password），以便在後續的登入邏輯中使用。

（二）與密碼保險箱整合

為了實現與密碼保險箱的整合，需要使用密碼保險箱提供的 API 來進行操作。首先，檢查密碼保險箱是否已儲存當前應用的使用者名稱和密碼。如果已儲存，則在登入頁面載入時，自動填充使用者名稱和密碼輸入框。例如：

import { passwordVault } from '@ohos.security';

async function checkAndFillCredentials() {
    const savedCredentials = await passwordVault.getSavedCredentials('your_app_package_name');
    if (savedCredentials) {
        this.username = savedCredentials.username;
        this.password = savedCredentials.password;
    }
}

@Entry
@Component
struct LoginPage {
    @State username: string = '';
    @State password: string = '';

    aboutToAppear() {
        checkAndFillCredentials();
    }

    build() {
        // 登入頁面佈局程式碼
    }
}

在上述程式碼中，checkAndFillCredentials函式用於檢查密碼保險箱中是否儲存了當前應用的賬號密碼。如果有儲存，則將其填充到登入頁面的輸入框中。

四、處理註冊與密碼更新功能

（一）註冊頁面的強密碼生成與儲存

在註冊頁面中，除了常規的使用者名稱和密碼輸入框外，還需要實現強密碼生成功能。根據密碼自動填充服務的規則，為新密碼輸入框設定合適的passwordRules屬性，以確保生成的密碼符合強度要求。例如：

TextInput({ placeholder: '請輸入新密碼' })
 .width('90%')
 .height(40)
 .margin({ top: 10 })
 .type(InputType.NEW_PASSWORD)
 .enableAutoFill(true)
 .passwordRules('begin:[upper],special:[yes],len:[maxlen:32,minlen:12]')

當使用者點選註冊按鈕時，首先驗證使用者名稱和密碼的合法性，然後將使用者名稱和密碼儲存到密碼保險箱中。例如：

import { passwordVault } from '@ohos.security';

async function registerUser(username: string, password: string) {
    // 驗證使用者名稱和密碼的合法性
    if (isValidUsername(username) && isValidPassword(password)) {
        await passwordVault.saveCredentials('your_app_package_name', { username, password });
        console.log('註冊成功，賬號密碼已儲存到密碼保險箱。');
    } else {
        console.log('註冊失敗，使用者名稱或密碼不合法。');
    }
}

@Entry
@Component
struct RegisterPage {
    @State newUsername: string = '';
    @State newPassword: string = '';

    build() {
        Column() {
            Text('註冊')
             .fontSize(24)
             .fontWeight(FontWeight.Bold)
             .margin({ top: 20 })
            TextInput({ placeholder: '請輸入使用者名稱', text: this.newUsername })
             .width('90%')
             .height(40)
             .margin({ top: 20 })
             .type(InputType.USER_NAME)
            TextInput({ placeholder: '請輸入新密碼', text: this.newPassword })
             .width('90%')
             .height(40)
             .margin({ top: 10 })
             .type(InputType.NEW_PASSWORD)
             .enableAutoFill(true)
             .passwordRules('begin:[upper],special:[yes],len:[maxlen:32,minlen:12]')
            Button('註冊')
             .width('90%')
             .height(40)
             .margin({ top: 20 })
             .onClick(() => {
                    registerUser(this.newUsername, this.newPassword);
                })
        }
    }
}

（二）修改密碼時的密碼更新操作

在修改密碼頁面，需要先驗證使用者的身份（如透過輸入舊密碼進行驗證），然後允許使用者輸入新密碼。當使用者點選儲存密碼按鈕時，更新密碼保險箱中的密碼記錄。例如：

import { passwordVault } from '@ohos.security';

async function updatePassword(oldPassword: string, newPassword: string) {
    // 驗證舊密碼是否正確
    if (await passwordVault.verifyCredentials('your_app_package_name', { password: oldPassword })) {
        await passwordVault.updateCredentials('your_app_package_name', { password: newPassword });
        console.log('密碼更新成功。');
    } else {
        console.log('舊密碼錯誤，密碼更新失敗。');
    }
}

@Entry
@Component
struct ChangePasswordPage {
    @State oldPassword: string = '';
    @State newPassword: string = '';

    build() {
        Column() {
            Text('修改密碼')
             .fontSize(24)
             .fontWeight(FontWeight.Bold)
             .margin({ top: 20 })
            TextInput({ placeholder: '請輸入舊密碼', text: this.oldPassword })
             .width('90%')
             .height(40)
             .margin({ top: 20 })
             .type(InputType.PASSWORD)
            TextInput({ placeholder: '請輸入新密碼', text: this.newPassword })
             .width('90%')
             .height(40)
             .margin({ top: 10 })
             .type(InputType.NEW_PASSWORD)
             .enableAutoFill(true)
             .passwordRules('begin:[lower],special:[yes],len:[maxlen:32,minlen:12]')
            Button('儲存密碼')
             .width('90%')
             .height(40)
             .margin({ top: 20 })
             .onClick(() => {
                    updatePassword(this.oldPassword, this.newPassword);
                })
        }
    }
}

五、最佳化與適配

（一）針對不同場景進行適配

  1. 多種登入方式適配
    如果應用支援多種登入方式，如使用者名稱密碼登入、手機號驗證碼登入等，需要針對不同登入方式進行適配。對於使用者名稱密碼登入，確保密碼自動填充功能正常工作；對於手機號驗證碼登入，可能需要隱藏密碼自動填充相關的介面元素，以避免使用者混淆。
  2. 不同裝置型別適配
    考慮到應用可能在不同型別的裝置上執行，如手機、平板等，需要進行介面適配。在平板裝置上，可能需要調整登入頁面的佈局，使其更適合大螢幕顯示，確保輸入框和按鈕的大小、位置合理，方便使用者操作。

（二）測試與問題排查

  1. 功能測試
    進行全面的功能測試，包括正常登入、註冊、密碼更新流程的測試，以及各種邊界情況的測試。例如，測試使用者名稱和密碼的最大長度限制、特殊字元的處理、密碼自動填充的準確性等。
  2. 相容性測試
    在不同型號的裝置上進行測試，確保應用在各種硬體和軟體環境下都能正常執行。注意檢查不同版本的鴻蒙 Next 系統對密碼自動填充服務的支援情況，及時發現並解決相容性問題。
  3. 安全測試
    對登入模組進行安全測試，模擬各種攻擊場景，如密碼暴力破解、中間人攻擊等，確保密碼自動填充服務和整個登入模組的安全性。檢查密碼在傳輸和儲存過程中是否加密，密碼保險箱的訪問控制是否嚴格等。

透過以上實戰步驟，我們成功構建了一個基於鴻蒙 Next 密碼自動填充服務的安全登入模組。在實際應用開發中，我們可以根據具體需求進一步擴充套件和最佳化登入模組的功能，為使用者提供更加安全、便捷的登入體驗。同時，持續關注鴻蒙 Next 系統的更新和安全補丁，及時更新應用，確保密碼管理的安全性和穩定性。

相關文章