下载 App

输入关键字搜索

开发者能力认证

鸿蒙高校创新赛

HarmonyOS 7

animation

HarmonyOS行业解决方案

layoutWeight

HarmonyOS模板&组件

bindPopup

bindsheet

CTRL+K

文档开发者中心

我的

Hello，

欢迎来到开发者联盟

迪迦

App开发

DevEco Studio

软件开发

移动开发

用户注册与登录功能实现——玩具店购物应用开发实战（二）

在上一篇文章中，我们完成了玩具店购物应用的项目规划与环境搭建。本篇文章将详细介绍用户注册和登录功能的实现，包括用户输入验证、密码加密、登录状态管理等。

一、功能概述

1. 功能需求

用户注册：
- 用户可以通过邮箱和密码注册新账号。
- 注册时需要对输入的信息进行验证，如邮箱格式、密码强度等。
- 注册成功后，自动登录并跳转到商品列表页。
用户登录：
- 已注册用户可以通过邮箱和密码登录。
- 登录时需要验证用户输入的邮箱和密码是否正确。
- 登录成功后，保存登录状态，方便下次自动登录。
用户注销：
- 用户可以退出登录状态，清除本地的登录信息。

2. 技术难点

输入验证：如何有效地验证用户输入的信息，确保数据的有效性和安全性。
密码加密：如何对用户的密码进行加密存储，防止明文存储导致的安全问题。
登录状态管理：如何在应用中保存和管理用户的登录状态，实现自动登录。

二、数据库设计与实现

在第一篇文章中，我们已经设计了users表，用于存储用户信息。现在，我们需要完善数据库的初始化和连接。

1. 数据库初始化

在common/utils/DatabaseHelper.ets中，已经创建了DatabaseHelper类，用于数据库的初始化。现在，我们需要完善用户表的创建和密码加密。

收起
自动换行
深色代码主题
复制
// common/utils/DatabaseHelper.ets
import rdb from '@ohos.data.rdb';
​
export class DatabaseHelper {
  private static instance: rdb.RdbStore;
​
  static async getRdbStore(): Promise<rdb.RdbStore> {
    if (!this.instance) {
      const config = {
        name: 'ToyStore.db',
        version: 1,
        onCreate: (db: rdb.RdbStore) => {
          // 创建用户表
          db.executeSql(`
            CREATE TABLE IF NOT EXISTS users (
              id INTEGER PRIMARY KEY AUTOINCREMENT,
              email TEXT UNIQUE,
              password TEXT
            )
          `);
          // 其他表的创建...
        },
      };
      this.instance = await rdb.getRdbStore(config);
    }
    return this.instance;
  }
}

2. 密码加密存储

为了保证用户密码的安全性，我们需要对密码进行加密存储。这里我们使用SHA-256算法进行哈希处理。

创建加密工具类

在common/utils目录下，创建CryptoHelper.ets，用于密码的加密。

收起
自动换行
深色代码主题
复制
// common/utils/CryptoHelper.ets
import crypto from '@ohos.cryptographic';
​
export class CryptoHelper {
  static hashPassword(password: string): string {
    const messageDigest = crypto.createMessageDigest('SHA-256');
    messageDigest.update(new Uint8Array(crypto.stringToUint8Array(password)));
    const hash = messageDigest.digest();
    return crypto.uint8ArrayToHex(hash);
  }
}

三、用户注册功能实现

1. 注册页面布局

在pages/RegisterPage.ets中，创建注册页面的UI布局。

收起
自动换行
深色代码主题
复制
// pages/RegisterPage.ets
@Entry
@Component
struct RegisterPage {
  @State email: string = '';
  @State password: string = '';
  @State confirmPassword: string = '';
​
  build() {
    Column({ space: 16 }) {
      Text('用户注册').fontSize(24).margin({ top: 32 });
      TextField({ placeholder: '邮箱', text: this.email })
        .onChange((value) => this.email = value)
        .type(TextInputType.EmailAddress);
      TextField({ placeholder: '密码', text: this.password })
        .onChange((value) => this.password = value)
        .type(TextInputType.Password);
      TextField({ placeholder: '确认密码', text: this.confirmPassword })
        .onChange((value) => this.confirmPassword = value)
        .type(TextInputType.Password);
      Button('注册')
        .onClick(() => this.register())
        .margin({ top: 16 });
      Button('已有账号？登录')
        .onClick(() => Router.replace({ uri: 'LoginPage' }))
        .type(ButtonType.Normal);
    }.padding(16);
  }
}

2. 输入验证

在register()方法中，添加对用户输入的验证。

收起
自动换行
深色代码主题
复制
import prompt from '@ohos.prompt';
import { DatabaseHelper } from '../common/utils/DatabaseHelper';
import { CryptoHelper } from '../common/utils/CryptoHelper';
​
@Component
struct RegisterPage {
  // 前面的代码
​
  private store: rdb.RdbStore;
​
  aboutToAppear() {
    this.initDatabase();
  }
​
  async initDatabase() {
    this.store = await DatabaseHelper.getRdbStore();
  }
​
  async register() {
    // 输入验证
    if (!this.email || !this.password || !this.confirmPassword) {
      prompt.showToast({ message: '请填写完整信息' });
      return;
    }
    if (!this.validateEmail(this.email)) {
      prompt.showToast({ message: '邮箱格式不正确' });
      return;
    }
    if (this.password !== this.confirmPassword) {
      prompt.showToast({ message: '两次密码输入不一致' });
      return;
    }
    if (this.password.length < 6) {
      prompt.showToast({ message: '密码长度至少为6位' });
      return;
    }
​
    // 检查邮箱是否已注册
    const query = 'SELECT * FROM users WHERE email = ?';
    const resultSet = await this.store.query(query, [this.email]);
    if (resultSet.goToFirstRow()) {
      prompt.showToast({ message: '邮箱已注册' });
      resultSet.close();
      return;
    }
    resultSet.close();
​
    // 密码加密
    const hashedPassword = CryptoHelper.hashPassword(this.password);
​
    // 插入新用户
    const values = {
      'email': this.email,
      'password': hashedPassword,
    };
    await this.store.insert('users', values);
    prompt.showToast({ message: '注册成功' });
​
    // 自动登录，保存登录状态
    AppStorage.SetOrCreate('isLoggedIn', true);
    AppStorage.SetOrCreate('userEmail', this.email);
​
    // 跳转到商品列表页
    Router.replace({ uri: 'ProductListPage' });
  }
​
  validateEmail(email: string): boolean {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return emailRegex.test(email);
  }
}

3. 解释

输入验证：检查邮箱格式、密码长度、两次密码是否一致等。
邮箱唯一性：在数据库中查询是否已有相同的邮箱注册。
密码加密：使用CryptoHelper.hashPassword()对密码进行哈希处理。
保存登录状态：使用AppStorage保存登录状态和用户邮箱。
页面跳转：注册成功后，跳转到商品列表页。

四、用户登录功能实现

1. 登录页面布局

在pages/LoginPage.ets中，创建登录页面的UI布局。

收起
自动换行
深色代码主题
复制
// pages/LoginPage.ets
@Entry
@Component
struct LoginPage {
  @State email: string = '';
  @State password: string = '';
​
  build() {
    Column({ space: 16 }) {
      Text('用户登录').fontSize(24).margin({ top: 32 });
      TextField({ placeholder: '邮箱', text: this.email })
        .onChange((value) => this.email = value)
        .type(TextInputType.EmailAddress);
      TextField({ placeholder: '密码', text: this.password })
        .onChange((value) => this.password = value)
        .type(TextInputType.Password);
      Button('登录')
        .onClick(() => this.login())
        .margin({ top: 16 });
      Button('没有账号？注册')
        .onClick(() => Router.replace({ uri: 'RegisterPage' }))
        .type(ButtonType.Normal);
    }.padding(16);
  }
}

2. 登录逻辑实现

收起
自动换行
深色代码主题
复制
import prompt from '@ohos.prompt';
import { DatabaseHelper } from '../common/utils/DatabaseHelper';
import { CryptoHelper } from '../common/utils/CryptoHelper';
​
@Component
struct LoginPage {
  // 前面的代码
​
  private store: rdb.RdbStore;
​
  aboutToAppear() {
    this.initDatabase();
  }
​
  async initDatabase() {
    this.store = await DatabaseHelper.getRdbStore();
  }
​
  async login() {
    if (!this.email || !this.password) {
      prompt.showToast({ message: '请输入邮箱和密码' });
      return;
    }
​
    // 密码加密
    const hashedPassword = CryptoHelper.hashPassword(this.password);
​
    // 查询用户
    const query = 'SELECT * FROM users WHERE email = ? AND password = ?';
    const resultSet = await this.store.query(query, [this.email, hashedPassword]);
    if (resultSet.goToFirstRow()) {
      prompt.showToast({ message: '登录成功' });
      resultSet.close();
​
      // 保存登录状态
      AppStorage.SetOrCreate('isLoggedIn', true);
      AppStorage.SetOrCreate('userEmail', this.email);
​
      // 跳转到商品列表页
      Router.replace({ uri: 'ProductListPage' });
    } else {
      prompt.showToast({ message: '邮箱或密码错误' });
      resultSet.close();
    }
  }
}

3. 解释

密码加密对比：将用户输入的密码进行哈希处理，与数据库中的加密密码进行比较。
保存登录状态：登录成功后，使用AppStorage保存登录状态。
错误提示：登录失败时，给出友好的提示信息。

五、登录状态管理

1. 自动登录实现

在app.ets中，应用启动时检查登录状态，决定跳转的页面。

收起
自动换行
深色代码主题
复制
// app.ets
import router from '@ohos.router';
​
@Entry
@Component
struct App {
  build() {
    // 检查登录状态
    if (AppStorage.Get('isLoggedIn')) {
      router.replace({ uri: 'ProductListPage' });
    } else {
      router.replace({ uri: 'LoginPage' });
    }
  }
}

2. 用户注销功能

在商品列表页或个人中心页，添加“注销”按钮，用户可以退出登录。

收起
自动换行
深色代码主题
复制
// 在商品列表页或其他页面添加注销功能
Button('注销')
  .onClick(() => this.logout())
  .margin({ top: 16 });
​
logout() {
  // 清除登录状态
  AppStorage.Set('isLoggedIn', false);
  AppStorage.Delete('userEmail');
  prompt.showToast({ message: '已退出登录' });
  Router.replace({ uri: 'LoginPage' });
}